/* ==========================================================================
   Etica — mobile & tablet layer
   Loaded LAST (after site-base.css + components.css) so it wins the cascade.

   Target devices
   --------------
   Phones : iPhone 14 / 16 (390–393 CSS px), 14/16 Pro Max (430),
            Samsung Galaxy S-series (360–384), Galaxy A (360)
   Tablets: iPad / iPad Air / iPad Pro 11" (810–834), Galaxy Tab (~800),
            iPad Pro 12.9" & landscape (1024–1194)

   Breakpoints used here
   --------------------
   <= 1024px  tablet portrait / small laptop
   <=  860px  phablet — two-column layouts collapse to one
   <=  600px  phone
   <=  380px  small phone (Galaxy S / A base width)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL GUARDS — kill horizontal overflow, normalise the container
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .container {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        padding-inline: clamp(16px, 4.5vw, 40px);
        box-sizing: border-box;
    }

    /* Media never wider than its box. */
    img, svg, video, iframe, canvas {
        max-width: 100%;
        height: auto;
    }

    /* Any wide element (tables, code, pre) scrolls inside itself, not the page. */
    table, pre {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Flex/grid children must be allowed to shrink below their content size,
       otherwise a long word or wide child forces the row wider than the screen. */
    .container > *,
    [class*="-grid"] > *,
    [class*="-stack"] > *,
    [class*="-shell"] > *,
    [class*="-editorial"] > * {
        min-width: 0;
    }

    /* Safety net: no section may spill sideways. Inner horizontal scrollers
       (sliders/carousels) keep their own overflow and still work. */
    main > section,
    .hero, .section, .section-light,
    .technology-section, .footer {
        overflow-x: clip;
    }
}

/* --------------------------------------------------------------------------
   2. HEADER / NAV
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .navigation {
        min-height: 64px;
        gap: 16px;
    }
    .logo-image { height: 30px; }

    .menu-button {
        padding: 0 12px;
        min-height: 42px;
    }

    /* --- Overlay menu ---
       BUG: .header has `backdrop-filter`, which makes it the containing block
       for its position:fixed descendants — so .nav-overlay was being trapped
       inside the 64px-tall header instead of filling the screen. Pin it to the
       viewport with viewport units (vw/vh/dvh are viewport-relative regardless
       of the containing block) and give it a solid backdrop. */
    .nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: 0 !important;
        display: block !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: rgba(31, 20, 17, 0.92) !important;
    }
    .nav-overlay-shell {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #faf7f2 !important;   /* fully opaque — nothing shows through */
    }
    /* Nav links first, brand / contact block after. */
    .nav-overlay-main {
        order: -1 !important;
        padding: 68px 22px 28px !important;
    }
    .nav-overlay-sidebar {
        order: 0 !important;
        padding: 28px 22px 40px !important;
        border-right: 0 !important;
        border-top: 1px solid rgba(31, 20, 17, 0.08) !important;
    }
    /* Close button always reachable, top-right of the viewport. */
    .nav-overlay-close {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 5 !important;
        background: rgba(31, 20, 17, 0.08) !important;
    }
    .nav-secondary-panel { margin-top: 8px !important; }

    /* Desktop "Направления" mega-menu (and its intro sidebar) has no place in
       the mobile layout — kill it outright. */
    .nav-mega-menu,
    .nav-mega-menu-sidebar,
    .nav-item-with-megamenu .nav-mega-menu {
        display: none !important;
    }

    /* ---- Accordion sub-menus (DOM built by site.js buildNavAccordion) ---- */
    .nav-secondary-panel { display: none !important; }   /* old shared panel */

    .nav-primary-list {
        display: block !important;
        margin-top: 4px !important;
        gap: 0 !important;
    }
    .nav-acc-item { border-bottom: 1px solid rgba(31, 20, 17, 0.12); }

    .nav-acc-item > .nav-primary-link,
    .nav-primary-link--direct {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 15px 0 !important;
        border: 0 !important;
    }
    .nav-primary-link--direct {
        border-bottom: 1px solid rgba(31, 20, 17, 0.12) !important;
    }
    .nav-primary-link--direct::after {
        content: "→";
        margin-left: auto;
        font-size: 15px;
        opacity: 0.4;
    }
    .nav-acc-item > .nav-primary-link::after {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin-left: auto;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.25s ease;
        opacity: 0.55;
    }
    .nav-acc-item.is-open > .nav-primary-link { color: var(--red) !important; }
    .nav-acc-item.is-open > .nav-primary-link::after {
        transform: rotate(-135deg);
        opacity: 1;
    }

    /* Collapsible panel: animate grid-template-rows 0fr -> 1fr for auto height. */
    .nav-acc-panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease;
    }
    .nav-acc-item.is-open > .nav-acc-panel { grid-template-rows: 1fr; }
    .nav-acc-panel-inner { min-height: 0; overflow: hidden; }
    .nav-acc-item.is-open > .nav-acc-panel > .nav-acc-panel-inner {
        overflow-y: auto;
        max-height: 46vh;
        -webkit-overflow-scrolling: touch;
        padding: 2px 0 14px;
    }

    /* Strip the card chrome inside the accordion — make it a tight list. */
    .nav-acc-panel .nav-panel-card {
        margin: 0 !important;
        padding: 10px 0 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .nav-acc-panel .nav-panel-card + .nav-panel-card {
        margin-top: 8px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(31, 20, 17, 0.08) !important;
    }
    .nav-acc-panel .nav-panel-kicker {
        font-size: 10px !important;
        letter-spacing: 0.14em !important;
        margin-bottom: 4px !important;
        color: var(--red) !important;
    }
    .nav-acc-panel .nav-panel-card h3 {
        margin: 0 !important;
        font-family: var(--sans) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }
    .nav-acc-panel .nav-panel-card p {
        margin: 6px 0 0 !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }
    .nav-acc-panel .nav-panel-list {
        list-style: none !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
    }
    .nav-acc-panel .nav-panel-list a,
    .nav-acc-panel .nav-panel-location a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px;
        padding: 11px 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--charcoal) !important;
        border-bottom: 1px solid rgba(31, 20, 17, 0.06);
    }
    .nav-acc-panel .nav-panel-list a span { color: var(--red) !important; flex: 0 0 auto; }
    .nav-acc-panel .text-link {
        display: inline-flex !important;
        margin-top: 10px !important;
        font-size: 14px !important;
        color: var(--red) !important;
    }
    .nav-acc-panel .nav-panel-location strong { display: block; font-size: 14px; }
    .nav-acc-panel .nav-panel-location p { margin: 2px 0 6px !important; font-size: 12.5px !important; }
}

