/* ==========================================================================
   Topaz Art Academy — programs.css
   The Programs overview page: dark editorial hero, the one-year
   membership band, six compact category sections (numbered heading
   beside the program list), and the closing CTA.
   Reuses base.css tokens, .reveal motion, and
   .btn — everything here is scoped to .pg-*, .cat, .prog-* classes.
   ========================================================================== */

/* ------------------------------------------------------------------
   HERO — dark editorial band
   ------------------------------------------------------------------ */
.pg-hero {
  position: relative;
  background: var(--bg-philosophy);
  color: var(--cream);
  padding: clamp(64px, 9vh, 104px) 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.pg-hero .container { width: 100%; }

.pg-hero .eyebrow { margin-bottom: 20px; }

.pg-hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--cream);
  animation: pg-title-in 1.5s var(--ease-out) 0.2s both;
}

@keyframes pg-title-in {
  from { opacity: 0; transform: translateY(48px); letter-spacing: 0.02em; }
  to   { opacity: 1; transform: none;           letter-spacing: -0.02em; }
}

/* gold rule that draws in under the title */
.pg-rule {
  width: min(340px, 44%);
  height: 1px;
  margin: clamp(18px, 2.6vh, 28px) 0;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: left center;
  animation: pg-rule-in 1.3s var(--ease-out) 0.85s both;
}

@keyframes pg-rule-in { to { transform: scaleX(1); } }

.pg-hero .pg-lede {
  max-width: 660px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--cream-soft);
  animation: pg-fade-in 1.2s var(--ease-out) 0.65s both;
}

.pg-hero .pg-lede em {
  font-style: italic;
  color: var(--cream);
}

@keyframes pg-fade-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* faint whisper, same language as the home hero */
.pg-hero .pg-whisper {
  position: absolute;
  right: clamp(16px, 2.4vw, 46px);
  bottom: 18px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.9em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.3);
  white-space: nowrap;
  opacity: 0;
  animation: whisper-in 1.6s var(--ease-soft) 1.2s both;
}

/* stat row */
.pg-stats {
  margin-top: clamp(28px, 4vh, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 60px);
  animation: pg-fade-in 1.2s var(--ease-out) 0.95s both;
}

.pg-stat { display: flex; flex-direction: column; gap: 8px; }

.pg-stat .pg-stat-n {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  color: var(--cream);
}

.pg-stat .pg-stat-l {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.55);
}

/* ------------------------------------------------------------------
   MEMBERSHIP — the simple "one year" band (copy pending the client)
   ------------------------------------------------------------------ */
.pg-membership {
  background: var(--bg-light);
  padding: clamp(56px, 8vh, 96px) 0;
  text-align: center;
}

.pg-membership .eyebrow { margin-bottom: 18px; }

.pg-membership h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 18ch;
  margin: 0 auto;
}

.pg-membership .pg-membership-copy {
  max-width: 640px;
  margin: 18px auto 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.pg-membership .btn { margin-top: clamp(24px, 3.5vh, 36px); }

/* ------------------------------------------------------------------
   CATEGORY SECTIONS — numbered heading beside the program list
   ------------------------------------------------------------------ */
.cat {
  position: relative;
  padding: clamp(48px, 7vh, 84px) 0;
}

.cat > .container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.cat--light   { background: var(--bg-light); }
.cat--lighter { background: var(--bg-lighter); }
.cat--dark    { background: var(--bg-philosophy); color: var(--cream); }

/* number + title/description */
.cat-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(14px, 1.8vw, 28px);
  row-gap: 0;
  align-items: start;
}

.cat-num {
  font-family: var(--font-display);
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(48px, 5vw, 84px);
  line-height: 0.88;
  letter-spacing: 0.04em;
  color: rgba(30, 42, 46, 0.09);
  opacity: 0;
}

.cat--dark .cat-num { color: rgba(244, 240, 232, 0.11); }

