/* ============================================
   Large Desktop (1440px+)
   ============================================ */
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}

/* ============================================
   Tablet + Mobile (< 1024px)
   ============================================ */
@media (max-width: 1023px) {
  .hero-main {
    flex: 0 0 65%;
  }

  .hero-wardrobe {
    flex: 0 0 35%;
  }

  .hero-slogan h1 {
    font-size: 1.5rem;
  }

  .hero-slogan {
    max-width: 240px;
  }

  .uc-card {
    width: 160px;
  }
}

/* ============================================
   Tablet + Mobile (< 768px)
   ============================================ */
@media (max-width: 767px) {
  /* Nav: hide links + CTA, show hamburger */
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  /* Page guard: kill horizontal overflow so the position:fixed nav stops
     stretching to the document width (which was pushing the hamburger off
     the right edge at 393px). Safe on mobile — every ScrollTrigger pin is
     gated to (min-width: 768px), so nothing relies on a sticky root here. */
  html,
  body {
    overflow-x: hidden;
  }

  /* Mobile menu → Apple-style frosted-glass dropdown anchored top-right.
     Overrides the base full-screen white overlay defined in nav.css
     (that base only ever renders <= 767px, so desktop is untouched). */
  .mobile-menu {
    top: calc(var(--nav-height) - 6px);
    left: auto;
    right: var(--sp-sm);
    bottom: auto;
    width: min(66vw, 240px);
    padding: 6px;
    display: block;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 16px 44px rgba(0, 39, 62, 0.18);
    transform: translateY(-10px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.28s ease,
      transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-menu.open {
    transform: translateY(0) scale(1);
  }

  .mobile-menu-links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .mobile-menu-links li {
    width: 100%;
  }

  /* Mirror the desktop nav-link look (uppercase Montserrat), not the serif */
  .mobile-menu-links a {
    display: block;
    font-family: var(--ff-body);
    font-size: 0.8125rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: right;
    color: var(--c-navy);
    padding: 12px 14px;
    border-radius: 13px;
    transition: background var(--transition), color var(--transition);
  }

  .mobile-menu-links a:hover,
  .mobile-menu-links a:active {
    background: var(--c-lilac-15);
    color: var(--c-lilac);
  }

  /* CTA keeps its gradient pill, full-width inside the dropdown */
  .mobile-menu-links a.btn-cta {
    margin-top: 4px;
    width: 100%;
    text-align: center;
    text-transform: none;
    letter-spacing: 0.03em;
    color: var(--c-white);
  }

  /* Hero: natural vertical stack on mobile (no absolute overlap) */
  .hero {
    height: auto;
    min-height: 0;
  }

  .hero-runway {
    flex-direction: column;
  }

  .hero-main {
    flex: none;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--sp-md) var(--sp-md) var(--sp-lg);
  }

  /* Slogan back into normal flow — stops it overlapping the model */
  .hero-slogan {
    position: static;
    max-width: none;
    margin-bottom: var(--sp-md);
  }

  .hero-slogan h1 {
    font-size: 1.5rem;
  }

  .hero-sub {
    max-width: none;
  }

  /* Model band: single model centred in a fixed-height box (JS shows 1 only) */
  .hero-model-queue {
    position: relative;
    inset: auto;
    height: 380px;
    padding: 0;
    justify-content: center;
  }

  /* Look counter back into normal flow, below the model */
  .hero-look-counter {
    position: static;
    margin-top: var(--sp-sm);
  }

  .hero-wardrobe {
    flex: none;
    border-left: none;
    border-top: 1px solid var(--c-navy-05);
    max-height: none;
  }

  .wardrobe-scroll {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--sp-sm);
    padding: var(--sp-md);
  }

  /* Definite width fixes the `img width:100%` circular-sizing bug in a flex row
     (without it the outfit PNG fell back to its 1086px intrinsic width) */
  .wardrobe-card {
    width: 132px;
    min-width: 132px;
    flex-shrink: 0;
  }

  .wardrobe-fade {
    display: none;
  }

  /* How It Works: vertical stack on mobile */
  .how-it-works {
    height: auto;
    overflow: visible;
  }

  .hiw-bg {
    width: 100%;
  }

  .hiw-title {
    position: relative;
    top: auto;
    padding: var(--sp-lg) var(--sp-md) var(--sp-md);
  }

  /* mobile: no pin — normal stacked layout, all steps shown */
  .how-it-works {
    height: auto;
    overflow: visible;
  }

  .hiw-title {
    position: relative;
    top: auto;
    padding: var(--sp-lg) var(--sp-md) var(--sp-md);
  }

  .hiw-layout {
    height: auto;
    display: block;
    padding: 0 var(--sp-md) var(--sp-lg);
  }

  .hiw-phone-mockup {
    width: 200px;
    height: 433px;
    margin: 0 auto var(--sp-lg);
    justify-self: auto;
  }

  .hiw-steps {
    gap: var(--sp-lg);
  }

  .hiw-step {
    align-items: center;
    text-align: center;
    max-width: none;
  }

  .hiw-text-head {
    justify-content: center;
  }

  /* Use Cases: vertical flow on mobile (title -> model -> 2-col card grid ->
     ribbons). Desktop (>=768px) keeps the absolute fan + pin via the
     ScrollTrigger.matchMedia min-width:768 branch — untouched. */
  .use-cases {
    height: auto;
    overflow-x: hidden; /* clip the cropped model's overflow sides */
  }

  /* Gradient reverts to an absolute backdrop covering the whole auto-height
     section. The previous min-height:80vh (plus a phantom `.uc-bg img` rule for
     an <img> that does not exist) rendered as a large empty void at the top. */
  .uc-bg {
    min-height: 0;
  }

  .uc-title {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    white-space: normal; /* nowrap overflowed "MOMENT" off the right edge */
    font-size: clamp(2.5rem, 12vw, 3.75rem);
    padding: var(--sp-lg) var(--sp-md) var(--sp-sm);
  }

  /* Desktop nudges the left span -0.5em; that breaks centering once wrapped. */
  .uc-title-left {
    left: 0;
  }

  /* Model source is a 1672x941 landscape with the figure centered between wide
     empty margins. A portrait box + object-fit:cover crops the empty sides and
     keeps the full standing figure, sized for mobile (was a 2251px giant). */
  .uc-bg-model {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    display: block;
    width: 62%;
    max-width: 240px;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 28%;
    margin: 0 auto var(--sp-sm);
  }

  /* 5 outfit cards as an upright 2-col grid (2-2-1), last card centered. */
  .uc-cards {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-md);
    align-items: start;
    justify-items: center;
    padding: var(--sp-md);
  }

  .uc-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    /* !important: beats `.uc-card:nth-child(n){ transform: rotate() }` so cards
       stand upright instead of inheriting the desktop fan rotation. */
    transform: none !important;
    width: 100%;
    max-width: 170px;
  }

  /* Odd 5th card spans both columns, centered. */
  .uc-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  .uc-ribbons {
    position: relative;
    bottom: auto;
    margin: var(--sp-md) 0 0;
  }

  .uc-ribbon span {
    animation: marquee-ltr 15s linear infinite;
  }

  .uc-ribbon--rtl span {
    animation: marquee-rtl 15s linear infinite;
  }

  @keyframes marquee-ltr {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }

  @keyframes marquee-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Waitlist CTA: stack form on mobile */
  .waitlist-form {
    flex-direction: column;
    align-items: center;
  }
  .waitlist-input,
  .waitlist-btn {
    width: 100%;
    max-width: 360px;
  }
  /* Reset flex-basis: in a column flex container it maps to the main (vertical)
     axis, so the input's `flex: 1 1 260px` would otherwise stretch it to 260px tall. */
  .waitlist-input {
    flex: none;
  }

  /* Before/After: stack */
  .ba-grid {
    grid-template-columns: 1fr;
  }

  /* Footer: tighter padding */
  .site-footer {
    padding: var(--sp-lg) 0 var(--sp-md);
  }

  /* Fabric textures: smaller on mobile */
  .fabric-swatch {
    width: 50px;
    height: 50px;
    opacity: 0.1;
  }
}

