/* ==========================================================================
   AME — home.css
   Landing / display page. Medical-editorial aesthetic:
   deep clinical blue, amber accent, serif display, EKG motif, bookshelf.
   ========================================================================== */

/* ---------- Ambient background: subtle chart-paper grid ---------- */
.home {
  --ink: var(--primary, #1a5276);
  --paper: var(--bg-primary, #fff);
  position: relative;
}
.home::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.25) 55%, transparent 85%);
  z-index: 0;
}
.home > * { position: relative; z-index: 1; }

/* ---------- Opening: asymmetric split, not a centered hero ---------- */
.home-open {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--space-xxl, 64px);
  align-items: center;
  padding: var(--space-xxl, 64px) 0 var(--space-xl, 48px);
}
.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--font-xs, .75rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--secondary, #148f77);
  margin-bottom: var(--space-md, 16px);
}
.home-eyebrow .pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success, #27ae60);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success, #27ae60) 45%, transparent); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}
.home-title {
  font-family: var(--font-serif, serif);
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--text-primary, #212529);
  margin: 0 0 var(--space-md, 16px);
}
.home-title em {
  font-style: italic;
  color: var(--ink);
  border-bottom: 4px solid var(--accent, #d4ac0d);
}
.home-sub {
  font-size: var(--font-md, 1.05rem);
  color: var(--text-secondary, #6c757d);
  max-width: 52ch;
  line-height: 1.65;
  margin: 0 0 var(--space-lg, 24px);
}
.home-cta { display: flex; gap: var(--space-sm, 8px); flex-wrap: wrap; }

/* ---------- Exam countdown (living element) ---------- */
.countdown {
  display: flex;
  justify-content: center;
  gap: var(--space-lg, 24px);
  margin-top: var(--space-lg, 24px);
  padding-top: var(--space-lg, 24px);
  border-top: 1px solid var(--border, #dee2e6);
  text-align: center;
}
.countdown-cell { text-align: center; min-width: 3.2ch; }
.countdown-num {
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-size: var(--font-xs, .75rem);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted, #adb5bd);
  margin-top: 4px;
}
.countdown-loc {
  text-align: center;
  font-size: var(--font-xs, .78rem);
  color: var(--text-secondary, #6c757d);
  margin-top: var(--space-sm, 8px);
  font-family: var(--font-sans, sans-serif);
}
.countdown-loc strong { color: var(--ink); }

/* ---------- Demo card stack (right side) ---------- */
.home-demo {
  position: relative;
  min-height: 340px;
  display: flex;
  flex-direction: column;      /* chip, card, hint — one after the other, no overlap */
  align-items: center;
  justify-content: center;
  gap: var(--space-md, 16px);
}
.home-demo .anki-card {
  max-width: 320px;
  width: 100%;
  cursor: pointer;
  margin: 0 auto;
  transform-origin: 50% 42%;
  animation: card-sway 9s ease-in-out infinite;
}
.home-demo .anki-card:hover { animation-play-state: paused; }  /* steadies when you reach for it */
.home-demo .demo-hint {
  font-size: var(--font-xs, .75rem);
  color: var(--text-muted, #adb5bd);
  font-family: var(--font-sans, sans-serif);
}
/* Vitals chip — sits above the card in the flow (never overlapping it) */
.vitals-chip {
  background: var(--paper);
  border: 1px solid var(--border, #dee2e6);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-sm, 8px) var(--space-md, 16px);
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.1));
  font-family: var(--font-sans, sans-serif);
  font-size: var(--font-xs, .75rem);
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  animation: chip-sway 6.5s ease-in-out infinite;
}
/* Slow, gentle sway — the card rocks on its own rhythm, the chip floats+rocks on another */
@keyframes card-sway {
  0%, 100% { transform: rotate(-1.3deg); }
  50%      { transform: rotate(1.3deg); }
}
@keyframes chip-sway {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-7px) rotate(1.2deg); }
}
.vitals-chip .ekg-mini { width: 64px; height: 22px; }
.ekg-path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: ekg-run 2.4s linear infinite;
}
@keyframes ekg-run { to { stroke-dashoffset: -240; } }

/* ---------- Section headings ---------- */
.home-section { padding: var(--space-xl, 48px) 0; }
.home-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md, 16px);
  margin-bottom: var(--space-lg, 24px);
}
.home-section-head h2 {
  font-family: var(--font-serif, serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
}
.home-section-head .rule {
  flex: 1;
  height: 1px;
  background: var(--border, #dee2e6);
}
.home-section-head .kicker {
  font-family: var(--font-sans, sans-serif);
  font-size: var(--font-xs, .75rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent, #d4ac0d);
}

/* ---------- Bookshelf (characteristic: the actual MKSAP books) ---------- */
.bookshelf {
  display: flex;
  align-items: flex-end;   /* every spine sits on the same shelf line */
  gap: 6px;
  padding: var(--space-lg, 24px) var(--space-md, 16px) 0;
  overflow-x: auto;
  border-bottom: 6px solid color-mix(in srgb, var(--ink) 70%, black);
  border-radius: 0 0 var(--radius-sm, 6px) var(--radius-sm, 6px);
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 8%, transparent), transparent 60%);
}
.spine {
  flex: 0 0 auto;
  width: 46px;               /* back to the slim spine… */
  height: 260px;             /* …but taller, so more of the vertical title shows */
  min-height: 0;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-family: var(--font-sans, sans-serif);
  text-decoration: none;
  display: flex;
  flex-direction: column;  /* normal top-to-bottom column */
  align-items: center;
  justify-content: flex-start; /* top-align the contents */
  writing-mode: horizontal-tb;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 10px 0 8px;
  box-shadow: inset -3px 0 6px rgba(0,0,0,.25), inset 2px 0 3px rgba(255,255,255,.18);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
  position: relative;
  overflow: hidden;
}
.spine:hover {
  transform: translateY(-14px);
  box-shadow: inset -3px 0 6px rgba(0,0,0,.25), inset 2px 0 3px rgba(255,255,255,.18), 0 12px 20px rgba(0,0,0,.22);
  z-index: 2;
}
.spine .spine-code {
  writing-mode: horizontal-tb;
  background: rgba(0,0,0,.28);
  border-radius: 3px;
  padding: 2px 5px;
  margin-bottom: 8px;
  font-size: .68rem;
  flex-shrink: 0;
}
.spine .spine-title {
  display: block;
  writing-mode: vertical-rl;   /* title runs vertically along the spine */
  text-orientation: mixed;
  flex: 1;
  min-height: 0;
  overflow: hidden;            /* clip if it's too long — never overflow */
}
/* Alternating spine palette from the medical hues */
.spine:nth-child(6n+1) { background: linear-gradient(180deg, #1a5276, #123c57); }
.spine:nth-child(6n+2) { background: linear-gradient(180deg, #148f77, #0d6b58); }
.spine:nth-child(6n+3) { background: linear-gradient(180deg, #b7950b, #8a7008); }
.spine:nth-child(6n+4) { background: linear-gradient(180deg, #a04000, #7d3200); }
.spine:nth-child(6n+5) { background: linear-gradient(180deg, #6c3483, #512763); }
.spine:nth-child(6n+6) { background: linear-gradient(180deg, #2874a6, #1d577d); }
.bookshelf-note {
  font-size: var(--font-xs, .75rem);
  color: var(--text-muted, #adb5bd);
  margin-top: var(--space-sm, 8px);
  font-family: var(--font-sans, sans-serif);
}

/* ---------- Pillars: asymmetric bento, not equal cards ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: var(--space-md, 16px);
}
.pillar {
  border: 1px solid var(--border, #dee2e6);
  border-radius: var(--radius-lg, 14px);
  background: var(--paper);
  padding: var(--space-lg, 24px);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 14px 34px rgba(0,0,0,.14));
  border-color: color-mix(in srgb, var(--accent, #4f8cff) 55%, var(--border, #dee2e6));
}
.pillar .pillar-icon { font-size: 1.9rem; line-height: 1; }
.pillar h3 {
  font-family: var(--font-serif, serif);
  font-size: 1.35rem;
  margin: 0;
  font-weight: 600;
}
.pillar p { margin: 0; color: var(--text-secondary, #6c757d); font-size: var(--font-sm, .9rem); line-height: 1.6; }
.pillar .pillar-link {
  margin-top: auto;
  font-family: var(--font-sans, sans-serif);
  font-size: var(--font-xs, .75rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent, #4f8cff);
}
.pillar .pillar-link::after { content: " →"; transition: margin-left .2s; }
.pillar:hover .pillar-link::after { margin-left: 4px; }
/* Asymmetric spans */
.pillar-library { grid-column: span 7; grid-row: span 2; }
.pillar-anki    { grid-column: span 5; grid-row: span 1; }
.pillar-qbank   { grid-column: span 5; grid-row: span 1; }
/* Featured pillar gets a tinted backdrop + big ghost glyph */
.pillar-library {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, var(--paper)), var(--paper) 65%);
}
.pillar .ghost-glyph {
  position: absolute;
  right: -10px;
  bottom: -26px;
  font-size: 7rem;
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

/* ---------- Stats band ---------- */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md, 16px);
  border-top: 1px solid var(--border, #dee2e6);
  border-bottom: 1px solid var(--border, #dee2e6);
  padding: var(--space-lg, 24px) 0;
}
.stat-big { text-align: left; padding-left: var(--space-md, 16px); border-left: 3px solid var(--accent, #d4ac0d); }
.stat-big .num {
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-big .lbl {
  font-size: var(--font-xs, .75rem);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted, #adb5bd);
  margin-top: 6px;
}

/* ---------- Pipeline (how content is made) ---------- */
.pipeline {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding-bottom: var(--space-sm, 8px);
}
.pipe-step {
  flex: 1 0 180px;
  position: relative;
  padding: var(--space-md, 16px) var(--space-lg, 24px) var(--space-md, 16px) 0;
}
.pipe-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: 6px;
  top: 22px;
  color: var(--accent, #d4ac0d);
  font-weight: 700;
}
.pipe-step .pipe-num {
  font-family: var(--font-sans, sans-serif);
  font-weight: 800;
  font-size: var(--font-xs, .75rem);
  color: var(--secondary, #148f77);
  letter-spacing: .1em;
}
.pipe-step h4 {
  font-family: var(--font-serif, serif);
  font-size: 1.05rem;
  margin: 4px 0;
  font-weight: 600;
}
.pipe-step p { margin: 0; font-size: var(--font-xs, .78rem); color: var(--text-secondary, #6c757d); line-height: 1.55; }

/* ---------- Recent lessons ---------- */
.recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.recent-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md, 16px);
  padding: var(--space-sm, 8px) 0;
  border-bottom: 1px dashed var(--border, #dee2e6);
}
.recent-list a {
  font-family: var(--font-serif, serif);
  font-weight: 600;
  color: var(--text-primary, #212529);
  text-decoration: none;
}
.recent-list a:hover { color: var(--accent, #4f8cff); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .home-open { grid-template-columns: 1fr; gap: var(--space-xl, 48px); }
  .home-demo { min-height: 300px; }
  .pillar-library, .pillar-anki, .pillar-qbank { grid-column: span 12; }
  .stats-band { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg, 24px); }
}

/* ==========================================================================
   Boards around the world — exam countdown board
   ========================================================================== */
.exam-board {
  border: 1px solid var(--border, #dee2e6);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  background: var(--paper, #fff);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06));
}
.exam-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--space-md, 16px);
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  border-bottom: 1px solid var(--border, #dee2e6);
  transition: background-color .2s;
}
.exam-row:last-child { border-bottom: 0; }
.exam-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.exam-row.exam-featured {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #d4ac0d) 10%, transparent), transparent 70%);
  border-left: 4px solid var(--accent, #d4ac0d);
}
.exam-who { display: flex; align-items: center; gap: var(--space-sm, 8px); min-width: 0; }
.exam-flag { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.exam-country {
  font-family: var(--font-sans, sans-serif);
  font-weight: 800;
  font-size: var(--font-sm, .9rem);
  color: var(--text-primary, #212529);
  white-space: nowrap;
}
.exam-year {
  font-size: var(--font-xs, .72rem);
  font-weight: 700;
  color: var(--paper, #fff);
  background: var(--ink);
  border-radius: var(--radius-full, 9999px);
  padding: 1px 8px;
  flex-shrink: 0;
}
.exam-featured .exam-year { background: var(--accent, #d4ac0d); color: var(--ink); }
.exam-what { min-width: 0; }
.exam-name {
  font-family: var(--font-serif, serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary, #212529);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exam-meta {
  font-size: var(--font-xs, .75rem);
  color: var(--text-muted, #adb5bd);
  font-family: var(--font-sans, sans-serif);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exam-timer {
  display: flex;
  gap: var(--space-md, 16px);
  justify-content: flex-end;
  flex-shrink: 0;
}
.exam-timer .countdown-cell { min-width: 2.6ch; }
.exam-timer .countdown-num { font-size: 1.25rem; }
.exam-timer .countdown-label { font-size: .62rem; }
.exam-board-note {
  font-size: var(--font-xs, .75rem);
  color: var(--text-muted, #adb5bd);
  margin-top: var(--space-sm, 8px);
  font-family: var(--font-sans, sans-serif);
}
@media (max-width: 900px) {
  .exam-row { grid-template-columns: 1fr; gap: var(--space-sm, 8px); }
  .exam-timer { justify-content: flex-start; }
  .exam-name, .exam-meta { white-space: normal; }
}