/* the giant number settles from a wide, quiet state once the section
   enters view (the section itself carries .reveal) */
.cat.in-view .cat-num {
  opacity: 1;
  animation: pg-num-settle 1.7s var(--ease-soft) 0.15s both;
}

@keyframes pg-num-settle {
  from { letter-spacing: 0.36em; transform: translateY(20px); }
  to   { letter-spacing: 0.04em; transform: none; }
}

.cat-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 14ch;
}

.cat--dark .cat-title { color: var(--cream); }

.cat-desc {
  margin-top: 14px;
  max-width: 520px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.cat--dark .cat-desc { color: var(--cream-soft); }

.cat-tag {
  margin-top: 14px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cat--dark .cat-tag { color: var(--gold-bright); }

/* ---------- program list ---------- */
.prog-list {
  display: block;
}

.prog {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  padding: clamp(11px, 1.2vw, 15px) 10px;
  border-top: 1px solid var(--rule-dark);
  transition: background 0.4s var(--ease-out), padding 0.4s var(--ease-soft);
}

.prog-list .prog:last-child { border-bottom: 1px solid var(--rule-dark); }

.cat--dark .prog { border-top-color: rgba(244, 240, 232, 0.14); }
.cat--dark .prog-list .prog:last-child { border-bottom-color: rgba(244, 240, 232, 0.14); }

.prog:hover { padding-left: 20px; background: rgba(85, 136, 145, 0.07); }
.cat--dark .prog:hover { background: rgba(200, 154, 78, 0.08); }

.prog-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: color 0.35s var(--ease-out);
}

.cat--dark .prog-name { color: var(--cream); }

.prog:hover .prog-name { color: var(--teal-deep); }
.cat--dark .prog:hover .prog-name { color: var(--gold-bright); }

.prog-meta {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  transition: color 0.35s var(--ease-out);
}

.cat--dark .prog-meta { color: rgba(244, 240, 232, 0.5); }

.prog:hover .prog-meta { color: var(--teal-deep); }
.cat--dark .prog:hover .prog-meta { color: var(--gold-bright); }

.prog-arrow {
  flex-shrink: 0;
  align-self: center;
  font-size: 15px;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-soft);
}

.prog:hover .prog-arrow { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   CLOSING CTA
   ------------------------------------------------------------------ */
.pg-cta {
  position: relative;
  background: var(--bg-footer);
  color: var(--cream);
  text-align: center;
  padding: clamp(64px, 9vh, 112px) 0;
  overflow: hidden;
}

.pg-cta h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--cream);
  max-width: 20ch;
  margin: 0 auto;
}

.pg-cta .pg-cta-copy {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--cream-soft);
}

.pg-cta .btn { margin-top: clamp(24px, 3.5vh, 36px); }

.pg-cta .pg-whisper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  font-size: 10px;
  letter-spacing: 0.9em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.28);
  opacity: 0;
  animation: whisper-in 1.6s var(--ease-soft) 1s both;
}

/* ------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .cat > .container { grid-template-columns: 1fr; gap: 24px; }
  .cat-head { grid-template-columns: 1fr; row-gap: 8px; }
  .cat-num { font-size: clamp(40px, 8vw, 60px); }
  .cat-title { max-width: none; }

  .prog {
    flex-wrap: wrap;
    gap: 6px 16px;
  }
  .prog-meta { white-space: normal; }
  .prog-arrow { display: none; }

  .pg-stats { gap: 20px 36px; }
}

@media (max-width: 560px) {
  /* the nowrap, 0.9em-tracked line is wider than a phone */
  .pg-hero .pg-whisper { display: none; }
}

/* ------------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pg-hero h1,
  .pg-hero .pg-lede,
  .pg-hero .pg-stats,
  .pg-hero .pg-whisper,
  .pg-cta .pg-whisper { animation: none; opacity: 1; }
  .pg-rule { animation: none; transform: none; }
  .cat.in-view .cat-num { animation: none; opacity: 1; }
}