/* ==========================================================================
   StudentHPC — Landing page
   SDSC lineage: blocky institutional grids, hard edges, information first.
   Depends on: tokens.css, base.css, components.css, site.css
   ========================================================================== */

/* ==========================================================================
   HERO
   Two columns: the claim on the left, the machine on the right. The right
   column is a real spec panel, not an illustration -- for a compute provider
   the specs ARE the hero image, and they cost 0 KB.
   ========================================================================== */
.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border-base);
  padding-block: var(--sp-20) var(--sp-16);
  position: relative;
  overflow: hidden;
}

/* Blueprint grid. 1px lines at 4% opacity over white: it reads as engineering
   paper at close range and as flat white from a distance. This is the entire
   decorative budget for the page. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  var(--slate-100) 1px, transparent 1px),
    linear-gradient(to bottom, var(--slate-100) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 20%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 70% 20%, #000 0%, transparent 75%);
  opacity: 0.7;
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sp-16);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-brand);
  background: var(--pine-50);
  border: 1px solid var(--pine-200);
  border-radius: var(--r-1);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-6);
}

.hero__headline {
  font-size: clamp(2.25rem, 5.2vw, var(--fs-5xl));
  font-weight: var(--fw-bold);
  line-height: 1.06;
  letter-spacing: var(--ls-display);
  color: var(--text);
  margin-bottom: var(--sp-6);
}
.hero__headline em {
  font-style: normal;
  color: var(--text-brand);
  /* Underline sits below the baseline, drawn as a border so it never
     collides with descenders the way text-decoration does. */
  box-shadow: inset 0 -0.14em 0 var(--pine-200);
}

.hero__lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: 54ch;
  margin-bottom: var(--sp-8);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }

.hero__note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* --- Spec panel -------------------------------------------------------- */
.hero__panel {
  background: var(--surface-invert);
  border: 1px solid var(--slate-700);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.hero__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--slate-900);
  border-bottom: 1px solid var(--slate-700);
}
.hero__panel-name {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-mono-strong);
  color: var(--white);
  letter-spacing: var(--ls-wide);
}
.hero__panel-body { padding: var(--sp-2) var(--sp-5) var(--sp-5); }

.hero__panel .spec-list__row { border-bottom-color: rgba(255, 255, 255, 0.09); }
.hero__panel .spec-list__key { color: var(--slate-300); }
.hero__panel .spec-list__val { color: var(--white); }

.hero__panel-foot {
  padding: var(--sp-3) var(--sp-5);
  background: var(--slate-900);
  border-top: 1px solid var(--slate-700);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--slate-300);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ==========================================================================
   FACT BAR — four hard facts, no prose
   ========================================================================== */
.factbar { background: var(--surface-subtle); border-bottom: 1px solid var(--border-base); }
.factbar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.factbar__item {
  padding: var(--sp-6) var(--sp-5);
  border-left: 1px solid var(--border-base);
}
.factbar__item:first-child { border-left: none; padding-left: 0; }
.factbar__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.factbar__label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  margin-top: var(--sp-2);
}

/* ==========================================================================
   ABOUT / MISSION
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-16);
  align-items: start;
}
.about__body { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.about__body p + p { margin-top: var(--sp-5); }
.about__body strong { color: var(--text); font-weight: var(--fw-semibold); }

.pledge {
  display: grid;
  gap: 0;
  border: 1px solid var(--border-base);
  border-radius: var(--r-2);
  overflow: hidden;
}
.pledge__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-hair);
  align-items: start;
}
.pledge__item:last-child { border-bottom: none; }
.pledge__icon { color: var(--text-brand); margin-top: 2px; }
.pledge__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin-bottom: var(--sp-1); }
.pledge__desc { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); }

/* ==========================================================================
   HARDWARE SNAPSHOT
   ========================================================================== */
.hw__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.hw-card { display: flex; flex-direction: column; }
.hw-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-hair);
  background: var(--surface-subtle);
}
.hw-card__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--surface);
  border: 1px solid var(--border-base);
  border-radius: var(--r-1);
  color: var(--text-brand);
  flex-shrink: 0;
}
.hw-card__titles { min-width: 0; }
.hw-card__kicker {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}
.hw-card__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin-top: 2px; }
.hw-card__body { padding: var(--sp-4) var(--sp-6) var(--sp-6); flex: 1; }
.hw-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-hair);
}

/* ==========================================================================
   PROCESS — three steps, numbered, blocky
   ========================================================================== */
.process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); counter-reset: step; }
.process__step {
  position: relative;
  padding-top: var(--sp-6);
  border-top: 3px solid var(--border-base);
  transition: border-color var(--motion-base) var(--ease);
}
.process__step:first-child { border-top-color: var(--border-brand); }
.process__num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  display: block;
}
.process__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.process__desc { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); }

/* ==========================================================================
   DOMAINS — eligible research areas
   ========================================================================== */
.domain {
  padding: var(--sp-6);
  border: 1px solid var(--border-base);
  border-radius: var(--r-2);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.domain__icon { color: var(--text-brand); }
.domain__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.domain__desc { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); flex: 1; }
.domain__stack { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }

/* ==========================================================================
   ELIGIBILITY
   ========================================================================== */
.elig__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-16); align-items: start; }
.checklist { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.checklist__item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; font-size: var(--fs-base); color: var(--text); }
.checklist__mark {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--r-1);
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
  border: 1px solid var(--status-ok-bd);
  margin-top: 2px;
  flex-shrink: 0;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band { background: var(--surface-brand-dk); color: var(--text-invert); border-block: 1px solid var(--pine-800); }
.cta-band__grid { display: grid; grid-template-columns: 1.4fr auto; gap: var(--sp-12); align-items: center; }
.cta-band__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); color: var(--white); }
.cta-band__desc { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--pine-200); margin-top: var(--sp-3); max-width: 56ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cta-band .btn--primary { background: var(--white); color: var(--pine-900); border-color: var(--white); }
.cta-band .btn--primary:hover { background: var(--pine-100); border-color: var(--pine-100); color: var(--pine-900); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-12); }
  .hero { padding-block: var(--sp-16) var(--sp-12); }
  .about__grid, .elig__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .factbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factbar__item:nth-child(3) { border-left: none; padding-left: 0; }
  .factbar__item:nth-child(n+3) { border-top: 1px solid var(--border-base); }
  .cta-band__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}
@media (max-width: 768px) {
  .hw__grid, .process { grid-template-columns: minmax(0, 1fr); }
  .hero__actions .btn { width: 100%; }
}
@media (max-width: 480px) {
  .factbar__grid { grid-template-columns: 1fr; }
  .factbar__item { border-left: none; padding-left: 0; border-top: 1px solid var(--border-base); }
  .factbar__item:first-child { border-top: none; }
}