/* =====================================================================
   KEY FOR CHANGE — SUCCESS STORIES (Mike's design keyforchange-success-
   stories.html, task #1001011). Ported faithfully as a scoped .k4c-success
   component; loaded template-gated from base.html.twig
   (page.template == 'success-stories'), the same pattern as
   about (#1001009) / programme (#1001010) / shop (#1000993).

   Design fonts (Bricolage/Newsreader/Instrument) map to the site's brand
   fonts; the editorial serif role keeps a system serif (Georgia) so Mike's
   quote/standfirst contrast survives without shipping a new webfont.

   The hero reuses the sitewide .kfc-band wrapper so it clears the fixed
   transparent nav and inherits the deep-purple + glow. Everything else is
   scoped under .k4c-success with an ss- prefix so the design's very generic
   class names (.band/.hero/.wall/.story/.next/.btn) never collide with
   theme / quark2 globals. The design's own header/nav/quick-exit are dropped
   — the global ones from base.html.twig are used instead.
   ===================================================================== */
.k4c-success {
  --ss-ink: #241A33; --ss-ink2: #4A415A; --ss-ink3: #6F6580; --ss-ink4: #8A809A;
  --ss-paper: #FAF7F2; --ss-paper2: #F3EEE7; --ss-white: #FFFFFF;
  --ss-brand: #512D7F; --ss-deep: #2A153F; --ss-lilac: #C9A6F2; --ss-lilac2: #EADFF4;
  --ss-line: rgba(81,45,127,0.14); --ss-line2: rgba(81,45,127,0.28);
  --ss-display: var(--k4c-font-heading);
  --ss-serif: Georgia, 'Times New Roman', serif;
  --ss-sans: var(--k4c-font-body);
  --ss-gutter: 64px; --ss-container: 1440px;
  background: var(--ss-paper);
  color: var(--ss-ink);
  font-family: var(--ss-sans);
}
.k4c-success * { box-sizing: border-box; }
.k4c-success a { color: inherit; text-decoration: none; }
.k4c-success button { font: inherit; cursor: pointer; }
.k4c-success .ss-container { max-width: var(--ss-container); margin: 0 auto; padding: 0 var(--ss-gutter); }