@media (max-width: 600px) {
    .menu-button-label { display: none; }          /* icon-only hamburger */
    .menu-button {
        width: 42px;
        padding: 0;
    }
    .menu-button-icon { width: 20px; }

    .nav-overlay-lead { display: none; }
    /* .nav-overlay-lead was a block-level <p> that forced a line break
       between .nav-overlay-brand and the "Запази час" button (both
       display:inline-flex). With it hidden on phones, those two inline-flex
       elements had nothing forcing them onto separate lines — on a narrow
       screen they could end up sitting side by side, where margin-top
       creates no visible vertical gap at all. Force the logo onto its own
       full-width line so the button always wraps below it, then the gap
       actually shows. */
    .nav-overlay-brand {
        display: flex !important;
        width: 100% !important;
    }
    .nav-overlay-sidebar .button {
        margin-top: 1.5rem !important;
    }
    .nav-primary-list { gap: 2px !important; margin-top: 8px !important; }
    .nav-primary-link {
        font-size: 21px !important;
        padding: 13px 0 !important;
    }
    .nav-overlay-main { padding: 64px 18px 24px !important; }
    .nav-overlay-sidebar { padding: 24px 18px 36px !important; }
}

/* --------------------------------------------------------------------------
   3. FLUID TYPOGRAPHY  (phones)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .detail-grid.bs-program-grid {
        grid-template-columns: 1fr !important;
    }
    .interactive-picker {
        grid-template-columns: 1fr !important;
    }
    .interactive-picker-panel {
        display: none !important;
    }
    .interactive-picker-accordion {
        display: none;
    }
    .interactive-picker-accordion.is-open {
        display: block !important;
        padding: 18px 20px !important;
        margin-top: -4px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--white);
    }
    .interactive-picker-accordion .eyebrow {
        margin-bottom: 8px;
    }
    .interactive-picker-accordion h3 {
        font-family: var(--serif);
        font-size: 20px;
        margin-bottom: 8px;
    }
    .interactive-picker-accordion p {
        color: var(--gray);
        font-size: 14px;
        line-height: 1.6;
    }
    .interactive-picker-accordion img {
        width: 100%;
        height: 200px;
        object-fit: contain;
        background: rgba(31, 20, 17, 0.03);
        border-radius: 12px;
        margin-bottom: 14px;
    }
    .interactive-picker-accordion ul {
        list-style: none;
        display: grid;
        gap: 8px;
        margin-top: 4px;
    }
    .interactive-picker-accordion ul a {
        color: var(--red);
        font-weight: 700;
        text-decoration: none;
        font-size: 14px;
    }
    .bs-results-grid {
        grid-template-columns: 1fr !important;
    }
    .tech-showcase-media {
        height: 220px !important;
    }
    .tech-showcase-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .hero h1,
    .editorial-hero h1 {
        font-size: clamp(34px, 8.5vw, 52px) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.03em !important;
        max-width: 100% !important;
    }
    .section-heading h2,
    .section-content h2,
    h2 {
        font-size: clamp(24px, 6.4vw, 34px) !important;
        line-height: 1.12 !important;
    }
    h3 { font-size: clamp(19px, 5vw, 24px) !important; }

    .eyebrow {
        white-space: normal !important;
        word-break: break-word;
        font-size: 11px !important;
        letter-spacing: 0.1em !important;
    }

    p { font-size: 15.5px; }
}

@media (max-width: 380px) {
    .hero h1, .editorial-hero h1 { font-size: 30px !important; }
}

/* --------------------------------------------------------------------------
   4. SPACING — tighten big desktop rhythm
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .section        { padding: 56px 0 !important; }
    .hero           { padding: 40px 0 52px !important; }
    .technology-section { padding: 52px 0 !important; }

    /* "Медицински направления" sits right under the About block — no need for
       the full section gap on top. */
    #services.section { padding-top: 20px !important; }
    #about.section    { padding-bottom: 40px !important; }
    .section-heading {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;   /* not flex-start — lets children wrap instead of overflow */
        gap: 14px !important;
        margin-bottom: 28px !important;
    }
    .section-heading > *,
    .section-heading h2,
    .section-heading > p {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Long Cyrillic words in big serif headings must be allowed to break. */
    h1, h2, h3, h4,
    .eyebrow, .dp-name, .quick-card h3,
    [class*="-title"], [class*="-heading"] {
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
}

/* --------------------------------------------------------------------------
   5. HERO  (homepage)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .hero-stack,
    .hero-grid {
        display: block !important;
    }
    .hero-copy { width: 100% !important; }

    .hero-visual {
        width: 100% !important;
        min-height: 0 !important;
        margin-top: 30px;
    }
    .hero-visual::before { display: none !important; }

    .hero-media-frame {
        height: auto !important;
        aspect-ratio: 4 / 5;
        border-radius: 24px 64px 24px 64px !important;
    }
    .hero-media-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Side note: was absolutely positioned & off-canvas — bring it inline. */
    .hero-side-note {
        position: static !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        margin: -44px 12px 0 !important;
        backdrop-filter: blur(10px);
    }

    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 22px;
    }
    .hero-actions .button,
    .hero-actions .button-secondary {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .hero-stats {
        margin-top: 32px !important;
        gap: 14px !important;
    }
    .hero-stats strong { font-size: 24px !important; }
    .hero-stats span   { font-size: 12px !important; }
}

