/* ==========================================================================
   ZARREL — Responsive overrides
   Base layout lives in style.css (desktop-first floating card). These
   breakpoints tune the card size, aspect ratio, page gutters and nav for
   smaller screens. Goal: elegant spacing, rounded corners preserved, zero
   horizontal scroll at 375 / 768 / 1024 / 1440.
   ========================================================================== */

/* --- Large desktop: slightly wider card --------------------------------- */
@media (min-width: 1440px) {
  :root {
    --card-max-width: 960px;
    --page-gutter: 3rem;
  }
}

/* --- Small desktop / large tablet (<= 1024px) --------------------------- */
@media (max-width: 1024px) {
  :root {
    --card-max-width: 820px;
    --page-gutter: 2rem;
  }
}

/* --- Tablet (<= 768px) -------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --card-max-width: 100%;
    --card-aspect-ratio: 16 / 9;
    --page-gutter: 1.5rem;
    --illu-aspect: 4 / 3;
  }

  .navbar {
    padding: 0.75rem 1.5rem;
  }

  .navbar__links {
    gap: clamp(0.9rem, 3vw, 1.6rem);
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero {
    gap: clamp(1.5rem, 4vw, 2.25rem);
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__headline {
    max-width: 24ch;
  }

  .story__title {
    max-width: 20ch;
  }

  .cta__actions {
    width: 100%;
  }

  .cta__actions .btn {
    flex: 1 1 auto;
    min-width: min(100%, 10rem);
  }
}

/* --- Mobile (<= 600px) -------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --card-max-width: 100%;
    --card-aspect-ratio: 16 / 9;
    --page-gutter: 1rem;
    --radius-card: 22px;
    --illu-aspect: 5 / 4;
  }

  .page {
    padding-top: var(--space-md);
    gap: 1.25rem;
  }

  .navbar {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md);
  }

  .navbar__links {
    gap: 0.6rem 1rem;
  }

  .navbar__link {
    font-size: 0.82rem;
  }

  .hero__content {
    padding: 0 0.25rem;
    gap: var(--space-sm);
  }

  .hero__headline {
    max-width: 100%;
  }

  .hero__subtitle {
    max-width: 100%;
  }

  .stories {
    gap: clamp(3.25rem, 12vw, 4.5rem);
  }

  .story__copy {
    max-width: 100%;
  }

  .story__title,
  .story__text {
    max-width: 100%;
  }

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

  .cta__actions .btn {
    width: 100%;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .site-footer__copy {
    order: 3;
  }
}

/* --- Very small phones (<= 380px): keep card compact -------------------- */
@media (max-width: 380px) {
  :root {
    --card-aspect-ratio: 16 / 10;
  }
}