/* DATA — section & shell classes (public site), from the DATA Design System css/ layer.
   Composition per design/specs/core-sections.md and page-compositions.md. */

/* ---- TopNav (green utility bar — brand green BOTH themes) ---- */
.topnav { background: var(--ui-cta-bg); color: var(--data-white); }
.topnav__inner { display: flex; align-items: center; justify-content: space-between; min-height: 41px; gap: var(--space-2); }
.topnav__tagline { font-size: var(--fs-body-s); white-space: nowrap; }
.topnav__links { display: flex; gap: var(--space-2); }
.topnav__link { color: var(--data-white); font-size: var(--fs-body-s); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap; }
.topnav__link:hover { text-decoration: underline; }

/* ---- Header ---------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--ui-border); background: var(--ui-header-bg);
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease;
}
.nav { display: flex; align-items: center; gap: var(--space-4); min-height: 76px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { height: 50px; width: auto; display: block; }
.brand__logo--dark { display: none; }
.brand__logo--simple { display: none; } /* full lockup by default; Simple mark swaps in ≤560px */
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }
/* …but the Simple mark stays hidden above 560px in dark too. Without this the rule above
   (0,3,0) outranks the plain .brand__logo--simple (0,1,0) and BOTH lockups render. (cd, 20 Aug) */
:root[data-theme="dark"] .brand__logo--simple { display: none; }
.nav__links { display: flex; gap: var(--space-3); margin-inline-start: auto; }
.nav__links a { color: var(--ui-text); text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--fs-body-m); }
.nav__links a:hover { color: var(--ui-brand); }
.nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--ui-border); background: var(--ui-panel);
  color: var(--ui-text-muted); cursor: pointer; padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.theme-toggle:hover { color: var(--ui-brand); border-color: var(--ui-brand); }
.theme-toggle svg { display: block; }

/* ---- Mobile nav (<details> disclosure — zero JS, repo-preferred pattern) ---- */
.nav-menu { display: none; position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: var(--radius-card); border: 1px solid var(--ui-border); background: var(--ui-panel); color: var(--ui-text); display: inline-flex; align-items: center; justify-content: center; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { border-color: var(--ui-brand); color: var(--ui-brand); }
.nav-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: var(--space-1); display: flex; flex-direction: column; z-index: 20; }
.nav-menu__panel a { padding: 12px var(--space-2); color: var(--ui-text); text-decoration: none; font-weight: var(--fw-semibold); border-radius: var(--radius-card); min-height: 44px; display: flex; align-items: center; }
.nav-menu__panel a:hover { background: var(--ui-brand-soft); color: var(--ui-brand); }
.nav-menu__login { color: var(--ui-brand); border-top: 1px solid var(--ui-border); border-radius: 0; margin-top: 4px; }

/* ---- Hero -------------------------------------------------------- */
.hero { padding-block: var(--space-6); }
.hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-6); align-items: center; }
.hero__caption { margin-bottom: var(--space-2); display: inline-block; }
.hero h1 { margin-bottom: var(--space-3); max-width: 14ch; }
.hero__lead { font-size: 20px; color: var(--ui-text); max-width: 46ch; margin-bottom: var(--space-4); }
.hero__cta { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.motif-svg { width: 100%; max-width: 320px; height: auto; }

/* ---- Sections ------------------------------------------------------ */
.section { padding-block: var(--space-6); }
.section--band { background: var(--ui-surface); transition: background .25s ease; }
.section__head { max-width: 52ch; margin-bottom: var(--space-4); }
.section__head h2 { margin-block: var(--space-2); }
.section__head p { color: var(--ui-text); }
.section-text { display: flex; flex-direction: column; gap: 48px; } /* kit Section Text: head→paragraph gap 48 (195:7373) */
.section-text__head { display: flex; flex-direction: column; gap: 8px; align-items: inherit; } /* kit: head rows gap 8 */
.section-text--center { align-items: center; text-align: center; }
.section-text--right { align-items: flex-end; text-align: right; }
.content__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.content--right .content__grid > :first-child { order: 2; }
.content--center .content__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.content--center .section__head { max-width: 64ch; margin-inline: auto; text-align: center; }
.content__media { min-height: 280px; align-self: stretch; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: center; margin-top: var(--space-3); }

/* ---- Stats row -------------------------------------------------------- */
.stats { background: var(--ui-surface); padding-block: var(--space-4); border-block: 1px solid var(--ui-border); transition: background .25s ease, border-color .25s ease; }
.stats__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }

