/*!
Media / Responsive overrides — Anew IOP theme.

Base (desktop) styles live in style.css and target the ~1920 reference design.
NOTE: .site-container caps content at 1220px, so 1920 and 1440 render the same
content width — the visible adaptation effectively starts at 1280 and below.

This file holds ONLY responsive overrides — desktop-first (max-width), per block.
It is enqueued AFTER style.css, so its rules win on the cascade.

Standard breakpoint ladder (QA target widths / ranges):

    1920            base — no query (see style.css)
    1536            @media (max-width: 1536px)
    1440 - 1280     @media (max-width: 1440px)  /  @media (max-width: 1280px)
    1024 -  768     @media (max-width: 1024px)  /  @media (max-width:  768px)
     475 -  360     @media (max-width:  475px)   (must still hold at 360)

Conventions:
- One block = one section, headed by the SAME "BLOCK-NAME" comment used in style.css.
- Largest breakpoint first, smallest last.
- Emit ONLY the breakpoints a block actually needs (no empty queries).
- Re-target the same BEM classes; reuse :root tokens; avoid !important.

Block sections are appended below by the acf-section-from-screenshot skill.
========================================================================== */

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

@media (max-width: 1024px) {
    .site-footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 475px) {
    .site-footer {
        padding: 40px 0 24px;
    }

    .site-footer__top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .site-footer__text {
        max-width: none;
    }
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */

/* Burger toggle — exists only for the mobile menu, hidden on desktop */
.site-header__burger {
    display: none;
    position: relative;
    width: 34px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.site-header__burger-bar {
    position: absolute;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-blue);
    transition: transform var(--transition-fast), opacity var(--transition-fast),
                width var(--transition-fast), background-color var(--transition-fast);
}

.site-header__burger-bar:nth-child(1) { top: 0; width: 100%; }
.site-header__burger-bar:nth-child(2) { top: 50%; transform: translateY(-50%); width: 100%; }
.site-header__burger-bar:nth-child(3) { bottom: 0; width: 60%; background-color: var(--color-orange); }

/* Open state → bars morph into an X */
.site-header__burger.is-open .site-header__burger-bar:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.site-header__burger.is-open .site-header__burger-bar:nth-child(2) {
    opacity: 0;
}

.site-header__burger.is-open .site-header__burger-bar:nth-child(3) {
    bottom: 50%;
    width: 100%;
    background-color: var(--color-blue);
    transform: translateY(50%) rotate(-45deg);
}

@media (max-width: 1024px) {
    .site-header > .site-container {
        position: relative;
        justify-content: space-between;
        gap: 16px;
    }

    .site-header__burger { display: block; }

    /* CTA hidden on mobile — primary action stays in the top bar */
    .site-header__cta { display: none; }

    /* Nav collapses into a dropdown panel under the header */
    .site-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: block;
        background-color: #fff;
        box-shadow: 0 12px 24px rgba(0, 70, 132, 0.12);
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0.35s ease;
        z-index: 50;
    }

    .site-header__nav.is-open {
        max-height: 80vh;
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
    }

    .main-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 20px 16px;
    }

    .main-menu li { width: 100%; }

    .main-menu > li > a {
        padding: 14px 0;
        border-bottom: 1px solid #ECECEC;
    }

    /* Submenus expand inline instead of acting as hover dropdowns */
    .main-menu .sub-menu {
        position: static;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0 0 8px 16px;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .main-menu .sub-menu a { padding: 10px 0; }

    /* Treatment Programs returns to the standard vertical mobile menu. */
    #menu-item-19 > .sub-menu,
    #menu-item-20 > .sub-menu {
        display: block;
        padding: 12px 0;
    }

    /* Level-3 items (e.g. Drug Addiction's sub-list) get an extra indent
       instead of a flyout, matching the level-2 "expand inline" pattern. */
    .main-menu .sub-menu .sub-menu { padding-left: 16px; }
}

@media (max-width: 475px) {
    .top-bar { padding: 10px 0; }

    .site-header { padding: 16px 0; }

    .site-header__logo img { max-height: 40px; }

    .site-header__burger { width: 30px; height: 20px; }

    .top-bar{
        background: var(--color-orange);
    }

    .top-bar__text{
        color: var(--color-text-white);
    }
    .top-bar__phone{
        color: var(--color-text-white);
    }
}

/* ==========================================================================
   BLOCK-HERO
   ========================================================================== */

@media (max-width: 1024px) {
    .block-hero {
        padding: 80px 0 90px;
    }

    .block-hero .glodal-h1 {
        font-size: 52px;
    }
}

