/*
 * Frontend responsive media rules.
 * Loaded after custom.css so existing colors, spacing and layout remain unchanged.
 */

/* Prevent an oversized source image from creating horizontal scrolling. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Safe default for all normal frontend images. */
body img {
    max-width: 100%;
    height: auto;
}

/* Navbar and footer branding. */
.brand-logo {
    width: auto;
    height: clamp(30px, 3.2vw, 38px);
    max-width: min(145px, 40vw);
    object-fit: contain;
    object-position: left center;
}

/* Doctor portrait on the homepage. */
.homepage-doctor-profile__image-wrap {
    width: 100%;
    aspect-ratio: 4 / 4.6;
    min-height: 0;
}

.homepage-doctor-profile__image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

/* Doctor portrait on the About page. */
.profile-card .profile-img {
    width: min(82%, 420px);
    height: auto;
    max-height: min(560px, 72vh);
    object-fit: cover;
    object-position: center top;
}

/* Services: same responsive frame for images of different source dimensions. */
.service-card {
    overflow: hidden;
}

.service-card .service-img,
.service-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

/* Blog cards and the featured article. */
.blog-feature-media {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 10;
}

.blog-feature-media img {
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.blog-card > img,
.blog-card .blog-image,
.blog-image,
.card-image {
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

.blog-list-mini .mini-thumb {
    width: clamp(58px, 8vw, 78px);
    height: clamp(58px, 8vw, 78px);
    flex: 0 0 clamp(58px, 8vw, 78px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Full article images, including images inserted through the editor. */
.article-body img,
.blog-section img.img-fluid,
.content-card > img.img-fluid {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Gallery cards retain their overlay while resizing with the grid column. */
.gallery-card {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
}

.gallery-card.small-gallery,
.small-gallery {
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
}

.gallery-card img,
.gallery-card.small-gallery img,
.small-gallery img {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Swiper must not force an image beyond its current slide. */
.swiper,
.swiper-wrapper,
.swiper-slide {
    max-width: 100%;
}

.swiper-slide img {
    max-width: 100%;
}

/* Responsive embedded media inside page content. */
.article-body iframe,
.article-body video,
.content-card iframe,
.content-card video {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

@media (max-width: 991.98px) {
    .homepage-doctor-profile__image-wrap {
        aspect-ratio: 4 / 4.35;
    }

    .profile-card .profile-img {
        width: min(78%, 380px);
        max-height: none;
    }

    .service-card .service-img,
    .service-img,
    .blog-feature-media,
    .blog-card > img,
    .blog-image,
    .card-image {
        aspect-ratio: 16 / 10;
    }

    .gallery-card,
    .gallery-card.small-gallery,
    .small-gallery {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 575.98px) {
    .brand-logo {
        height: 30px;
        max-width: min(120px, 35vw);
    }

    .homepage-doctor-profile__image-wrap {
        aspect-ratio: 4 / 4.25;
    }

    .profile-card .profile-img {
        width: min(84%, 330px);
    }

    .service-card .service-img,
    .service-img,
    .blog-feature-media,
    .blog-card > img,
    .blog-image,
    .card-image {
        aspect-ratio: 4 / 3;
    }

    .gallery-card,
    .gallery-card.small-gallery,
    .small-gallery {
        aspect-ratio: 4 / 3;
    }

    .gallery-caption {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }
}