/* ============================================================
   ZETERO — responsive.css
   Breakpoints : tablet ≤ 1024px, mobile ≤ 768px, xs ≤ 480px
   ============================================================ */

/* ── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --nav-h: 64px; }

  .about-preview-grid    { grid-template-columns: 1fr; gap: 3rem; }
  .about-preview-img     { aspect-ratio: 16/9; max-width: 560px; }
  .about-preview-accent  { display: none; }

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

  .story-grid            { grid-template-columns: 1fr; }
  .story-img-col         { position: static; max-width: 480px; }
  .story-img-wrap        { aspect-ratio: 16/9; }

  .contact-layout        { grid-template-columns: 1fr; }
  .contact-info > p      { max-width: 100%; }

  .footer-grid           { grid-template-columns: 1fr 1fr; }
  .footer-brand          { grid-column: 1 / -1; }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Nav */
  .nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: rgba(14,14,14,.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.5rem var(--gutter);
    border-bottom: 1px solid var(--col-border);
    transform: translateY(-110%);
    transition: transform .45s var(--ease-silk);
    pointer-events: none;
  }
  .nav-links.open {
    transform: translateY(0);
    pointer-events: all;
  }
  .nav-links a {
    padding: .9rem 0;
    font-size: .9rem;
    border-bottom: 1px solid var(--col-border);
    width: 100%;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-cta { margin-top: .5rem; border: none !important; }
  .nav-burger { display: flex; }

  /* Hero */
  .hero-title  { font-size: clamp(2.8rem, 10vw, 4.5rem); }
  .hero-scroll { display: none; }

  /* Concept */
  .concept-grid { grid-template-columns: 1fr; }

  /* Values */
  .values-grid { grid-template-columns: 1fr; }

  /* Form */
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Page hero */
  .page-hero { min-height: 45vh; }
}

/* ── Extra small ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; justify-content: center; }

  .cta-band { text-align: left; }

  .swiper-controls { justify-content: flex-start; }
}