/* ================================================================
   PROGRAM-COMPONENTS.CSS — Program Page Design System
   Reusable classes built on program-tokens.css variables.

   Requires: program-tokens.css loaded first.

   This file + program-tokens.css + a program page's HTML structure
   together form the reusable "program page" template. To create a
   new program page: copy an existing one (e.g.
   training/programs/junior-to-mid-level.html), swap the content,
   and both files below come along automatically via the <link> tags
   already in its <head>.

   Per-page customisations belong in that page's own <style> block,
   not here.
================================================================ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* faint grain texture over the whole page */
body::after{
  content:"";
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
section{ position:relative; }

.wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,56px); }

/* small caps kicker / bracket-number label used throughout */
.kicker{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-70);
}
.kicker .bracket{ color:var(--coral); font-weight:700; }
.on-dark .kicker{ color:rgba(245,239,226,.62); }
.on-dark .kicker .bracket{ color:var(--lime); }

/* .mark is defined in the shared Themes/editorial-patterns.css,
   themed by the --mark-* custom properties in program-tokens.css. */
/* .hero-lines forces child spans to display:block for its line-reveal animation —
   override back to inline for .mark so it hugs the word instead of the whole line */
.hero-lines .mark{ display:inline-block; }
.hero-lines .mark span{ display:inline; transform:none; opacity:1; animation:none; }

/* reveal-on-scroll utility */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-d1{ transition-delay:.08s; }
.reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; }

/* ambient floating shapes */
@keyframes floatA{ 0%,100%{ transform:translate(0,0) rotate(0deg); } 50%{ transform:translate(6px,-14px) rotate(4deg); } }
@keyframes floatB{ 0%,100%{ transform:translate(0,0) rotate(0deg); } 50%{ transform:translate(-10px,10px) rotate(-5deg); } }
@keyframes floatC{ 0%,100%{ transform:translate(0,0) rotate(0deg); } 50%{ transform:translate(8px,8px) rotate(3deg); } }
.float-a{ animation:floatA 7s ease-in-out infinite; }
.float-b{ animation:floatB 9s ease-in-out infinite; }
.float-c{ animation:floatC 8s ease-in-out infinite; }

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ height:76px; display:flex; align-items:center; justify-content:space-between; }
.nav-back{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; color:var(--ink-70); }
.nav-back svg{ width:15px; height:15px; }
.nav-back:hover{ color:var(--ink); }
.nav-logo{ display:flex; align-items:center; }
.nav-logo img{ display:block; height:32px; width:auto; }
.nav-links a.nav-cta{ padding:.5rem 1.1rem; font-size:.78rem; color:var(--cream); }
.nav-links a.nav-cta:hover{ color:var(--cream); }
.nav-mark{ font-family:var(--serif); font-size:1.3rem; font-weight:800; letter-spacing:-.02em; }
.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-links a{ font-size:.85rem; font-weight:600; color:var(--ink-70); }
.nav-links a:hover{ color:var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:.7rem; }
@media (max-width:760px){ .nav-links{ display:none; } }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans); font-size:.82rem; font-weight:700;
  padding:.7rem 1.3rem; border-radius:999px; letter-spacing:.01em;
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(22,20,15,.25); }
.btn-ghost{ border:1.5px solid var(--ink); color:var(--ink); background:transparent; }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.btn-lime{ background:var(--lime); color:var(--forest-2); }
.btn-lime:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(212,251,78,.35); }
.btn svg{ width:13px; height:13px; transition:transform .25s ease; }
.btn:hover svg{ transform:translate(3px,-3px); }

