/*
 * Uniform image shapes (goes with the automatic image resize on upload).
 * Uploaded photos come in every size and shape. Here every photo slot gets a fixed shape and
 * object-fit: cover, so a tall phone photo and a wide banner line up the same (the photo fills the
 * slot, the edges are trimmed, nothing is stretched). Logos and icons use "contain" so they are
 * never cut. Loaded after bento.css / bento-admin.css; it only adds shape rules, no colours.
 */

/* ---------- public site ---------- */

/* Destination / city picture at the top of the search and booking side cards */
.card-img-top[src*="country uploads/"],
.card-img-top[src*="hotel uploads/"] {
    aspect-ratio: 16 / 10;
    height: auto !important;
    max-height: none !important;
    object-fit: cover;
}

/* Phones (Ali, 2026-11-03): no country / city picture on phones. The side card of the flight, hotel,
 * package and transfer search and booking pages starts with the destination photo, which pushed the
 * booking details down a whole screen. On a phone the photo is hidden and the card starts with the
 * destination name; computers keep it. Hotel, room and car photos are not touched. The "country
 * banner" in the hotel / package confirmation timeline keeps the country and city name as a small
 * coloured strip without the photo. */
@media (max-width: 767.98px) {
    .card-img-top[src*="country uploads/"],
    .sidebar-summary > img[src*="country uploads/"],
    .location-banner > img[src*="country uploads/"] {
        display: none !important;
    }
    .location-banner {
        min-height: 96px;
        background: var(--bs-primary, #1f3b73);
    }
    .location-banner h2 { font-size: 1.5rem !important; }
    .location-banner p { font-size: 1rem !important; margin-bottom: 0; }
}

/* Hotel results and room choices: the photo slider of each card is one fixed shape */
.card .carousel-inner.h-100,
.card .carousel.h-100 .carousel-inner {
    aspect-ratio: 4 / 3;
    background: #eef0f4;
}
.card .carousel-inner.h-100 > .carousel-item,
.card .carousel.h-100 .carousel-inner > .carousel-item {
    height: 100%;
}
.card .carousel-inner > .carousel-item > img.object-fit-cover {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}
@media (min-width: 768px) {
    /* side-by-side card: the photo column takes the card's height, at least 220px */
    .card .row > [class*="col-md-"] > .carousel.h-100 .carousel-inner { aspect-ratio: auto; min-height: 220px; height: 100%; }
}

/* Hotel page: big slider + the two photos under it */
#photoCarousel .carousel-item > img { object-fit: cover; }
@media (max-width: 767.98px) {
    #photoCarousel .carousel-item > img { height: auto !important; aspect-ratio: 4 / 3; }
    img.img-fluid.rounded.w-100[style*="height: 240px"] { height: auto !important; aspect-ratio: 4 / 3; }
}

/* Booking confirmation sliders (hotel and room photos) */
.carousel-item > img.d-block.w-100.rounded[src*="uploads/"] {
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
}

/* Transfer cars: same box for every car, the whole car visible */
img.vehicle-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: contain;
}

/* Amenity icons */
img[src*="amenity uploads/"] { object-fit: contain; }

/* ---------- admin lists ---------- */

/* photo thumbnails in the admin tables: all the same size */
.table img[src*="hotel uploads/"],
.table img[src*="room types uploads/"],
.table img[src*="car uploads/"],
.table img[src*="country uploads/"],
.table img[src*="assets/img/destination/"],
.table img[src*="assets/img/hero/"],
.table img[src*="assets/img/normal/"] {
    width: 120px !important;
    height: 80px !important;
    max-width: none;
    object-fit: cover;
    border-radius: 8px;
}
/* logos and icons (airlines, agencies, amenities): same box, never cropped */
.table img[src*="../uploads/"],
.table img[src*="assets/img/agencies/"],
.table img[src*="amenity uploads/"] {
    width: 64px !important;
    height: 64px !important;
    max-width: none;
    object-fit: contain;
}