/* ================================================================
   Tulip Clinic — Universal Responsive Overrides
   Loaded last on every page to enforce consistent behaviour
   across desktop / tablet / mobile / small-mobile breakpoints.
   ================================================================ */

/* Foundational */
html, body { overflow-x: clip; }

/* ================================================================
   Top Strip CTA — compact "Book Appointment" pill that lives in the
   gradient strip beside the hours. Designed to pop against the
   blue/teal gradient without overpowering the slim 8px-padded strip.
   ================================================================ */
.top-strip-right { gap: 16px !important; }

.ts-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: #fff;
    color: #0A66C2 !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
    white-space: nowrap;
    line-height: 1.2;
}

.ts-cta:hover {
    background: #0A66C2;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

.ts-cta svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    opacity: 0.95;
}

@media (max-width: 600px) {
    .ts-cta {
        font-size: 11px;
        padding: 4px 10px;
        letter-spacing: 0.02em;
    }
    .ts-cta svg { width: 12px; height: 12px; }
}

img, svg, video, iframe {
    max-width: 100%;
    height: auto;
}

* { min-width: 0; }

/* Tap targets on mobile */
button, .btn, a.btn, input, select, textarea {
    font: inherit;
}

/* Avoid awkward zoom on iOS form focus */
input, select, textarea {
    font-size: 16px;
}

/* ================================================================
   Mobile Navigation Fix
   When the hamburger menu is open, the .nav stack inherits
   align-items:center from desktop styles — that shrinks .nav-item
   (Gallery dropdown wrapper) to content width and breaks the layout.
   These rules force a clean stacked menu with the Gallery sub-items
   shown inline as indented links.
   ================================================================ */
