/* ─── Public Programme Web Page System — new classes only ────────────────
   Milestone 26 Stage 1. Everything else this surface needs (`.plat-shell-*`
   header/nav/footer, `.plat-grid`/`.plat-card`/`.plat-badge` catalogue
   cards, `.plat-empty-state`, the `.btn`/`.btn-gold`/`.btn-ghost` family,
   `.plat-detail-hero-title`, `.loading-ring`) is reused directly from
   main.css/platform.css — see programme-pages.html's own header for why.
   Only the handful of things genuinely new to this surface live here. */

.pw-catalogue-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 2rem 0;
}

/* h1 already inherits --font-display/--text-primary from main.css's base
   rules — only the size needs setting here, matching the scale
   .plat-detail-title (platform.css) already uses for a page-level heading. */
.pw-page-title {
  font-size: 1.8rem;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
}

.pw-stub-back {
  max-width: 1200px;
  margin: 1rem auto 0;
  padding: 0 2rem;
}

/* ─── Programme Web Page (detail) — Stage 1 Step 3. The hero/layout/sidebar
   shell is .plat-detail-* (platform.css), reused as-is; only Learning
   Outcomes/Testimonials/FAQ/the Coming Soon note are new to this surface. */

.pw-outcomes-list {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  color: var(--text-secondary);
}
.pw-outcomes-list li { margin-bottom: 0.4rem; line-height: 1.5; }

.pw-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}
/* Box styling (border/background/radius/padding) is deliberately NOT
   redeclared here — the markup applies .plat-detail-card (platform.css)
   alongside .pw-testimonial-card for that, so a <blockquote> only needs its
   own margin reset here. Caught during the Content Editor architecture
   review: an earlier draft duplicated .plat-detail-card's exact box
   declarations under a new name instead of reusing it. */
.pw-testimonial-card { margin: 0; }
.pw-testimonial-quote {
  margin: 0 0 0.75rem;
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.5;
}
.pw-testimonial-author { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; }
.pw-testimonial-role { font-weight: 400; color: var(--text-muted); }

.pw-faq-list { margin: 0 0 1.5rem; }
.pw-faq-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.pw-faq-item:last-child { border-bottom: none; }
.pw-faq-question { margin: 0 0 0.4rem; color: var(--text-primary); font-weight: 600; }
.pw-faq-answer { margin: 0; color: var(--text-secondary); line-height: 1.5; }

.pw-coming-soon-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ─── Website Page components (Milestone 27.2) — `.wp-*` ───────────────────
   website-components-registry.js's render(props, context) functions reuse
   .plat-detail-hero/.plat-section-title/.plat-detail-card/.plat-card/
   .plat-grid/.pw-faq-*/.btn family wherever the visual shape already
   matches (see that file's own header comments); only the genuinely new
   layouts below (Features grid/list, Pricing cards, Navigation bar, a
   generic Footer, and the shared "nothing real to show yet" block) get new
   classes here. */

.wp-hero { margin: 0 0 1.5rem; }
.wp-hero--center .plat-detail-hero-overlay-main { text-align: center; margin: 0 auto; align-items: center; }
.wp-hero--right .plat-detail-hero-overlay-main { text-align: right; margin-left: auto; align-items: flex-end; }
.wp-hero-overlay--dark { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); }
.wp-hero-cta { margin-top: 1rem; display: inline-block; }

.wp-cta {
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
}
.wp-cta--secondary { background: var(--surface-alt, transparent); }
.wp-cta-btn { display: inline-block; margin-top: 0.5rem; }

.wp-features { max-width: 1200px; margin: 0 auto 1.5rem; }
.wp-features-grid {
  display: grid;
  grid-template-columns: repeat(var(--wp-features-columns, 3), 1fr);
  gap: 1rem;
}
.wp-features-list { display: flex; flex-direction: column; gap: 0.75rem; }
.wp-feature-description { margin: 0.4rem 0 0; color: var(--text-secondary); line-height: 1.5; }

.wp-programme-listing { max-width: 1200px; margin: 0 auto 1.5rem; }
.wp-card--compact .plat-card-hero { aspect-ratio: 16 / 9; }

.wp-degraded-block { max-width: 1200px; margin: 0 auto 1.5rem; }
.wp-degraded-note { font-style: italic; }

.wp-faq { max-width: 1200px; margin: 0 auto 1.5rem; }
.wp-pricing { max-width: 1200px; margin: 0 auto 1.5rem; }
.wp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.wp-pricing-price { font-size: 1.4rem; color: var(--gold); font-weight: 700; margin: 0.4rem 0; }
.wp-pricing-features { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--text-secondary); }
.wp-pricing-features li { margin-bottom: 0.3rem; }
.wp-pricing-comparison { width: 100%; border-collapse: collapse; }
.wp-pricing-comparison th, .wp-pricing-comparison td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: center;
}
.wp-pricing-comparison th:first-child, .wp-pricing-comparison td:first-child { text-align: left; }

.wp-footer {
  padding: 2rem;
  text-align: center;
  border-top: 1px solid var(--border);
}
.wp-footer--minimal { padding: 1rem; }
.wp-footer-logo { height: 32px; margin-bottom: 0.75rem; }
.wp-footer-copyright { margin: 0; color: var(--text-muted); font-size: 0.85rem; }

.wp-nav { display: flex; gap: 1.25rem; padding: 1rem 2rem; flex-wrap: wrap; }
.wp-nav--vertical { flex-direction: column; gap: 0.6rem; }
.wp-nav-link { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.wp-nav-link:hover { color: var(--gold); }