/* ==========================================================================
   Academy listing (page-academy)
   Page-specific rules only; tokens, chrome and shared components in site.css.
   Every selector is scoped under .page-academy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (navy page head)
   -------------------------------------------------------------------------- */

.page-academy .academy-hero {
  padding: clamp(30px, 3.2vw, 50px) 0;
}
.page-academy .academy-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--paper-rgb), 0.28);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.page-academy .academy-hero-title {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 15ch;
}
.page-academy .academy-hero-lead {
  margin: 16px 0 0;
  max-width: 640px;
  font: 400 clamp(16.5px, 1.2vw, 19px)/1.55 var(--font-sans);
  color: rgba(var(--paper-rgb), 0.84);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Lesson grid
   -------------------------------------------------------------------------- */

.page-academy .academy-listing {
  padding: clamp(36px, 4vw, 60px) 0 clamp(52px, 6vw, 96px);
}
.page-academy .academy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: var(--gap-cards);
}

/* --------------------------------------------------------------------------
   Lesson card (shared .card shell). Thumbnails are uncropped 16:9 artwork
   with the title baked into the lower third, so nothing may overlay it:
   the play mark sits top-left.
   -------------------------------------------------------------------------- */

.page-academy .lesson-cover {
  display: block;
  position: relative;
}
.page-academy .lesson-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Fallback panel when no thumbnail has been uploaded yet */
.page-academy .lesson-thumb-ph {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--band) 0%, var(--rule) 100%);
}

.page-academy .lesson-play {
  position: absolute;
  left: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--paper-rgb), 0.85);
  background: rgba(8, 32, 47, 0.72); /* --dark2 at 0.72 */
  color: var(--paper);
  font: 400 13px/1 var(--font-mono);
  padding-left: 3px;
}

.page-academy .lesson-body {
  display: block;
  padding: 16px 18px 22px;
}
.page-academy .lesson-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3);
}
.page-academy .lesson-duration {
  white-space: nowrap;
}
.page-academy .lesson-title {
  display: block;
  margin-top: 11px;
  font: 500 18px/1.28 var(--font-serif);
  color: var(--ink);
}
.page-academy .lesson-blurb {
  display: block;
  margin-top: 10px;
  font: 400 14.5px/1.55 var(--font-sans);
  color: var(--ink2);
}
.page-academy .lesson-watch {
  display: block;
  margin-top: 14px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Empty listing (no published lessons or DB unavailable) */
.page-academy .academy-empty {
  margin: 0;
  font: 400 14px/1.6 var(--font-mono);
  color: var(--ink3);
}

/* --------------------------------------------------------------------------
   White-label CTA band (navy)
   -------------------------------------------------------------------------- */

.page-academy .academy-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(30px, 3.5vw, 48px);
  padding: clamp(26px, 3vw, 38px);
  background: var(--dark);
  color: var(--paper);
}
.page-academy .academy-cta-title {
  margin: 0;
  max-width: 30ch;
  font: 500 clamp(22px, 2.4vw, 32px)/1.12 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--paper);
}
.page-academy .academy-cta-sub {
  margin: 12px 0 0;
  max-width: 54ch;
  font: 400 16px/1.6 var(--font-sans);
  color: rgba(var(--paper-rgb), 0.84);
}

/* --------------------------------------------------------------------------
   FAQ (band section)
   -------------------------------------------------------------------------- */

.page-academy .academy-faq {
  padding: clamp(48px, 5.6vw, 90px) 0;
}
.page-academy .academy-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 68px);
}
.page-academy .academy-faq-title {
  margin: 14px 0 0;
  max-width: 16ch;
  font: 500 clamp(26px, 3.2vw, 42px)/1.06 var(--font-serif);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.page-academy .academy-faq-lead {
  margin: 18px 0 0;
  max-width: 42ch;
  font: 400 17px/1.6 var(--font-sans);
  color: var(--ink2);
  text-wrap: pretty;
}
.page-academy .academy-faq-cta {
  margin-top: 24px;
}
.page-academy .academy-faq-list {
  border-top: 1px solid var(--ink);
}