/* Phone and tablet fixes shared by every public page.
   Linked from layout/header.blade.php, so it loads after custom.css,
   responsive.css and any inline <style> in a page's <head>. */

/* Doctor photos ---------------------------------------------------------- */

/* Most photos are 3:2 but a few are not (Dr. Unmesh Chakraverty's is 1555x1100),
   which made cards in the same row different heights. Crop from the top so
   heads are never cut. Matched on src because .doctors-header is also used by
   non-doctor cards. */
.our-doctors-card .doctors-header img[src*="/doctors/"] {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top center;
}

/* Home "Doctor Talks": thumbnails are ~2.3:1 files in a 70x60 box */
.our-best-work-sec .slider-small-thumb .small-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Doctor card buttons wrapped unevenly in the narrow 3 and 4 column grids */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .our-doctors-section .our-doctors-card .doctors-body {
        padding: 16px;
    }
    .our-doctors-section .our-doctors-card .doctors-body .btn {
        font-size: 13px;
        padding: 9px 2px;
        white-space: nowrap;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .our-doctors-section .our-doctors-card .doctors-body {
        padding: 12px;
    }
    .our-doctors-section .our-doctors-card .doctors-body .btn {
        font-size: 12px;
    }
}

/* Department hero: the row's negative margin pushed past the screen edge */
@media (min-width: 992px) {
    .costomic-banner-content > .row {
        margin-right: 0;
    }
}

/* Tablet and below ------------------------------------------------------- */

@media (max-width: 991.98px) {
    /* Department hero: the absolute box had no left/right, so it sized to its
       content and ran past the screen. The scrim keeps the white text readable
       over bright banner images. */
    .costomic-banner-content {
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        padding: 0 12px;
        background: rgba(0, 0, 0, 0.45);
        z-index: 2;
        pointer-events: none; /* the carousel underneath stays swipeable */
    }
    .costomic-banner-content > .row {
        flex: 1 1 auto;
        min-width: 0;
    }
    .costomic-banner-content .banner-btns-sixteen {
        pointer-events: auto;
    }

    /* The right margin is the desktop column gap; here it adds sideways scroll */
    .gallerypage .grid-container div {
        margin-right: 0;
    }

    /* Decorative floating icons sit on top of the text at these widths */
    .bg-img.custom-animation {
        display: none;
    }

    /* Insurance: "Connect on WhatsApp" was clipped beside "Call Now" */
    .insurance-cta {
        flex-direction: column;
        align-items: stretch !important;
    }
    .insurance-cta .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
    }
    .insurance-cta .btn img {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        max-width: 24px;
    }
}

/* Phones ----------------------------------------------------------------- */

@media (max-width: 767.98px) {
    /* Keep the end of the page clear of the fixed bottom action bar */
    body {
        padding-bottom: 56px;
    }

    .insurance-partners h2 {
        font-size: 28px;
        line-height: 36px;
    }
}

@media (max-width: 575.98px) {
    /* Doctor profile photo: the theme stacks this block into a column but keeps
       flex-basis 130px, which then sets the height and crops the head */
    .doctor-widget.doctor-profile-two .doc-info-left {
        width: 100%;
    }
    .doctor-widget.doctor-profile-two .doc-info-left .doctor-img {
        flex: 0 0 auto;
        aspect-ratio: 3 / 2;
        overflow: hidden;
    }
    .doctor-widget.doctor-profile-two .doc-info-left .doctor-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }

    /* Long names push the speciality badge past the card */
    .doctor-widget.doctor-profile-two .doc-info-left .doc-info-cont .doc-name {
        flex-wrap: wrap;
        gap: 6px 10px;
    }
    .doctor-widget.doctor-profile-two .doc-info-left .doc-info-cont .doc-name .doctor-role-badge {
        margin-left: 0;
    }

    /* Keep the share button on the same line as the timings */
    .doctor-widget.doctor-profile-two .doc-info-right .doctors-activities > li:first-child {
        display: flex;
    }
    .doctor-widget.doctor-profile-two .doc-info-right .doctors-activities > li .sub-links {
        margin-top: 0;
        margin-left: 12px;
    }

    /* Price above a full-width booking button (it overflowed the card) */
    .doc-profile-card-bottom .bottom-book-btn {
        flex-wrap: wrap;
        row-gap: 12px;
        width: 100%;
    }
    .doc-profile-card-bottom .bottom-book-btn p,
    .doc-profile-card-bottom .bottom-book-btn .clinic-booking {
        flex: 0 0 100%;
    }
    .doc-profile-card-bottom .bottom-book-btn .clinic-booking .btn {
        width: 100%;
        margin-left: 0 !important;
    }

    .banner-section-sixteen .banner-content-sixteen h1 {
        font-size: 30px;
        line-height: 38px;
    }
}

/* The hCaptcha widget is a fixed 302px wide and can't be restyled */
@media (max-width: 359.98px) {
    .h-captcha {
        transform: scale(0.85);
        transform-origin: 0 0;
    }
}