/* ==========================================================================
   Shared responsive fixes — loaded on every page via component/meta.php.
   All rules are class-scoped, so each block only touches the pages that
   actually use that markup.

   1. Treatment / "Our Expertise" detail pages
   2. "Our Expertise" split section (home + expertise landing page)
   3. Testimonial carousel (testimonials page + home page section)
   4. "Meet the doctor" block (#aon-about-area)
   5. Bordered treatment tiles (hero-best-interventional-expertise-list)
   6. Legal pages layout (.page-format — terms & privacy policy)
   ========================================================================== */


/* ==========================================================================
   1. Treatment / "Our Expertise" detail pages

   Every page under the Our Expertise menu (varicose-vein, liver-tumors,
   uterine-fibroids-adenomyosis, kneepain-anklepain-frozenshoulder,
   deep-vein-thrombosis-dvt, peripheral-arterial-disease, thyroid-nodule,
   breast-mass, dialysis-fistula, varicocele and their sub-treatment pages)
   is built on the same shell:

       .aon-page-benner-area  →  banner + h1
       .aon-page-jobs-wrap    →  .col-lg-8 .treatment-detail
                                 .col-lg-4 component/treatment-sidebar.php

   so these class-scoped rules fix all of them at once.
   ========================================================================== */

/* --------------------------------------------------------------------------
   "Our Expertise" split section — shared by the home page and the
   best-interventional-radiologist-in-ahmedabad landing page.

   The markup used to nest a .row directly inside another .row. Their negative
   margins stacked (-12px + -24px), pushing the content ~36px past the viewport
   on both sides, where .expertise { overflow-x: hidden } quietly cut it off.
   Both pages now use a single .row.g-0, so the copy needs its own padding.
   -------------------------------------------------------------------------- */
.sub-right {
    padding-left: 40px;
    padding-right: 40px;
}

@media only screen and (max-width: 991px) {

    .sub-right {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* An empty column carrying only a background image collapses to zero
       height once the grid stacks, so the picture vanished on phones. */
    .expertise-bg {
        min-height: 220px;
    }

    /* The sidebar drops below the article at this width, where sticky
       positioning only makes it jump around while scrolling. */
    .side-bar {
        position: static;
        top: auto;
        margin-top: 30px;
    }

    .aon-page-jobs-wrap {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

@media only screen and (max-width: 767px) {

    /* ---------- Page banner ---------- */

    /* The wrap was pinned to a fixed height:300px while the inner area still
       carried 150px of top padding. Any title running past two lines — e.g.
       "Peripheral Balloon And Stent Angioplasty For Peripheral Arterial
       Disease" — pushed the heading straight out of the blue banner and onto
       the white page below it. */
    .sf-banner-heading-wrap {
        width: 100%;
        height: auto;
        min-height: 200px;
    }

    .sf-banner-heading-area {
        padding: 90px 15px 40px;
    }

    .sf-banner-heading-area h1 {
        font-size: 22px !important;
        line-height: 32px !important;
        overflow-wrap: break-word;
    }

    /* ---------- Article body ---------- */

    .treatment-detail .post-info h2 {
        font-size: 22px;
    }

    .treatment-detail .post-info h3,
    .treatment-sub .inner-title {
        font-size: 20px;
    }

    .treatment-detail .inner-title {
        overflow-wrap: break-word;
    }

    /* Image + copy columns stack on a phone with no gap between them.
       Scoped to direct children so the appointment form's own rows, which
       sit several levels deeper, keep their existing spacing. */
    .treatment-detail .post-info>.row,
    .treatment-detail .post-info>.treatment-thumb,
    .treatment-detail .treatment-sub>.row {
        --bs-gutter-y: 1.5rem;
    }

    .treatment-detail .post-info img {
        width: 100%;
    }

    /* ---------- Doctor card (sub-treatment pages) ---------- */

    .dr-section .col-md-4 img {
        display: block;
        max-width: 220px;
        margin: 0 auto 15px;
    }

    /* "Know More" and "Book Appointment" sat side by side and ran past the
       viewport edge on a phone. */
    .dr-section .btn-group,
    .treatment-detail .aon-doctorAbout-info .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
    }

    .dr-section .btn-group .site-button,
    .treatment-detail .aon-doctorAbout-info .btn-group .site-button {
        flex: 1 1 100%;
        margin: 0 !important;
        text-align: center;
    }

    /* ---------- Sidebar ---------- */

    /* 30px of padding on a 360px screen left very little room for the
       treatment names, which are long. */
    .rounded-sidebar-widget {
        padding: 20px 15px;
    }

    .side-bar .widget-title {
        font-size: 20px;
    }

    /* Room on the right for the accordion chevron so long labels such as
       "Knee Pain / Ankle Pain / Frozen Shoulder" wrap instead of running
       underneath it. */
    .side-bar .accordion-button {
        padding: 12px 38px 12px 12px;
        font-size: 15px;
    }

    .side-bar .accordion-button h6.link-text {
        margin: 0;
        font-size: 15px;
        line-height: 1.35;
    }

    .side-bar .accordion-body {
        padding: 8px 12px 14px;
    }

    /* ---------- Lists ---------- */

    /* The counter badge is absolutely positioned at left:-28px, so the list
       item needs at least that much left margin or the numbers sit off the
       edge of the screen. */
    ol.list-num-count>li {
        margin-left: 34px;
        font-size: 15px;
    }
}


/* ==========================================================================
   3. Testimonial carousel
   Same markup on testimonials.php and in component/testimonial-section.php
   (the home page "What People Say" block), so these are shared.
   ========================================================================== */

@media only screen and (max-width: 767px) {

    /* The card carried margin:30px plus padding:50px 40px 20px. On a 360px
       screen that is 140px of chrome, squeezing the quote into a ~200px
       column. The 50px of top padding was reserved for a quote mark that
       owl-carousel's overflow:hidden clips away, so it only read as dead
       space. */
    .aon-med-testimonial-1 {
        margin: 15px 8px 10px;
        padding: 26px 22px 18px;
        border-radius: 20px;
    }

    /* overflow-y:scroll parks a permanent scrollbar even on a one-line quote,
       and a vertical scroll area nested inside a swipe carousel is painful on
       touch — auto only shows it when the text really is long. */
    .aon-med-testimonial-1 p {
        max-height: 280px !important;
        overflow-y: auto;
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .aon-med-testimonial-1 .aon-testimonial-name {
        font-size: 17px;
    }

    .aon-med-testimonial-mid {
        padding-top: 0;
    }
}


/* ==========================================================================
   4. "Meet the doctor" block — #aon-about-area
   Used on the home page and on the international patients page.
   ========================================================================== */

@media only screen and (max-width: 767px) {

    /* The theme zeroes padding-left here on mobile, and .row cancels the
       container padding, so the whole text block sat flush against the left
       edge of the screen while the photo column kept its 12px. */
    #aon-about-area .aon-doctorAbout-right {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Photo is width:100% of its column — full-screen on a phone. */
    #aon-about-area .aon-doctorAbout-pic {
        max-width: 220px;
        margin-left: auto;
        margin-right: auto;
    }

    #aon-about-area .aon-doctorAbout-position {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    #aon-about-area .aon-doctorAbout-position .btn {
        margin: 0;
    }

    /* Know More + Book Appointment sat side by side and overflowed;
       .aon-doctorAbout-wrap has overflow-x:hidden, so the second one was
       clipped off with no way to scroll to it. */
    #aon-about-area .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
    }

    #aon-about-area .btn-group .site-button {
        flex: 1 1 100%;
        margin: 0 !important;
        text-align: center;
    }

    #aon-about-area .aon-doctorAbout-rating {
        display: block;
    }

    #aon-about-area .aon-doctorAbout-text {
        font-size: 15px;
    }

    #aon-about-area .aon-doctorAbout-name {
        font-size: 26px;
    }
}


