/* ==========================================================================
   THE KNIGHT CLUB — About page styles
   Loaded by pages/about.html (and pages/contact.html for shared .ct-* bits).
   All about-specific selectors use .ab-* or .about-page.
   All founder selectors use .founder-v2-* (shared with home.css for index.html).
   ========================================================================== */

/* ---- Base ----------------------------------------------------------------- */
.about-page { --gold: #d9b96a; overflow-x: clip; }

/* The hero's "Meet the Founder" link (and any direct #founder deep link)
   jumps straight to this section; without this the floating pub-header
   overlaps the top ~16px of its eyebrow label. Same convention as
   .ct-form-section in contact.css / .cc-skills in courses.css. */
#founder { scroll-margin-top: var(--space-6); } /* header offset is global: css/1-base/scroll.css */

/* ---- Shared layout helpers ----------------------------------------------- */
.ab-title-left { text-align: left; }
.ab-sub-left   { margin-left: 0; margin-right: 0; max-width: 40ch; }
.ab-list, .ct-cards { list-style: none; margin: 0; padding: 0; }
.ab-list > li  { margin: 0; }
.ab-eyebrow-center { justify-content: center; }

/* ==========================================================================
   HERO
   ========================================================================== */
.about-page .ab-hero .pub-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(167,139,250,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000, transparent 75%);
}

.ab-hero-inner { display: flex; justify-content: center; }
.ab-hero-text  { max-width: 680px; }

.ab-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* ==========================================================================
   STORY — two-column editorial
   ========================================================================== */
.ab-story {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--space-16);
  align-items: start;
}

.ab-story-left { position: sticky; top: 120px; }

.ab-story-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: var(--space-4) 0 0;
  color: var(--color-text);
}

.ab-prose-lead {
  margin: 0 0 var(--space-5);
  color: var(--color-text);
  font-size: 1.15rem;
  line-height: 1.8;
  max-width: 60ch;
}

.ab-prose-body {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 60ch;
}

/* Narrative bridge pill-trail */
.ab-story-bridge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  background: var(--color-scrim-soft);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.ab-bridge-arrow { color: var(--color-accent-600); font-size: 1rem; }

/* ==========================================================================
   PHILOSOPHY SPLIT — sticky intro + numbered list
   ========================================================================== */
.ab-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-16);
  align-items: start;
}
.ab-split-intro { position: sticky; top: 120px; }

/* ==========================================================================
   BRAND STATEMENT — a quiet pull-quote, not a second hero.
   Sized well below the page's actual H1 so it reads as a supporting line,
   matching how this same sentence appears on the homepage (a line inside a
   paragraph, not display type).
   ========================================================================== */
.ab-statement {
  position: relative;
  padding: var(--space-16) 0;
  text-align: center;
  background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(124,58,237,.16), transparent 70%);
  border-block: 1px solid var(--color-border-soft);
}

.ab-statement-inner { max-width: 640px; margin-inline: auto; }
.ab-statement-inner blockquote { margin: 0; }

.ab-statement-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-style: italic;
  color: var(--color-text);
  margin: var(--space-4) 0 var(--space-5);
}

.ab-statement-sub {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.ab-statement a,
.ab-note a,
.ab-club a:not(.btn) { color: var(--color-lavender); border-bottom: 1px solid var(--color-border-strong); }

/* ==========================================================================
   LEARNING LOOP — 4-step horizontal on desktop
   ========================================================================== */
.ab-loop {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8);
}
.ab-loop li {
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-strong);
}
.ab-loop li::before {
  content: "";
  position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent-600);
  box-shadow: 0 0 12px var(--color-accent-500);
}
.ab-loop span { font-size: var(--font-size-sm); letter-spacing: .14em; color: var(--gold); }
.ab-loop h3   { margin: var(--space-2) 0; font-size: 1.4rem; }
.ab-loop p    { margin: 0; color: var(--color-text-muted); line-height: 1.7; }

