/* ════════════════════════════════════════════════════════════════════════════
   LATTICE — responsive.css
   Universal responsive overrides for mobile, tablet, and desktop.
   Loaded AFTER per-page CSS so these rules win at equal specificity.
   ════════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   TOUCH DEVICES — Disable custom cursor entirely on touch
   No mouse → cursor system makes no sense and adds 2 floating elements.
   ────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  body,
  a, button, input, textarea, label,
  .session, .day, .archive-row, .alum, .dir-row, .company,
  .course, .article, .principle, .epoch-body, .founder, .fac,
  .role, .offer, .step, .filter, .gal, .travel, .open-day, .item, .book, .path,
  .item, .radio, .field {
    cursor: auto !important;
  }
  .cursor-dot, .cursor-ring { display: none !important; }
}


/* ──────────────────────────────────────────────────────────────────
   MOBILE NAV — Hamburger button (injected by mobile-nav.js)
   Hidden by default; revealed at tablet breakpoint and below.
   ────────────────────────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--lg-border);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(245, 241, 235, 0.06);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.3s, background 0.3s;
}
.nav-hamburger:hover {
  border-color: var(--lg-border-strong);
  background: rgba(245, 241, 235, 0.04);
}
.nav-hamburger span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), opacity 0.2s;
}
.nav-hamburger span:nth-child(1) { top: 14px; }
.nav-hamburger span:nth-child(2) { top: 19px; }
.nav-hamburger span:nth-child(3) { top: 24px; }
.nav-open .nav-hamburger span:nth-child(1) { transform: translate(-50%, 5px) rotate(45deg); background: var(--accent); }
.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
.nav-open .nav-hamburger span:nth-child(3) { transform: translate(-50%, -5px) rotate(-45deg); background: var(--accent); }


/* ──────────────────────────────────────────────────────────────────
   MOBILE NAV OVERLAY — Full-screen Liquid Glass menu
   Triggered by toggling body.nav-open.
   ────────────────────────────────────────────────────────────────── */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 48;             /* below the nav pill itself (50) so the pill stays clickable */
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(.2,.7,.2,1);
}
.nav-open .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}
.nav-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  padding: 4rem 1.5rem 2rem;
  width: 100%;
  max-width: 480px;
}
.nav-overlay-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s 0.1s cubic-bezier(.2,.7,.2,1), transform 0.5s 0.1s cubic-bezier(.2,.7,.2,1);
}
.nav-open .nav-overlay-links { opacity: 1; transform: translateY(0); }
.nav-overlay-links a {
  color: var(--ink-soft);
  font-style: italic;
  font-weight: 300;
  transition: color 0.3s;
  display: inline-block;
  position: relative;
}
.nav-overlay-links a:hover,
.nav-overlay-links a.active { color: var(--accent); }
.nav-overlay-cta-wrap {
  margin-top: 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s 0.2s cubic-bezier(.2,.7,.2,1), transform 0.5s 0.2s cubic-bezier(.2,.7,.2,1);
}
.nav-open .nav-overlay-cta-wrap { opacity: 1; transform: translateY(0); }
.nav-overlay-cta-wrap .nav-cta { font-size: 1rem; padding: 1.05rem 1.8rem; }
.nav-overlay-cta-wrap .nav-cta-arrow { font-size: 1.1rem; }

/* Lock body scroll while menu is open */
body.nav-open { overflow: hidden; }


/* ──────────────────────────────────────────────────────────────────
   TABLET — viewports up to 1024px
   Show hamburger; hide inline nav links; keep CTA visible but smaller.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-hamburger { display: block; }
  .nav-pill .nav-links { display: none !important; }
  .nav-pill > .nav-cta {
    padding: 0.5rem 0.85rem;
    font-size: 0.76rem;
  }

  /* Three-up card grids reflow to two-up */
  .faculty-grid,
  .principles,
  .featured-grid,
  .sessions-grid,
  .roles,
  .offers,
  .paths,
  .books,
  .alum-grid,
  .travel-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Studio week schedule — 7 days collapses to 4 rows of 2 */
  .schedule-grid { grid-template-columns: 1fr 1fr 1fr 1fr !important; }

  /* Companies grid — 4 to 3 cols on tablet */
  .companies-grid { grid-template-columns: 1fr 1fr 1fr !important; }
}


