/* ============================================================
   NSLC site pages (hub, exercises, media, resources)
   ============================================================ */

:root {
  --navy-950:#001226; --navy-900:#001A33; --navy-800:#00274C; --navy-700:#0B3A66;
  --maize:#FFCB05; --sky:#4CC9F0; --mint:#2EC4B6; --coral:#FF5A5F;
  --paper:#F7F9FC; --ink:#10243A;
  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:var(--font-body); color:#fff; min-height:100vh;
  background:
    radial-gradient(1100px 550px at 85% -10%, rgba(76,201,240,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255,203,5,.12), transparent 55%),
    var(--navy-900);
  padding:6vh 6vw 10vh;
}
.wrap { max-width:1200px; margin:0 auto; }

.topnav { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:5vh; }
.topnav a {
  font-family:var(--font-display); font-weight:700; font-size:13.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.75); text-decoration:none;
  padding:.5em 1.1em; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  transition:all .2s;
}
.topnav a:hover { color:var(--navy-800); background:var(--maize); border-color:var(--maize); }
.topnav a.active { color:var(--navy-800); background:#fff; border-color:#fff; }
.topnav .home { margin-right:auto; border:none; padding-left:0; color:var(--maize); letter-spacing:.15em; text-transform:uppercase; font-size:12.5px; }
.topnav .home:hover { background:none; color:#fff; }

.kicker { font-family:var(--font-display); letter-spacing:.22em; text-transform:uppercase; color:var(--maize); font-weight:700; font-size:clamp(12px,1.3vw,15px); }
h1 { font-family:var(--font-display); font-size:clamp(30px,4.4vw,58px); line-height:1.06; margin:.5rem 0 1rem; }
.sub { opacity:.75; max-width:68ch; line-height:1.6; font-size:clamp(15px,1.5vw,18px); }

.section { margin-top:6vh; }
.section > h2 { font-family:var(--font-display); font-size:clamp(20px,2.4vw,30px); margin-bottom:1.2rem; }
.section > h2 .tag { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--maize); display:block; margin-bottom:.4rem; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.cards.four { grid-template-columns:repeat(4,1fr); }
.card, a.card {
  display:flex; flex-direction:column; gap:.6rem; text-decoration:none; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:18px; padding:1.6rem 1.5rem;
  transition:transform .2s, border-color .2s, background .2s;
}
a.card:hover { transform:translateY(-5px); border-color:var(--c,var(--maize)); background:rgba(255,255,255,.1); }
.card .num { font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.2em; color:var(--c,var(--maize)); }
.card h3 { font-family:var(--font-display); font-size:clamp(17px,1.9vw,23px); line-height:1.2; }
.card p { opacity:.75; font-size:14.5px; line-height:1.55; }
.card .go { margin-top:auto; padding-top:.9rem; font-weight:700; color:var(--c,var(--maize)); font-size:13.5px; }
.card .icon { font-size:30px; }

.panel {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:1.8rem;
}
.panel h3 { font-family:var(--font-display); color:var(--maize); margin-bottom:.8rem; font-size:clamp(16px,1.8vw,21px); }
.panel p, .panel li { font-size:15px; line-height:1.6; opacity:.9; }
.panel ul { padding-left:1.2em; }
.panel li { margin-bottom:.4em; }

/* exercise worksheets */
.worksheet { margin-bottom:2.2rem; }
.worksheet .ws-head { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:.7rem; }
.worksheet .ws-head h3 { font-family:var(--font-display); font-size:clamp(18px,2vw,24px); }
.worksheet .ws-head .when { font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--sky); font-weight:700; }
.worksheet .desc { opacity:.8; font-size:15px; line-height:1.6; margin-bottom:.9rem; max-width:75ch; }
.field { margin-bottom:1rem; }
.field label { display:block; font-weight:600; font-size:14px; margin-bottom:.4rem; color:var(--maize); }
.field textarea, .field input[type=text] {
  width:100%; font:inherit; font-size:15px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:.8em 1em; resize:vertical; min-height:2.6em;
}
.field textarea { min-height:5.5em; }
.field textarea:focus, .field input:focus { outline:2px solid var(--maize); border-color:transparent; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.save-note { font-size:12.5px; opacity:.55; margin-top:.4rem; }

/* tables (rubric, vocab) */
table { width:100%; border-collapse:collapse; font-size:14.5px; }
th, td { text-align:left; padding:.7em .9em; border-bottom:1px solid rgba(255,255,255,.12); vertical-align:top; line-height:1.5; }
th { font-family:var(--font-display); color:var(--maize); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
td b, td strong { color:var(--sky); }

/* media library */
.media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.media-card {
  border:2px dashed rgba(255,255,255,.3); border-radius:16px; padding:1.4rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.media-card .mtype { font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; }
.media-card .mtype.img { color:var(--sky); } .media-card .mtype.vid { color:var(--coral); } .media-card .mtype.chart { color:var(--mint); }
.media-card h4 { font-size:15.5px; line-height:1.3; }
.media-card p { font-size:13.5px; opacity:.7; line-height:1.5; }
.media-card .dest { margin-top:auto; padding-top:.6rem; font-size:12px; opacity:.55; }

footer { margin-top:9vh; opacity:.45; font-size:13px; text-align:center; line-height:1.8; }

@media (max-width:960px){
  .cards, .cards.four, .media-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .cards, .cards.four, .media-grid, .grid-2 { grid-template-columns:1fr; }
}