/* =========================================================================
   responsive.css — layout recomposition for wider viewports
   Base (mobile) styles live in main.css. Breakpoints: 600 / 768 / 1024 / 1280
   ========================================================================= */

/* ---- >= 600px : two-up grids ---- */
@media (min-width: 37.5em) {
    .cat-grid   { grid-template-columns: repeat(2, 1fr); }
    .tiers      { grid-template-columns: repeat(3, 1fr); }
    .reviews    { grid-template-columns: repeat(2, 1fr); }
    .offer-grid { grid-template-columns: repeat(2, 1fr); }
    .field--inline { grid-template-columns: repeat(2, 1fr); }
    .proof__divider { display: block; }
    .hero__ctas { gap: var(--space-md); }
}

/* ---- >= 768px : tablet ---- */
@media (min-width: 48em) {
    :root { --header-h: 84px; }

    .primary-nav { display: block; }
    .nav-toggle { display: none; }
    .header-actions .btn { display: inline-flex; }

    .hero { padding-bottom: var(--section-y); }
    .hero__inner {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--space-xl);
    }
    .hero__collage { gap: var(--space-sm); margin-top: 0; }
    .hero__img--main { grid-column: 1 / 5; grid-row: 1 / 3; aspect-ratio: auto; }
    .hero__img--tall {
        grid-column: 5 / 7; grid-row: 1 / 2;
        align-self: stretch; transform: none; box-shadow: var(--shadow-sm);
    }
    .hero__img--wide {
        display: block;
        grid-column: 5 / 7; grid-row: 2 / 3;
        aspect-ratio: 4 / 3; transform: rotate(2deg);
    }

    .split { grid-template-columns: 1fr 1fr; }
    .split--reverse .split__media { order: 2; }

    .location { grid-template-columns: 1.1fr 0.9fr; align-items: start; }

    .lookbook { grid-template-columns: repeat(3, 1fr); }
    .lookbook__item--wide { grid-column: span 2; }

    .gram { gap: 6px; }

    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: var(--space-xl);
    }
    .book-bar { display: none; }
    .site-footer { padding-bottom: var(--space-lg); }

    .cat-grid--home {
        grid-template-columns: repeat(6, 1fr);
    }
    .cat-grid--home .cat-card:nth-child(1) { grid-column: span 4; }
    .cat-grid--home .cat-card:nth-child(2) { grid-column: span 2; }
    .cat-grid--home .cat-card:nth-child(3) { grid-column: span 2; }
    .cat-grid--home .cat-card:nth-child(4) { grid-column: span 4; }
    .cat-grid--home .cat-card:nth-child(2) .cat-card__media,
    .cat-grid--home .cat-card:nth-child(3) .cat-card__media { aspect-ratio: 3 / 4; }
}

/* ---- >= 1024px : desktop ---- */
@media (min-width: 64em) {
    .reviews { grid-template-columns: repeat(3, 1fr); }
    .reviews .review:nth-child(2) { transform: translateY(var(--space-lg)); }

    .cat-grid { gap: var(--space-lg); }

    .section-head { margin-bottom: var(--space-xl); }

    .hero__title { letter-spacing: -0.03em; }

    .offer-grid { grid-template-columns: repeat(3, 1fr); }
    .offer-grid .offer:nth-child(2) { transform: translateY(-1.5rem); }

    .lookbook { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }

    .split--wide-media { grid-template-columns: 1.3fr 0.7fr; }

    /* ---- Content checklist: sticky left column + vertical meter ---- */
    .checklist { grid-template-columns: 15rem 1fr; gap: var(--space-2xl); align-items: start; }
    .cl-section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
    .checklist__nav {
        position: sticky;
        top: calc(var(--header-h) + var(--space-md));
        z-index: auto;
        background: transparent;
        border-bottom: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        margin-inline: 0;
        padding: 0 var(--space-2xs) 0 var(--space-md);
        gap: 0;
        max-height: calc(100vh - var(--header-h) - var(--space-xl));
        overflow: auto;
    }
    .checklist__meter {
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 2px;
        width: 4px;
        height: auto;
    }
    .checklist__meter-fill { width: 100%; height: var(--p, 0%); transition: height 0.15s linear; }
    .checklist__count { font-size: 1.4rem; margin-bottom: var(--space-sm); }
    .checklist__count-total { font-size: 0.95rem; }
    .checklist__links { flex-direction: column; gap: 1px; overflow: visible; }
    .checklist__navactions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2xs); margin-top: var(--space-md); }
    .checklist__navactions .btn { width: 100%; }
    .checklist__links a {
        white-space: normal;
        border: 0;
        border-radius: var(--radius-sm);
        padding: 0.5rem 0.4rem 0.5rem 0;
        align-items: baseline;
    }
    .checklist__links a.is-current { border-color: transparent; }
}

/* ---- >= 1280px : large desktop ---- */
@media (min-width: 80em) {
    .hero__inner { gap: var(--space-3xl); }
    .cta-band h2 { letter-spacing: -0.02em; }
}

/* ---- print ---- */
@media print {
    .site-header, .mobile-nav, .book-bar, .marquee, .site-footer, .lightbox,
    .hero__collage, .checklist__nav { display: none !important; }
    body { color: #000; }
    a { text-decoration: underline; }
    .checklist { display: block; }
    .checklist__body { max-width: none; }
    .cl-section { break-inside: avoid; }
}