/* ==========================================================================
   RESPONSIVE OVERRIDES
   Page-shape adjustments that fall outside individual component files.
   Kept centralized for fast cross-component tuning.
   ========================================================================== */

/* ----------------------------------------------------------------------
   XL DESKTOP (>=80em)
   ---------------------------------------------------------------------- */
@media (min-width: 80em) {
  :root {
    --section-y: clamp(5rem, 8vw, 9rem);
  }
}

/* ----------------------------------------------------------------------
   LG DESKTOP (62–80em)
   ---------------------------------------------------------------------- */
@media (max-width: 80em) {
  .container { padding-inline: var(--gutter); }
}

/* ----------------------------------------------------------------------
   TABLET (48–62em)
   ---------------------------------------------------------------------- */
@media (max-width: 62em) {
  :root {
    --header-height: 4rem;
    --header-height-scrolled: 3.25rem;
  }

  .section { padding-block: clamp(2.5rem, 6vw, 5rem); }
  .section-header { margin-block-end: var(--space-8); }

  .hero__title { font-size: clamp(2.25rem, 1.5rem + 5vw, 4.5rem); }
  .page-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 4rem); }

  /* Footer */
  .site-footer { padding-block: var(--space-16) var(--space-10); }

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

/* ----------------------------------------------------------------------
   PHONE (<=48em)
   ---------------------------------------------------------------------- */
@media (max-width: 48em) {
  :root {
    --header-height: 3.75rem;
    --header-height-scrolled: 3rem;
    --gutter: clamp(0.875rem, 3vw, 1.5rem);
  }

  body {
    font-size: 1rem;
    line-height: 1.5;
  }

  h1, .h1 { font-size: clamp(2rem, 1.25rem + 4vw, 3rem); }
  h2, .h2 { font-size: clamp(1.625rem, 1.2rem + 2.4vw, 2.25rem); }

  .section { padding-block: clamp(2rem, 5vw, 3.5rem); }
  .section__header {
    align-items: flex-start;
    text-align: start;
  }
  .section__title { max-inline-size: 18ch; }

  .form { padding: var(--space-5); }

  .hero__inner {
    padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
  }

  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta > .btn { inline-size: 100%; }

  .cta-band__actions { inline-size: 100%; flex-direction: column; }
  .cta-band__actions > .btn { inline-size: 100%; }

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

  .event-card {
    flex-direction: column;
  }
  .event-card__date {
    inline-size: auto;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .event-card__date-day {
    font-size: 1.25rem;
  }

  .countdown { gap: var(--space-2); }
  .countdown__unit { min-inline-size: 3.5rem; padding: var(--space-2) var(--space-3); }
  .countdown__value { font-size: 1.5rem; }
  .countdown__sep { font-size: 1.25rem; }

  .site-footer__top {
    padding-block-end: var(--space-8);
    margin-block-end: var(--space-8);
  }
}

/* ----------------------------------------------------------------------
   SMALL PHONE (<=36em)
   ---------------------------------------------------------------------- */
@media (max-width: 36em) {
  :root {
    --section-y: clamp(1.75rem, 7vw, 3rem);
  }

  .brand__tag { display: none; }
  .display-1 { font-size: clamp(2.5rem, 1.8rem + 5vw, 3.5rem); }

  .hero__media { aspect-ratio: 1 / 1; }

  .timeline { padding-inline-start: 1rem; }
  .timeline__item { padding-inline-start: var(--space-3); }

  .modal__panel { padding: var(--space-5); }

  .stat-card__num { font-size: clamp(2rem, 1.4rem + 3vw, 2.5rem); }

  .toast-host {
    inset-inline: var(--space-3);
    inset-block-end: var(--space-3);
  }

  .nav-cta .btn-text-md { display: none; }
}

/* ----------------------------------------------------------------------
   TINY PHONE (<=24em)
   ---------------------------------------------------------------------- */
@media (max-width: 24em) {
  .brand__text { display: none; }

  .hero__strip {
    gap: var(--space-3);
  }

  .hero__strip-item { flex: 1 1 30%; min-inline-size: 0; }
  .hero__strip-num { font-size: 1.25rem; }
  .hero__strip-label { font-size: 0.625rem; }
}

/* ----------------------------------------------------------------------
   TOUCH DEVICE TWEAKS
   ---------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .input,
  .textarea,
  .select,
  .option {
    min-block-size: 2.75rem; /* iOS minimum tap target */
  }

  /* No hover lift on touch */
  .hover-lift:hover,
  .card--hover:hover,
  .news-card:hover,
  .event-card:hover {
    transform: none;
  }
}

/* ----------------------------------------------------------------------
   LANDSCAPE PHONES (squat viewports)
   ---------------------------------------------------------------------- */
@media (max-height: 31rem) and (orientation: landscape) {
  .hero { min-block-size: auto; }
  .hero__inner { padding-block: var(--space-8); }
}

/* ----------------------------------------------------------------------
   WIDE DESKTOPS (>=96em)
   ---------------------------------------------------------------------- */
@media (min-width: 96em) {
  :root {
    --container-xl: 88rem;
    --gutter: 2.5rem;
  }
}

/* ----------------------------------------------------------------------
   CONTAINER QUERIES (where supported)
   ---------------------------------------------------------------------- */
@container (max-width: 30rem) {
  .card--hover { transform: none; }
}

/* ----------------------------------------------------------------------
   DARK PREFERENCE TWEAKS
   ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .site-header {
    background: rgba(11, 29, 58, 0.85);
  }
  .site-header.is-scrolled {
    background: rgba(11, 29, 58, 0.95);
  }
  .mobile-drawer {
    background: var(--color-navy-950);
  }
}

/* ----------------------------------------------------------------------
   HIGH-DPI SCREENS
   ---------------------------------------------------------------------- */
@media (min-resolution: 2dppx),
       (-webkit-min-device-pixel-ratio: 2) {
  body {
    -webkit-font-smoothing: antialiased;
  }
}