/* ==========================================================================
   AUDIENCE (WHO)
   ========================================================================== */
.ab-split-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.ab-split-flip .ab-split-intro { order: 2; }

.ab-who {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6);
}
.ab-who li  { padding-top: var(--space-4); border-top: 1px solid var(--color-border-soft); }
.ab-who h3  { margin: 0 0 var(--space-2); font-size: 1.15rem; }
.ab-who p   { margin: 0; color: var(--color-text-muted); line-height: 1.7; }

/* ==========================================================================
   FOUNDER V2 — ScaleToSky-inspired (home + About shared)
   Base rules now live in public.css (loaded by both home.css and about.css)
   — consolidated here as part of R1 foundation fix A to remove the
   near-duplicate block that used to exist in both files. Add page-specific
   .founder-v2-* overrides below only if About genuinely needs to diverge
   from the shared base.
   ========================================================================== */

/* ==========================================================================
   TRUST STRIP — one compact panel instead of a full heading+grid section.
   Keeps "how courses are built" from repeating the same eyebrow/H2/4-grid
   rhythm already used twice above (Philosophy, Learning Loop).
   ========================================================================== */
.ab-trust-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-alt);
}

.ab-trust-title {
  flex: 1 1 260px;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

.ab-trust-strip {
  display: flex;
  flex: 2 1 480px;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
}
.ab-trust-strip li {
  flex: 1 1 180px;
  min-width: 150px;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent-600);
}
.ab-trust-strip strong {
  display: block;
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.2em;
}
.ab-trust-strip span {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.ab-trust-cta { flex: 0 0 auto; }

/* ==========================================================================
   VALUES — 4-column numbered rail
   ========================================================================== */
.ab-values-section { background: var(--color-surface-alt); }

.ab-values-header { margin-bottom: var(--space-12); text-align: center; }
.ab-values-header .pub-title { margin-top: var(--space-2); }

.ab-values {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8);
}
.ab-values li {
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-strong);
}
.ab-values li::before {
  content: "";
  position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent-600);
  box-shadow: 0 0 12px var(--color-accent-500);
}
.ab-values span { font-size: var(--font-size-sm); letter-spacing: .14em; color: var(--gold); }
.ab-values h3   { margin: var(--space-2) 0; font-size: 1.4rem; }
.ab-values p    { margin: 0; color: var(--color-text-muted); line-height: 1.7; }

/* ==========================================================================
   COURSE BRIDGE — philosophy → courses
   ========================================================================== */
.ab-journey {
  list-style: none; margin: 0 0 var(--space-10); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
}
.ab-journey li {
  padding: .6rem 1.1rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  color: var(--color-lavender);
}
.ab-journey li + li::before { content: "→"; margin-right: var(--space-3); color: var(--color-accent-700); }
.ab-center { text-align: center; margin: 0; }

/* ==========================================================================
   1% CLUB CONTEXT — same animated premium glow as the homepage's
   .club-panel (home.css, index-only, not loaded here), re-created under
   .ab-club so About gets the identical "alive" gradient-border + pulsing
   halo treatment instead of a flat panel.
   ========================================================================== */
.ab-club {
  position: relative;
  isolation: isolate;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-8); flex-wrap: wrap;
  padding: var(--space-10);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl);
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(124, 58, 237, 0.32), transparent 65%),
    linear-gradient(180deg, rgba(30, 18, 58, 0.95), rgba(15, 10, 30, 0.98));
  box-shadow: 0 0 0 1px rgba(192, 160, 255, 0.12), inset 0 1px 0 rgba(192, 160, 255, 0.10);
}
.ab-club > div { max-width: 60ch; }
.ab-club-title { margin: 0 0 var(--space-3); font-size: 1.6rem; }
.ab-club p     { margin: 0 0 var(--space-4); color: var(--color-text-muted); line-height: 1.7; }
.ab-club p:last-child { margin-bottom: 0; }
.ab-club-eq    { font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0.02em; }
.ab-club-eq strong { color: var(--color-lavender); }

