/* ============================================================
   The Laundry Company — RESPONSIVE STYLESHEET
   Auto-switches layout based on browser size.
   Linked after page-specific CSS on every page.
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small)
   ============================================================ */

/* ── UTILITIES ── */
.mobile-only { display: none !important; }
.hide-mobile { display: block !important; }

@media (max-width: 768px) {
    .mobile-only { display: block !important; }
    .hide-mobile { display: none !important; }
    /* Membership comparison: desktop table hides, accordion shows */
    .desktop-only-comp { display: none !important; }
    .mobile-comp-accordions { display: block !important; }
}


/* Legacy hamburger styles removed - handled by shared.css */

/* ============================================================
   TABLET — max-width: 1024px
   ============================================================ */
@media (max-width:1024px){
    /* Legacy nav styles removed - handled by shared.css */

    /* Sections — compress vertical padding */
    .section,.scheduler-section,.mem-section,.final,.guarantee-section,
    .tlc-pay-section,.page-body,.page-hero{padding-top:3rem;padding-bottom:3rem;padding-left:2rem;padding-right:2rem;}
    .dark-panel{padding:2rem;}

    /* INDEX */
    .hero-content{padding:0 2rem 4rem;}
    .mosaic-card.commercial-card{grid-template-columns:1fr;}
    .how-section{grid-template-columns:1fr;}
    .comm-band-inner{grid-template-columns:1fr;}
    .mem-grid{grid-template-columns:repeat(2,1fr);gap:1rem;max-width:600px;margin:0 auto;}
    .loc-section{grid-template-columns:1fr;gap:2rem;}

    /* EXPERIENCES */
    .self-service-layout,.wf-layout,.pd-layout,.commercial-layout{grid-template-columns:1fr;gap:2rem;}
    .tlc-steps-grid{grid-template-columns:repeat(2,1fr);}
    .tlc-payment-grid{grid-template-columns:repeat(2,1fr);}
    .tlc-loyalty-grid{grid-template-columns:repeat(2,1fr);}
    .guarantee-grid{grid-template-columns:repeat(4,1fr);}
    .comm-band-left,.comm-band-right{padding:2.5rem 2rem;}

    /* Experiences hero — compress left text to reveal more image */
    .exp-hero-content { padding: 3rem 1.5rem 3rem 2rem; }
    .exp-hero-body { max-width: 340px; }

    /* SCHEDULE */
    .booking-layout{grid-template-columns:1fr 320px;}

    /* HERO SPLITS */
    .pth-inner,.rh-inner,.wh-inner,.ss-inner,.contact-inner,
    .calc-inner,.fs-inner{grid-template-columns:1fr;gap:2.5rem;padding:3rem 2rem;}

    /* MEMBERSHIP */
    .tier-grid{grid-template-columns:repeat(2,1fr);}

    /* Legacy logo/nav styles removed - handled by shared.css */
    /* Legacy logo/nav styles removed - handled by shared.css */

    /* ── TYPOGRAPHY ── */
    h1{font-size:clamp(1.8rem,6vw,2.6rem);}
    h2.section-title{font-size:clamp(1.4rem,5vw,2rem);}
    .comm-band-title{font-size:clamp(1.4rem,5vw,2.2rem);}
    .how-h2{font-size:clamp(1.3rem,4vw,1.7rem);}
    .tlc-pay-title{font-size:clamp(1.3rem,4vw,1.8rem);}
    .comm-title{font-size:clamp(1.3rem,4vw,1.8rem);}

    /* ── TABLES ── */
    .hours-table,.orders-table{display:block;overflow-x:hidden;width:100%;}
    .comp-table{display:block;overflow-x:hidden;width:100%;}

    /* ── BUTTONS ── */
    .btn-primary,.btn-gold,.btn-outline-cream,.btn-outline-gold,.btn-outline-light{display:inline-flex;text-align:center;align-items:center;justify-content:center;height:auto;min-height:48px;box-sizing:border-box;}
}

/* ============================================================
   MOBILE — max-width: 768px
   ============================================================ */
