/* ==========================================================================
   pages.css — Page/section rules + responsive overrides
   Authority: PRD v1.1 §11.2 (Home), §13 (IA), NFR-003, A11Y-011
   Loaded last; responsive overrides live at the bottom.
   ========================================================================== */

/* --- Page hero / identity (FR-009, §14.1) --- */
.hero {
  padding-block: var(--sp-9) var(--sp-8);
  position: relative;
  background:
    radial-gradient(120% 120% at 100% 0%, var(--c-accent-soft) 0%, transparent 45%),
    linear-gradient(var(--c-bg), var(--c-bg));
}
.hero__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  grid-template-columns: 1fr;
}
.hero__name { font-size: var(--fs-800); margin-bottom: var(--sp-2); letter-spacing: -0.015em; }
.hero__institution { color: var(--c-primary); font-weight: var(--fw-semibold); font-size: var(--fs-400); }
.hero__positioning { font-size: var(--fs-400); color: var(--c-text-muted); margin-top: var(--sp-4); max-width: 52ch; line-height: var(--lh-normal); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__portrait {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Identity card — purposeful hero aside when no approved portrait exists (R-05).
   Built only from approved facts; never a placeholder. */
.hero__card {
  background: var(--c-primary);
  color: var(--c-text-invert);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.hero__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--color-accent-050);
}
.hero__card-eyebrow {
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-050);
  margin-bottom: var(--sp-4);
}
.hero__facts { display: grid; gap: var(--sp-4); }
.hero__facts div { display: grid; gap: 0.15rem; }
.hero__facts dt {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--c-text-invert) 68%, transparent);
}
.hero__facts dd { margin: 0; font-weight: var(--fw-medium); font-size: var(--fs-300); max-width: none; }

/* --- Page header band (interior pages) --- */
.page-header {
  padding-block: var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--c-border-soft);
  background: linear-gradient(var(--c-bg-alt), var(--c-bg));
}
.page-header h1 { font-size: var(--fs-700); position: relative; }
.page-header h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--c-accent);
  margin-top: var(--sp-4);
  border-radius: 2px;
}
.page-header p { color: var(--c-text-muted); font-size: var(--fs-400); margin-top: var(--sp-4); }

/* --- Snapshot: "At a glance" definition band (FR-012 verified facts) ---
     Labels-over-values (honest to the content: these are facts, not metrics). */
.snapshot-band { background: var(--c-bg-alt); border-block: 1px solid var(--c-border-soft); }
.eyebrow--center { text-align: center; }
.snapshot {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  margin: 0;
  max-width: none;
}
.snapshot__item {
  text-align: center;
  padding: var(--sp-4) var(--sp-5);
  position: relative;
}
.snapshot__label {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
}
.snapshot__value {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  color: var(--c-primary);
  line-height: var(--lh-snug);
  max-width: none;
  margin: 0;
}

/* --- Publication list (FR-026, FR-027, §14.3) --- */
.pub-list { list-style: none; padding: 0; display: grid; gap: var(--sp-5); }
.pub-list > li { max-width: none; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-border-soft); }
.pub-list > li:last-child { border-bottom: 0; }
.pub__title { font-family: var(--font-display); font-size: var(--fs-400); color: var(--c-primary); }
.pub__authors { color: var(--c-text); }
.pub__venue { color: var(--c-text-muted); font-style: italic; }
.pub__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-200); }

/* --- CV block (FR-028) --- */
.cv-download { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* --- Contact (FR-034) --- */
.contact-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }

/* ==========================================================================
   Responsive overrides — mobile-first (NFR-003)
   ========================================================================== */

/* Off-canvas small-screen menu (FR-005); JS toggles [data-open] */
@media (max-width: 47.99rem) {
  .primary-nav {
    position: fixed;
    inset: 4rem 0 auto 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    transition: transform var(--motion-base) var(--motion-ease);
    z-index: var(--z-menu);
  }
  .primary-nav[data-open="true"] { transform: translateY(0); }
  .primary-nav ul { flex-direction: column; gap: 0; padding: var(--sp-2) var(--gutter); }
  .primary-nav li + li { margin-top: 0; }
  .primary-nav a { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border-soft); }
  .primary-nav a[aria-current="page"] { border-bottom-color: var(--c-accent); }
}

/* No-JS fallback: menu is always visible in flow (NFR-002) */
.no-js .nav-toggle { display: none; }
.no-js .primary-nav { position: static; transform: none; box-shadow: none; }

@media (min-width: 48rem) {
  .nav-toggle { display: none; }
  .primary-nav { display: block !important; }
  .hero__grid { grid-template-columns: 1.5fr 1fr; align-items: center; }
  .hero__grid--single { grid-template-columns: 1fr; }
  .snapshot { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .snapshot__item + .snapshot__item { border-left: 1px solid var(--c-border); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1.2fr 1fr; }
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 64rem) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .hero { padding-block: var(--sp-9) var(--sp-8); }
}

/* --- About: scholarly section rhythm --- */
.bio-section { max-width: none; }
.bio-section h2 {
  font-size: var(--fs-500);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border-soft);
  margin-bottom: var(--sp-4);
}

/* ==========================================================================
   Print styles — clean output for an academic profile / CV page
   ========================================================================== */
@media print {
  .site-header, .site-footer, .skip-link, .nav-toggle, .hero__cta, .btn { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #333; }
  .hero, .page-header, .section { padding-block: 0.5rem !important; background: none !important; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  h1, h2, h3 { break-after: avoid; color: #000; }
  .eyebrow::after, .page-header h1::after { display: none; }
}