/* Animated gradient-border accent — position fixed, colors shift through
   the brand's purple/violet/gold/pink palette over time. */
.ab-club::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 1px);
  background: linear-gradient(90deg,
    rgba(139, 69, 255, 0.6),
    rgba(192, 160, 255, 0.5),
    rgba(255, 196, 102, 0.55),
    rgba(236, 72, 153, 0.5),
    rgba(124, 58, 237, 0.6),
    rgba(139, 69, 255, 0.6));
  background-size: 300% 100%;
  z-index: -1;
  animation: ab-club-glow-colorshift 8s ease-in-out infinite;
}
/* Soft diffuse halo that breathes in and out behind the panel. */
.ab-club::after {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -2;
  border-radius: calc(var(--radius-xl) + 16px);
  background: radial-gradient(60% 60% at 50% 50%, rgba(139, 69, 255, 0.35), transparent 70%);
  filter: blur(32px);
  animation: ab-club-glow-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ab-club-glow-colorshift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes ab-club-glow-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-club::before { animation: none; background-position: 0% 50%; }
  .ab-club::after { animation: none; opacity: 0.7; }
}

/* ==========================================================================
   BRAND PROMISE — closing statement
   ========================================================================== */
.ab-promise-inner { max-width: 820px; }
.ab-promise-title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin: 0 0 var(--space-8); letter-spacing: -0.02em;
}
.ab-promise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); text-align: left; }
.ab-promise-list li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text-muted); line-height: 1.6;
}
.ab-promise-list strong { color: var(--color-text); margin-right: var(--space-2); }

/* ==========================================================================
   SHARED SMALL BITS
   ========================================================================== */