@media (max-width:768px){

    /* ── NAV — Handled by shared.css ── */

    /* ── SHARED SECTION PADDING ── */
    .section, .page-hero, .page-body,
    .scheduler-section, .mem-section, .final,
    .guarantee-section, .tlc-pay-section { padding: 3rem 1.25rem; }
    .dark-panel { padding: 1.5rem 1.25rem; }

    /* ── TYPOGRAPHY ── */
    h1 { font-size: clamp(1.6rem, 8vw, 2.4rem); }
    h2, .st, .section-title { font-size: clamp(1.3rem, 6vw, 2rem); }
    .comm-band-title { font-size: clamp(1.3rem, 6vw, 2rem); }
    .how-h2, .fd-title { font-size: clamp(1.2rem, 5.5vw, 1.7rem); }

    /* ── ALL MULTI-COLUMN GRIDS → SINGLE COLUMN ── */
    /* Index */
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-visual { display: block; width: 100%; height: 250px; overflow: hidden; border-radius: 8px; margin: 0 1.25rem 1.5rem; max-width: calc(100% - 2.5rem); border: 2px solid var(--gold); }
    .hero-content { padding: 0 1.25rem 4rem; }
    .services-grid-wrap { grid-template-columns: 1fr; }
    .mosaic-card.commercial-card { grid-template-columns: 1fr; }
    .commercial-card-left { border-right: none; border-bottom: 0.5px solid rgba(184,151,90,0.15); padding: 2.5rem 1.25rem; }
    .commercial-card-right { grid-template-columns: 1fr; padding: 2.5rem 1.25rem; }
    .how-section { grid-template-columns: 1fr; min-height: auto; }
    .how-left, .how-right { padding: 3rem 1.25rem; }
    .comm-band-inner { grid-template-columns: 1fr; }
    .comm-band-left, .comm-band-right { padding: 2.5rem 1.25rem; }
    .mem-grid { grid-template-columns: 1fr; max-width: 100%; }
    .loc-section { grid-template-columns: 1fr; gap: 0; }
    .loc-contact-cards { grid-template-columns: 1fr 1fr; }
    .service-pick-grid { grid-template-columns: 1fr 1fr; }
    .time-grid { grid-template-columns: 1fr 1fr; }
    .hero-proof { flex-wrap: nowrap; gap: 0.75rem; }

    /* Locations */
    .hero.locations-hero, .hero { grid-template-columns: 1fr; }
    .flagship-inner { grid-template-columns: 1fr; min-height: auto; }
    .contact-cards { grid-template-columns: 1fr 1fr; }
    .landmark-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .zone-inner { grid-template-columns: 1fr; gap: 2rem; }
    .zone-cities { grid-template-columns: 1fr 1fr; }
    .access-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .future-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .hero-chips { flex-wrap: wrap; gap: 0.5rem; }
    .fd-opening { font-size: 0.8rem; }
    .fd-actions { flex-direction: column; gap: 0.75rem; }
    .fd-actions a { text-align: center; }

    /* Membership */
    .tier-grid { grid-template-columns: 1fr; border: none; }
    .tier-card { border: 0.5px solid var(--cream-dark, #e8e0d0); margin-bottom: 1rem; }
    .tier-card.featured { order: -1; }
    .add-on-grid { grid-template-columns: 1fr; gap: 1rem; }
    .scenarios { grid-template-columns: 1fr; gap: 1rem; }
    .faq-grid { grid-template-columns: 1fr; gap: 2rem; }
    .comp-table { display: block; overflow-x: auto; }
    .desktop-only-comp { display: none; }
    .mobile-comp-accordions { display: block; }
    .f-row { grid-template-columns: 1fr; }
    .addon-member-row { grid-template-columns: 1fr; }
    .final-acts { flex-direction: column; gap: 0.75rem; }
    .final-acts button { width: 100%; }

    /* Partners */
    .pth-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem; }
    .pt-grid { grid-template-columns: 1fr; gap: 1rem; }
    .steps { grid-template-columns: 1fr; border: none; }
    .step { border-right: none; border-bottom: 0.5px solid var(--cream-dark, #e8e0d0); }
    .lg-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    .fs-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem; }
    .partner-grid { grid-template-columns: 1fr; }

    /* Press */
    .qf-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .ss-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem; }
    .angles-grid { grid-template-columns: 1fr; }
    .kit-grid { grid-template-columns: 1fr; }
    .cv-grid { grid-template-columns: 1fr; }
    .contact-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem; }

    /* Referrals */
    .rh-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem; }
    .rd-stats { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr; border: none; }
    .reward-grid { grid-template-columns: 1fr; }
    .share-btns { grid-template-columns: 1fr; }

    /* Rewards */
    .earn-grid { grid-template-columns: 1fr 1fr; border: none; }
    .earn-item { border-right: none; border-bottom: 0.5px solid var(--cream-dark, #e8e0d0); }
    .earn-explainer { grid-template-columns: 1fr; gap: 1.5rem; }
    .calc-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem; }
    .redeem-grid { grid-template-columns: 1fr; }

    /* Schedule Pickup */
    .booking-layout { grid-template-columns: 1fr; }
    .popup-form-row { grid-template-columns: 1fr; }
    .svc-grid { grid-template-columns: 1fr 1fr; }
    .f-input-row { grid-template-columns: 1fr; }
    .hiw-grid { grid-template-columns: 1fr; border: none; }
    .hiw-step { border-right: none; border-bottom: 0.5px solid var(--cream-dark, #e8e0d0); }
    .coverage-section { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem; }
    .cov-cities { grid-template-columns: 1fr 1fr; }
    .sched-steps { display: none; }
    .scheduler-card { padding: 1.5rem 1.25rem; }

    /* Waitlist */
    .wh-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem; }
    .perks-grid { grid-template-columns: 1fr; }
    .es-header { grid-template-columns: 1fr; gap: 1.5rem; }
    .f-interests { grid-template-columns: 1fr 1fr; }

    /* Grand Opening */
    .oi-inner { grid-template-columns: 1fr; gap: 2rem; }
    .expect-grid { grid-template-columns: 1fr; }
    .countdown-clock { gap: 1rem; }
    .cc-num { font-size: 3.5rem; }

    /* Commercial */
    .commercial-hero-inner { grid-template-columns: 1fr; }
    .vertical-grid { grid-template-columns: 1fr; }
    .quote-inner { grid-template-columns: 1fr; gap: 2rem; }
    .machines-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }

    /* Experiences hero — narrow left column, image fills right */
    .exp-hero-inner { grid-template-columns: auto 1fr; }
    .exp-hero-content { padding: 4.5rem 1rem 1.5rem 1.25rem; max-width: 215px; }
    .exp-hero-body { font-size: 0.74rem; max-width: none; }
    .exp-hero h1 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
    .exp-hero-tabs { flex-direction: column; gap: 0.4rem; margin-top: 1rem; align-self: center; align-items: stretch; }
    .exp-tab { flex: none; text-align: center; border-radius: 0; padding: 0.65rem 0.75rem; font-size: 0.52rem; }
    .service-nav-bar { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .snb-item { flex: 0 0 auto; white-space: nowrap; padding: 1rem; font-size: 0.55rem; }
    .self-service-layout,.wf-layout,.pd-layout,.commercial-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .tlc-steps-grid { grid-template-columns: 1fr 1fr; }
    .tlc-payment-grid { grid-template-columns: 1fr 1fr; }
    .tlc-loyalty-grid { grid-template-columns: 1fr; }
    .guarantee-grid { grid-template-columns: 1fr; }
    .machine-grid { grid-template-columns: 1fr 1fr; }
    .tlc-card-showcase { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
    .card-3d { margin: 0 auto; width: 100%; max-width: 320px; }

    /* About / Blog / Press common */
    .about-grid, .blog-grid, .card-grid-2, .card-grid-3 { grid-template-columns: 1fr; }
    .two-col, .two-col-wide, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

    /* Standalone footer in locations/schedule-pickup */


    /* ── BUTTONS ── */
    .btn-primary,.btn-gold,.btn-outline-cream,.btn-outline-gold,
    .btn-outline-light,.btn-outline,.nav-cta { display: flex; width: 100%; text-align: center; align-items: center; justify-content: center; height: auto; min-height: 48px; box-sizing: border-box; }

    /* ── TABLES ── */
    .hours-table, .comp-table, .orders-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .desktop-only-table { display: none; }
    .mobile-hours-wrap { display: block; }
}

/* ============================================================
   SMALL MOBILE — max-width: 480px
   ============================================================ */
@media (max-width:480px){
    /* Further compress sections */
    .section,.page-body,.page-hero{padding:1.5rem 0.85rem;}
    .tlc-pay-section{padding:0 0.85rem 1.5rem;}
    .tlc-inner{padding:1rem;}

    /* Experiences hero — even tighter left column on small screens */
    .exp-hero-content { padding: 4rem 0.75rem 1.25rem 0.85rem; max-width: 180px; }
    .exp-hero h1 { font-size: clamp(1.1rem, 5vw, 1.5rem); }
    .exp-hero-body { font-size: 0.68rem; line-height: 1.6; }
    .exp-tab { padding: 0.55rem 0.5rem; font-size: 0.48rem; }

    .commercial-card-right{grid-template-columns:1fr;}
    .machine-grid{grid-template-columns:1fr;}
    .addons-grid{grid-template-columns:1fr;}
    .time-grid{grid-template-columns:1fr;}
    .guarantee-grid{grid-template-columns:1fr;}
    .rd-stats{grid-template-columns:1fr;}
    .steps,.steps-grid{grid-template-columns:1fr;}
    .earn-grid{grid-template-columns:1fr;}
    .qf-grid{grid-template-columns:1fr;}
    .partner-grid{grid-template-columns:1fr;}
    .lg-grid{grid-template-columns:repeat(2,1fr);}
    .f-interests{grid-template-columns:1fr;}
    .tlc-stat{flex:1 1 100%; margin-bottom:0.5rem;}
    .tlc-stat:last-child { margin-bottom:0; }
    .tlc-inner { padding: 1.25rem 1rem; }
    .loc-contact-cards,.contact-cards,.svc-grid,.cov-cities { grid-template-columns: 1fr; }
    .scheduler-card { padding: 1rem 0.85rem; }
    .hiw-section, .coverage-section { padding: 2rem 0.85rem; }
    .svc-grid, .time-grid, .cov-cities { grid-template-columns: 1fr; }
    .cov-city { border-right: none; }
    .cov-city:not(:last-child) { border-bottom: 0.5px solid rgba(184,151,90,0.1); }
    .cov-city:last-child { border-bottom: none; }
    .landmark-grid,.access-grid { grid-template-columns: 1fr; }
    .earn-grid { grid-template-columns: 1fr; }
    .tlc-steps-grid,.tlc-payment-grid,.machine-grid { grid-template-columns: 1fr; }
    .tlc-card-showcase { padding-top: 1.5rem; gap: 1.5rem; }
    .service-pick-grid { grid-template-columns: 1fr; }
    .f-row,.addon-member-row { grid-template-columns: 1fr; }
    .hero-proof > div { flex: 1; min-width: 0; }

    /* Even tighter spacing */
    .hero-content{padding:10px 0.85rem 1rem;}
    .hero-visual{height:200px; margin:0 0.85rem 0.85rem; max-width:calc(100% - 1.7rem);}
    .how-content{padding:1.25rem 0.85rem;}
    .comm-band-left,.comm-band-right{padding:1.25rem 0.85rem;}
    .mosaic-card{padding:1.25rem 0.85rem;}
    .commercial-card-left{padding:1.25rem 0.85rem;}
    .pth-inner,.rh-inner,.wh-inner{padding:1.25rem 0.85rem;gap:1.25rem;}

    /* Typography */
    h1 { font-size: clamp(1.4rem, 9vw, 2rem); }
    h2, .st { font-size: clamp(1.1rem, 7vw, 1.6rem); }
    .cc-num { font-size: 2.8rem; }
}




/* Service nav bar visible on all breakpoints — handled by shared.css */


/* --- MOBILE SAFEGUARDS FOR GRIDS & CARDS --- */
@media (max-width: 768px) {
    /* Collapse cards and generic grids to 1 column to avoid shrinking */
    .pt-grid, .steps, .lg-grid, .qf-grid, .kit-grid, .cv-grid,
    .steps-grid, .reward-grid, .earn-grid, .redeem-grid, .partner-grid,
    .hiw-grid, .grid-3, .grid-4, .card-grid-3, .card-grid-2, .blog-grid,
    .perks-grid, .mem-grid, .tier-grid, .guarantee-grid,
    .tlc-loyalty-grid, .tlc-payment-grid, .tlc-steps-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Let horizontal flex cards wrap instead of squish */
    .flex-row-wrap-mobile, .cc-row, .pref-row {
        flex-wrap: wrap !important;
    }

    /* Tables: Reduce padding so they don't scroll horizontally */
    .orders-table, .hours-table, .comp-table, .compare-table, .price-table {
        overflow-x: hidden !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        display: table !important; /* Override display:block so tables wrap properly */
    }
    .orders-table td, .orders-table th, 
    .hours-table td, .hours-table th,
    .comp-table td, .comp-table th,
    .compare-table td, .compare-table th,
    .price-table td, .price-table th {
        padding: 0.4rem 0.15rem !important;
        font-size: clamp(0.45rem, 2.5vw, 0.65rem) !important;
        white-space: normal !important;
    }

    /* ── EXPERIENCES PAGE — MOBILE OVERFLOW FIXES ── */

    /* Dark payment section — tighten inner padding */
    .tlc-inner { padding: 1.5rem 1rem; }
    .tlc-pay-section { padding: 0 1.25rem 3rem; }

    /* Payment/loyalty/steps grids — single column */
    .tlc-payment-grid, .tlc-loyalty-grid, .tlc-steps-grid {
        grid-template-columns: 1fr !important;
    }

    /* Machine detail bar — stack */
    .machine-detail-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Machine type tabs — fill width */
    .machine-type-tabs {
        display: flex;
        width: 100%;
    }
    .mtt { flex: 1; text-align: center; }

    /* Addon grid — single col */
    .addons-grid { grid-template-columns: 1fr !important; }

    /* TLC Card showcase — single column */
    .tlc-card-showcase {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        padding-top: 2rem;
    }
    .card-3d { margin: 0 auto; width: 100%; max-width: 320px; }

    /* TLC stats — wrap nicely */
    .tlc-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    /* Ironing layout — single column on mobile */
    .ironing-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Ironing spec grid */
    .ispec { min-width: 0; }

    /* Sustainability footer link bar — stack */
    div[style*="padding:1.5rem 4rem"] {
        padding: 1.5rem 1.25rem !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Footer CTA — stack on mobile */
    .footer-cta {
        padding: 3rem 1.25rem !important;
        flex-direction: column !important;
        text-align: center;
        gap: 1.5rem !important;
    }
    .fc-actions {
        flex-direction: column !important;
        width: 100%;
        gap: 0.75rem !important;
    }

    /* ── MEMBERSHIP PAGE — MOBILE OVERFLOW FIXES ── */

    /* Comparison table — compact cells */
    .compare-table th, .compare-table td {
        padding: 0.4rem 0.1rem !important;
        font-size: clamp(0.4rem, 2.2vw, 0.62rem) !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
    .compare-table { table-layout: fixed; width: 100%; }

    /* Household add-on section (inline grid) */
    div[style*="grid-template-columns:1fr 1fr;gap:3rem"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 1.5rem 1.25rem !important;
    }

    /* HIW steps (membership) — single col */
    .hiw-steps {
        grid-template-columns: 1fr !important;
    }

    /* HIW example — stack the arrow flow */
    .hiw-ex-math {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    .hiw-ex-arrow {
        transform: rotate(90deg);
    }

    /* Free card section inner — single col */
    .free-card-inner {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Tier cards grid — single col */
    .tiers-grid {
        grid-template-columns: 1fr !important;
    }

    /* ROI strip text */
    .roi-strip { flex-direction: column; gap: 0.5rem; }

    /* Credit display row — stack on very small */
    .cd-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-align: center;
    }
    .cd-arrow { transform: rotate(90deg); }

    /* FAQ section padding */
    .faq-section .faq-inner { padding: 2rem 1.25rem; }

    /* Guarantee section */
    .guarantee { padding: 3rem 1.25rem !important; }
    .guarantee h2 {
        font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
    }

    /* Global body overflow protection */
    body { overflow-x: hidden; }
}

/* ── SMALL MOBILE EXTRA FIXES — max-width: 480px ── */
@media (max-width: 480px) {
    /* TLC stats — full width on very small */
    .tlc-stats {
        grid-template-columns: 1fr !important;
    }

    /* Even tighter dark section */
    .tlc-inner { padding: 1rem 0.75rem; }
    .tlc-pay-section { padding: 0 0.85rem 1.5rem; }

    /* Credit display — smaller text */
    .cd-pay-num, .cd-get-num {
        font-size: 1.8rem !important;
    }
}