/* ============================================
   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;
  }

  /* Hero: stack layout on mobile */
  .hero {
    height: auto;
    min-height: 100vh;
  }

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

  .hero-main {
    flex: none;
    height: 70vh;
    min-height: 500px;
  }

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

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

  .wardrobe-card {
    min-width: 140px;
    flex-shrink: 0;
  }

  .wardrobe-fade {
    display: none;
  }

  .hero-slogan {
    top: calc(var(--nav-height) + var(--sp-sm));
    left: var(--sp-md);
    max-width: 200px;
  }

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

  .hero-look-counter {
    bottom: var(--sp-md);
    left: var(--sp-md);
  }

  /* 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);
  }

  .hiw-track {
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .hiw-panel {
    width: 100%;
    height: auto;
    min-height: 60vh;
    padding: var(--sp-md) 0;
  }

  .hiw-panel-content {
    padding: var(--sp-md);
  }

  .hiw-phone-mockup {
    width: 160px;
    height: 312px;
  }

  /* Use Cases: vertical stack on mobile */
  .use-cases {
    height: auto;
    overflow: visible;
  }

  .uc-bg {
    position: relative;
    min-height: 80vh;
  }

  .uc-bg img {
    min-height: 80vh;
  }

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

  .uc-cards {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-md);
  }

  .uc-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none;
    width: 140px;
  }

  .uc-ribbons {
    position: relative;
    bottom: auto;
    margin: var(--sp-md) 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 mobile */
  .hero-main {
    min-height: 400px;
    height: 60vh;
  }

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

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

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

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