/* ============ HERO ============ */
.hero{ padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4rem); overflow:hidden; }
.hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.hero-badges{ display:flex; gap:.5rem; flex-wrap:wrap; }
.hero-badge{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.4rem .8rem; border:1px solid var(--line); border-radius:999px; color:var(--ink-70);
}
.hero-mentor{ display:flex; align-items:center; gap:.65rem; margin-top:1.3rem; width:fit-content; }
.hero-mentor-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid var(--line); flex-shrink:0; }
.hero-mentor-text{ display:flex; flex-direction:column; line-height:1.3; }
.hero-mentor-text strong{ font-size:.82rem; font-weight:700; color:var(--ink); }
.hero-mentor-text span{ font-size:.7rem; color:var(--ink-70); }
.hero-mentor:hover .hero-mentor-text strong{ color:var(--coral); }
.hero-grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:3rem; align-items:end; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{
  font-family:var(--serif); font-weight:800;
  font-size:clamp(2.6rem,6.4vw,5.4rem);
  line-height:.98; letter-spacing:-.03em;
}
.hero h1 .sans-word{ font-family:var(--sans); font-weight:800; font-style:normal; }
.hero h1 .it{ font-style:normal; color:var(--coral); }
.hero-lines span{ display:block; overflow:hidden; }
.hero-lines span > span{
  display:block; transform:translateY(110%); opacity:0;
  animation:lineUp .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-lines span:nth-child(1) > span{ animation-delay:.1s; }
.hero-lines span:nth-child(2) > span{ animation-delay:.24s; }
.hero-lines span:nth-child(3) > span{ animation-delay:.38s; }
@keyframes lineUp{ to{ transform:translateY(0); opacity:1; } }

.hero-desc{
  font-size:1.06rem; color:var(--ink-70); max-width:46ch; margin-top:1.6rem; line-height:1.65;
}
.hero-cta{ display:flex; gap:.75rem; margin-top:2rem; flex-wrap:wrap; }

.hero-visual{ position:relative; height:340px; }
.blob{
  position:absolute; background:var(--lime);
  border-radius:62% 38% 55% 45% / 48% 45% 55% 52%;
}
.blob-1{ width:220px; height:220px; top:10px; right:10px; }
.blob-2{ width:90px; height:90px; border:2px solid var(--ink); background:transparent; border-radius:50%; top:70px; right:190px; }
.blob-3{ width:46px; height:46px; background:var(--coral); border-radius:14px; top:220px; right:250px; transform:rotate(18deg); }
.blob-dot{ width:10px; height:10px; border-radius:50%; background:var(--ink); position:absolute; top:190px; right:70px; }
.hero-ring{
  position:absolute; width:300px; height:300px; border:1px dashed var(--ink-50); border-radius:50%;
  top:-20px; right:-30px;
}
.hero-stats{ display:flex; gap:2.2rem; margin-top:1.4rem; flex-wrap:wrap; padding-top:1.4rem; border-top:1px solid var(--line); }
.hero-stat strong{ display:block; font-family:var(--serif); font-size:1.5rem; font-weight:800; }
.hero-stat span{ font-size:.76rem; color:var(--ink-70); }

/* ============ PAIN — dark immersive ============ */
.pain{ background:var(--forest); color:var(--cream); padding:clamp(4rem,9vw,7rem) 0; }
.pain .kicker{ margin-bottom:1.6rem; }
.pain-headline{
  font-family:var(--serif); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.8rem,4.4vw,3.1rem); line-height:1.15; max-width:18ch;
}
/* .pain-list structure lives in the shared Themes/editorial-patterns.css,
   themed by the --pain-list-* custom properties in program-tokens.css. */
.pain-list{ margin-top:3rem; }

/* ============ WHO IT'S FOR — asymmetric light ============ */
.who{ padding:clamp(4rem,9vw,7rem) 0; }
.who-grid{ display:grid; grid-template-columns:1fr .8fr; gap:3rem; align-items:start; }
@media (max-width:820px){ .who-grid{ grid-template-columns:1fr; } }
.who-headline{
  font-family:var(--serif); font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:800; letter-spacing:-.02em; line-height:1.22;
}
.who-card{ border-top:1px solid var(--line); padding-top:1.6rem; }
.who-card .num{ font-family:var(--serif); font-size:2.8rem; font-weight:800; color:var(--coral); line-height:1; margin-bottom:.7rem; }
.who-card p{ font-size:.92rem; color:var(--ink-70); line-height:1.6; max-width:30ch; }

/* ============ ABOUT MENTOR ============
   .mentor / .mentor-grid / .mentor-photo-wrap / .mentor-badge / .mentor-pills /
   .mentor-link live in the shared Themes/editorial-patterns.css, themed by
   the --mentor-* custom properties in program-tokens.css. Reused as-is by
   the Training Hub's About section via tokens-training-editorial.css. */

/* ============ CURRICULUM — numbered session accordion ============ */
.curriculum{ padding:clamp(4rem,9vw,7rem) 0; }
.curriculum-head{ margin-bottom:2.6rem; }
.curriculum-head h2{
  font-family:var(--serif); font-weight:800; letter-spacing:-.02em; font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.05;
}
.curriculum-head p{ max-width:46ch; font-size:.92rem; color:var(--ink-70); margin-top:1rem; }

/* .session-list / .session-row / .phase-label / accordion parts live in
   the shared Themes/editorial-patterns.css, themed by the --session-*
   custom properties in program-tokens.css. */