/* ---- CTA band (brand green both themes → whites intentional) ----------- */
.cta { background: var(--ui-cta-bg); color: var(--data-white); padding-block: var(--space-6); transition: background .25s ease; }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.cta h2 { color: var(--data-white); max-width: 20ch; }
.cta p { color: rgba(255,255,255,.85); max-width: 40ch; margin-top: var(--space-2); }
.cta__buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Page header band (interior pages) ----------------------------------- */
.page-header { background: var(--ui-surface); padding-block: var(--space-4); transition: background .25s ease; }
.page-header__lead { color: var(--ui-text-muted); margin-top: var(--space-1); max-width: 60ch; }

/* ---- Logos strip ------------------------------------------------------------ */
.logos-strip { padding-block: var(--space-4); }
/* ---- Logo strip: one band, labelled groups (thread #21, cd 20 Aug) ------- */
.logos-strip__groups {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-4); align-items: flex-start;
}
.logos-strip__group + .logos-strip__group {
  border-left: 1px solid var(--ui-border); padding-left: var(--space-4);
}
@media (max-width: 640px) {
  .logos-strip__group + .logos-strip__group { border-left: 0; padding-left: 0; }
}
/* Real marks are dark-ink-on-transparent → give them a light plate in dark mode (never
   CSS-invert a logo). Scoped to slots that hold an <img>, so placeholder slots are untouched. */
:root[data-theme="dark"] .logos-strip__slot:has(img) {
  background: var(--data-white); border-style: solid; padding: 0 var(--space-2);
}
.logos-strip__label { text-align: center; font-size: var(--fs-body-s); color: var(--ui-text-muted); margin-bottom: var(--space-2); }
.logos-strip__row { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.logos-strip__slot {
  min-width: 120px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ui-text-muted); font-size: var(--fs-body-s);
  border: 1px dashed var(--ui-border); border-radius: var(--radius-card); padding: 0 var(--space-2);
}
.logos-strip__slot img { max-height: 40px; width: auto; }

/* ---- Team grid ------------------------------------------------------------- */
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

/* ---- Motif (dot cluster) ----------------------------------------------------- */
.motif-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.motif-grid span { aspect-ratio: 1; border-radius: 50%; }

/* ---- Footer (dark slate band — Amy's choice) ---------------------------------- */
.site-footer {
  background: var(--ui-footer-bg); color: var(--ui-footer-text);
  padding-block: var(--space-6) var(--space-3); transition: background .25s ease;
}
.site-footer a { color: var(--ui-footer-muted); text-decoration: none; transition: color .15s, border-color .15s, background .15s; }
.site-footer a:hover { color: var(--data-white); }
.footer__top { display: grid; grid-template-columns: 1.7fr repeat(5, 1fr); gap: var(--space-4) var(--space-3); align-items: start; }
.footer__brand { max-width: 36ch; }
.footer__brand img { height: 48px; width: auto; margin-bottom: var(--space-2); display: block; }
.footer__brand p { color: var(--ui-footer-muted); font-size: var(--fs-body-s); line-height: 1.5; }
.footer__funder { color: var(--ui-footer-muted); font-size: var(--fs-body-s); line-height: 1.5; margin-top: var(--space-3); }
.footer__funder strong { color: var(--data-white); font-weight: var(--fw-semibold); }
.footer__connect { display: flex; gap: 10px; margin-top: var(--space-3); }
.footer__connect a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-pill); color: var(--ui-footer-text);
}
.footer__connect a:hover { border-color: var(--data-white); color: var(--data-white); background: rgba(255,255,255,.08); }
.footer__connect svg { display: block; }
.footer__connect .icon { width: 18px; height: 18px; }
.footer__col h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-body-m); color: var(--data-white); margin: 0 0 var(--space-2); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer__col a { font-size: var(--fs-body-s); }
.footer__bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.15);
}
.footer__legal { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.footer__legal a, .footer__copy { font-size: var(--fs-body-s); color: var(--ui-footer-muted); }

/* ---- Auth (the portal door) ------------------------------------------------------ */
.auth__split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth__media {
  background:
    radial-gradient(circle at 30% 30%, var(--ui-dot-green) 0 9px, transparent 10px) 0 0 / 56px 56px,
    radial-gradient(circle at 70% 70%, var(--data-terracotta) 0 6px, transparent 7px) 28px 28px / 56px 56px,
    var(--data-green);
}
.auth__panel { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); max-width: 52ch; justify-content: center; }
.auth__brand { margin-bottom: var(--space-3); display: inline-flex; }
.auth__brand img { height: 36px; display: block; }
.auth__title { font-size: var(--fs-h2); }
.auth__lead { color: var(--ui-text-muted); }
.auth__form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.auth__meta { font-size: var(--fs-body-s); color: var(--ui-text-muted); }
.auth__back { font-size: var(--fs-body-s); color: var(--ui-text-muted); margin-top: var(--space-3); }
.auth__confirm { padding: var(--space-3) 0; }

