/* ==========================================================================
   TEACUP EMPIRE — Responsive overrides
   Checked at 1920/1600/1440/1280/1024/834/768/430/412/390/375/320
   ========================================================================== */

/* ---- ≤1200px : tighten editorial 2-col layouts ---- */
@media (max-width: 1200px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- ≤1024px : collapse most two-column editorial sections ---- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* width:100% is required here: this grid item has no in-flow content
     (its children are all position:absolute) and relies on aspect-ratio for
     sizing — margin-inline:auto without an explicit width disables grid's
     default stretch and collapses the box to 0x0. */
  .hero__dog-wrap { width: 100%; max-width: 420px; margin-inline: auto; }
  .hero__content { text-align: left; }
  .hero__art { order: -1; max-width: 340px; }

  .features-bar { grid-template-columns: repeat(2, 1fr); }
  .features-bar__item:nth-child(2) { border-right: none; }
  .features-bar__item:nth-child(3),
  .features-bar__item:nth-child(4) { border-top: 1px solid var(--color-border); }

  .section-head { grid-template-columns: 1fr; }
  .section-head__aside { max-width: 60ch; }

  .configurator { grid-template-columns: 1fr; }
  .config-result { position: static; }

  .delivery-split { grid-template-columns: 1fr; }
  .editorial-split { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .puppy-detail { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-xl); }
  .footer-brand { grid-column: 1 / -1; }

  .legal-toc { display: none; }

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

/* ---- ≤900px : navbar switches to mobile trigger ---- */
@media (max-width: 900px) {
  .navbar__links,
  .navbar__actions .lang-select-wrap,
  .navbar__actions .btn { display: none; }
  .navbar__menu-btn { display: flex; }

  .hero__stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-md); }

  .steps-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }

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

  .timeline-item { grid-template-columns: 1fr; gap: var(--space-xs); }
}

/* ---- ≤768px : content padding, type scale, filter bar ---- */
@media (max-width: 768px) {
  .filter-bar { position: static; overflow-x: auto; flex-wrap: nowrap; }
  .proof-strip { grid-template-columns: 1fr 1fr; gap: var(--space-md); padding: var(--space-lg) var(--space-md); }
  .final-cta { padding: var(--space-xl) var(--space-md); }
  .story-card { width: min(360px, 86vw); }
}

/* ---- ≤600px : single column everything, tighter nav ---- */
@media (max-width: 600px) {
  .site-header { top: var(--space-xs); padding-inline: var(--space-sm); }
  .navbar { padding: 0.5rem 0.5rem 0.5rem 1rem; }
  .navbar__brand { font-size: 0.92rem; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }

  .cookie-panel { left: var(--space-sm); right: var(--space-sm); max-width: none; margin: 0; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__art { max-width: 260px; }
  .hero__stamp { width: 92px; height: 92px; }
  .hero__deco { width: 36px; height: 36px; }

  .features-bar { grid-template-columns: 1fr; }
  .features-bar__item { border-right: none; border-top: 1px solid var(--color-border); }
  .features-bar__item:first-child { border-top: none; }

  .config-result__actions .btn { width: 100%; }

  .wizard { padding: 1.5rem; border-radius: var(--radius-lg); }
  .wizard__question { font-size: clamp(1.3rem, 1.1rem + 1.5vw, 1.7rem); }
  .wizard__option { padding: 0.7rem 1.15rem; font-size: 0.9rem; }
  .wizard__foot { flex-direction: column; align-items: stretch; }
  .wizard__back { align-self: center; }
  .wizard__continue { width: 100%; margin-left: 0; }
  .wizard__result-actions { max-width: none; }
}

/* ---- ≤400px : smallest phones ---- */
@media (max-width: 400px) {
  .container { padding-inline: 1rem; }
  .puppy-gallery__thumbs button { width: 58px; height: 58px; }
  .scroller__item { width: 82vw; }
}