@media (max-width: 380px) {
    .hero-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px 18px !important;
    }
}

/* --------------------------------------------------------------------------
   6. QUICK LINKS
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .quick-links-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .quick-card,
    .quick-card:first-child,
    .quick-card:last-child,
    .quick-card:nth-child(2) {
        grid-column: auto !important;
        border: 1px solid var(--border) !important;
        border-radius: 18px !important;
        padding: 22px !important;
    }
    .quick-card-featured { min-height: 0 !important; }
    .quick-number { font-size: 12px !important; }
}

/* --------------------------------------------------------------------------
   7. ABOUT (editorial-about)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .about-editorial {
        display: block !important;
    }
    .about-editorial > * {
        width: 100% !important;
        margin-bottom: 24px;
    }
    .about-visual { position: relative; }
    .about-image-frame {
        height: auto !important;
        aspect-ratio: 3 / 2;
        margin-bottom: 0 !important;
    }
    .about-image-frame img { width: 100%; height: 100%; object-fit: cover; }

    /* Was absolutely positioned + pulled up over the photo — on mobile that
       floated the white card halfway up the image. Make it a plain card
       directly under the photo. */
    .about-quote {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        margin: 12px 0 0 !important;
        padding: 18px 20px !important;
    }

    .about-values { margin-top: 24px !important; }
    .about-values div { gap: 12px; }

    .about-vision-mission { margin-top: 4px !important; }
    .about-vm-panel { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   8. MEDICAL DIRECTIONS  (editorial-services: featured card + slider)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .editorial-services { display: block !important; }

    .service-featured {
        display: block !important;
        padding: 16px !important;
    }
    .service-featured > * { width: 100% !important; }
    .service-featured-copy { padding: 6px 6px 14px !important; }

    .service-featured-media {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 11;
        margin-top: 14px;
        border-radius: 16px;
        overflow: hidden;
    }
    .service-featured-media img,
    .featured-department-image {
        position: absolute; inset: 0;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
    }
    .featured-department-number { font-size: 34px !important; }

    /* Department slider — horizontal swipe row.
       The bug: .department-slider is `display:grid` with an implicit `auto`
       column, which sizes to the max-content track (~6000px) and blows the
       page out. Force a real width cap so the viewport actually scrolls. */
    .department-slider {
        display: block !important;
        margin-top: 20px !important;
    }
    .department-slider-viewport {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .department-slider-viewport::-webkit-scrollbar { display: none; }
    .department-slider-track {
        display: flex !important;
        width: max-content !important;
        gap: 14px !important;
    }
    .department-slider-track > .service-row {
        /* width comes from site.js (inline width/min-width) — don't fight it */
        min-height: 0 !important;          /* base sets 380px → big empty void */
        padding: 14px 0 18px !important;
        border-bottom: 0 !important;
        scroll-snap-align: start;
    }
    .service-row .row-number { margin-bottom: 8px !important; }
    .service-row h3 { font-size: 17px !important; line-height: 1.2 !important; }
    .service-row p {
        font-size: 13px !important;
        margin-top: 8px !important;
        display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    }
    .service-row .department-card-space { display: none !important; }
    .department-slider-track { gap: 18px !important; }   /* match site.js slide math */

    /* Prev / next arrows — visible on touch layouts (site-base hides them <=768).
       The click handlers are already wired in site.js, they were just hidden. */
    .department-slider-controls {
        display: flex !important;
        justify-content: flex-end;
        gap: 10px;
        margin-bottom: 12px;
    }
    .department-slider-button {
        width: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(182, 31, 43, 0.28) !important;
        background: #fff !important;
        color: var(--red) !important;
        box-shadow: 0 8px 22px rgba(31, 20, 17, 0.12) !important;
    }
    .department-slider-button svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.6 !important;
    }
    .department-slider-button:disabled {
        opacity: 0.3 !important;
        box-shadow: none !important;
    }
    .department-slider-button:not(:disabled):active {
        background: var(--red) !important;
        color: #fff !important;
    }
}

