/* ==========================================================================
   Blue Athletic — Dedicated Pillar Hubs (Visually Rich & Athletic Depth)
   ========================================================================== */

body.pillar-shell {
  background: var(--ba-ground, #f7f8fc);
  color: var(--ba-text-body, #38406a);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  overflow-x: hidden;
}

.shell-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ba-border, rgba(11, 19, 48, 0.08));
}

/* ==========================================================================
   Pillar Specific Theme Variables
   ========================================================================== */
body.pillar--move {
  --pillar-accent: #0056e2;
  --pillar-accent-glow: rgba(0, 86, 226, 0.2);
  --pillar-bg-gradient: radial-gradient(circle at 10% 10%, rgba(0, 97, 253, 0.08) 0%, transparent 60%);
}

body.pillar--eat {
  --pillar-accent: #0369a1;
  --pillar-accent-glow: rgba(3, 105, 161, 0.2);
  --pillar-bg-gradient: radial-gradient(circle at 10% 10%, rgba(2, 132, 199, 0.08) 0%, transparent 60%);
}

body.pillar--recover {
  --pillar-accent: #047857;
  --pillar-accent-glow: rgba(4, 120, 87, 0.2);
  --pillar-bg-gradient: radial-gradient(circle at 10% 10%, rgba(16, 185, 129, 0.08) 0%, transparent 60%);
}

/* ==========================================================================
   Pillar Hero Section
   ========================================================================== */
.rich-pillar-hero {
  padding: clamp(1.9rem, 3.2vw, 2.9rem) 0 1.5rem;
  background: var(--pillar-bg-gradient), var(--ba-ground, #f7f8fc);
  border-bottom: 1px solid var(--ba-border, rgba(11, 19, 48, 0.08));
}

.rich-pillar-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
  align-items: center;
}

@media (max-width: 900px) {
  .rich-pillar-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .rich-pillar-hero__grid > * {
    min-width: 0;
  }

  .pillar-photo-card svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

.back-link {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--lt-ink-muted, #4c5567);
  text-decoration: none;
  margin-bottom: 1.25rem;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--pillar-accent);
}

.pillar-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pillar-accent);
  margin-bottom: 0.5rem;
}

.pillar-title {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 3.5rem);
  font-weight: 900;
  line-height: 0.98;
  color: var(--ba-navy, #0b1330);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.pillar-subtitle {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 700;
  color: var(--ba-text-body, #38406a);
  margin: 0 0 1.2rem;
}

.pillar-lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ba-text-body, #38406a);
  margin-bottom: 1.35rem;
  max-width: 36rem;
}