/* ============================================
   Small Mobile (< 480px)
   ============================================ */
@media (max-width: 479px) {
  /* Hero: compact model band on small phones (height now auto, see 767 block) */
  .hero-model-queue {
    height: 320px;
  }

  .hero-slogan h1 {
    font-size: 1.25rem;
  }

  .wardrobe-card {
    width: 120px;
    min-width: 120px;
  }

  /* Container: less padding */
  .container {
    padding: 0 var(--sp-sm);
  }

  /* Section spacing tighter */
  section {
    padding: var(--sp-lg) 0;
  }
}

/* Glass dropdown: drop the scale/slide motion for reduced-motion users
   (mobile-scoped — the dropdown only ever renders <= 767px) */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .mobile-menu,
  .mobile-menu.open {
    transform: none;
    transition: opacity 0.2s ease;
  }
}

/* iPad / touch tablets only (768-1024, coarse pointer; excludes phones <=767 and
   desktop mice). The use-cases model source is a 1672x941 landscape with the
   figure centred in wide empty margins. Desktop's `contain` + the global
   img max-width:100% letterboxes it tiny on a portrait tablet. A portrait box
   + `cover` crops the empty sides and scales the standing figure up, centred. */
@media (min-width: 768px) and (max-width: 1024px) and (pointer: coarse) {
  .uc-bg-model {
    width: clamp(440px, 60vw, 660px);
    height: 90%;
    object-fit: cover;
    object-position: 50% 30%;
  }
}

/* iPad: centre the 5-card portrait fan (desktop's left:45% lands it ~39px right
   of centre on a narrow tablet). Each card pivots on its own bottom-centre
   (transform-origin 50% 100%), so placing the card centre at 50% puts the pivot
   (and the whole fan) on the section centre. Card width differs by regime
   (160px <=1023, 180px at 1024), so the half-width offset differs. Desktop
   (mouse = fine pointer) keeps left:45%, untouched. */
@media (min-width: 768px) and (max-width: 1023px) and (pointer: coarse) {
  .uc-card {
    left: calc(50% - 80px);
  }
}
@media (min-width: 1024px) and (max-width: 1024px) and (pointer: coarse) {
  .uc-card {
    left: calc(50% - 90px);
  }
}