.ab-note { margin: var(--space-6) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ab-note a, .ab-statement a { color: var(--color-lavender); border-bottom: 1px solid var(--color-border-strong); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* 1024px — loop / values to 2 columns */
@media (max-width: 1024px) {
  .ab-loop, .ab-values { grid-template-columns: repeat(2, 1fr); }
}

/* 768px — stacking */
@media (max-width: 768px) {
  .ab-story          { grid-template-columns: 1fr; gap: var(--space-8); }
  .ab-story-left     { position: static; }
  .ab-split          { grid-template-columns: 1fr; gap: var(--space-8); }
  .ab-split-intro    { position: static; }
  .ab-split-flip     { grid-template-columns: 1fr; }
  .ab-split-flip .ab-split-intro { order: 0; }
  .ab-statement      { padding: var(--space-12) 0; }
  .ab-trust-panel    { flex-direction: column; align-items: stretch; text-align: center; padding: var(--space-6); }
  .ab-trust-title    { max-width: none; }
  .ab-trust-strip li { text-align: left; }
  .ab-trust-cta      { align-self: center; }
  /* .founder-v2-panel / .founder-v2-card tablet stacking now in public.css */
}

/* 480px — single column everything */
@media (max-width: 480px) {
  .ab-loop, .ab-values, .ab-who { grid-template-columns: 1fr; }
  .ab-club           { padding: var(--space-6); flex-direction: column; align-items: flex-start; }
  .ab-journey        { flex-direction: column; align-items: stretch; }
  .ab-journey li     { text-align: center; }
  .ab-journey li + li::before { content: "↓"; display: block; margin: 0 0 var(--space-1); }
  /* .founder-v2-traits single-column collapse now in public.css (640px) */
  .ab-hero-actions   { flex-direction: column; align-items: flex-start; }
  .ab-story-bridge   { flex-direction: column; gap: var(--space-1); }
  .ab-bridge-arrow   { transform: rotate(90deg); }
}

/* ==========================================================================
   LIGHT THEME OVERRIDES
   ========================================================================== */
html[data-site-theme="light"] .ab-statement {
  background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(109,61,245,.12), transparent 70%);
}

html[data-site-theme="light"] .ab-story-bridge {
  background: rgba(240, 230, 250, 0.6);
}

html[data-site-theme="light"] .ab-trust-panel {
  background: var(--color-surface);
}

html[data-site-theme="light"] .ab-values-section {
  background: var(--color-surface-alt);
}

/* NOTE: .ab-club's light-theme background is owned by site.css (loaded
   before this file), which already gives it a dark fill to match the
   near-white text tokens it re-declares for this panel. Do not add a
   lighter/near-transparent background override here — about.css loads
   after site.css and would silently win, making the copy unreadable
   (this happened once already; keep this note so it doesn't regress). */

/* ==========================================================================
   HERO — entrance motion
   Same .is-visible-on-load convention as the rest of this file's reveals,
   but fires immediately (no scroll needed) since the hero is always the
   first thing on screen. Driven purely by CSS — no JS required.
   ========================================================================== */
.about-page .ab-hero .ab-hero-text > * {
  opacity: 0;
  transform: translateY(14px);
  animation: ab-fade-up 0.7s var(--ease-out, ease) forwards;
}
.about-page .ab-hero .pub-eyebrow      { animation-delay: .05s; }
.about-page .ab-hero h1                { animation-delay: .14s; }
.about-page .ab-hero .pub-hero-lead    { animation-delay: .24s; }
.about-page .ab-hero .ab-hero-actions  { animation-delay: .34s; }

@keyframes ab-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SCROLL REVEAL — applied via .ab-reveal + .is-visible (toggled by
   about-reveal.js using the same IntersectionObserver pattern as
   founder-card.js / one-percent.js's .is-visible convention). No-op,
   fully visible content if JS never runs (progressive enhancement).
   ========================================================================== */
.ab-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out, ease), transform .7s var(--ease-out, ease);
}
.ab-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .about-page .ab-hero .ab-hero-text > * { animation: none; opacity: 1; transform: none; }
  .ab-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   FOUNDER CARD — premium polish
   Builds on public.css's shared .founder-v2-* base: adds a soft ambient
   glow behind the photo and a crisper lift on hover/focus so the card
   reads as a deliberate "signature" moment rather than a generic grid tile.
   ========================================================================== */
.founder-v2-panel { position: relative; }

.founder-v2-card {
  position: relative;
  isolation: isolate;
}
.founder-v2-card::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 40%, rgba(139, 69, 255, 0.28), transparent 72%);
  filter: blur(28px);
  opacity: 0;
  transition: opacity .6s var(--ease-out, ease);
  pointer-events: none;
}
.founder-v2-card.is-visible::before { opacity: 1; }

.founder-v2-photo-wrap {
  box-shadow: 0 24px 60px -24px rgba(124, 58, 237, 0.45);
  transition: box-shadow .4s var(--ease-out, ease);
}
.founder-v2-card:hover .founder-v2-photo-wrap,
.founder-v2-card:focus-within .founder-v2-photo-wrap {
  box-shadow: 0 32px 72px -22px rgba(124, 58, 237, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .founder-v2-card::before { transition: none; opacity: 1; }
  .founder-v2-photo-wrap { transition: none; }
}

/* ==========================================================================
   TYPOGRAPHY & SPACING REFINEMENT
   Slightly more generous section rhythm and tighter heading tracking so
   the page breathes instead of reading as uniform stacked blocks.
   ========================================================================== */
.about-page .pub-section + .pub-section,
.about-page .ab-statement + .pub-section {
  padding-top: var(--space-4);
}

.about-page .pub-title,
.about-page .ab-story-heading,
.about-page .founder-v2-name {
  letter-spacing: -0.025em;
}

.about-page .pub-row h3,
.about-page .ab-loop h3,
.about-page .ab-who h3 {
  letter-spacing: -0.01em;
}

.about-page .pub-sub,
.about-page .ab-prose-lead {
  letter-spacing: -0.005em;
}