/* --------------------------------------------------------------------------
   9. DOCTORS — homepage carousel (.editorial-doctor) + /doctors/ grid (.sp-*)
   Photos are the main offender: keep them a compact, viewport-scaled band,
   never a full-height portrait. Fixed/clamped height (not aspect-ratio,
   which left huge empty tiles while the lazy <img> loaded).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .editorial-doctors {
        display: grid !important;   /* site-base forces `block !important` <=700 */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }
    .editorial-doctor {
        grid-template-rows: auto auto !important;
        width: auto !important;      /* undo site-base's `width:100% !important` on children */
        margin-bottom: 0 !important;
    }
    .editorial-doctor-photo {
        aspect-ratio: auto !important;
        height: clamp(190px, 26vw, 260px) !important;
        min-height: 0 !important;
        overflow: hidden !important;   /* clip the portrait strictly to the box */
    }
    /* Copy sits on its own opaque plane so the red specialty label can never
       appear to bleed onto the photo above it. */
    .editorial-doctor-copy {
        position: relative !important;
        z-index: 1 !important;
        background: #fff !important;
    }
}

@media (max-width: 600px) {
    .editorial-doctors {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .editorial-doctor-photo {
        height: clamp(160px, 50vw, 220px) !important;
    }
    .editorial-doctor-copy {
        padding: 14px 12px 14px !important;
    }
    .editorial-doctor-copy .doctor-specialty {
        margin-top: 0 !important;
        line-height: 1.3 !important;
    }
    .editorial-doctor-copy h3 {
        font-size: 15px !important;
        margin-top: 6px !important;
    }
    .editorial-doctor-copy p { display: none !important; }     /* bio too cramped 2-up */
    .editorial-doctor-copy .doctor-specialty { font-size: 10px !important; }
    .editorial-doctor-copy .text-link {
        font-size: 13px !important;
        padding-top: 10px !important;
    }

    /* /doctors/ archive — 2 columns with smaller portraits.
       site-base has `[class*="grid"]{grid-template-columns:1fr!important}` which
       otherwise forces this to one column. */
    .sp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
    .sp-photo-link { aspect-ratio: 3 / 4 !important; }
    .sp-photo-link .dp-photo-initials { font-size: 34px !important; }
    .sp-name { font-size: 14px !important; }
    .sp-specialty { font-size: 11px !important; }
}

@media (max-width: 340px) {
    .sp-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 360px) {
    .editorial-doctor-copy h3 { font-size: 14px !important; }
}

/* --------------------------------------------------------------------------
   10. TECHNOLOGY section
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .technology-immersive {
        display: block !important;
    }
    .technology-immersive > * { width: 100% !important; }
    .technology-media {
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 3 / 2;
        margin-bottom: 24px;
    }
    .technology-index { margin-top: 4px; }
    .technology-item p { display: block !important; font-size: 13.5px; }
}

/* --------------------------------------------------------------------------
   11. APPOINTMENT panel + forms
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .appointment-panel {
        display: block !important;
        padding: 22px !important;
    }
    .appointment-panel > * { width: 100% !important; }
    .appointment-intro { margin-bottom: 24px; }

    .contact-details { gap: 10px; }

    .appointment-partners { margin-top: 24px; padding-top: 20px; }
    .appointment-partners-logos { gap: 18px 22px; }
    .appointment-partners-logos img { height: 24px; max-width: 90px; }

    .form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .appointment-form input,
    .appointment-form select,
    .appointment-form textarea,
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="date"], select, textarea {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 16px !important;   /* stops iOS zoom-on-focus */
    }
    .appointment-form button[type="submit"],
    .appointment-form .button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .footer { padding: 52px 0 24px !important; }
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px 20px !important;
    }
    .footer-grid > :first-child { grid-column: 1 / -1; }
    .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        text-align: left !important;
    }
}
@media (max-width: 400px) {
    .footer-grid { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   13. GENERIC — button pairs, tap targets, wide grids
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Wide "-grid" utilities collapse to one column — except the doctor
       portrait grid and the photo gallery, which both read better (and
       smaller) kept 2-up. */
    [class$="-grid"]:not(.sp-grid):not(.editorial-doctors):not(.gallery-grid),
    [class*="-grid "]:not(.sp-grid):not(.editorial-doctors):not(.gallery-grid) {
        grid-template-columns: 1fr !important;
    }

    /* Button rows stack full-width. */
    .hero-actions, .card-actions, .detail-hero-actions,
    .derma-hero-actions, .derma-tech-actions, .location-actions,
    .dp-hero-actions, .dp-cta-actions, .cta-actions, .therapy-cta-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .hero-actions > *, .card-actions > *, .detail-hero-actions > *,
    .derma-hero-actions > *, .derma-tech-actions > *, .location-actions > *,
    .dp-hero-actions > *, .dp-cta-actions > *, .cta-actions > *,
    .therapy-cta-actions > * {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Comfortable tap targets. */
    a.button, button, .menu-button, .text-link,
    .department-slider-button, .dental-slider-btn, .physio-slider-btn {
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   14. DOCTOR PROFILE  (single-doctor.php  .dp-*)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .dp-hero { padding: 32px 0 26px !important; }
    .dp-hero-grid {
        display: block !important;
    }
    .dp-photo-frame {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5;
        max-height: 70vh;
        margin-bottom: 22px;
    }
    .dp-name { font-size: clamp(30px, 8vw, 42px) !important; }
    .dp-hero-actions { margin-top: 4px; }

    .dp-strip { grid-template-columns: 1fr 1fr !important; }
    .dp-strip-item { border-right: 0 !important; border-bottom: 1px solid var(--border); }

    .dp-section { padding: 44px 0 !important; }
    .dp-bio { font-size: 15.5px !important; }

    .dp-cta {
        display: block !important;
        padding: 24px !important;
        text-align: left;
    }
    .dp-cta-actions { margin-top: 16px; min-width: 0 !important; }
}

@media (max-width: 400px) {
    .dp-strip { grid-template-columns: 1fr !important; }
}

/* Expertise tag rows: keep the number gutter modest and stop pills overflowing. */
@media (max-width: 600px) {
    .dp-expertise-tags,
    .dp-expertise-tag-group,
    .dp-expertise-tag-list { min-width: 0; max-width: 100%; }
    .dp-expertise-tag-list { width: 100%; }
    .dp-expertise-tag {
        max-width: 100%;
        flex-shrink: 1;
    }
    .dp-edu-item { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   15. DEPARTMENT / THERAPY page shells that live in components.css
       (dental-*, physio-*, derma-*, journey-*, therapy-*)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .dental-highlight, .dental-contact-shell,
    .derma-pathway, .derma-clinical-shell, .derma-surgery-shell,
    .derma-tech-shell, .derma-cta-panel,
    /* .therapy-breadcrumb (Начало / Направление / Заглавие) is display:flex
       with no wrap and no shrink — "Физиотерапия и рехабилитация" at
       uppercase + letter-spacing easily runs past a phone's width on its
       own, on every single procedure page, forcing the whole page to
       scroll sideways. Let it wrap onto a second line instead. */
    .therapy-breadcrumb {
        flex-wrap: wrap !important;
        row-gap: 4px !important;
    }

    /* .therapy-hero-meta pills and .therapy-hero-actions buttons default to
       shrink-to-fit (flex item min-width:auto), so a long pill/button label
       can refuse to shrink or wrap and push the row past the screen edge —
       force them to actually wrap their text instead. */
    /* display:inline-flex (the base .therapy-meta-pill/.button style) wraps
       its raw text content in an anonymous flex item that defaults to
       min-width:auto — i.e. "never shrink below this text's own line
       width" — which silently defeats white-space:normal and pushed a long
       pill/button label straight off the edge of the screen even after
       .therapy-hero-meta itself wraps correctly. Dropping to plain
       block/inline for these two specifically sidesteps that flex quirk
       entirely — normal text-wrapping rules apply, guaranteed no overflow. */
    .therapy-hero-meta {
        max-width: 100% !important;
    }
    .therapy-meta-pill {
        display: block !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }
    .therapy-meta-pill span {
        display: inline;
        margin-right: 4px;
    }
    .therapy-hero-actions .button,
    .therapy-hero-actions .button-secondary {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
        text-align: center !important;
        line-height: 1.3 !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .physio-results-shell, .physio-hero-meta, .physio-hero-grid,
    .therapy-intro-grid, .therapy-highlight, .therapy-cta-band,
    .detail-hero-grid, .journey-timeline, .location-map-panel,
    .locations-editorial {
        display: block !important;
    }
    .dental-highlight > *, .dental-contact-shell > *,
    .derma-pathway > *, .derma-clinical-shell > *, .derma-surgery-shell > *,
    .derma-tech-shell > *, .derma-cta-panel > *,
    .physio-results-shell > *, .physio-hero-grid > *, .therapy-intro-grid > *,
    .therapy-highlight > *, .detail-hero-grid > *,
    .locations-editorial > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 20px;
    }
    /* .physio-hero-media (video hero, single.php procedure pages that opt
       into etica_hero_video_file) — the base rule gives it a fixed height
       for the desktop side-by-side layout; keep a sane height once it's
       stacked full-width on phones, and make sure the <video> itself can
       never force the page wider than the viewport. */
    .physio-hero-grid .physio-hero-media {
        width: 100% !important;
        max-width: 100% !important;
        height: 220px !important;
        min-height: 0 !important;
        margin-top: 20px;
        overflow: hidden !important;
        box-sizing: border-box !important;
        /* Keep the department hero's own signature pill-corner shape
           instead of the plain 24px-all-round rectangle site-base.css
           flattens it to below 768px — just scaled down for the shorter
           mobile box. */
        border-radius: 20px 90px 20px 90px !important;
    }
    /* Pin every dimension explicitly so a video's own intrinsic aspect
       ratio can never widen the box past the viewport. */
    .physio-hero-media video {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important;
    }
    /* .is-portrait-video (etica_hero_video_portrait post meta) — a
       portrait-shot clip with burned-in captions (top/bottom of frame)
       loses those captions to the crop above. Show it in full instead: a
       taller box, object-fit:contain, beige fill for the resulting side
       letterboxing. Scoped to just these clips so the normal landscape
       hero videos/photos keep their existing full-bleed crop. */
    .physio-hero-grid .physio-hero-media.is-portrait-video {
        height: 480px !important;
        background: var(--beige);
        border-radius: 24px 160px 24px 160px !important;
    }
    .physio-hero-media.is-portrait-video video {
        object-fit: contain !important;
    }

    .dental-services-grid, .physio-feature-grid, .physio-therapy-grid,
    .physio-specialists-grid, .physio-conditions-grid, .physio-stat-grid,
    .derma-gallery-grid, .therapy-benefits-grid, .therapy-conditions-grid,
    .dept-grid, .journey-timeline {
        grid-template-columns: 1fr !important;
    }
    /* .sp-grid (doctor archive) stays 2-up — see section 9. */
}

/* --------------------------------------------------------------------------
   16. PHYSIOTHERAPY specialists slider (.physio-specialists-*)
   Desktop is a 2-row grid-auto-flow:column slider — cramped and effectively
   unusable at phone width. Collapse to one horizontal row of compact cards.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .physio-specialists-slider { gap: 8px; }

    .physio-specialists-track {
        display: flex !important;   /* grid-template-rows/auto-flow no longer apply */
    }
    .physio-specialist-card {
        flex: 0 0 min(70vw, 250px) !important;
    }
    .physio-specialist-card img { height: 190px !important; }
    .physio-specialist-card div { padding: 14px 16px 16px !important; }
    .physio-specialist-card h3 {
        font-size: 17px !important;
        line-height: 1.2 !important;
    }
    .physio-specialist-card p {
        font-size: 12.5px !important;
        margin-top: 4px !important;
    }
    .physio-specialist-card .wp-block-buttons { margin-top: 8px !important; }
    .physio-specialist-card .wp-block-button__link {
        font-size: 13px !important;
        padding: 8px 16px !important;
    }

    .physio-slider-btn {
        width: 38px !important;
        height: 38px !important;
        background-color: #fff !important;
        box-shadow: 0 8px 18px rgba(31, 20, 17, 0.12) !important;
    }
}

@media (max-width: 400px) {
    .physio-specialist-card { flex-basis: 78vw !important; }
    .physio-specialist-card img { height: 160px !important; }
}

/* --------------------------------------------------------------------------
   17. DENTAL specialists slider (.dental-specialists-*)
   Desktop cards are a full portrait photo + specialization list + button —
   at 82vw wide with only a sliver of the next card peeking, phone width
   showed what looked like a single non-scrollable doctor, one at a time.
   Drop to compact circular-avatar cards and hide the arrows (native touch
   swipe takes over) so 2 sit fully in view at once (with a peek of a 3rd).
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .dental-specialists-slider {
        gap: 0;
    }
    .dental-specialists-slider .physio-slider-btn,
    .dental-specialists-slider .dental-slider-btn {
        display: none !important;
    }
    .dental-specialists-grid {
        gap: 14px !important;
    }
    .dental-specialists-grid .dental-card {
        flex: 0 0 min(42vw, 165px) !important;
        scroll-snap-align: start;
    }
    .dental-specialists-grid .dental-card .doctor-portrait-wrap {
        width: 92px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        margin: 0 auto 10px !important;
    }
    .dental-specialists-grid .dental-card .doctor-portrait-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
        display: block;
    }
    .dental-specialists-grid .dental-card h3 {
        font-size: 15px !important;
        line-height: 1.22 !important;
        text-align: center;
        margin-bottom: 8px !important;
    }
    .dental-specialists-grid .dental-card .doctor-specializations {
        display: none !important;
    }
    .dental-specialists-grid .dental-card .wp-block-buttons {
        justify-content: center;
    }
    .dental-specialists-grid .dental-card .wp-block-button__link {
        font-size: 13px !important;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   18. Reveal-on-scroll: never leave content invisible on touch devices
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (hover: none) {
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   19. Locations page cards (.location-cards-grid, .location-card-*)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .location-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .location-card-map {
        height: 180px;
    }
    .location-card-body {
        padding: 18px 20px 22px;
    }
}

/* --------------------------------------------------------------------------
   20. INVESTIGATIONS hero carousel (.investigation-hero, .investigations-hero-*)
   Desktop overlays the copy on the left third of a full-bleed 640px carousel
   via position:absolute + a left-to-right fade (readable text over the
   image). At phone width the fade is designed for a wide viewport and the
   text — still absolutely positioned, just with max-width removed — sits
   on top of the photos with no readable backing and can overlap the
   carousel's own dots/arrows. Drop the overlay: stack copy above a shorter,
   contained, rounded carousel card instead, same pattern as every other
   hero on the site.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .investigation-hero .hero-grid {
        padding-inline: clamp(16px, 4.5vw, 40px) !important;
    }

    .investigation-hero .hero-grid > div:first-child {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        z-index: auto !important;
        max-width: none !important;
    }

    .investigations-hero-visual {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
        margin-top: 24px;
        border-radius: 20px;
    }
    .investigations-hero-visual .carousel,
    .investigations-hero-visual .carousel-inner {
        border-radius: 20px;
    }
    .investigations-hero-visual::after {
        display: none !important;
    }

    /* Slide dots — 7 of them at the desktop 24px width run wide and heavy
       on a phone-size card. Shrink the bars and tighten their spacing.
       min-height:0 fights section 13's generic `button { min-height:44px }`
       tap-target rule below, which was stretching these thin bars (and the
       round prev/next controls) tall regardless of the height set here. */
    .investigations-hero-visual .carousel-indicators {
        margin-bottom: 8px;
    }
    .investigations-hero-visual .carousel-indicators [data-bs-target] {
        width: 12px !important;
        height: 2px !important;
        min-height: 0 !important;
        margin: 0 2px !important;
    }
    .investigations-hero-visual .carousel-control-prev,
    .investigations-hero-visual .carousel-control-next {
        min-height: 0 !important;
    }
}

@media (max-width: 380px) {
    .investigations-hero-visual .carousel-control-prev,
    .investigations-hero-visual .carousel-control-next {
        width: 34px !important;
        height: 34px !important;
    }
}

/* --------------------------------------------------------------------------
   21. PRICELIST (.pricelist-*)
   The category head is a single flex row on desktop — index, department
   logo, name, decorative line, arrow. .pricelist-category-head h2 is
   flex:0 0 auto (never shrinks) and a department logo can run ~100-170px
   wide, so on a phone that row simply doesn't fit: it was overflowing the
   card (or getting clipped/pushing the arrow off-screen), which read as
   the whole page being broken. Force the name onto its own full-width
   line below a compact index+logo+arrow row instead.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .pricelist-category-head {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }
    .pricelist-category-line {
        display: none !important;
    }
    .pricelist-category-index {
        order: 1 !important;
    }
    .pricelist-category-logo {
        order: 2 !important;
        height: 22px !important;
    }
    .pricelist-category-arrow {
        order: 3 !important;
        margin-left: auto !important;
    }
    .pricelist-category-head h2,
    .pricelist-category-head.is-department h2 {
        order: 4 !important;
        flex: 1 1 100% !important;
        font-size: 19px !important;
    }

    .pricelist-doctor {
        padding: 18px 18px !important;
    }
    .pricelist-doctor h3 {
        font-size: 17px !important;
    }
    .pricelist-service-name {
        font-size: 13.5px !important;
    }
}

/* The sticky search/pills bar was inset inside the same rounded, bordered
   .investigation-toolbar box used on the Investigations page — on a phone
   that reads as a small floating card, easy to miss, with the pill row
   squeezed inside its padding. Make the whole bar an edge-to-edge strip
   instead, so it's unmistakably a persistent sticky nav, with the full
   screen width to scroll the pills in. */
@media (max-width: 700px) {
    .pricelist-toolbar-wrap .container {
        max-width: 100%;
        padding-inline: 0;
    }
    .investigation-toolbar {
        max-width: 100%;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* --------------------------------------------------------------------------
   22. GALLERY (.gallery-grid, .gallery-item) — mobile carousel
   A plain wrapping grid kept getting fought by other cascade layers (the
   generic "-grid" collapse-to-1-column safety net, the auto-fill/minmax
   base rule needing 260px per item that a phone just doesn't have). Switch
   the mechanism entirely to a horizontal scroll-snap strip instead, same
   pattern as .physio-specialists-track / .dental-specialists-grid
   elsewhere — smaller cards, 2 fully in view with a peek of a 3rd hinting
   there's more to swipe to. !important throughout: this must win outright,
   not re-enter the same specificity fight.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .gallery-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 10px !important;
        margin-top: 16px !important;
        padding: 0 6px 6px !important;
        scrollbar-width: none !important;
    }
    .gallery-grid::-webkit-scrollbar {
        display: none !important;
    }
    .gallery-item {
        flex: 0 0 44% !important;
        scroll-snap-align: start !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   26. MASSAGE SERVICE FLIP-CARDS (/massage/) — one column on phones/tablets,
   shorter card since there's no second column to balance height against.
   Hover doesn't exist on touch, so single.php also renders a small tap-hint
   icon and site.js toggles .is-flipped on click for these cards.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .massage-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .massage-card {
        height: 320px !important;
    }
}