/* =========================================================
   RESPONSIVE.CSS
========================================================= */

/* ---------------------------------------------------------
   ≤ 1080px — scroll-index hidden already (navigation.css / animations.css)
--------------------------------------------------------- */
@media (max-width: 1080px) {
  .scroll-index { display: none !important; }
}

/* ---------------------------------------------------------
   ≤ 899px — tablet
--------------------------------------------------------- */
@media (max-width: 899px) {
  .hero { min-height: 560px; height: 90svh; justify-content: center; }
  .hero__content { padding-top: clamp(4.5rem, 9vh, 5.5rem); padding-bottom: 0; }

  .scene { padding-block: clamp(3.5rem, 10vh, 5rem); }
  .scene-head { grid-template-columns: 1fr; }

  .journal-grid { grid-template-columns: 1fr; }
  .journal-featured { min-height: 340px; }

  .timeline-item {
    grid-template-columns: 1fr;
    row-gap: .6rem;
    padding-block: clamp(1.25rem, 4vw, 1.75rem);
  }
  .timeline-item__cta { justify-self: start; }
  .timeline-item__year { font-size: 1.6rem; }

  /* the aside column only renders above 900px (see navigation.css) —
     collapse the grid to one column here so it doesn't sit reserving
     empty space and squeezing the link list on tablets/phones. */
  .site-nav__grid { grid-template-columns: 1fr; }

  .panels { grid-template-columns: 1fr; }
  .panel { min-height: 46vh; border-right: none; }

  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-card { border-bottom: 1px solid var(--line); }

  .sidebar-card { position: static; }

  .stats-grid { row-gap: 2rem; }

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

/* Touch devices have no hover — reveal faculty bios and body content by
   default instead of waiting for an interaction that will never fire. */
@media (hover: none) {
  .faculty-card__detail { max-height: 220px; opacity: 1; }
  .btn:hover::before, .btn:focus-visible::before { transform: translateX(-101%); }
  .btn:active::before { transform: translateX(0); }
  .btn:active { color: var(--void); }
}

/* ---------------------------------------------------------
   ≤ 720px — large phone / small tablet
--------------------------------------------------------- */
@media (max-width: 720px) {
  .hero { min-height: 520px; height: 88svh; justify-content: center; }
  .hero__content { padding-top: clamp(4rem, 8vh, 5rem); padding-bottom: 0; }
  .hero__title { max-width: 100%; }
  .hero__scroll-cue { display: none; }

  .challenge { grid-template-columns: 1fr; }
  .challenge__media { aspect-ratio: 16/10; }

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

  .quote-block__text { font-size: clamp(1.35rem, 5vw, 1.9rem); }
  .quote-block__mark { font-size: 3.5rem; }

  .finale { min-height: 80vh; }

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

/* ---------------------------------------------------------
   ≤ 599px — phone
--------------------------------------------------------- */
@media (max-width: 599px) {
  :root { --edge: 1.1rem; }

  .topbar { padding-block: 0.8rem; }
  .topbar__logo-img { height: clamp(32px, 9vw, 44px); }
  .topbar__trigger-label { display: none; }
  .topbar__trigger { gap: 0; }

  .hero { height: 82svh; min-height: 460px; }
  .hero__title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); line-height: 1.16; }
  .hero__tw-line { white-space: normal; }
  .hero__content { padding-top: clamp(3rem, 6vh, 3.5rem); }
  .hero__lede { max-width: 34ch; }
  .hero__cta-row { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .hero__dates { flex-direction: column; gap: .5rem; }

  .marquee__thumb { width: 36px; height: 36px; }
  .marquee__name { font-size: 1rem; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .stat__value { font-size: clamp(2.4rem, 12vw, 3.2rem); }

  .faculty-grid { grid-template-columns: repeat(2, 1fr); }
  .faculty-card__detail { max-height: 220px; opacity: 1; }
  .faculty-card__bio { display: none; }
  .faculty-card__name { font-size: 1.1rem; }
  .faculty-card__role { font-size: .58rem; padding: .25rem .5rem; top: .7rem; left: .7rem; }

  .panel { padding: 1.5rem; min-height: 42vh; }
  .panel__desc { max-width: none; }

  .site-nav__link-title { font-size: 1.6rem; }
  .site-nav__link-sub { font-size: .78rem; }
  .site-nav__row { gap: .5rem; }
  .site-nav__expand { width: 34px; height: 34px; }
  .site-nav__grid { padding-inline: var(--edge); }

  .event-modal__panel { grid-template-columns: 1fr; }
  .event-modal__media { min-height: 130px; }

  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .site-footer__social { align-self: center; }
  
}

/* ---------------------------------------------------------
   ≤ 380px — very small phones
--------------------------------------------------------- */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(1.5rem, 8vw, 2rem); line-height: 1.12; }
  .hero__lede { margin-top: .85rem; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Landscape phones — hero shouldn't demand a full 100svh when there's
   barely any vertical room to give it
--------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { height: auto; min-height: 100vh; padding-block: 6rem 3rem; }
  .hero__scroll-cue { display: none; }
}