@media (max-width: 992px) {
    /* Force open-menu container to stretch children full-width */
    .nav {
        align-items: stretch !important;
        gap: 4px !important;
        padding: 10px 12px !important;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Gallery dropdown wrapper takes full row */
    .nav .nav-item {
        width: 100% !important;
        position: static !important;
        display: block !important;
    }

    /* Top-level links — uniform full-width rows */
    .nav > a,
    .nav .nav-item > a {
        width: 100% !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    /* Gallery dropdown — collapsed by default, expands when parent has .is-open */
    .nav .dropdown {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        background: #F7FAFC !important;
        border-radius: 10px !important;
        padding: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.25s ease, margin 0.25s ease;
    }

    .nav .nav-item.is-open .dropdown {
        max-height: 500px;
        padding: 4px !important;
        margin: 4px 0 6px !important;
    }

    .nav .dropdown a {
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px 10px 36px !important;
        font-size: 14px !important;
        background: transparent !important;
        color: #4A5568 !important;
        position: relative;
    }

    .nav .dropdown a::before {
        content: "›";
        position: absolute;
        left: 18px;
        color: #94A3B8;
        font-weight: 700;
    }

    .nav .dropdown a:hover,
    .nav .dropdown a.active {
        background: #fff !important;
        color: #0A66C2 !important;
    }

    /* Caret on parent rotates when expanded */
    .nav .nav-item > a svg {
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }
    .nav .nav-item.is-open > a svg {
        transform: rotate(180deg);
    }
}

/* === TABLET / SMALL DESKTOP (≤ 1024px) === */
@media (max-width: 1024px) {
    .container { padding-left: 24px; padding-right: 24px; }

    /* Hide landline number on narrower viewports to save room */
    .ts-landline { display: none; }

    /* Two-column patterns → single-column */
    .story-grid,
    .doc-profile-grid,
    .mission,
    .contact-grid,
    .contact-layout,
    .hero-grid,
    .yt-grid,
    .two-col {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Footer 4 cols → about full-width + 3 link cols below (no orphan) */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
    }
    .footer-about { grid-column: 1 / -1; }

    /* Common 4-col grids → 2 cols */
    .group-grid,
    .values,
    .service-grid,
    .doc-grid,
    .testi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Hero on tablet: stack visual below text, recenter */
    .hero { padding: 60px 0 !important; min-height: auto !important; }
    .hero-visual { max-width: 480px; margin: 0 auto; }
    .hero-cta { justify-content: flex-start; }
}

/* === TABLET (≤ 900px) === */
@media (max-width: 900px) {
    /* Headings */
    h1 { font-size: 38px; }
    h2 { font-size: 30px; }

    .page-hero { padding: 80px 0 60px; }
    .page-hero h1 { font-size: 36px !important; }
}

/* === SMALL TABLET / LARGE PHONE (≤ 768px) === */
@media (max-width: 768px) {
    .top-strip { display: none !important; }

    h1 { font-size: 30px; }
    h2 { font-size: 26px; }
    h3 { font-size: 18px; }

    /* Homepage hero badges (3 col) collapse */
    .hero-badges { grid-template-columns: 1fr !important; }

    /* Services: 3-col grid collapse to 1col */
    .services-grid,
    .service-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    /* YouTube glass-card on homepage */
    .glass-card { padding: 24px !important; border-radius: 20px !important; }

    /* CTA buttons stack */
    .hero-cta {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .hero-cta .btn { justify-content: center !important; width: 100%; }

    section { padding: 56px 0 !important; }
    .page-hero { padding: 56px 0 44px !important; }
    .page-hero h1 { font-size: 30px !important; line-height: 1.2 !important; }
    .page-hero p { font-size: 15px !important; padding: 14px 16px !important; }

    /* Hide CTA button in header on phones, keep menu toggle visible */
    .header-actions .btn:not(.menu-toggle) { display: none !important; }

    /* Doctor profile header stacks */
    .doc-profile-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 14px !important;
        align-items: center !important;
    }
    .doc-profile-info .title {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .doc-profile-social { justify-content: center !important; }

    /* Card spacing tighter */
    .doc-profile-card,
    .mission-card,
    .group-card,
    .value,
    .testi-card {
        padding: 26px 22px !important;
    }

    /* Stats grids → 2 columns */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px !important;
    }
    .stat-n, .stat-num, .ss-n { font-size: 36px !important; }
    .stat-l, .stat-label, .ss-l { font-size: 13px !important; }

    /* Story visual loosens its 1:1 aspect for phones */
    .story-visual {
        aspect-ratio: auto !important;
        min-height: 320px;
        padding: 28px !important;
    }
    .story-stats { gap: 14px !important; }
    .ss { padding: 18px !important; }
    .ss-n { font-size: 30px !important; }

    /* CTA action buttons stack */
    .cta-actions,
    .hero-actions,
    .cta-band-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }
    .cta-actions .btn,
    .hero-actions .btn {
        justify-content: center !important;
        width: 100%;
    }

    /* Footer — handled by 1024px rule (3 link cols + about full row) */

    /* Section heading */
    .section-head { margin-bottom: 38px !important; }
    .section-head p { font-size: 15px !important; }

    /* Gallery filter row scrolls horizontally if too long */
    .gallery-filters {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 6px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .filter-btn {
        flex-shrink: 0;
        padding: 9px 18px !important;
        font-size: 13px !important;
    }

    /* Gallery intro — tighter, more readable on phones */
    .gallery-intro {
        margin-bottom: 36px !important;
        padding: 0 4px;
    }
    .gallery-intro .eyebrow { font-size: 11px !important; letter-spacing: 0.14em !important; }
    .gallery-intro h2 { font-size: 24px !important; line-height: 1.25 !important; margin: 10px 0 12px !important; }
    .gallery-intro p { font-size: 14.5px !important; line-height: 1.65 !important; }

    /* Block heading — tag becomes an eyebrow above the title for
       stronger hierarchy on phones (column-reverse stacks tag first) */
    .block-heading {
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding-bottom: 14px !important;
        margin-bottom: 24px !important;
    }
    .block-heading h3 {
        font-size: 21px !important;
        line-height: 1.25 !important;
    }
    .block-heading .block-tag {
        font-size: 10.5px !important;
        padding: 4px 12px !important;
        letter-spacing: 0.12em !important;
    }

    /* Video YouTube CTA stacks */
    .video-channel-cta {
        flex-direction: column !important;
        text-align: center;
        padding: 28px 22px !important;
        gap: 18px !important;
    }
    .video-channel-cta .btn-yt { width: 100%; justify-content: center; }
}

/* === MOBILE (≤ 600px) === */
@media (max-width: 600px) {
    .container { padding-left: 16px; padding-right: 16px; }

    /* Contact form 2-col fields stack */
    .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
    .contact-card { padding: 24px 20px !important; }

    h1 { font-size: 26px; }
    h2 { font-size: 22px; }

    section { padding: 44px 0 !important; }

    .page-hero { padding: 44px 0 36px !important; }
    .page-hero h1 { font-size: 26px !important; }
    .page-hero p { font-size: 14.5px !important; }

    /* Logo & header */
    .logo { font-size: 18px !important; }
    .logo-img { width: 44px !important; height: 44px !important; }
    .logo-sub { font-size: 9px !important; }
    .site-header { height: 64px !important; }
    .header-inner { height: 64px !important; }

    /* 4-col / 3-col grids → single column */
    .group-grid,
    .values,
    .service-grid,
    .doc-grid,
    .testi-grid,
    .explore-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Footer — single column, compact, left-aligned on phones */
    .site-footer { padding: 36px 0 16px !important; }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }
    .footer-about { grid-column: auto; }
    .footer-about p { font-size: 13.5px !important; line-height: 1.55 !important; margin-top: 10px; }
    .footer-social { margin-top: 12px !important; }
    .footer-social a { width: 36px !important; height: 36px !important; border-radius: 8px !important; }
    .footer-bottom { margin-top: 22px !important; padding-top: 14px !important; font-size: 12px !important; }

    /* Stats grid */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
    .stat-n, .stat-num, .ss-n { font-size: 28px !important; }

    /* Card padding tighter */
    .doc-profile-card,
    .mission-card,
    .group-card,
    .value,
    .testi-card {
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }

    .doc-profile-img {
        width: 100px !important;
        height: 100px !important;
    }

    /* Bio quote */
    .bio-quote { padding: 14px 16px !important; font-size: 13.5px !important; }
    .bio-meta-item { font-size: 13px !important; }

    /* Story visual */
    .story-visual { padding: 20px !important; min-height: 280px; }
    .ss { padding: 14px !important; }
    .ss-n { font-size: 26px !important; }
    .ss-l { font-size: 11.5px !important; }

    /* Buttons */
    .btn { padding: 11px 18px !important; font-size: 14px !important; }

    /* Lightbox controls */
    .lightbox-nav { padding: 0 12px !important; }
    .lightbox-btn { width: 42px !important; height: 42px !important; }
    .lightbox-close { top: 14px !important; right: 14px !important; font-size: 28px !important; }

    /* Forms full width */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Page hero overlay box softer */
    .page-hero p[style*="background"] {
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }

    /* Gallery section padding (vertical only — preserve .container's horizontal padding) */
    .gallery-section { padding-top: 40px !important; padding-bottom: 40px !important; }
    .gallery-block { margin-top: 44px !important; }
    .gallery-intro { margin-bottom: 30px !important; }
    .gallery-intro h2 { font-size: 22px !important; }
    .gallery-stats { padding: 44px 0 !important; }
    .gallery-cta { padding: 50px 0 !important; }
    .gallery-cta h2 { font-size: 24px !important; }

    /* Eyebrow shrink */
    .eyebrow { font-size: 11px !important; letter-spacing: 0.1em !important; }

    /* Testimonials marquee — slow down/full width on mobile */
    .testi-marquee-section { padding: 50px 0 !important; }
    .testi-card { width: 280px !important; padding: 20px !important; }
    .testi-text { font-size: 14px !important; }

    /* Timeline */
    .tl-item { padding-left: 60px !important; }
    .tl-year { font-size: 16px !important; }
    .tl-text { font-size: 14.5px !important; }
}

/* === SMALL MOBILE (≤ 400px) === */
@media (max-width: 400px) {
    .container { padding-left: 14px; padding-right: 14px; }

    h1 { font-size: 22px; }
    h2 { font-size: 20px; }

    .page-hero h1 { font-size: 22px !important; }

    /* Stats: 1 column on tiny screens */
    .stats-grid { grid-template-columns: 1fr !important; }
    .story-stats { grid-template-columns: 1fr 1fr !important; }

    .logo-sub { display: none; }

    .filter-btn { padding: 8px 14px !important; font-size: 12.5px !important; }

    .doc-profile-img { width: 88px !important; height: 88px !important; }
    .doc-profile-info h3 { font-size: 20px !important; }

    .testi-card { width: 250px !important; }
}

/* === LANDSCAPE PHONES — keep hero compact === */
@media (max-height: 500px) and (orientation: landscape) {
    .page-hero { padding: 36px 0 28px !important; }
    .page-hero h1 { font-size: 26px !important; }
    section { padding: 40px 0 !important; }
}

/* ================================================================
   Information pages — child-care-service.html / eye-care-service.html
   Tightens .article-block, .block-img, .sub-nav, .breadcrumb,
   .cta-strip and .factor-list across breakpoints so the new
   content cards read cleanly on every device.
   ================================================================ */

/* Tablet & below — sub-nav drops sticky behaviour earlier (header
   collapses to hamburger at 992px, so a sticky offset of 80px stops
   making sense once the nav is mobile). */
@media (max-width: 992px) {
    .sub-nav {
        position: static !important;
        top: auto !important;
        padding: 14px 0 !important;
    }
    .sub-nav .container {
        gap: 8px !important;
    }
    .sub-nav a {
        padding: 9px 18px !important;
        font-size: 13.5px !important;
    }

    /* Banner image: 21:9 is too thin for tablet card width */
    .article-block .block-img {
        aspect-ratio: 18 / 9 !important;
    }
}

/* Phones — tighten article cards, breadcrumb, CTA */
@media (max-width: 768px) {
    .article {
        max-width: 100% !important;
    }

    .article-block {
        padding: 28px 22px !important;
        border-radius: 16px !important;
        margin-bottom: 22px !important;
    }
    .article-block:hover {
        transform: none !important;
    }
    .article-block h2 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }
    .article-block h2 .lead {
        font-size: 12.5px !important;
    }
    .article-block h3 {
        font-size: 17px !important;
        margin-top: 22px !important;
    }
    .article-block p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    .article-block .block-img {
        margin: -28px -22px 20px !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 16px 16px 0 0 !important;
    }
    .article-block:hover .block-img img {
        transform: none !important;
    }

    .breadcrumb {
        font-size: 13px !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    .cta-strip {
        padding: 48px 0 !important;
    }
    .cta-strip h2 {
        font-size: 24px !important;
    }
    .cta-strip p {
        font-size: 15px !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
    .cta-strip .btn {
        width: auto;
    }
}

/* Small phones */
@media (max-width: 600px) {
    .sub-nav .container {
        flex-wrap: wrap !important;
    }
    .sub-nav a {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
        padding: 9px 12px !important;
        font-size: 13px !important;
    }

    .article-block {
        padding: 22px 18px !important;
    }
    .article-block .block-img {
        margin: -22px -18px 18px !important;
        aspect-ratio: 16 / 10 !important;
    }
    .article-block .topic {
        font-size: 10.5px !important;
        padding: 4px 12px !important;
    }
    .article-block h2 {
        font-size: 20px !important;
    }

    .breadcrumb {
        font-size: 12px !important;
    }

    .factor-list li {
        padding: 12px 14px !important;
        border-left-width: 3px !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .cta-strip {
        padding: 40px 0 !important;
    }
    .cta-strip h2 {
        font-size: 22px !important;
    }
}

/* Tiny phones */
@media (max-width: 400px) {
    .article-block {
        padding: 20px 16px !important;
    }
    .article-block .block-img {
        margin: -20px -16px 16px !important;
    }
    .article-block h2 {
        font-size: 18px !important;
    }
    .article-block p {
        font-size: 14.5px !important;
    }
    .factor-list li {
        font-size: 13.5px !important;
        padding: 10px 12px !important;
    }
}

/* ================================================================
   Tablet gap fixes — issues the audit flagged in the existing pages
   that the prior media queries didn't reach.
   ================================================================ */

/* Dropdown menus must not exceed viewport width on tiny phones */
@media (max-width: 600px) {
    .nav-item .dropdown {
        min-width: 0 !important;
    }
}

/* Contact + info card layouts collapse earlier for tablet readability */
@media (max-width: 1024px) {
    .contact-layout {
        grid-template-columns: 1fr !important;
    }
    .info-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mid-range tablet — gallery grid uses 2 cols not 3-4 */
@media (max-width: 900px) {
    .gallery-grid,
    .gallery-grid.grid-3,
    .gallery-grid.grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Smaller phones — gallery stays 2-up, info cards single column */
@media (max-width: 600px) {
    .gallery-grid,
    .gallery-grid.grid-3,
    .gallery-grid.grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .info-cards {
        grid-template-columns: 1fr !important;
    }
}

/* Tiny phones — gallery still 2-up but tighten gap further */
@media (max-width: 380px) {
    .gallery-grid,
    .gallery-grid.grid-3,
    .gallery-grid.grid-4 {
        gap: 8px !important;
    }
}

/* === ACCESSIBILITY: respect reduced motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================
   Cross-page polish — Phase 2
   Fills in the gaps the prior media-queries didn't reach so every
   page degrades smoothly from desktop → small-mobile.
   ================================================================ */

/* === LARGE TABLET (≤ 1100px) — pre-collapse polish === */
@media (max-width: 1100px) {
    /* about.html .group-grid — 4-col leaves badges cramped */
    .group-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* services.html .cards — earlier collapse aligns with the unified
       breakpoint system rather than the page's own 960px rule */
    .cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Generic auto-flow grids on home/services use auto-fit already and
       are left untouched. */
}

/* === HEADER COLLAPSES (≤ 992px) === */
@media (max-width: 992px) {
    /* index.html hero visual: stops fighting for 400px when stacked */
    .hero-visual {
        max-width: 100% !important;
        width: 100% !important;
    }
    .hero-visual .inner {
        max-width: 480px;
        margin: 0 auto;
    }

    /* hero-badges: 3-col is fine on tablet but tighten gap */
    .hero-badges {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    /* Contact info cards drop to a tighter 2-col on tablet */
    .info-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* === SMALL TABLET / LARGE PHONE (≤ 768px) === */
@media (max-width: 768px) {
    /* services.html .cards reach single column here, replacing the
       page's own 640px breakpoint */
    .cards {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    /* Hero badges → 2 columns before becoming 1 */
    .hero-badges {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Contact form + sidebar fully stacks (responsive.css already
       handled .contact-layout at 1024; tighten the gap on phones) */
    .contact-layout {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* === MOBILE (≤ 600px) === */
@media (max-width: 600px) {
    .hero-badges,
    .info-cards {
        grid-template-columns: 1fr !important;
    }

    /* Smooth the 1024 → 640 collapse already in gallery.css —
       force single-column at this size for legibility */
    .gallery-grid,
    .gallery-grid.grid-3,
    .gallery-grid.grid-4 {
        gap: 14px !important;
    }

    /* Logo never touches CTA pill on tight headers */
    .header-inner { gap: 8px !important; }
}

/* === Video gallery modal sizing === */
@media (min-width: 1400px) {
    /* Cap the video modal on ultra-wide so a 1080p clip doesn't
       balloon to >70vw */
    .video-modal-content {
        max-width: 1280px !important;
        margin: 0 auto !important;
    }
}
@media (max-width: 600px) {
    .video-modal-content {
        width: 100% !important;
        padding: 16px 12px !important;
    }
    #playerContainer {
        max-height: 70vh;
    }
    .video-modal-close {
        top: 8px !important;
        right: 8px !important;
    }
}

/* === Tiny-screen overflow safety net === */
@media (max-width: 380px) {
    /* Belt-and-braces: anything that still tries to be wider than the
       viewport on a 360px phone gets clipped to box width */
    .hero-visual .inner img,
    .gallery-item img,
    .article-block .block-img img,
    .doc-profile-img,
    .doc-profile-img img,
    .testi-card,
    .video-card {
        max-width: 100% !important;
    }
    .testi-card { width: auto !important; }
    .container { padding-left: 12px !important; padding-right: 12px !important; }
}

/* === Tap-target floor — phones must never have buttons under 40px === */
@media (max-width: 768px) {
    .btn, .filter-btn, .cta-pill__section,
    .video-card .play-icon,
    .gmodal-close, .lightbox-btn, .lightbox-close {
        min-height: 40px;
    }
}

/* === Long-labelled buttons must wrap on narrow phones so they
   don't force horizontal scroll. .btn defines white-space:nowrap
   in every page's <style> block; this override lets the submit
   button and other long-labelled CTAs wrap cleanly. === */
@media (max-width: 600px) {
    .btn,
    .submit-btn,
    button[type="submit"] {
        white-space: normal !important;
        text-align: center;
        line-height: 1.3;
    }
}