/* =========================================================================
   TIMBER TRAILS — RESPONSIVE LAYER
   Mobile-first foundations live in style.css; this file adapts the layout
   at each breakpoint. Breakpoints follow common device clusters:
   480 (large phone) · 640 (small tablet) · 768 (tablet) · 1024 (laptop)
   1280 (desktop) · 1600 (large desktop) · 1920 (ultra-wide)
   Foldable inner/outer displays are covered by the 640/1024 pair, which
   match the typical folded and unfolded viewport widths.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ULTRA-WIDE ≥ 1920px — cap editorial line lengths, add air
   ------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  .container { max-width: 1520px; }
  .hero__title { max-width: 20ch; }
  .mission__statement { font-size: clamp(2.25rem, 1.6vw + 1.8rem, 2.75rem); }
}

/* -------------------------------------------------------------------------
   LARGE DESKTOP / LAPTOP ≤ 1280px
   ------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .topics__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .library__grid { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   TABLET LANDSCAPE / SMALL LAPTOP ≤ 1024px
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav__links { gap: var(--space-md); }

  .mission__grid,
  .vision__layout,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .vision__quote {
    border-left: none;
    border-top: 2px solid var(--color-sage);
    padding-left: 0;
    padding-top: var(--space-md);
  }

  .topics__grid { grid-template-columns: repeat(2, 1fr); }
  .library__grid { grid-template-columns: repeat(2, 1fr); }
  .future__grid { grid-template-columns: repeat(2, 1fr); }

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

/* -------------------------------------------------------------------------
   TABLET PORTRAIT / FOLDABLE UNFOLDED ≤ 768px
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav__toggle { display: inline-flex; }

  .nav__links {
    position: fixed;
    inset: 0;
    top: 0;
    z-index: var(--z-overlay);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
    background: var(--surface-primary);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out-expo),
                opacity var(--dur-base) var(--ease-soft),
                visibility 0s linear var(--dur-slow);
  }

  .nav__links[data-open='true'] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out-expo),
                opacity var(--dur-base) var(--ease-soft),
                visibility 0s linear 0s;
  }

  .nav__link { font-size: var(--fs-lg); font-family: var(--font-display); }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  .hero__meta { flex-direction: column; gap: var(--space-lg); align-items: flex-start; }

  .topics__grid { grid-template-columns: 1fr; }
  .library__grid { grid-template-columns: repeat(2, 1fr); }
  .future__grid { grid-template-columns: 1fr; }

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

  .newsletter__form { flex-direction: column; }
}

/* -------------------------------------------------------------------------
   LARGE PHONE ≤ 640px — foldable outer display band
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .container { padding-inline: var(--space-md); }

  .section { padding-block: var(--space-2xl); }

  .hero__title { max-width: none; }

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

  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   SMALL PHONE ≤ 480px
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero__stats { gap: var(--space-lg); }
  .hero__eyebrow { margin-bottom: var(--space-md); }
  .newsletter__panel { padding: var(--space-xl) var(--space-md); }
  .contact-form { padding: var(--space-lg); }
  .btn { width: 100%; justify-content: center; }
  .hero__actions .btn { width: 100%; }
}

/* -------------------------------------------------------------------------
   PRINT
   ------------------------------------------------------------------------- */
@media print {
  .site-header, .hero__meta, .theme-toggle, .newsletter, .nav__toggle {
    display: none !important;
  }
  body { color: #000; background: #fff; }
  .section--inverse { background: none !important; color: #000 !important; }
}