/* =========================================================
   SAENGÉ — Responsive
   Breakpoints: 1024 / 768 / 560
   ========================================================= */

@media (max-width: 1024px) {
  .hero__grid { gap: var(--space-lg); }
  .hero__stage { min-height: 400px; }

  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .tile--feature { grid-column: span 2; grid-row: span 2; }
  .tile--wide { grid-column: span 2; }
  .tile--tall { grid-row: span 1; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav,
  .header__actions .label { display: none; }

  .nav-toggle { display: grid; }

  .header__inner {
    grid-template-columns: auto 1fr auto;
  }
  .brand { font-size: 1.4rem; }

  /* Mobile slide-down nav */
  .nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    padding: var(--space-md) var(--gutter);
    border-top: 1px solid var(--color-surface-2);
  }
  .nav.is-open .nav__list {
    flex-direction: column;
    gap: 0;
  }
  .nav.is-open .nav__link {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-surface-2);
    font-size: var(--text-lg);
  }

  .nav-toggle.is-open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open .bar:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: none; }
  .hero__stage { order: -1; min-height: 340px; }
  .hero__badge--top { left: 2%; }
  .hero__badge--bot { right: 2%; }

  .product__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .ritual__grid { grid-template-columns: 1fr; gap: var(--space-md); }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .promo__track { font-size: var(--text-xs); }
  /* On narrow screens drop the "use the code" segment (and its separator)
     since the code chip itself is hidden — keeps the bar to clean lines. */
  .promo__track span:nth-child(2),
  .promo__track span:nth-child(3) { display: none; }

  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: 160px;
  }
  .tile--feature,
  .tile--wide {
    grid-column: span 1;
  }
  .tile--feature { grid-row: span 2; }

  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }

  .buy-row .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; }
  .newsletter__form { flex-direction: column; }
  .newsletter__form .btn { width: 100%; }
}