/* ==========================================================================
   5. Bordered treatment tiles — .hero-best-interventional-expertise-list
   International patients page + best-interventional-radiologist-in-ahmedabad.

   The theme sizes these tiles by percentage (20% → 25% → 33.3% → 50% as the
   viewport narrows), but this variant adds `margin: 10px`. Percentage width
   plus a fixed margin pushed every row past 100%, so the tiles dropped to one
   per row — each only half the container wide. Folding the margin into the
   width restores the intended 2-up / 3-up rows.
   ========================================================================== */

.hero-best-interventional-expertise-list ul li {
    width: calc(20% - 20px);
}

@media only screen and (max-width: 1200px) {
    .hero-best-interventional-expertise-list ul li {
        width: calc(25% - 20px);
    }
}

@media only screen and (max-width: 991px) {
    .hero-best-interventional-expertise-list ul li {
        width: calc(33.333% - 20px);
    }
}

@media only screen and (max-width: 767px) {
    .hero-best-interventional-expertise-list ul li {
        width: calc(50% - 20px);
    }

    .hero-best-interventional-expertise-list .aon-med-sevices-cat {
        height: auto;
        min-height: 190px;
        padding: 18px 8px;
    }

    .hero-best-interventional-expertise-list .aon-med-serices-cat-info h4 {
        font-size: 15px;
        line-height: 1.35;
    }
}


/* ==========================================================================
   6. Legal pages — .page-format
   terms-condition.php and privacy-policy.php carried identical copies of this
   block in their own <head>, with no responsive rules. Consolidated here so
   the two pages cannot drift apart.
   ========================================================================== */

.page-format {
    margin: 100px 0;
}

.page-format .page-wrap {
    width: 100%;
    max-width: 100%;
    padding: 50px;
    margin: 0 auto;
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}

.page-format .page-wrap .date {
    text-align: right;
    line-height: 1.5;
    font-weight: 600;
}

.page-format h1 {
    margin-bottom: 30px;
    font-size: 40px;
}

.page-format p {
    text-align: justify;
    margin-bottom: 5px;
}

.page-format li {
    margin-bottom: 10px;
}

.page-format .page-wrap-is {
    padding: 20px 0;
    border-bottom: 1px solid #aaa;
}

.page-format .page-wrap-is:last-child {
    border-bottom: none;
}

@media only screen and (max-width: 991px) {
    .page-format {
        margin: 50px 0;
    }

    .page-format .page-wrap {
        padding: 30px 25px;
    }
}

@media only screen and (max-width: 767px) {

    .page-format {
        margin: 30px 0;
    }

    /* 50px of padding a side left about 235px of usable width on a 360px
       screen, and the browser's default 40px list indent ate into that
       again — nested lists were down to roughly 195px. */
    .page-format .page-wrap {
        padding: 24px 16px;
    }

    .page-format .page-wrap ol,
    .page-format .page-wrap ul {
        padding-left: 20px;
    }

    .page-format .page-wrap ol ul,
    .page-format .page-wrap ul ul {
        padding-left: 18px;
    }

    /* Justified text opens up wide rivers of whitespace in a narrow column. */
    .page-format p {
        text-align: left;
    }

    .page-format .page-wrap .date {
        text-align: left;
    }

    .page-format h2 {
        font-size: 22px;
    }

    .page-format h3 {
        font-size: 19px;
    }

    .page-format p,
    .page-format li {
        font-size: 15px;
        line-height: 1.65;
    }

    .page-format .page-wrap-is {
        padding: 16px 0;
    }

    /* Long addresses and email links must not force a sideways scroll. */
    .page-format .page-wrap a {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}