.curriculum-note{
  margin-top:2.2rem; font-family:var(--serif); font-style:normal; font-weight:600; font-size:1.05rem; color:var(--ink-70); max-width:60ch;
}

/* ============ WALK AWAY — pull quote ============ */
.walkaway{ padding:clamp(4rem,9vw,6rem) 0; text-align:center; }
.walkaway p{
  font-family:var(--serif); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.3;
  max-width:26ch; margin:0 auto;
}

/* ============ TESTIMONIAL — dark full bleed, 3-quote grid ============ */
.testimonial{ background:var(--forest-2); color:var(--cream); padding:clamp(4.5rem,10vw,8rem) 0; }
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; text-align:left; }
@media (max-width:900px){ .testimonial-grid{ grid-template-columns:1fr; gap:3rem; text-align:center; } }
.testimonial-card{ display:flex; flex-direction:column; }
.testimonial .quote-mark{ font-family:var(--serif); font-size:3.2rem; font-weight:800; color:var(--lime); line-height:1; margin-bottom:.3rem; }
.testimonial blockquote{
  font-family:var(--serif); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.45; flex:1;
}
.testimonial .author{ margin-top:1.6rem; font-size:.85rem; font-weight:700; }
.testimonial .role{ font-size:.8rem; color:rgba(245,239,226,.6); margin-top:.2rem; }

/* ============ FORMAT + CTA ============ */
.gallery{ padding:clamp(4rem,9vw,7rem) 0; }
.gallery-head{ max-width:560px; margin-bottom:2.6rem; }

.closing{ background:var(--forest); color:var(--cream); padding:clamp(4rem,9vw,6.5rem) 0; }
.closing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:820px){ .closing-grid{ grid-template-columns:1fr; } }
.closing h2{ font-family:var(--serif); font-weight:800; letter-spacing:-.02em; font-size:clamp(2rem,4vw,2.9rem); line-height:1.15; }
.closing p{ color:rgba(245,239,226,.72); margin-top:1rem; max-width:42ch; font-size:.96rem; line-height:1.6; }
.closing-cta{ display:flex; gap:.8rem; margin-top:1.8rem; flex-wrap:wrap; }
.format-list{ display:flex; flex-direction:column; }
.format-row{
  display:flex; justify-content:space-between; padding:.9rem 0; border-bottom:1px solid rgba(245,239,226,.16);
  font-size:.9rem;
}
.format-row:first-child{ border-top:1px solid rgba(245,239,226,.16); }
.format-row span:first-child{ color:rgba(245,239,226,.55); }
.format-row span:last-child{ font-weight:700; }
.format-row.tuition span:last-child{ color:var(--lime); }

.tags-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:2rem; }
.tag-pill{
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
  border:1px solid rgba(245,239,226,.28); border-radius:999px; padding:.35rem .8rem; color:rgba(245,239,226,.75);
}

/* ============ LEAD FORM (inline inquiry form, closing section) ============ */
.lead-form{ margin-top:1.6rem; max-width:420px; }
.lead-form-row{ display:flex; gap:.7rem; margin-bottom:.7rem; flex-wrap:wrap; }
.lead-form-row input{
  flex:1; min-width:160px;
  background:rgba(245,239,226,.06);
  border:1.5px solid rgba(245,239,226,.22);
  border-radius:10px;
  padding:.85rem 1rem;
  font-family:var(--sans);
  font-size:.92rem;
  color:var(--cream);
  transition:border-color .2s ease, background .2s ease;
}
.lead-form-row input::placeholder{ color:rgba(245,239,226,.42); }
.lead-form-row input:focus{ outline:none; border-color:var(--lime); background:rgba(245,239,226,.1); }
.lead-form-submit{ width:100%; justify-content:center; }
.lead-form-submit:disabled{ opacity:.6; cursor:not-allowed; }
.lead-form-note{ margin-top:.7rem; font-size:.78rem; color:rgba(245,239,226,.45); }
.lead-form-success{
  display:none; max-width:420px; margin-top:1.6rem; padding:1rem 1.2rem;
  background:rgba(63,207,110,.12); border:1px solid rgba(63,207,110,.35); border-radius:10px;
  font-size:.92rem; color:var(--lime); font-weight:600; line-height:1.5;
}
.lead-form-secondary{ margin-top:1.2rem; }

/* ============ FOOTER ============ */
footer{ padding:2.2rem 0; text-align:center; font-size:.8rem; color:var(--ink-70); }
footer a{ color:var(--ink); font-weight:600; }
