/* GOTTA v2 — mobile.css
   Mobile-only overrides. All rules wrapped in max-width queries.
   Desktop layout untouched. */

/* Keyframes must live outside media queries for cross-browser reliability */
@keyframes tsm-down {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
@keyframes tsm-up {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tsm-col { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════
   BREAKPOINTS:
   768px  = phones + small tablets (primary mobile)
   480px  = small phones (iPhone SE etc)
   ═══════════════════════════════════════════════════════ */

/* ── Global touch targets ── */
@media (max-width: 768px) {

    /* Minimum 44px touch targets — but NOT structural elements like hamburger */
    .site-footer__nav a,
    .contact-block__links a,
    .page-cta,
    .cta-btn {
        min-height: 44px;
    }

    /* Hamburger must stay flex, not inline-flex */
    .hamburger {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
        box-sizing: border-box;
    }

    .hamburger span {
        background: var(--color-crown-gold) !important;
        height: 1.5px;
        display: block;
    }

    /* ── Nav ── */
    .site-header {
        padding: 0.75rem var(--gutter);
    }

    .header__logo {
        height: 36px; /* slightly smaller on mobile */
    }

    .header__find {
        display: none; /* remove from header on mobile, it's in the nav */
    }

    /* ── Home: 3-column × 3-row grid mosaic ── */
    body.page-home {
        overflow: hidden !important;
        height: 100svh !important;
    }

    /* Canvas: full viewport, no padding */
    .home-canvas {
        position: relative !important;
        width: 100vw !important;
        height: 100svh !important;
        overflow: hidden !important;
        display: block !important;
        padding-top: 0 !important;
    }

    /* Hide desktop elements */
    .home-canvas__watermark { display: none !important; }
    .home-video-bg { display: none !important; }
    .tile-scatter { display: none !important; }

    /* ── Mobile-only 3-column infinite scroll ── */
    .tile-scatter-mobile {
        display: grid !important;
        position: fixed !important;
        top: 82px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 52px !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        padding: 4px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        align-items: start !important;
        z-index: 1 !important;
    }

    .tsm-col {
        display: flex !important;
        flex-direction: column !important;
        will-change: transform;
    }

    .tsm-col a {
        display: block !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        margin-bottom: 4px !important;
        border-radius: 3px !important;
    }

    /* Each image = exactly 1/3 of available column height
       Available = 100svh - nav(82) - cta(52) - outer-padding(8) - 2 gaps between 3 rows(8) = 100svh - 150px
       Divide by 3 → each image fills one third, 3 images fill screen perfectly */
    .tsm-col img {
        width: 100% !important;
        height: calc((100svh - 150px) / 3) !important;
        object-fit: cover !important;
        display: block !important;
        flex-shrink: 0 !important;
    }

    .tsm-col--down  { animation: tsm-down 55s linear infinite; }
    .tsm-col--up    { animation: tsm-up   55s linear infinite; }
    .tsm-col--offset { animation-delay: -18s; }

    /* CTA bar — fixed at bottom of screen */
    .home-copy {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-width: 100% !important;
        background: rgba(10,10,10,0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(201,165,104,0.2);
        padding: 0.85rem var(--gutter) 1rem !important;
        z-index: 50;
        text-align: center !important;
    }

    .home-copy__block {
        opacity: 1 !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 0.6rem;
    }

    .home-copy__headline {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        color: var(--color-ivory);
        text-align: center;
    }
    .home-copy__headline br { display: none; }
    .home-copy__headline em {
        color: var(--color-crown-gold);
    }

    .home-copy__sub {
        display: none;
    }

    .home-copy__ctas {
        display: flex;
        justify-content: center;
        gap: 0.6rem;
        width: 100%;
    }

    .home-copy__cta {
        font-size: 0.62rem !important;
        letter-spacing: 0.14em !important;
        white-space: nowrap;
        flex: 1;
        min-height: 44px;
        justify-content: center;
    }

    .home-copy__cta--primary {
        padding: 0.7rem 0.9rem !important;
    }

    .home-copy__cta--secondary {
        padding: 0.7rem 0.5rem !important;
        border-bottom: none !important;
        border: 1px solid rgba(201,165,104,0.5) !important;
    }

    .home-compliance { display: none !important; }

    /* ── Splash / Age gate ── */
    .splash__brandmark { width: 72px; }
    .splash__wordmark { font-size: 2.5rem; }

    #age-gate .gate__question {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    .gate__dob input {
        font-size: 1.25rem;
        width: 3.5rem;
    }

    .gate__dob input[data-dob="y"] { width: 5rem; }

    /* ── Page heroes ── */
    .page-hero {
        padding: clamp(6rem, 14vw, 8rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
    }

    .page-hero__title {
        font-size: clamp(3rem, 11vw, 5rem);
        max-width: 100%;
    }

    .page-hero__sub {
        font-size: clamp(1rem, 4vw, 1.3rem);
    }

    /* ── Page sections ── */
    .page-section {
        padding: clamp(3rem, 7vw, 5rem) var(--gutter);
    }

    .page-section__title {
        font-size: clamp(2rem, 9vw, 3.5rem);
    }

    /* ── Story page ── */
    .story-intro {
        padding: clamp(6rem, 12vw, 8rem) var(--gutter) clamp(3rem, 6vw, 4rem);
    }

    .story-intro__headline {
        font-size: clamp(2.25rem, 9vw, 4rem);
    }

    .story-split-wrap {
        padding: 0 !important;
    }

    .story-split,
    .story-split--wide-text,
    .story-split--wide-photo {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    /* On mobile: photo comes before text visually */
    .story-split--wide-text .story-split__photo { order: -1; }
    .story-split--wide-photo .story-split__photo { order: -1; }

    .story-split__photo {
        min-height: 55vw !important;
        padding: 0 !important;
    }

    .story-split__photo img {
        max-height: 55vw !important;
    }

    .story-split__text {
        padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) !important;
    }

    .story-photo-full {
        height: clamp(280px, 55vw, 420px);
    }

    .story-photo-pair {
        grid-template-columns: 1fr !important;
        padding: 0 var(--gutter) !important;
        gap: 3px !important;
    }

    .story-photo-trio {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 var(--gutter) !important;
    }

    .story-stats {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 var(--gutter);
    }

    .story-stat { padding: 2rem 1rem; }

    .story-pull {
        padding: clamp(3rem, 8vw, 5rem) var(--gutter);
    }

    .story-pull blockquote {
        font-size: clamp(1.4rem, 5.5vw, 2rem);
    }

    .story-h2 {
        font-size: clamp(1.75rem, 7vw, 3rem);
    }

    .story-body {
        font-size: clamp(1rem, 4vw, 1.2rem);
    }

    .story-manifesto__text {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    /* ── SKU pages ── */
    .sku-hero-wrap {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .sku-hero {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        padding: 5rem var(--gutter) 3rem !important;
        gap: 2rem !important;
    }

    .sku-hero__meta { padding-top: 0 !important; }

    .sku-hero__name {
        font-size: clamp(3.5rem, 14vw, 6rem) !important;
    }

    .sku-hero__desc {
        font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
    }
    .sku-hero__mnemonic {
        font-size: clamp(1.4rem, 4.5vw, 1.85rem) !important;
    }

    .sku-hero__photo {
        aspect-ratio: 4/3 !important; /* landscape on mobile to save space */
    }

    .sku-main-photo {
        height: clamp(280px, 60vw, 480px);
    }

    .sku-notes {
        padding: clamp(3rem, 7vw, 5rem) var(--gutter);
    }

    .sku-notes__text {
        font-size: clamp(1.2rem, 4.5vw, 1.55rem) !important;
    }

    .sku-notes__pull {
        padding-left: 1.25rem;
    }

    .sku-info {
        grid-template-columns: 1fr !important;
    }

    .sku-info__left { border-right: 0 !important; border-bottom: 1px solid rgba(201,165,104,0.12); }

    .sku-spec-item { grid-template-columns: 110px 1fr; }

    .sku-spec-val {
        font-size: clamp(1rem, 4vw, 1.3rem) !important;
    }

    .sku-gallery__item {
        width: 82vw !important;
        height: 60vw !important;
    }

    .sku-gallery__track { padding: 0 var(--gutter); gap: 10px; }

    .sku-related__grid { grid-template-columns: 1fr !important; }

    .sku-related__card {
        grid-template-columns: 100px 1fr;
        padding: 1.25rem;
    }

    .sku-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .sku-footer__nav {
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem;
    }

    /* ── Moods page ── */
    .moods-hero {
        padding: clamp(6rem, 14vw, 9rem) var(--gutter) clamp(3rem, 6vw, 4rem);
    }

    .moods-hero__h1 {
        font-size: clamp(2.5rem, 9vw, 4.5rem);
    }

    .moods-grid-outer { padding: 0 var(--gutter) 3rem; }

    .moods-grid { grid-template-columns: repeat(2, 1fr); }

    .mood-card__name {
        font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
    }

    /* ── Contact page ── */
    .contact-wrap {
        grid-template-columns: 1fr !important;
    }

    .contact-left {
        padding: clamp(6rem, 14vw, 8rem) var(--gutter) clamp(3rem, 6vw, 4rem);
        justify-content: flex-start;
    }

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .contact-right {
        height: 55vw;
        order: -1; /* image before form on mobile */
    }

    .contact-block__links a {
        font-size: 1rem;
        padding: 0.5rem 0;
    }

    /* ── Lab page ── */
    .lab-specs { padding: 0; }
    .lab-spec-row {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
        padding: 1.25rem 0 !important;
    }

    /* ── Help/FAQ ── */
    .accordion__summary { font-size: clamp(1rem, 4.5vw, 1.3rem); }

    /* ── Find page ── */
    .find-row {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 1.75rem 0 !important;
    }

    .find-filters { gap: 1.25rem; }

    .find-bar {
        padding: 1.5rem var(--gutter);
        gap: 1.25rem;
    }

    /* ── Footer ── */
    .site-footer {
        padding: 2.5rem var(--gutter);
    }

    .site-footer__nav {
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
    }

    /* ── Lightbox ── */
    .lb-prev { left: 0.5rem; width: 2.75rem; height: 2.75rem; }
    .lb-next { right: 0.5rem; width: 2.75rem; height: 2.75rem; }
    .lb-close { top: 1rem; right: 1rem; }
    .lb-img { max-width: 100vw; max-height: 80vh; }

    /* ── Age gate (inner pages) ── */
    .ago__question { font-size: clamp(1.75rem, 7vw, 2.75rem) !important; }
    .ago__dob input { font-size: 1.25rem; width: 3.5rem; }
    .ago__dob input[name="yyyy"] { width: 5rem; }
}

/* ═══════════════════════════════════════
   480px — small phones
   ═══════════════════════════════════════ */
@media (max-width: 480px) {

    :root { --gutter: 1.25rem; }

    /* Single column moods grid on tiny screens */
    .moods-grid { grid-template-columns: 1fr !important; }

    /* Scatter tiles single column */
    .tile-scatter { grid-template-columns: 1fr !important; }

    .sku-hero__name { font-size: clamp(3rem, 16vw, 5rem) !important; }

    .story-stats { grid-template-columns: 1fr !important; }

    .contact-right { display: none; } /* hide image on very small screens */

    /* SKU gallery smaller on tiny screens */
    .sku-gallery__item { width: 88vw !important; height: 65vw !important; }

    .find-row__name {
        font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
    }

    /* Nav links in panel slightly smaller */
    .nav-links-primary a { font-size: 2rem; }

    /* Story split stats single column */
    .story-stats { grid-template-columns: 1fr; }
    .story-stat { border-right: 0 !important; border-bottom: 1px solid rgba(201,165,104,0.12); }
    .story-stat:last-child { border-bottom: 0; }
}

/* ═══════════════════════════════════════
   Landscape on mobile phones
   ═══════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {

    .sku-hero {
        grid-template-columns: 1fr 1fr !important; /* restore 2-col in landscape */
        min-height: 0 !important;
        padding: 4rem var(--gutter) 2rem !important;
    }

    .sku-hero__name { font-size: clamp(2.5rem, 8vw, 5rem) !important; }

    .sku-main-photo { height: 50vh; }

    .home-canvas { min-height: auto; }
}