.k4c-success .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 24px; border-radius: 999px; font-family: var(--ss-sans); font-size: 15px; font-weight: 700; white-space: nowrap; border: 0; transition: transform .18s, box-shadow .18s, background .18s; }
.k4c-success .ss-btn:hover { transform: translateY(-1px); }
.k4c-success .ss-btn svg { width: 16px; height: 16px; }
.k4c-success .ss-btn-brand { background: var(--ss-brand); color: #fff; }
.k4c-success .ss-btn-white { background: #fff; color: var(--ss-deep); }
.k4c-success .ss-btn-outline { background: transparent; border: 1.5px solid var(--ss-brand); color: var(--ss-brand); font-weight: 600; }
.k4c-success .ss-btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.35); color: #fff; font-weight: 600; }

.k4c-success .ss-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ss-brand); }
.k4c-success .ss-tag::before { content: ""; width: 24px; height: 1.5px; background: currentColor; }
.k4c-success .ss-sec { padding: 72px 0 0; }
.k4c-success .ss-sh { margin-bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.k4c-success .ss-sh h2 { margin: 12px 0 0; font-family: var(--ss-display); font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.k4c-success .ss-sh h2 .ss-accent { color: var(--ss-brand); }
.k4c-success .ss-sh p { margin: 10px 0 0; font-family: var(--ss-serif); font-size: 18px; color: var(--ss-ink2); max-width: 640px; }

.k4c-success .ss-src { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ss-ink4); }
.k4c-success .ss-src svg { width: 13px; height: 13px; }
.k4c-success .ss-src.google { color: #3B6E3F; }
.k4c-success .ss-src.facebook { color: #2B5DA8; }
.k4c-success .ss-src.course { color: var(--ss-brand); }
.k4c-success .ss-src.event { color: #8A5A1E; }

/* ---------- reviewer avatar (initials disc — reads immediately as genuine
   human feedback; colour matches the review source. Real photos are never
   fabricated for real reviewers, so this is an initial/anon-glyph disc, the
   same convention Google itself uses when a reviewer has no photo). ---------- */
.k4c-success .ss-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--ss-display); font-weight: 700; font-size: 15px; line-height: 1; text-transform: uppercase; color: #fff; background: var(--ss-brand); box-shadow: 0 1px 2px rgba(36,26,51,0.18); }
.k4c-success .ss-avatar svg { width: 20px; height: 20px; }
.k4c-success .ss-avatar.google { background: #3B6E3F; }
.k4c-success .ss-avatar.facebook { background: #2B5DA8; }
.k4c-success .ss-avatar.course { background: var(--ss-brand); }
.k4c-success .ss-avatar.event { background: #8A5A1E; }

/* ---------- (1) hero (listing) — reuses .kfc-band for nav clearance ---------- */
.k4c-success .ss-hero > .ss-container { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 32px; padding-top: calc(var(--k4c-nav-height) + 12px); padding-bottom: 28px; align-items: end; }
.k4c-success .ss-hero h1 { margin: 0; font-family: var(--ss-display); font-size: clamp(40px, 5.4vw, 64px); line-height: 0.98; font-weight: 800; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.k4c-success .ss-hero h1 .ss-accent { color: var(--ss-lilac); }
.k4c-success .ss-hero .ss-standfirst { margin: 16px 0 0; max-width: 640px; font-family: var(--ss-serif); font-size: 19px; line-height: 1.5; color: #D9C6F0; }
.k4c-success .ss-count { display: flex; justify-content: flex-end; gap: 32px; }
.k4c-success .ss-count div { text-align: right; }
.k4c-success .ss-count b { display: block; font-family: var(--ss-display); font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.k4c-success .ss-count span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #B9A6D4; }

.k4c-success .ss-filters { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 20px; }
.k4c-success .ss-filters > .ss-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.k4c-success .ss-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.k4c-success .ss-tabs button { padding: 9px 14px; border-radius: 999px; background: none; border: 0; font-size: 13px; font-weight: 500; color: #D9C6F0; transition: background .18s, color .18s; }
.k4c-success .ss-tabs button:hover { color: #fff; }
.k4c-success .ss-tabs button[aria-pressed="true"] { background: #fff; color: var(--ss-deep); font-weight: 600; }
.k4c-success .ss-glink { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #D9C6F0; white-space: nowrap; }
.k4c-success .ss-glink:hover { color: #fff; }
.k4c-success .ss-glink svg { width: 16px; height: 16px; color: var(--ss-lilac); }

/* ---------- (2) featured ---------- */
.k4c-success .ss-feature { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px; }
.k4c-success .ss-fquote { border-radius: 26px; background: var(--ss-deep); color: #fff; padding: 44px 48px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; }
.k4c-success .ss-fquote::before { content: ""; position: absolute; right: -160px; top: -200px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(129,86,181,0.5) 0%, rgba(42,21,63,0) 70%); }
.k4c-success .ss-fquote > * { position: relative; }
.k4c-success .ss-fquote .ss-mark { font-family: var(--ss-display); font-size: 96px; line-height: 0.5; color: var(--ss-lilac); font-weight: 800; }
.k4c-success .ss-fquote p { margin: 0; color: #fff; font-family: var(--ss-serif); font-size: 34px; line-height: 1.3; text-wrap: pretty; }
.k4c-success .ss-fquote .ss-who { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 14px; color: #B9A6D4; }
.k4c-success .ss-fquote .ss-who b { color: #fff; font-weight: 600; display: block; }
.k4c-success .ss-fquote .ss-who .ss-src { margin-left: auto; color: var(--ss-lilac); }
.k4c-success .ss-fquote .ss-avatar { width: 46px; height: 46px; font-size: 17px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.k4c-success .ss-fside { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.k4c-success .ss-fside .ss-card { border-radius: 22px; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.k4c-success .ss-fside .ss-card.a { background: var(--ss-lilac2); }
.k4c-success .ss-fside .ss-card.b { background: var(--ss-white); border: 1px solid var(--ss-line); }
.k4c-success .ss-fside .ss-card .ss-h { font-family: var(--ss-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.k4c-success .ss-fside .ss-card p { margin: 0; font-family: var(--ss-serif); font-size: 17px; line-height: 1.4; color: var(--ss-ink2); }
.k4c-success .ss-fside .ss-card .ss-who { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 13px; color: var(--ss-ink3); }
.k4c-success .ss-fside .ss-card .ss-who b { color: var(--ss-ink); font-weight: 600; }
.k4c-success .ss-fside .ss-card .ss-who .ss-who-src { margin-left: auto; color: var(--ss-ink3); }

/* ---------- (3) the wall ---------- */
.k4c-success .ss-wall { columns: 3; column-gap: 16px; }
.k4c-success .ss-story { break-inside: avoid; margin: 0 0 16px; border-radius: 20px; background: var(--ss-white); border: 1px solid var(--ss-line); padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.k4c-success .ss-story[hidden] { display: none; }
.k4c-success .ss-story .ss-h { font-family: var(--ss-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.k4c-success .ss-story p { margin: 0; font-family: var(--ss-serif); font-size: 18px; line-height: 1.45; color: var(--ss-ink2); text-wrap: pretty; }
.k4c-success .ss-story .ss-who { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ss-line); font-size: 13px; color: var(--ss-ink3); }
.k4c-success .ss-story .ss-who b { color: var(--ss-ink); font-weight: 600; }
.k4c-success .ss-story .ss-who .ss-src { margin-left: auto; text-align: right; }
.k4c-success .ss-story.tinted { background: var(--ss-lilac2); border-color: var(--ss-lilac2); }
.k4c-success .ss-story.tinted .ss-who { border-color: rgba(81,45,127,0.18); }
.k4c-success .ss-privacy { margin-top: 20px; display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--ss-ink3); line-height: 1.5; max-width: 720px; }
.k4c-success .ss-privacy svg { width: 16px; height: 16px; color: var(--ss-brand); flex-shrink: 0; margin-top: 2px; }

/* ---------- (4) share yours ---------- */
.k4c-success .ss-share { margin-top: 72px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.k4c-success .ss-share > div { border-radius: 22px; padding: 30px 32px; display: flex; flex-direction: column; gap: 10px; }
.k4c-success .ss-share .g { background: var(--ss-white); border: 1px solid var(--ss-line); }
.k4c-success .ss-share .p { background: var(--ss-lilac2); }
/* One-panel state — used while the Google Business Profile write-review link is
   still to be supplied (see #1001011 completion note / follow-up). */
.k4c-success .ss-share.ss-share--one { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
.k4c-success .ss-share h3 { margin: 0; font-family: var(--ss-display); font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.k4c-success .ss-share p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ss-ink2); }
.k4c-success .ss-share .ss-btn { align-self: flex-start; margin-top: 8px; }

/* ---------- (5) next step ---------- */
.k4c-success .ss-next { margin: 72px 0 96px; border-radius: 26px; background: var(--ss-deep); color: #fff; padding: 44px 48px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.k4c-success .ss-next::before { content: ""; position: absolute; right: -140px; top: -180px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(129,86,181,0.5) 0%, rgba(42,21,63,0) 70%); }
.k4c-success .ss-next > * { position: relative; }
.k4c-success .ss-next h2 { margin: 0 0 8px; font-family: var(--ss-display); font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.k4c-success .ss-next h2 span { color: var(--ss-lilac); }
.k4c-success .ss-next p { margin: 0; font-family: var(--ss-serif); font-size: 19px; color: #D9C6F0; max-width: 560px; }
.k4c-success .ss-next .ss-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .k4c-success { --ss-gutter: 32px; }
  .k4c-success .ss-hero > .ss-container { grid-template-columns: 1fr; }
  .k4c-success .ss-count { justify-content: flex-start; }
  .k4c-success .ss-count div { text-align: left; }
  .k4c-success .ss-filters > .ss-container { flex-direction: column; align-items: flex-start; }
  .k4c-success .ss-tabs { overflow-x: auto; max-width: 100%; }
  .k4c-success .ss-feature { grid-template-columns: 1fr; }
  .k4c-success .ss-fquote p { font-size: 26px; }
  .k4c-success .ss-fside { grid-template-rows: auto; }
  .k4c-success .ss-wall { columns: 2; }
  .k4c-success .ss-share, .k4c-success .ss-next { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .k4c-success { --ss-gutter: 20px; }
  .k4c-success .ss-wall { columns: 1; }
  .k4c-success .ss-fquote { padding: 28px 24px; }
  .k4c-success .ss-btn { width: 100%; }
  .k4c-success .ss-sh { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .k4c-success .ss-btn { transition: none; }
  .k4c-success .ss-btn:hover { transform: none; }
}

/* ---------- hero height consistency (#1001097) --------------------------------
   Match the different section heroes to the programme hero's height on desktop.
   The grid bottom-aligns (align-items:end), so the floor adds nav-clearance
   breathing room at the top; the .ss-filters strip (~68px) sits below it, so the
   band floors at the shared target minus that strip. Stacks < 1100px = natural. */
@media (min-width: 1101px) {
  .k4c-success .ss-hero > .ss-container { min-height: calc(var(--kfc-hero-min) - 68px); }
}

/* ---------- video testimonial card (#1001349) --------------------------------
   Mike: include the retreats testimonial video (youtu.be/YgP8FjzXyhQ) in the
   wall. Poster-facade pattern, same as the home featured video: the card ships
   a self-hosted still as a plain <a> to YouTube (works with JS off), and
   success-stories.js swaps in a youtube-nocookie player on click. Click to
   play ONLY — nothing autoplays on load (YMYL §7). */
.k4c-success .ss-story--video { padding: 0; gap: 0; overflow: hidden; }
.k4c-success .ss-story--video .ss-vplay { position: relative; display: block; }
.k4c-success .ss-story--video .ss-vplay img { display: block; width: 100%; height: auto; }
.k4c-success .ss-story--video .ss-vbtn { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.94); box-shadow: 0 6px 24px rgba(36,26,51,0.35), 0 0 0 6px rgba(81,45,127,0.14); display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease; }
.k4c-success .ss-story--video .ss-vbtn svg { width: 26px; height: 26px; margin-left: 3px; color: var(--ss-brand); }
.k4c-success .ss-story--video .ss-vplay:hover .ss-vbtn,
.k4c-success .ss-story--video .ss-vplay:focus-visible .ss-vbtn { transform: scale(1.08); }
.k4c-success .ss-story--video .ss-vplay:focus-visible { outline: 3px solid var(--ss-brand); outline-offset: 2px; }
.k4c-success .ss-story--video .ss-vbody { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.k4c-success .ss-story--video .ss-vbody .ss-who { margin-top: auto; }
.k4c-success .ss-story--video .ss-vframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: #000; }
.k4c-success .ss-src.video { color: #A03028; }
.k4c-success .ss-avatar.video { background: #A03028; }
.k4c-success .ss-avatar.video svg { width: 18px; height: 18px; margin-left: 1px; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .k4c-success .ss-story--video .ss-vbtn { transition: none; }
  .k4c-success .ss-story--video .ss-vplay:hover .ss-vbtn,
  .k4c-success .ss-story--video .ss-vplay:focus-visible .ss-vbtn { transform: none; }
}

/* ---------- #1001607: two-video row + Google-review cards on the wall ---------- */
.k4c-success .ss-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.k4c-success .ss-videos .ss-story { margin: 0; }
.k4c-success .ss-videos .ss-vframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.k4c-success .ss-wall .k4c-grev { break-inside: avoid; margin: 0 0 16px; }
@media (max-width: 760px) { .k4c-success .ss-videos { grid-template-columns: 1fr; } }

/* Live Google feed "Show more" (#1001648) — collapse only when JS armed it. */
.k4c-success .ss-wall.is-collapsed .ss-more { display: none; }
.k4c-success .ss-moreb { text-align: center; margin-top: 8px; }

/* ---------- (4) share yours — full-width image band (#1001655) ----------
   Mike: "make this full width add an image". Drops the 760px cap so the panel
   spans the container (same width as .ss-next below), portrait left / copy right,
   stacks image-over-text under 900px. */
.k4c-success .ss-share.ss-share--wide { max-width: none; }
.k4c-success .ss-share--wide > .p { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; padding: 0; overflow: hidden; position: relative; }
.k4c-success .ss-share--wide > .p::after { content: ""; position: absolute; right: -160px; bottom: -200px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(201,166,242,0.55) 0%, rgba(234,223,244,0) 70%); pointer-events: none; }
.k4c-success .ss-share-img { margin: 0; min-height: 100%; }
.k4c-success .ss-share-img img { display: block; width: 100%; height: 100%; min-height: 420px; max-height: 560px; object-fit: cover; object-position: 50% 25%; }
.k4c-success .ss-share-body { position: relative; z-index: 1; padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.k4c-success .ss-share--wide h3 { font-size: 40px; line-height: 1.02; }
.k4c-success .ss-share--wide p { font-family: var(--ss-serif); font-size: 19px; line-height: 1.5; max-width: 560px; }
.k4c-success .ss-share-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.k4c-success .ss-share-points li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ss-ink2); }
.k4c-success .ss-share-points li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 14px; height: 14px; border-radius: 50%; background: var(--ss-brand); box-shadow: inset 0 0 0 4px var(--ss-lilac2); }
@media (max-width: 900px) {
  .k4c-success .ss-share--wide > .p { grid-template-columns: 1fr; }
  .k4c-success .ss-share-img img { min-height: 0; max-height: none; aspect-ratio: 4 / 3; object-position: 50% 20%; }
  .k4c-success .ss-share-body { padding: 32px 28px 36px; }
  .k4c-success .ss-share--wide h3 { font-size: 30px; }
}
/* Pico/quark list chrome leaks square markers + indent onto the points list */
.k4c-success ul.ss-share-points, .k4c-success ul.ss-share-points li { list-style: none; margin-left: 0; padding-inline-start: 0; }
.k4c-success ul.ss-share-points li { padding-left: 26px; margin-bottom: 0; }
.k4c-success ul.ss-share-points li::marker { content: none; }
@media (max-width: 900px) { .k4c-success .ss-share-img img { object-position: 50% 8%; } }

/* Three on-camera stories (#1001666): 3-up ≥1024, 2-up tablet (third card spans
   the row as a horizontal feature would be odd — just centres at half width),
   1-up ≤760 (existing rule). */
.k4c-success .ss-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k4c-success .ss-videos video.ss-vframe { background: #000; object-fit: contain; }
@media (max-width: 1023px) and (min-width: 761px) {
  .k4c-success .ss-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k4c-success .ss-videos > .ss-story:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}
@media (max-width: 760px) { .k4c-success .ss-videos { grid-template-columns: 1fr; } }