/* ---- Responsive -------------------------------------------------------------------- */
@media (max-width: 820px) {
  .hero__grid, .content__grid, .auth__split { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .team__grid, .stats__row { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .nav__links { display: none; }
  .nav-menu { display: block; }
  .nav__actions > .btn--filled { display: none; } /* Partner login moves into the disclosure menu */
  .content--right .content__grid > :first-child { order: 0; }
  .brand__logo { height: 42px; }
  .auth__media { display: none; } /* the decorative panel folds away on narrow screens */
  .auth__panel { padding: var(--space-4) var(--space-3); }
}

/* ---- Designed mobile (≤560px) — primary surface, not squeezed reflow -------------
   DATA's partner communities + students are mobile-primary; this is a deliberate
   mobile layout composing the SAME components/tokens (DESIGN_GUARDRAILS § Mobile). */
@media (max-width: 560px) {
  /* Compact sticky header; utility bar folds away (Forge/Contact reachable via the footer) */
  .topnav { display: none; }
  .site-header { position: sticky; top: 0; z-index: 50; }
  .nav { min-height: 60px; gap: var(--space-2); }
  .brand__logo--full { display: none; }
  :root[data-theme="dark"] .brand__logo--full { display: none; }
  .brand__logo--simple.brand__logo--light { display: block; height: 34px; }
  :root[data-theme="dark"] .brand__logo--simple.brand__logo--light { display: none; }
  :root[data-theme="dark"] .brand__logo--simple.brand__logo--dark { display: block; height: 34px; }

  .wrap { padding-inline: var(--space-2); }

  /* Hero: smaller headline, full-width stacked CTAs, smaller motif */
  .hero { padding-block: var(--space-4); }
  .hero__grid { gap: var(--space-3); }
  .hero .display { font-size: clamp(2rem, 10vw, 2.6rem); max-width: 16ch; }
  .hero__lead { font-size: var(--fs-body-m); margin-bottom: var(--space-3); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .motif-svg { max-width: 180px; }

  /* Stats stay 2×2; tighten the numerals */
  .stats { padding-block: var(--space-4); }
  .stat-card__value { font-size: 2rem; }

  .section { padding-block: var(--space-4); }
  .section__head h2, .cta h2 { font-size: clamp(1.6rem, 7vw, 2rem); }

  /* CTA: stack, buttons full-width */
  .cta__buttons { width: 100%; flex-direction: column; align-items: stretch; }
  .cta__buttons .btn { width: 100%; justify-content: center; }

  /* Logos strip: slots go full-width so nothing overflows */
  .logos-strip__row { gap: var(--space-2); }
  .logos-strip__slot { min-width: 0; width: 100%; }

  /* Footer: single column */
  .footer__top { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; gap: var(--space-2); align-items: flex-start; }
}

/* ---- News item byline (page-compositions.md — news item shell) -----------
   Text-only by design: "Name · 3 September 2026". No avatar — it would imply we
   hold profile images, and person-thumb currently renders an empty grey square. */
.page-header__byline {
  font-size: var(--fs-body-s); color: var(--ui-text-muted-strong); margin-top: 8px;
}