@media (max-width: 768px) {
    .block-hero {
        padding: 64px 0 72px;
    }

    .block-hero .glodal-h1 {
        font-size: 44px;
    }

    .block-hero__description {
        max-width: none;
    }
}

@media (max-width: 475px) {
    .block-hero {
        padding: 48px 0 56px;
    }

    .block-hero__content {
        max-width: none;
    }

    .block-hero .glodal-h1 {
        font-size: 38px;
        margin-bottom: 20px;
    }

    .block-hero__description {
        font-size: var(--fs-primary);
        margin-bottom: 32px;
    }

    /* Stack the action area */
    .block-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    /* Buttons go full-width, stacked */
    .block-hero__actions-btns {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .block-hero__actions-btns a:first-child {
        margin-right: 0;
    }

    .block-hero__btn {
        width: 100%;
        justify-content: center;
    }

    .block-hero__features {
        margin-top: 0;
    }

    /* "As Seen On" row centers under the buttons */
    .block-hero__as-seen {
        width: 100%;
        justify-content: center;
        margin-bottom: 0;
    }
}

/* ==========================================================================
   BLOCK-WHAT-IS
   ========================================================================== */

/* Collapse at 1024 (not lower): style.css already forces the column layout at
   <=900, so the point-row restyle has to own every width where the list is
   stacked — otherwise 901-1024 would show a half-converted state. */
@media (max-width: 1024px) {
    .block-what-is__points {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-bottom: 40px;
        padding-bottom: 0;
    }

    .block-what-is__point {
        width: 100%;
        padding: 16px 0;
        border-right: none;
        border-bottom: 1px solid #D3D1CE;
        justify-content: space-between;
    }

    /* Icon moves to the right edge of each row */
    .block-what-is__point-icon {
        order: 2;
    }

    /* Image stacks above the content */
    .block-what-is__main {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .block-what-is {
        padding: 64px 0;
    }
}

@media (max-width: 475px) {
    .block-what-is {
        padding: 48px 0;
    }

    .block-what-is__points {
        margin-bottom: 32px;
    }

    .block-what-is__content .global-h2 {
        font-size: 28px;
    }

    .block-what-is__main {
        gap: 24px;
    }

    .block-what-is__text {
        margin-bottom: 24px;
    }

    /* CTAs stack full-width */
    .block-what-is__actions {
        flex-direction: column;
    }

    .block-what-is__actions .block-hero__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   BLOCK-INCLUDED
   ========================================================================== */

/* Typography only — the layout already adapts (style.css @900). The 35px
   heading is the only text that needs scaling; body (16px) and point
   titles (18px) already read correctly at every width. */
@media (max-width: 1024px) {
    .block-included .global-h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .block-included .global-h2 {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-included .global-h2 {
        font-size: 26px;
    }
}

/* ==========================================================================
   BLOCK-CONDITIONS
   ========================================================================== */

/* Typography only — layout already adapts (style.css @1100 / @600). The 40px
   heading is the only oversized text; subtitle, description (16px) and card
   titles (18px) already read correctly. This ramp supersedes the @600 step in
   style.css (media.css loads later) for a smooth ladder. */
@media (max-width: 1024px) {
    .block-conditions .global-h2 {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .block-conditions .global-h2 {
        font-size: 32px;
    }
}

@media (max-width: 475px) {
    .block-conditions .global-h2 {
        font-size: 28px;
    }
}

/* ==========================================================================
   BLOCK-DOCTOR
   ========================================================================== */

/* Typography only — layout already adapts (style.css @900). The 35px heading
   is the only oversized text; subtitle, description, body and the "Featured on"
   line (all ~16px) already read correctly. */
@media (max-width: 1024px) {
    .block-doctor .global-h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .block-doctor .global-h2 {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-doctor .global-h2 {
        font-size: 26px;
    }

    .block-doctor-featured{
        flex-wrap: wrap;
    }
    .bdf-second-phrase{
        display: block;
        width: 100%;
        margin-top: 16px;
    }
}

/* ==========================================================================
   BLOCK-HOW
   ========================================================================== */

/* Typography only — layout already adapts (style.css @900). The 35px heading
   is the only oversized text; subtitle, column titles (18px) and column text
   (16px) already read correctly. */
@media (max-width: 1024px) {
    .block-how .global-h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .block-how .global-h2 {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-how .global-h2 {
        font-size: 26px;
    }
}

/* ==========================================================================
   BLOCK-CTA-SECTION
   ========================================================================== */

@media (max-width: 1024px) {
    .block-cta-section {
        padding: 64px 0;
    }

    .block-cta-section__title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .block-cta-section__title {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-cta-section {
        padding: 48px 0;
    }

    .block-cta-section__title {
        font-size: 28px;
    }

    .block-cta-section__description {
        font-size: var(--fs-primary);
    }

    /* CTAs stack full-width */
    .block-cta-section__buttons {
        flex-direction: column;
    }

    .block-cta-section__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   BLOCK-PROGRAM-SLIDER
   ========================================================================== */

/* Typography only — the slider layout already adapts (JS perView + nav queries
   in style.css). The 35px title is the only oversized text; subtitle, slide
   titles (18px) and slide text (16px) already read correctly. */
@media (max-width: 1024px) {
    .block-program-slider .global-h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .block-program-slider .global-h2 {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-program-slider .global-h2 {
        font-size: 26px;
    }

    .block-program-slider__nav{
        top: 110px;
    }
}

/* ==========================================================================
   BLOCK-SUCCESS-STORIES
   ========================================================================== */

/* Typography only — the mobile layout already reads correctly (cards collapse
   to one column at 900px in style.css). The 35px title is the only oversized
   text; subtitle, card text and author (16px) already read fine. */
@media (max-width: 1024px) {
    .block-success-stories .global-h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .block-success-stories .global-h2 {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-success-stories .global-h2 {
        font-size: 26px;
    }
}

/* ==========================================================================
   BLOCK-INSURANCE-LOGOS
   ========================================================================== */

/* Typography only — the mobile layout already reads correctly. The 35px title
   is the only oversized text; subtitle, description, "+ More" toggle (16px) and
   the verify button (20px, kept per convention) already read fine. */
@media (max-width: 1024px) {
    .block-insurance-logos .global-h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .block-insurance-logos .global-h2 {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-insurance-logos .global-h2 {
        font-size: 26px;
    }
}

/* ==========================================================================
   BLOCK-GET-HELP
   ========================================================================== */

@media (max-width: 475px) {
    .block-get-help__title{
        font-size: 26px;
    }
    .block-get-help__form-title{
        font-size: 20px;
    }
    .block-get-help__form-bottom{
        font-size: 10px;
    }
}

/* ==========================================================================
   BLOCK-BREADCRUMBS
   ========================================================================== */

@media (max-width: 768px) {
    .block-breadcrumbs__nav {
        padding: 12px 0;
    }
}

@media (max-width: 475px) {
    .block-breadcrumbs__nav {
        gap: 6px;
        font-size: 13px;
    }
}

/* ==========================================================================
   BLOCK-TREATMENT-SINGLE
   ========================================================================== */

/* At <=1024 the two-column grid collapses to one column. Because the sidebar
   (<aside>) follows the main column in the DOM, single-column stacking drops it
   naturally below .block-treatment-single__main — we only unstick it here. */
@media (max-width: 1024px) {
    .block-treatment-single__layout {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0 64px;
    }

    .block-treatment-single__sidebar {
        position: static;
        top: auto;
    }

    .block-treatment-single__title {
        font-size: 48px;
    }

    /* .block-treatment-single__cta-title br{
        display: none;
    } */
}

@media (max-width: 768px) {
    .block-treatment-single__layout {
        padding: 32px 0 56px;
    }

    .block-treatment-single__title {
        font-size: 40px;
    }

    .block-treatment-single__breadcrumbs {
        padding: 12px 0;
    }
}

@media (max-width: 475px) {
    .block-treatment-single__breadcrumbs {
        gap: 6px;
        font-size: 13px;
    }

    .block-treatment-single__title {
        font-size: 32px;
    }

    .block-treatment-single__image {
        margin-bottom: 20px;
    }

    .block-treatment-single__description {
        font-size: var(--fs-primary);
    }

    /* Tighten the stacked cards so they don't waste side space on phones */
    .block-treatment-single__cta,
    .block-treatment-single__programs {
        padding: 24px;
    }
}

/* ==========================================================================
   BLOCK-MEDICALLY-REVIEWED
   ========================================================================== */

@media (max-width: 768px) {
    .block-medically-reviewed__card {
        flex-wrap: wrap;
        gap: 16px;
        padding: 20px;
    }

    .block-medically-reviewed__right-text {
        white-space: normal;
    }
}

@media (max-width: 475px) {
    /* Avatar + label stay on the first row; the doctor pill and role text
       drop to their own full rows instead of squeezing on one line. */
    .block-medically-reviewed__doctor,
    .block-medically-reviewed__right-text {
        width: 100%;
    }

    .block-medically-reviewed__doctor {
        justify-content: center;
    }

    .block-medically-reviewed__label,
    .block-medically-reviewed__doctor-name,
    .block-medically-reviewed__right-text {
        font-size: var(--fs-primary);
    }
}

/* ==========================================================================
   BLOCK-KEY-TAKEAWAYS
   ========================================================================== */

@media (max-width: 768px) {
    .block-key-takeaways__title {
        font-size: 28px;
    }
}

@media (max-width: 475px) {
    .block-key-takeaways__title {
        font-size: 24px;
    }

    .block-key-takeaways__card {
        gap: 12px;
        padding: 22px;
    }
}

/* ==========================================================================
   BLOCK-TEXT-CONTENT
   ========================================================================== */

@media (max-width: 768px) {
    .block-text-content__body h2 {
        font-size: 28px;
    }
}

@media (max-width: 475px) {
    .block-text-content__body {
        font-size: var(--fs-primary);
    }

    .block-text-content__body h2 {
        font-size: 24px;
    }

    .block-text-content__body h3 {
        font-size: 20px;
    }
}

/* ==========================================================================
   BLOCK-PROGRAM-SHEDULE
   ========================================================================== */

@media (max-width: 768px) {
    .block-program-shedule__card {
        padding: 28px;
    }

    .block-program-shedule__title {
        font-size: 28px;
    }
}

@media (max-width: 475px) {
    .block-program-shedule__card {
        padding: 24px;
    }

    .block-program-shedule__title {
        font-size: 24px;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   BLOCK-PROGRAM-FAQS
   ========================================================================== */

@media (max-width: 768px) {
    .block-program-faqs__title {
        font-size: 28px;
    }
}

@media (max-width: 475px) {
    .block-program-faqs__title {
        font-size: 24px;
    }

    .block-program-faqs__question {
        gap: 14px;
        padding: 18px 0;
    }

    .block-program-faqs__question-text {
        font-size: var(--fs-primary);
    }

    .block-program-faqs__answer-text {
        font-size: var(--fs-primary);
    }
}

/* ==========================================================================
   BLOCK-ABOUT-CONTRIBUTOR
   ========================================================================== */

@media (max-width: 768px) {
    .block-about-contributor__card {
        gap: 24px;
        padding: 32px;
    }

    .block-about-contributor__avatar {
        width: 96px;
        height: 96px;
    }
}

@media (max-width: 475px) {
    /* Avatar stacks above the text on phones */
    .block-about-contributor__card {
        flex-direction: column;
        gap: 20px;
        padding: 24px;
    }

    .block-about-contributor__name {
        font-size: 22px;
    }

    .block-about-contributor__quote {
        font-size: var(--fs-primary);
    }
}

/* ==========================================================================
   BLOCK-OUR-MISSION
   ========================================================================== */

@media (max-width: 1024px) {
    /* Quote banner drops below the content column */
    .block-our-mission__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .block-our-mission__title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .block-our-mission {
        padding: 64px 0;
    }

    .block-our-mission__banner {
        padding: 32px;
    }
}

@media (max-width: 475px) {
    .block-our-mission {
        padding: 48px 0;
    }

    .block-our-mission__title {
        font-size: 28px;
    }

    .block-our-mission__banner {
        padding: 28px;
    }

    .block-our-mission__banner-quote {
        font-size: 22px;
        margin-bottom: 28px;
    }
}

/* ==========================================================================
   BLOCK-WHAT-WE-BELIEVE
   ========================================================================== */

@media (max-width: 1024px) {
    .block-what-we-believe__title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .block-what-we-believe__list {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .block-what-we-believe {
        padding: 64px 0;
    }

    /* Three columns fold to two; the odd card wraps to the next row */
    .block-what-we-believe__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 40px;
    }

    .block-what-we-believe__title {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-what-we-believe {
        padding: 48px 0;
    }

    .block-what-we-believe__title {
        font-size: 26px;
        margin-bottom: 32px;
    }

    /* Single column on phones */
    .block-what-we-believe__list {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .block-what-we-believe__num {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   BLOCK-OUR-VISION
   ========================================================================== */

@media (max-width: 1024px) {
    .block-our-vision__title {
        font-size: 32px;
    }

    .block-our-vision__row {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .block-our-vision {
        padding: 64px 0;
    }

    .block-our-vision__title {
        font-size: 30px;
    }

    /* Rows stack: image always sits on top, order reset regardless of --reverse */
    .block-our-vision__row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .block-our-vision__row--reverse .block-our-vision__row-media {
        order: 0;
    }

    .block-our-vision__rows {
        margin-top: 40px;
        gap: 40px;
    }
}

@media (max-width: 475px) {
    .block-our-vision {
        padding: 48px 0;
    }

    .block-our-vision__title {
        font-size: 26px;
    }

    .block-our-vision__row-title {
        font-size: 22px;
    }
}

/* ==========================================================================
   BLOCK-QUOTE-SECTION
   ========================================================================== */

@media (max-width: 1024px) {
    .block-quote-section {
        padding: 72px 0;
    }

    .block-quote-section__title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .block-quote-section {
        padding: 60px 0;
    }

    .block-quote-section__title {
        font-size: 28px;
    }
}

@media (max-width: 475px) {
    .block-quote-section {
        padding: 48px 0;
    }

    .block-quote-section__icon img {
        width: 36px;
    }

    .block-quote-section__title {
        font-size: 24px;
    }

    .block-quote-section__text {
        font-size: var(--fs-primary);
    }
}

/* ==========================================================================
   BLOCK-TAKE-THE-FIRST-STEP
   ========================================================================== */

@media (max-width: 1024px) {
    .block-take-the-first-step__title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .block-take-the-first-step {
        padding: 64px 0;
    }

    .block-take-the-first-step__card {
        padding: 48px 32px;
    }

    .block-take-the-first-step__title {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-take-the-first-step {
        padding: 48px 0;
    }

    .block-take-the-first-step__card {
        padding: 36px 24px;
    }

    .block-take-the-first-step__title {
        font-size: 26px;
    }

    /* Buttons stack full-width on phones */
    .block-take-the-first-step__buttons {
        flex-direction: column;
    }

    .block-take-the-first-step__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   BLOCK-WHO-WE-ARE
   ========================================================================== */

@media (max-width: 1024px) {
    .block-who-we-are__title {
        font-size: 32px;
    }

    /* Image stacks above the doctor info */
    .block-who-we-are__main {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .block-who-we-are__image {
        height: auto;
    }

    .block-who-we-are__doctor-name {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .block-who-we-are {
        padding: 64px 0;
    }

    .block-who-we-are__title,
    .block-who-we-are__doctor-name {
        font-size: 28px;
    }
}

@media (max-width: 475px) {
    .block-who-we-are {
        padding: 48px 0;
    }

    .block-who-we-are__title,
    .block-who-we-are__doctor-name {
        font-size: 26px;
    }

    .block-who-we-are__featured {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ==========================================================================
   BLOCK-OUR-TEAM
   ========================================================================== */

@media (max-width: 1024px) {
    .block-our-team__title {
        font-size: 32px;
    }

    .block-our-team__list {
        gap: 48px 40px;
    }
}

@media (max-width: 768px) {
    .block-our-team {
        padding: 64px 0;
    }

    .block-our-team__title {
        font-size: 30px;
    }

    /* Three across folds to two */
    .block-our-team__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 32px;
    }

    /* Keep avatars from ballooning in the wider two-up cells */
    .block-our-team__avatar {
        max-width: 240px;
    }
}

@media (max-width: 475px) {
    .block-our-team {
        padding: 48px 0;
    }

    .block-our-team__title {
        font-size: 26px;
    }

    /* Single column on phones */
    .block-our-team__list {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .block-our-team__avatar {
        max-width: 260px;
    }
}

/* ==========================================================================
   BLOCK-TEAM-BELIEVES
   ========================================================================== */

@media (max-width: 1024px) {
    .block-team-believes__title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    /* Four across folds to two */
    .block-team-believes__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .block-team-believes {
        padding: 64px 0;
    }

    .block-team-believes__title {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-team-believes {
        padding: 48px 0;
    }

    .block-team-believes__title {
        font-size: 26px;
        margin-bottom: 32px;
    }

    /* Single column on phones */
    .block-team-believes__list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   BLOCK-ABOUT-DOCTOR
   ========================================================================== */

@media (max-width: 768px) {
    /* Cards stack; keep a small upward overlap of just the first card */
    .block-about-doctor__cards {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 48px;
    }
}

@media (max-width: 475px) {
    .block-about-doctor {
        padding-bottom: 48px;
    }

    .block-about-doctor__card-value {
        font-size: 28px;
    }

    .block-about-doctor__subtitle {
        margin-bottom: 28px;
    }
}

/* ==========================================================================
   BLOCK-DOCTOR-APPROACH
   ========================================================================== */

@media (max-width: 1024px) {
    .block-doctor-approach__title {
        font-size: 32px;
    }

    .block-doctor-approach__list {
        gap: 48px 40px;
    }
}

@media (max-width: 768px) {
    .block-doctor-approach {
        padding: 64px 0;
    }

    .block-doctor-approach__title {
        font-size: 30px;
    }

    .block-doctor-approach__list {
        margin-top: 40px;
        gap: 40px;
    }
}

@media (max-width: 475px) {
    .block-doctor-approach {
        padding: 48px 0;
    }

    .block-doctor-approach__title {
        font-size: 26px;
    }

    /* Single column on phones */
    .block-doctor-approach__list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   BLOCK-DOCTOR-WORDS
   ========================================================================== */

@media (max-width: 1024px) {
    .block-doctor-words__title {
        font-size: 32px;
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .block-doctor-words {
        padding: 64px 0;
    }

    .block-doctor-words__title {
        font-size: 30px;
    }

    /* Quote cards stack */
    .block-doctor-words__list {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .block-doctor-words__card {
        padding: 32px;
    }

    .block-doctor-words__quote {
        max-width: none;
    }
}

@media (max-width: 475px) {
    .block-doctor-words {
        padding: 48px 0;
    }

    .block-doctor-words__title {
        font-size: 26px;
    }

    .block-doctor-words__card {
        padding: 28px 24px;
    }

    .block-doctor-words__icon {
        top: 24px;
        right: 24px;
    }

    .block-doctor-words__icon img{
        display: none;
    }
}

/* ==========================================================================
   BLOCK-PUBLIC-EYE
   ========================================================================== */

@media (max-width: 1024px) {
    .block-public-eye__title {
        font-size: 32px;
    }

    .block-public-eye__play img {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 768px) {
    .block-public-eye {
        padding: 64px 0;
    }

    .block-public-eye__title {
        font-size: 30px;
    }
}

@media (max-width: 475px) {
    .block-public-eye {
        padding: 48px 0;
    }

    .block-public-eye__title {
        font-size: 26px;
    }

    .block-public-eye__play img {
        width: 60px;
        height: 60px;
    }
}

/* ==========================================================================
   BLOCK-INSURANCE-FORM
   ========================================================================== */

@media (max-width: 768px) {
    .block-insurance-form {
        padding: 64px 0;
    }

    .block-insurance-form__inner {
        padding: 36px;
    }
}

@media (max-width: 475px) {
    .block-insurance-form {
        padding: 48px 0;
    }

    .block-insurance-form__inner {
        padding: 28px 20px;
    }

    /* First / Last name inputs stack on phones */
    .block-insurance-form__inner .frm_combo_inputs_container {
        flex-direction: column;
        gap: 16px;
    }
}

/* ==========================================================================
   ARCHIVE — TREATMENT PROGRAMS
   ========================================================================== */

@media (max-width: 1024px) {
    .archive-treatment-programs__title {
        font-size: 48px;
        margin-bottom: 40px;
    }

    /* Three across folds to two */
    .archive-treatment-programs__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .archive-treatment-programs {
        padding: 64px 0;
    }

    .archive-treatment-programs__title {
        font-size: 40px;
    }

    .archive-treatment-programs__content {
        padding: 24px;
    }
}

@media (max-width: 475px) {
    .archive-treatment-programs {
        padding: 48px 0;
    }

    .archive-treatment-programs__title {
        font-size: 32px;
        margin-bottom: 32px;
    }

    /* Single column on phones */
    .archive-treatment-programs__grid {
        grid-template-columns: 1fr;
    }

    .archive-treatment-programs .pagination {
        margin-top: 40px;
    }
}

/* ==========================================================================
   ARCHIVE — BLOG
   ========================================================================== */

@media (max-width: 1024px) {
    .archive-blog__title {
        font-size: 48px;
        margin-bottom: 40px;
    }

    .archive-blog__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .archive-blog {
        padding: 64px 0;
    }

    .archive-blog__title {
        font-size: 40px;
    }

    .archive-blog__content {
        padding: 24px;
    }
}

@media (max-width: 475px) {
    .archive-blog {
        padding: 48px 0;
    }

    .archive-blog__title {
        font-size: 32px;
        margin-bottom: 32px;
    }

    .archive-blog__grid {
        grid-template-columns: 1fr;
    }

    .archive-blog .pagination {
        margin-top: 40px;
    }
}

/* ==========================================================================
   POPUP-FORM
   ========================================================================== */

@media (max-width: 475px) {
    .popup-form {
        padding: 12px;
    }

    .popup-form__dialog {
        padding: 44px 20px 28px;
        max-height: 94vh;
    }

    .popup-form__title {
        font-size: 20px;
    }
}

/* ==========================================================================
   BLOCK-SINGLE-POST
   ========================================================================== */

/* At <=1024 the two-column grid collapses to one column. The sidebar (<aside>)
   follows the main column in the DOM, so single-column stacking drops it below
   .block-single-post__main naturally — we only unstick it here. */
@media (max-width: 1024px) {
    .block-single-post__layout {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0 64px;
    }

    .block-single-post__sidebar {
        position: static;
        top: auto;
    }

    .block-single-post__title {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .block-single-post__layout {
        padding: 32px 0 56px;
    }

    .block-single-post__title {
        font-size: 40px;
    }

    .block-single-post__breadcrumbs {
        padding: 12px 0;
    }
}

@media (max-width: 475px) {
    .block-single-post__breadcrumbs {
        gap: 6px;
        font-size: 13px;
    }

    .block-single-post__title {
        font-size: 32px;
    }

    .block-single-post__image {
        margin-bottom: 20px;
    }

    .block-single-post__intro {
        font-size: var(--fs-primary);
    }

    /* Tighten the stacked cards so they don't waste side space on phones */
    .block-single-post__cta,
    .block-single-post__recent {
        padding: 24px;
    }
}

/* ==========================================================================
   GLOBAL BUTTON INTERACTIONS
   Respect the visitor's reduced-motion preference while preserving all
   button colors, labels, icons, and focus indicators.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :is(
        .site-header__cta,
        .block-hero__btn,
        .block-cta-section__btn,
        .block-insurance-logos__btn,
        .block-take-the-first-step__btn,
        .block-treatment-single__cta-phone,
        .block-treatment-single__cta-verify,
        .block-single-post__cta-phone,
        .block-single-post__cta-verify,
        .block-get-help__form-fields .frm_button_submit,
        .block-insurance-form__inner .frm_button_submit
    ) {
        animation: none;
        transition:
            color 0.2s ease,
            opacity 0.2s ease;
    }

    /*
     * Keep the short color sweep as essential hover feedback. It does not move
     * the button, label, or icon, so the interaction stays calm and stable.
     */
    :is(
        .site-header__cta,
        .block-hero__btn,
        .block-cta-section__btn,
        .block-insurance-logos__btn,
        .block-take-the-first-step__btn,
        .block-treatment-single__cta-phone,
        .block-treatment-single__cta-verify,
        .block-single-post__cta-phone,
        .block-single-post__cta-verify,
        .block-get-help__form-fields .frm_button_submit,
        .block-insurance-form__inner .frm_button_submit
    )::after {
        transition: width 0.22s ease-out;
    }

    /*
     * Use a shorter ring when reduced motion is enabled while preserving the
     * requested phone-button feedback.
     */
    .site-header__cta:hover .site-header__cta-icon,
    .site-header__cta:focus-visible .site-header__cta-icon {
        animation-duration: 0.34s;
    }
}

/* ==========================================================================
   BLOCK-CONTACT-PAGE
   ========================================================================== */

@media (max-width: 1024px) {
    .block-contact-page__hero {
        min-height: 380px;
        padding: 76px 0;
    }

    .block-contact-page__title {
        font-size: 56px;
    }

    .block-contact-page__details-grid {
        gap: 32px;
    }

    .block-contact-page__detail {
        gap: 18px;
    }

    .block-contact-page__detail-icon {
        flex-basis: 68px;
        width: 68px;
        height: 68px;
    }

    .block-contact-page__form-panel {
        padding: 56px 64px 64px;
    }
}

@media (max-width: 768px) {
    .block-contact-page__hero {
        min-height: 430px;
        padding: 68px 0;
    }

    .block-contact-page__title {
        font-size: 48px;
        line-height: 1.06;
    }

    .block-contact-page__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .block-contact-page__details {
        padding: 64px 0 72px;
    }

    .block-contact-page__details-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .block-contact-page__form-section {
        padding-bottom: 72px;
    }

    .block-contact-page__form-panel {
        padding: 48px 28px 52px;
    }

    .block-contact-page__form-title {
        margin-bottom: 34px;
        font-size: 38px;
    }

    .block-contact-page__form-fields .frm_fields_container,
    .block-contact-page__form-footer {
        grid-template-columns: 1fr;
    }

    .block-contact-page__form-fields #frm_field_5_container {
        grid-column: auto;
    }
}

@media (max-width: 475px) {
    .block-contact-page__hero {
        min-height: 420px;
        padding: 56px 0;
    }

    .block-contact-page__hero-bg {
        object-position: 48% center;
    }

    .block-contact-page__title {
        font-size: 40px;
    }

    .block-contact-page__description {
        font-size: var(--fs-primary);
    }

    .block-contact-page__hero-button {
        width: 100%;
        min-width: 0;
    }

    .block-contact-page__actions {
        width: 100%;
    }

    .block-contact-page__detail-icon {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
    }

    .block-contact-page__detail-icon img {
        width: 28px;
        height: 28px;
    }

    .block-contact-page__detail-title {
        font-size: 21px;
    }

    .block-contact-page__detail-value {
        font-size: var(--fs-primary);
    }

    .block-contact-page__form-panel {
        padding: 38px 20px 42px;
    }

    .block-contact-page__form-title {
        font-size: 30px;
    }

    .block-contact-page__form-fields input:not([type="hidden"]),
    .block-contact-page__form-fields textarea {
        padding-left: 16px;
    }

    .block-contact-page__form-bottom {
        font-size: 14px;
    }
}

/* ==========================================================================
   ADMISSIONS DETAIL PAGE
   ========================================================================== */

@media (max-width: 1024px) {
    .admissions-page > .block-hero {
        min-height: 500px;
        padding: 88px 0 96px;
    }

    .admissions-page__layout {
        padding: 48px 0 64px;
    }

    .admissions-page__main .block-cta-section {
        min-height: 420px;
    }
}

@media (max-width: 768px) {
    .admissions-page > .block-hero {
        min-height: 470px;
        padding: 72px 0 80px;
    }

    .admissions-page > .block-hero .block-hero__bg {
        object-position: 56% center;
    }

    .admissions-page__layout {
        padding: 40px 0 56px;
    }

    .admissions-page__main .block-text-content {
        margin-bottom: 42px;
    }

    .admissions-page__main .block-text-content__body {
        font-size: var(--fs-primary);
    }

    .admissions-page__main .block-text-content__body h2,
    .admissions-page__main .block-program-faqs__title {
        font-size: 26px;
    }

    .admissions-page__main .block-text-content__body h2:not(:first-child) {
        margin-top: 46px;
    }

    .admissions-page__main .block-cta-section {
        min-height: 400px;
        margin: 46px 0;
        padding: 36px 28px;
    }

    .admissions-page__main .block-cta-section__title {
        font-size: 27px;
    }

    .admissions-care-card {
        margin: 46px 0;
        padding: 28px;
    }

    .admissions-care-card .block-check-callout {
        padding: 28px;
    }

    .admissions-page > .block-take-the-first-step {
        padding: 48px 0 64px;
    }

    .admissions-page__final-cta {
        padding: 48px 0 64px;
    }

    .admissions-page__final-cta .block-inline-cta__card {
        padding: 48px 32px;
    }

    .admissions-first-day-card {
        margin: 46px 0;
        padding: 28px;
    }

    .admissions-page--what-to-expect .block-how__columns {
        gap: 20px;
    }

    .admissions-page--what-to-expect .block-how__column {
        width: 100%;
        min-height: 0;
        padding: 32px 28px;
        border: 0;
    }

    .admissions-page--what-to-expect .block-how__columns .block-how__column:not(:last-child) {
        padding-bottom: 32px;
        border-bottom: 0;
    }

    .admissions-page--what-to-expect .block-key-takeaways__card {
        min-height: 0;
    }

    .admissions-page--what-to-expect .block-about-contributor__avatar {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 475px) {
    .admissions-page > .block-hero {
        min-height: 440px;
        padding: 58px 0 64px;
    }

    .admissions-page > .block-hero .block-hero__bg {
        object-position: 60% center;
    }

    .admissions-page > .block-hero::before {
        background: rgba(0, 0, 0, 0.62);
    }

    .admissions-page__main .admissions-checklist {
        gap: 16px;
    }

    .admissions-page__main .admissions-checklist li {
        padding-left: 44px;
    }

    .admissions-page__main .admissions-checklist li::before {
        width: 30px;
        height: 30px;
    }

    .admissions-page__main .block-cta-section {
        min-height: 420px;
        padding: 32px 22px;
    }

    .admissions-page__main .block-cta-section__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .admissions-page__main .block-cta-section__btn {
        width: 100%;
        justify-content: center;
    }

    .admissions-care-card {
        padding: 24px 20px;
    }

    .admissions-care-card .block-check-callout {
        padding: 24px 20px;
    }

    .admissions-page__main .block-program-faqs {
        margin-top: 46px;
    }

    .admissions-page__final-cta .block-inline-cta__card {
        padding: 36px 24px;
    }

    .admissions-first-day-card {
        padding: 24px 20px;
    }

    .admissions-first-day-card .block-check-callout {
        padding: 24px 20px;
    }

    .admissions-page--what-to-expect .block-how__column {
        padding: 28px 22px;
    }

    .admissions-page--what-to-expect .block-about-contributor__avatar {
        width: 104px;
        height: 104px;
    }
}