/* ─── 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;
}

/* ─── Content Blocks — Programme Web Page authoring (programme-content-
   blocks.js). Replaces the old fixed five-field layout with an author-
   ordered mix of these block types. .pw-block gives every block type its
   own bottom margin so the rhythm matches the old fields' `<h2>`+`<p>`
   spacing; each type then only adds what's genuinely its own. */
.pw-block { margin: 0 0 1.5rem; }
.pw-block-text-body p { margin: 0 0 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.pw-block-text-body p:last-child { margin-bottom: 0; }
.pw-block-text-body ul, .pw-block-text-body ol { margin: 0 0 0.85rem; padding-left: 1.25rem; color: var(--text-secondary); }
.pw-block-text-body li { margin-bottom: 0.4rem; line-height: 1.5; }
.pw-block-text-body a { color: var(--gold); }

.pw-block-image { display: flex; flex-direction: column; }
.pw-block-image-img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.pw-block-image--inline { max-width: 420px; }
.pw-block-image--wide { max-width: 720px; }
.pw-block-image--full { max-width: 100%; }
.pw-block-image--align-left { margin-right: auto; }
.pw-block-image--align-center { margin-left: auto; margin-right: auto; }
.pw-block-image--align-right { margin-left: auto; }
.pw-block-image-caption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted); text-align: center; }

.pw-block-gallery { display: flex; gap: 0.75rem; }
.pw-block-gallery--grid { flex-wrap: wrap; }
.pw-block-gallery--grid .pw-block-image { flex: 1 1 220px; max-width: none; }
.pw-block-gallery--carousel { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }
.pw-block-gallery--carousel .pw-block-image { flex: 0 0 auto; width: 260px; max-width: none; }

.pw-block-video { display: flex; flex-direction: column; }
.pw-block-video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-lg); overflow: hidden; }
.pw-block-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.pw-block-video-file { width: 100%; border-radius: var(--radius-lg); }
.pw-block-video--contained .pw-block-video-embed,
.pw-block-video--contained .pw-block-video-file { max-width: 560px; }
.pw-block-video-caption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }

.pw-block-pdf { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pw-block-pdf-filename { font-size: 0.85rem; color: var(--text-muted); }

.pw-block-quote { margin: 0 0 1.5rem; }
.pw-block-quote-text { margin: 0 0 0.5rem; font-style: italic; color: var(--text-primary); line-height: 1.5; }
.pw-block-quote-attribution { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; }
.pw-block-quote--highlight { border-left: 3px solid var(--gold); padding-left: 1rem; }

/* ─── 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; }

/* height:100% (Grid Container Programme Card alignment fix, Aug 2026) —
   .plat-card already carries its own height:100% (platform.css) so it can
   fill a stretched Grid Container cell, but a percentage height only ever
   resolves against a DEFINITE ancestor height. Before this rule, this div
   sat between the grid cell (.ce-grid-child, itself height:100% against a
   real CSS Grid row) and .plat-card, with no height of its own — an "auto"
   link in the percentage chain that silently reset it back to content-sized
   for EVERY card, regardless of how tall its siblings' text made the row.
   That's why, when an Available Programme card (longer content) sat next
   to two Coming Soon cards, only the shorter cards visibly stretched-ish
   while the taller one didn't — none of them were actually being stretched
   at all; they just happened to differ by content height alone.
   height:100% here is deliberately a PERCENTAGE, not a fixed px value: with
   no ancestor grid cell (this component in ordinary page flow, its own
   pre-existing standalone use), a percentage height against an auto-height
   parent computes to `auto` per the CSS spec — i.e. this rule is a genuine
   no-op outside a Grid Container and imposes no fixed height on the Canvas,
   the Grid, or this wrapper itself, exactly as required. */
.wp-programme-listing { max-width: 1200px; margin: 0 auto 1.5rem; height: 100%; }
.wp-card--compact .plat-card-hero { aspect-ratio: 16 / 9; }

/* Programme Showcase (Programme Showcase / Coming Soon) — an ordered mix of
   Available and Coming Soon .plat-card cards. Reuses .plat-grid's own
   auto-fill card grid shape (platform.css) rather than declaring a second
   grid pattern, scoped down to this section's own max-width/margin like
   .wp-programme-listing above.

   Grid Container v1 (docs/GRID_LAYOUT_CONTAINER_ARCHITECTURE_PROPOSAL.md
   §7, "Option B") — this rule is the deliberate CSS counterpart of
   gridContainerStyle() (canvas-engine-pure.js), the shared recipe the new
   generic Canvas Grid Container's inline style is built from: CSS Grid,
   default `align-items:stretch` (never overridden here, same as there —
   this is what makes .plat-card's own height:100% actually fill the row),
   and an explicit gap. Showcase does NOT literally consume that function
   (its `entries[]` count is content/data-driven, so `auto-fill`/`minmax`
   is the right column strategy here, vs. the Grid Container's author-set
   explicit N columns) — but the two are intentionally the SAME decision
   (stretch-by-default, explicit gap), stated once and cross-referenced,
   not two independently-invented, potentially-drifting grid recipes. */
.wp-programme-showcase {
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  /* height:100% (Grid Container Programme Card alignment fix, Aug 2026) —
     same percentage-height no-op-outside-a-definite-ancestor reasoning as
     .wp-programme-listing above: only matters when a whole Showcase
     instance is itself placed as one Grid Container child alongside other
     objects; a no-op in this component's own long-standing standalone
     page-flow usage. */
  height: 100%;
}
.wp-card--coming-soon { cursor: default; }
.wp-card-cta--coming-soon { color: var(--text-secondary); }

.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); }