.pillar-stats {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.stat-pill {
  background: #ffffff;
  border: 1px solid var(--ba-border, rgba(11, 19, 48, 0.12));
  border-radius: 0.85rem;
  padding: 0.6rem 1rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(11, 19, 48, 0.04);
}

.stat-pill strong {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ba-navy, #0b1330);
  line-height: 1;
}

.stat-pill span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  color: var(--lt-ink-muted, #4c5567);
  text-transform: uppercase;
  margin-top: 0.2rem;
}

/* Pillar Photo Card */
.pillar-photo-card {
  margin: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 48px -12px rgba(11, 19, 48, 0.25);
  border: 1px solid rgba(11, 19, 48, 0.12);
  background: var(--lt-surface-soft, #eef3f9);
}

.pillar-photo-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/11;
  object-fit: cover;
  object-position: center 20%;
}

.photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.95rem 1.1rem;
  background: linear-gradient(to top, rgba(11, 19, 48, 0.92) 0%, transparent 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.photo-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ba-mint, #8fe3c4);
}

.photo-overlay strong {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ==========================================================================
   Biological Framework Banner
   ========================================================================== */
.framework-section {
  padding: 1.75rem 0 1rem;
}

.framework-banner {
  background: var(--lt-tint-blue, #edf6fe);
  border: 1px solid rgba(0, 97, 253, 0.22);
  border-radius: 1.25rem;
  padding: 1.6rem;
  color: var(--lt-ink, #0b1220);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.6rem;
  align-items: center;
  box-shadow: 0 16px 40px -18px rgba(11, 19, 48, 0.16);
}

@media (max-width: 860px) {
  .framework-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
}

@media (max-width: 480px) {
  .framework-banner {
    padding-inline: clamp(1.25rem, 5vw, 2rem);
  }

  .framework-banner > * { min-width: 0; }
}

.framework-tag {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ba-blue-ink, #0056e2);
  background: rgba(0, 97, 253, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: 0.35rem;
  margin-bottom: 0.75rem;
}

.framework-banner h2 {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--lt-ink, #0b1220);
  margin: 0 0 0.75rem;
}

.framework-banner p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--lt-ink-body, #2c3444);
  margin: 0;
}

.framework-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--lt-surface, #ffffff);
  border: 1px solid var(--lt-line, rgba(11, 18, 32, 0.12));
  border-radius: 1rem;
  padding: 0.95rem 0.8rem;
}

.framework-node {
  background: var(--lt-surface-soft, #eef3f9);
  border-radius: 0.65rem;
  padding: 0.6rem 0.5rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.node-idx {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ba-blue-ink, #0056e2);
}

.framework-node strong {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--lt-ink, #0b1220);
  line-height: 1;
}

.framework-node span:last-child {
  font-size: 0.65rem;
  color: var(--lt-ink-muted, #4c5567);
  line-height: 1.3;
}

.node-arr {
  color: rgba(11, 18, 32, 0.62);
  font-size: 1rem;
}

/* The mechanism strip lays its three nodes out in a row. Each node is
   `flex: 1` with the default `min-width: auto`, so on a phone the row could not
   shrink past its min-content width and the third node ran off the right
   edge -- "Structural Repair" and its label sat 40px outside a 320px
   viewport on /recover/ (and 20-25px outside on /eat/ and /move/). Below the
   same 600px breakpoint the Recover stage sequence already uses, the strip
   stacks and the arrows point down, so every node and label stays inside the
   viewport. Tablet and desktop keep the horizontal row. */
@media (max-width: 600px) {
  .framework-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.9rem 0.85rem;
  }

  .framework-node { flex: 0 0 auto; }

  .node-arr {
    text-align: center;
    line-height: 1;
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   Curriculum Track List
   ========================================================================== */
.curriculum-track-section {
  padding: 2rem 0 3rem;
}

.curriculum-track-head {
  margin-bottom: 1.5rem;
}

.track-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--pillar-accent);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.35rem;
}

.curriculum-track-head h2 {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-size: clamp(1.75rem, 2.8vw, 2.3rem);
  font-weight: 800;
  color: var(--ba-navy, #0b1330);
  margin: 0 0 0.5rem;
}

.curriculum-track-head p {
  font-size: 1.02rem;
  color: var(--ba-text-body, #38406a);
  margin: 0;
  max-width: 42rem;
}

/* Guide Cards */
.rich-guide-grid {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.rich-guide-card {
  background: #ffffff;
  border: 1px solid var(--ba-border, rgba(11, 19, 48, 0.12));
  border-radius: 1.15rem;
  padding: 1.05rem 1.3rem;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  box-shadow: 0 4px 14px rgba(11, 19, 48, 0.02);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* The body track was a bare `1fr`, so its auto minimum was the min-content
   width of the status pill row and the card could not shrink below that. The
   track is now allowed to shrink and the pill row wraps, which keeps the card
   inside the viewport below the 320px design width. Both are inert at 320px
   and wider, where the row already fits. */
.rich-guide-card__body { min-width: 0; }

.rich-guide-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(11, 19, 48, 0.08);
  border-color: var(--pillar-accent);
}

.rich-guide-card.is-begin-here {
  border-left: 5px solid var(--pillar-accent);
  background: linear-gradient(90deg, rgba(42, 92, 255, 0.02) 0%, #ffffff 100%);
}

.rich-guide-card.is-keystone {
  border-left: 5px solid #0284c7;
}

.rich-guide-card.is-capstone {
  border-left: 5px solid #10b981;
}

.rich-guide-card__index {
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-num {
  font-family: "Big Shoulders Display", monospace;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--ba-navy, #0b1330);
  opacity: 0.3;
  line-height: 1;
}

.rich-guide-card:hover .index-num {
  color: var(--pillar-accent);
  opacity: 1;
}

.rich-guide-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.topic-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lt-ink-muted, #4c5567);
  background: var(--ba-ground, #f7f8fc);
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
}

.milestone-pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 0.35rem;
}

.milestone-pill--begin {
  background: #dbeafe;
  color: #1d4ed8;
}

.milestone-pill--keystone {
  background: #e0f2fe;
  color: #0369a1;
}

.milestone-pill--capstone {
  background: #dcfce7;
  color: #15803d;
}

.rich-guide-card__title {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.rich-guide-card__title a {
  color: var(--ba-navy, #0b1330);
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  min-height: 24px;
}

.rich-guide-card__title a:hover {
  color: var(--pillar-accent);
}

.rich-guide-card__desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ba-text-body, #38406a);
  margin: 0 0 0.75rem;
}

.read-link {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pillar-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.35rem;
  transition: gap 0.2s ease;
}

.read-link:hover {
  gap: 0.55rem;
}

/* ==========================================================================
   Cross Pillar Navigation
   ========================================================================== */
.cross-pillar-section {
  padding: 1.4rem 0 2.5rem;
}

.cross-pillar-card {
  background: var(--lt-tint-blue, #edf6fe);
  border-radius: 1.25rem;
  padding: 1.75rem;
  color: var(--lt-ink, #0b1220);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  box-shadow: 0 16px 40px -20px rgba(11, 19, 48, 0.18);
}

.cross-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ba-blue-ink, #0056e2);
}

.cross-pillar-copy h3 {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 800;
  color: var(--lt-ink, #0b1220);
  margin: 0.25rem 0 0.5rem;
}

.cross-pillar-copy p {
  font-size: 0.95rem;
  color: var(--lt-ink-body, #2c3444);
  margin: 0;
}

.cross-pillar-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cross-pillar-buttons .btn-outline {
  background: var(--lt-surface, #ffffff);
  border: 1px solid var(--lt-line-strong, rgba(11, 18, 32, 0.22));
  color: var(--lt-ink, #0b1220);
  padding: 0.65rem 1.2rem;
  border-radius: 0.65rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cross-pillar-buttons .btn-outline:hover {
  background: var(--lt-surface-soft, #eef3f9);
  border-color: var(--ba-blue-ink, #0056e2);
}


/* Biomechanical Schematic Card for Move Pillar */
.pillar-schematic-card {
  background: var(--lt-tint-violet, #f3f1fe);
  border: 1px solid rgba(73, 31, 197, 0.2);
  border-radius: 1.25rem;
  padding: 1.5rem;
  color: var(--lt-ink, #0b1220);
  box-shadow: 0 20px 48px -20px rgba(11, 19, 48, 0.18);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.schematic-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.schematic-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #491fc5;
}

.schematic-header strong {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--lt-ink, #0b1220);
}

.schematic-visual {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--lt-surface, #ffffff);
  border: 1px solid var(--lt-line, rgba(11, 18, 32, 0.12));
  border-radius: 0.85rem;
  padding: 1rem;
}

.curve-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.curve-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.curve-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lt-ink-muted, #4c5567);
}

.curve-bar {
  height: 8px;
  background: rgba(11, 18, 32, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.curve-item--stress .curve-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 999px;
}

.curve-item--capacity .curve-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 999px;
}

.curve-val {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.75rem;
  color: var(--lt-ink-body, #2c3444);
  font-weight: 600;
}

.schematic-footer {
  border-top: 1px solid var(--lt-line, rgba(11, 18, 32, 0.12));
  padding-top: 0.75rem;
}

.schematic-footer .formula {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: #491fc5;
  font-weight: 700;
}


body.pillar-shell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.78rem 1.4rem;
  border: 0;
  border-radius: 0.7rem;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

body.pillar-shell .btn-primary {
  background: var(--ba-blue, #2a5cff);
  color: #fff;
}

body.pillar-shell .btn-primary:hover {
  background: var(--ba-blue-deep, #1e4adf);
}

body.pillar-shell .path-outcome,
body.pillar-shell .path-sequence,
body.pillar-shell .path-commitment {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ba-text-body, #38406a);
  margin: 0.35rem 0 0;
  max-width: 46rem;
}

@media (prefers-reduced-motion: reduce) {
  .rich-guide-card,
  .read-link,
  .back-link {
    transition: none !important;
  }
  .rich-guide-card:hover {
    transform: none;
  }
}

/* Density pass (2026-10-06): tighter phone rhythm for hub cards while keeping
   44px+ tap targets on every link and button. */
@media (max-width: 600px) {
  .curriculum-track-section { padding: 1.6rem 0 2.25rem; }
  .curriculum-track-head { margin-bottom: 1.15rem; }
  .rich-guide-card {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 1rem;
  }
  .index-num { font-size: 1.45rem; }
  .cross-pillar-card { padding: 1.4rem; }
  .framework-banner { padding: 1.25rem; }
}

/* The Recover hero stacked four 16:9 stage cards plus three arrows into a
   1911px column at 390px -- the single tallest block on the learning site.
   Two stages per row (arrows are decorative and drop out) keeps all four
   stages and their phase numbers, and cuts the hero to roughly half. */
@media (max-width: 600px) {
  .rich-pillar-hero .recover-sequence-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .rich-pillar-hero .recover-sequence-arrow { display: none; }
  .rich-pillar-hero .recover-stage__image { aspect-ratio: 16 / 10; }
  .rich-pillar-hero .recover-stage__label { min-height: 0; padding: 0.5rem 0.55rem; }
  .rich-pillar-hero .recover-stage__label strong { font-size: 0.78rem; }
}