/* =============================================================================
   SHINE BRIGHT — single centre detail page (page-specific additions ONLY)
   -----------------------------------------------------------------------------
   Everything else (sb-modal__*, sb-session, sb-badge*, sb-btn*, sb-container,
   sb-service-card__tile, tokens…) lives in the copied design-system bundle
   (shine-bright-services.css). This file adds only the .sb-single* layer from
   spec 03-single-centre-template.md §3. Tokens only — no hardcoded hex/px.
   ============================================================================= */

.sb-single {
  padding-block: var(--sb-space-6) var(--sb-space-10);
}

.sb-single__head {
  margin-bottom: var(--sb-space-6);
}

.sb-single__badges {
  margin-bottom: var(--sb-space-4);
}

.sb-single__title {
  font-size: var(--sb-text-4xl);
  margin: 0 0 var(--sb-space-4);
  color: var(--sb-color-navy);
}

.sb-single__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sb-space-3);
}

.sb-single__media {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow-md);
  margin-bottom: var(--sb-space-6);
  background: var(--sb-color-cream-200);
}

.sb-single__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-single__media .sb-service-card__tile {
  font-size: var(--sb-text-5xl);
}

.sb-single__meta {
  margin-bottom: var(--sb-space-6);
  background: var(--sb-color-white);
  border: 1px solid var(--sb-color-border);
}

.sb-single__section {
  margin-bottom: var(--sb-space-6);
}

.sb-single__about {
  max-width: var(--sb-container-text);
}

.sb-single__about h2 {
  font-size: var(--sb-text-2xl);
  margin: var(--sb-space-5) 0 var(--sb-space-3);
}

.sb-single__about h3 {
  font-size: var(--sb-text-xl);
}

.sb-single__about ul,
.sb-single__about ol {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: var(--sb-space-4);
}

.sb-single__about ol {
  list-style: decimal;
}

/* Tour video — 16:9 responsive embed (design directive 2026-09-15). Mirrors the
   hero media treatment: radius-lg + shadow-md, same 16/9 ratio. */
.sb-single__video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow-md);
  background: var(--sb-color-navy-100); /* placeholder until the frame paints */
}

.sb-single__video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sb-single__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sb-space-3);
}

.sb-single__gallery img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--sb-radius-md);
}

@media (max-width: 640px) {
  .sb-single__title {
    font-size: var(--sb-text-3xl);
  }
}

/* ---------------------------------------------------------------------------
   v2 additions (spec 03 §3b, 2026-09-14) — tokens only, no hardcoded hex/px.
   Philosophy prose REUSES .sb-single__about (spec §3b) for its typography, but
   sits full width inside the design-system .sb-accordion component — see the
   page override at the end of this file. No separate prose class needed.
   --------------------------------------------------------------------------- */

/* NQS logo img — rendered inside the head, after the badge row, only when
   the ACF `nqs_badge` true/false is on. URL comes from the
   SB_SINGLE_NQS_BADGE_URL constant in single-centre.php (SWAP-ME). */
.sb-single__nqs-badge-img {
  display: block;
  height: 3.5rem; /* ≈ spec §3b; rem per spec (no px) */
  width: auto;
  margin-top: var(--sb-space-2);
  margin-bottom: var(--sb-space-4);
}

/* "What families say" — two equal 50% columns (stacks below 640px). */
.sb-single__testimonials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sb-space-4);
}

@media (max-width: 640px) {
  .sb-single__testimonials {
    grid-template-columns: 1fr;
  }
}

.sb-testimonial {
  background: var(--sb-color-white);
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-md);
  padding: var(--sb-space-5);
  margin: 0;
}

/* Quote mark — text glyph (sprite has no quote icon; no external asset
   added per spec). */
.sb-testimonial__quote {
  display: block;
  font-family: var(--sb-font-heading);
  font-size: var(--sb-text-3xl);
  line-height: 1;
  color: var(--sb-sprinkle-blue);
  margin-bottom: var(--sb-space-2);
}

.sb-testimonial__text {
  margin: 0;
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   The accordion itself is now a design-system component: styles in the bundle
   (components.css → .sb-accordion) and motion in sb/js/sb-accordion.js, so any
   page can use it. Only this PAGE-specific override stays here — the panel
   carries .sb-single__about for prose typography, and the prose column cap is
   lifted so the section runs the full container width.
   --------------------------------------------------------------------------- */
.sb-accordion__panel.sb-single__about {
  max-width: none; /* full width, not the --sb-container-text prose column */
}

/* ---------------------------------------------------------------------------
   Enrolment row (design directive 2026-09-15): the blue enrolment callout at
   3/4 with the NQS rating badge in a white card in the remaining 1/4, on the
   same line. With no badge to show, the row is a single column and the callout
   keeps the full width — the template only adds --split when BOTH the callout
   and the badge artwork exist.
   --------------------------------------------------------------------------- */
.sb-single__enrol-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sb-space-4);
  margin-bottom: var(--sb-space-5);
}

.sb-single__enrol-row--split {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

/* The bundle's .sb-modal__enrol carries its own bottom margin. Inside the row
   that margin falls OUTSIDE the blue box, which would leave it shorter than the
   badge card beside it — so the spacing moves to the row itself. */
.sb-single__enrol-row > .sb-modal__enrol {
  margin-bottom: 0;
}

/* NQS rating badge — white rounded card, badge centred in it. Card heights
   match across the row (grid stretch), so the badge sits centred vertically. */
.sb-single__nqs-card {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--sb-space-4);
  background: var(--sb-color-white);
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-md);
}

.sb-single__nqs-card-img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media (max-width: 640px) {
  .sb-single__enrol-row--split {
    grid-template-columns: minmax(0, 1fr); /* stack: callout, then badge */
  }
}