/* ──────────────────────────────────────────────────────────────────
   MOBILE — viewports up to 720px
   Stack everything, hide CTA from nav pill (it lives in the overlay).
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Apply CTA hidden in pill — accessible via overlay */
  .nav-pill > .nav-cta { display: none !important; }

  /* Hero — tighten and stack */
  .hero {
    min-height: 80vh !important;
    padding: 6rem var(--gutter) 3rem !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .hero-headline {
    font-size: clamp(2.4rem, 12vw, 4rem) !important;
    max-width: 100% !important;
  }
  .hero-sub {
    font-size: 1rem;
    margin-top: 1.5rem;
  }
  .hero-meta { display: none !important; }

  /* Hero stats — 2 cols, tighter */
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
    padding: 1rem !important;
  }
  .hero-stats > div { padding: 0.5rem 0.7rem !important; min-width: 0 !important; }
  .hero-stats .num { font-size: 1.4rem !important; }

  /* Stats strip — 2 cols on mobile (was 4) */
  .stats { grid-template-columns: 1fr 1fr !important; gap: 0.7rem !important; }
  .stat { padding: 1.6rem 1.2rem !important; }
  .stat-num { font-size: 2.4rem !important; }

  /* Section heads — stack */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .section-title { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; }
  .section-aside { max-width: 100%; }

  /* All multi-col card grids → single col */
  .faculty-grid,
  .principles,
  .featured-grid,
  .courses-grid,
  .sessions-grid,
  .roles,
  .offers,
  .paths,
  .books,
  .alum-grid,
  .travel-grid,
  .founders,
  .companies-grid {
    grid-template-columns: 1fr !important;
  }

  /* Studio week schedule — 2 cols of 4 */
  .schedule-grid { grid-template-columns: 1fr 1fr !important; }

  /* Visit gallery — stack */
  .gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: 240px repeat(4, 180px) !important;
    height: auto !important;
  }
  .gal.large { grid-row: auto !important; }

  /* Form — stack rows + radios */
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .radio-group { grid-template-columns: 1fr !important; }

  /* Apply page two-column body — stack */
  .body {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: clamp(2rem, 5vh, 3rem) var(--gutter) clamp(3rem, 6vh, 4rem) !important;
  }
  .aside {
    position: static !important;
    margin-bottom: 2rem;
  }

  /* Apply nav meta — hide step number on mobile to save room */
  .nav-meta .step { display: none; }

  /* CTA — stack */
  .cta-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    align-items: start !important;
  }
  .cta-headline { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; }
  .cta-aside { max-width: 100% !important; }

  /* Footer — stack */
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
  .foot-base, .foot-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.7rem !important;
  }
  .foot-watermark { display: none !important; }

  /* Long editorial row tables — collapse to compact stacked layout */
  .article,
  .archive-row,
  .dir-row,
  .item {
    grid-template-columns: 60px 1fr 40px !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 0.4rem 1rem !important;
  }
  .article-meta,
  .archive-num, .archive-date,
  .dir-num,
  .item-num { grid-column: 1 !important; grid-row: 1 !important; }
  .article-title,
  .archive-title,
  .dir-name,
  .item-title { grid-column: 2 !important; grid-row: 1 !important; }
  .article-excerpt,
  .archive-host, .archive-len, .archive-views,
  .dir-role, .dir-cohort,
  .item-author, .item-tag, .item-yr {
    grid-column: 1 / 3 !important;
    grid-row: auto !important;
    text-align: left !important;
  }
  .article-arrow,
  .archive-arrow,
  .dir-arrow,
  .item-arrow {
    grid-column: 3 !important;
    grid-row: 1 / -1 !important;
    align-self: center !important;
  }

  /* Curriculum tracks (landing) */
  .track {
    grid-template-columns: 50px 1fr 40px !important;
  }
  .track-desc { grid-column: 2 / 3 !important; }

  /* Featured article (journal) — stack */
  .featured { grid-template-columns: 1fr !important; gap: 2rem !important; }

  /* Callout (journal/library) — stack */
  .callout-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }

  /* Newsletter form — stack input + button */
  .news-form, .cta-form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.7rem !important;
  }
  .news-form input, .cta-form input { min-width: 0 !important; width: 100% !important; }
  .news-form button, .cta-form button { width: 100%; justify-content: center; }

  /* Tighten card padding */
  .course, .alum, .fac, .session, .role, .principle, .path, .featured-cover, .epoch-body, .founder, .travel, .open-day, .book, .company {
    padding: 1.4rem !important;
  }

  /* Studio broadcast card — stack (was 3-col grid) */
  .broadcast {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    text-align: center;
    padding: 1.2rem !important;
  }
  .broadcast-thumb { margin: 0 auto; }
  .broadcast-cta {
    border-left: none !important;
    border-top: 1px solid var(--glass-border, var(--lg-border));
    padding-left: 0 !important;
    padding-top: 0.8rem;
    align-items: center !important;
  }
  .viewing { grid-template-columns: 1fr 1fr !important; padding: 1.2rem !important; }

  /* Cohort badge / corner brackets — keep but tighter */
  .alum-cohort-tag { font-size: 0.58rem !important; }

  /* Pull quote — tighten */
  .pull-text, .quote-text { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; }
  .pull-mark, .quote-mark { font-size: clamp(4rem, 18vw, 7rem) !important; }

  /* Apply success card — pad less */
  .success-meta { padding: 1rem 1.2rem !important; }
}


/* ──────────────────────────────────────────────────────────────────
   EXTRA SMALL — viewports up to 380px
   Tighten further: nav pill shrinks, single-column stats.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .nav-pill {
    padding: 0.5rem 0.55rem 0.5rem 0.95rem;
    gap: 0.7rem;
  }
  .nav-brand {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    gap: 0.4rem;
  }
  .nav-mark { width: 18px; height: 18px; }
  .nav-hamburger { width: 36px; height: 36px; }
  .nav-hamburger span { width: 14px; }

  .hero { padding: 5rem 1rem 2.5rem !important; }
  .hero-headline { font-size: clamp(2rem, 11vw, 3rem) !important; }
  .hero-stats { grid-template-columns: 1fr !important; }
  .stats { grid-template-columns: 1fr !important; }
  .schedule-grid { grid-template-columns: 1fr !important; }
}


/* ──────────────────────────────────────────────────────────────────
   LANDSCAPE PHONE — short height
   When the device is rotated to landscape, the hero gets squished.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 920px) and (max-height: 500px) {
  .hero {
    min-height: auto !important;
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
  }
  .hero-headline { font-size: clamp(2rem, 6vw, 3rem) !important; }
  .hero-meta { display: none !important; }
}