/* ============================================================================
   Key for Change — Events  (.k4c-events hub  ·  .k4c-event single-event page)

   Mike's design (telegram, keyforchange-events.html, #1000999) wired into the
   live theme. As with the shop (#1000993): only the INTERNAL components come
   from the design — the site nav + footer + quick-exit are the global ones, and
   both heroes reuse the theme's own .kfc-band (inner-hero.css) so they match
   every other interior hero. Fonts + palette are the brand tokens
   (Montserrat/Lato, --k4c-purple/#2A153F/lilac/yellow), NOT the design file's
   Bricolage/Newsreader/Instrument or its cream paper.

   Everything is scoped under .k4c-events / .k4c-event (or the shared band) so the
   design's generic names (.next .row .kind .ask .pains .isnt .book …) can't
   collide with the rest of the site. Loaded only on the events / event
   templates (see base.html.twig).
   ========================================================================== */

.k4c-events, .k4c-event {
  --ink:   var(--k4c-grey);
  --ink-2: var(--k4c-grey-600);
  --ink-3: var(--k4c-grey-400);
  --ink-4: var(--k4c-grey-400);
  --paper-2: var(--k4c-purple-50);
  --white: var(--k4c-white);
  --brand: var(--k4c-purple);
  --deep:  #2A153F;
  --lilac: #C9A6F2;
  --lilac-2: var(--k4c-purple-100);
  --line:   var(--k4c-grey-200);
  --line-2: rgba(81,45,127,0.28);
  --display: var(--k4c-font-heading);
  --serif:   var(--k4c-font-body);
  --sans:    var(--k4c-font-body);
  --ev-ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- shared primitives -------------------------------------------- */
.k4c-events .price, .k4c-event .price {
  font-family: var(--display); font-weight: var(--k4c-fw-extrabold);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--brand);
}
.k4c-events .price s, .k4c-event .price s { font-family: var(--sans); font-weight: var(--k4c-fw-regular); font-size: var(--k4c-fs-sm); color: var(--ink-4); margin-left: 8px; }
.k4c-events .badge, .k4c-event .badge { display: inline-flex; padding: 5px 10px; border-radius: var(--k4c-radius-pill); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--k4c-fw-bold); }
.k4c-events .badge.early, .k4c-event .badge.early     { background: var(--k4c-yellow); color: #5A4300; }
.k4c-events .badge.inperson, .k4c-event .badge.inperson { background: var(--lilac-2); color: var(--brand); }
.k4c-events .tag, .k4c-event .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--k4c-fw-semibold); color: var(--brand); }
.k4c-events .tag::before, .k4c-event .tag::before { content: ""; width: 20px; height: 1.5px; background: currentColor; }

/* A solid white button + a purple-outline button for use on the dark bands */
.k4c-events .k4c-btn--white, .k4c-event .k4c-btn--white, .kfc-band[data-hero="event"] .k4c-btn--white { background: #fff; color: var(--k4c-purple-900, #2A153F); border-color: #fff; }
.k4c-events .k4c-btn--white:hover, .k4c-event .k4c-btn--white:hover, .kfc-band[data-hero="event"] .k4c-btn--white:hover { background: var(--k4c-purple-50); color: var(--k4c-purple-900, #2A153F); }

/* =====================================================================
   PART A — HUB  (/events/)
   ===================================================================== */

/* the hub hero uses the theme listing band (copy · count · filter tabs);
   the "tell me when a new date is announced" notify link lives in .filters */
.kfc-band .notify { display: inline-flex; align-items: center; gap: 8px; font-size: var(--k4c-fs-sm); color: var(--kfc-on-soft); }
.kfc-band .notify svg { width: 16px; height: 16px; color: var(--kfc-lilac); flex: none; }

/* Vertical rhythm (#1001024 — "too much lost whitespace"). The design's generic
   .section picks up the inherited quark2 base rule (padding-block clamp 3–6rem),
   and we were ALSO adding a full section-pad on top → ~86px top + ~96px bottom
   stacking to ~180px gaps between every block, under the hero and above the
   footer. Collapse to a single, tighter top-only gap per section. */
.k4c-events .section { padding-block: var(--k4c-space-7) 0; }
.k4c-events .section:first-child { padding-top: var(--k4c-space-6); }
.k4c-events > .k4c-container { padding-bottom: var(--k4c-space-8); }
.k4c-events .sh { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--k4c-space-5); margin-bottom: var(--k4c-space-5); }
.k4c-events .sh h2 { margin: 0; font-family: var(--display); font-size: var(--k4c-fs-2xl); line-height: 1.05; font-weight: var(--k4c-fw-extrabold); letter-spacing: -0.02em; color: var(--brand); }
.k4c-events .sh p { margin: 8px 0 0; font-size: var(--k4c-fs-md); color: var(--ink-2); }

/* ── A2 next event feature ── */
.k4c-events .next { display: grid; grid-template-columns: 300px 1fr 300px; border-radius: 26px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--k4c-shadow); }
.k4c-events .next .date { background: var(--deep); color: #fff; padding: 30px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; position: relative; overflow: hidden; }
.k4c-events .next .date::before { content: ""; position: absolute; left: -120px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(129,86,181,0.5) 0%, rgba(42,21,63,0) 70%); }
.k4c-events .next .date > * { position: relative; }
.k4c-events .next .date .k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lilac); }
.k4c-events .next .date .d { font-family: var(--display); font-size: 40px; font-weight: var(--k4c-fw-extrabold); letter-spacing: -0.03em; line-height: 1; margin-top: 6px; }
.k4c-events .next .date .d small { display: block; font-family: var(--sans); font-size: var(--k4c-fs-sm); font-weight: var(--k4c-fw-medium); letter-spacing: 0; color: var(--kfc-on-soft, #D9C6F0); margin-top: 6px; }
.k4c-events .next .date .alt { font-size: var(--k4c-fs-sm); color: var(--kfc-on-dim, #B9A6D4); } .k4c-events .next .date .alt b { color: #fff; font-weight: var(--k4c-fw-semibold); }
.k4c-events .next .body { padding: 30px 32px 28px; display: flex; flex-direction: column; gap: 12px; }
.k4c-events .next .badges { display: flex; gap: 6px; flex-wrap: wrap; }
.k4c-events .next h3 { margin: 0; font-family: var(--display); font-size: 32px; line-height: 1.04; font-weight: var(--k4c-fw-extrabold); letter-spacing: -0.03em; color: var(--ink); }
.k4c-events .next h3 span { color: var(--brand); }
.k4c-events .next .body p { margin: 0; font-size: var(--k4c-fs-md); line-height: 1.5; color: var(--ink-2); }
.k4c-events .next .facts { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--k4c-fs-sm); color: var(--ink-3); margin-top: 4px; }
.k4c-events .next .facts span { display: inline-flex; align-items: center; gap: 6px; } .k4c-events .next .facts svg { width: 14px; height: 14px; color: var(--brand); flex: none; }
.k4c-events .next .side { border-left: 1px solid var(--line); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; background: var(--paper-2); }
.k4c-events .next .side .price { font-size: 40px; line-height: 1; }
.k4c-events .next .side .note { font-size: var(--k4c-fs-sm); color: var(--ink-3); line-height: 1.45; }
.k4c-events .next .side .k4c-btn { width: 100%; }
.k4c-events .next .side .link { font-size: var(--k4c-fs-sm); font-weight: var(--k4c-fw-semibold); color: var(--brand); text-align: center; }

/* ── A3 upcoming list + A4 past ── */
.k4c-events .list { display: flex; flex-direction: column; }
.k4c-events .row { display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.k4c-events .row:last-child { border-bottom: 1px solid var(--line); }
.k4c-events .row .d { font-family: var(--display); font-size: 26px; font-weight: var(--k4c-fw-extrabold); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.k4c-events .row .d small { display: block; font-family: var(--sans); font-size: 12px; font-weight: var(--k4c-fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); margin-top: 4px; }
.k4c-events .row h3 { margin: 0 0 4px; font-family: var(--display); font-size: 22px; font-weight: var(--k4c-fw-bold); letter-spacing: -0.02em; color: var(--ink); }
.k4c-events .row .meta { font-size: var(--k4c-fs-sm); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.k4c-events .row .act { display: flex; align-items: center; gap: 14px; } .k4c-events .row .act .price { font-size: 20px; }
.k4c-events .row.past { opacity: .75; } .k4c-events .row.past .d { color: var(--ink-4); }
.k4c-events .row.past .act .k4c-btn { min-height: 40px; padding: 9px 14px; font-size: var(--k4c-fs-sm); }

/* ── A5 how they work ── */
.k4c-events .kinds { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.k4c-events .kind { border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.k4c-events .kind h3 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: var(--k4c-fw-extrabold); letter-spacing: -0.03em; line-height: 1; }
.k4c-events .kind p { margin: 0; font-size: var(--k4c-fs-sm); line-height: 1.5; }
.k4c-events .kind .tag { margin-bottom: 4px; }
.k4c-events .kind.a { background: var(--white); border: 1px solid var(--line); color: var(--ink); } .k4c-events .kind.a p { color: var(--ink-2); }
.k4c-events .kind.b { background: var(--brand); color: #fff; } .k4c-events .kind.b .tag { color: var(--lilac); } .k4c-events .kind.b h3 { color: #fff; } .k4c-events .kind.b p { color: var(--lilac-2); }
.k4c-events .kind.c { background: var(--lilac-2); color: var(--ink); } .k4c-events .kind.c p { color: var(--ink-2); }
.k4c-events .kind .foot { margin-top: auto; font-size: var(--k4c-fs-sm); font-weight: var(--k4c-fw-semibold); }

/* ── A6 ask (shared with the event page close) ── */
.k4c-events .ask, .k4c-event .ask { margin: var(--k4c-section-pad) 0 80px; border-radius: 24px; background: var(--deep); color: #fff; padding: 36px 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; position: relative; overflow: hidden; }
/* Hub: tighter top gap, container's padding-bottom owns the tail (#1001024) */
.k4c-events .ask { margin: var(--k4c-space-7) 0 0; }
.k4c-events .ask::before, .k4c-event .ask::before { content: ""; position: absolute; right: -140px; top: -160px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(129,86,181,0.5) 0%, rgba(42,21,63,0) 70%); }
.k4c-events .ask > *, .k4c-event .ask > * { position: relative; }
.k4c-events .ask h3, .k4c-event .ask h3 { margin: 0 0 6px; font-family: var(--display); font-size: 28px; font-weight: var(--k4c-fw-extrabold); letter-spacing: -0.03em; color: #fff; } .k4c-events .ask h3 span, .k4c-event .ask h3 span { color: var(--lilac); }
.k4c-events .ask p, .k4c-event .ask p { margin: 0; font-size: var(--k4c-fs-sm); color: var(--kfc-on-soft, #D9C6F0); }
.k4c-events .ask .actions, .k4c-event .ask .actions { display: flex; gap: 10px; }

/* =====================================================================
   PART B — EVENT PAGE  (/events/<slug>/)
   ===================================================================== */

/* B1 hero — the theme band gives crumbs/eyebrow/h1/standfirst/ctas + gradient;
   we add the 12-col grid, the floating white card, and the facts strip. */
.kfc-band[data-hero="event"] .kfc-band__hero > .k4c-container { grid-template-columns: repeat(12, minmax(0,1fr)); align-items: end; }
.kfc-band[data-hero="event"] .copy { grid-column: span 7; padding-bottom: var(--k4c-space-7); }
.kfc-band[data-hero="event"] .ev-card { grid-column: span 5; margin-bottom: 32px; align-self: end; border-radius: 22px; background: #fff; color: var(--k4c-grey); padding: 26px 28px; box-shadow: 0 30px 60px rgba(0,0,0,0.3); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.kfc-band[data-hero="event"] .ev-card .f { display: flex; flex-direction: column; gap: 3px; }
.kfc-band[data-hero="event"] .ev-card .f b { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k4c-grey-400); font-weight: var(--k4c-fw-semibold); }
.kfc-band[data-hero="event"] .ev-card .f span { font-size: var(--k4c-fs-sm); font-weight: var(--k4c-fw-semibold); }
.kfc-band[data-hero="event"] .ev-card .f.wide { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--k4c-grey-200); flex-direction: row; align-items: center; justify-content: space-between; }
.kfc-band[data-hero="event"] .ev-card .price { font-size: 30px; color: var(--k4c-purple); font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-extrabold); letter-spacing: -0.02em; }
.kfc-band[data-hero="event"] .ev-card .price s { font-family: var(--k4c-font-body); font-weight: var(--k4c-fw-regular); font-size: 13px; color: var(--k4c-grey-400); margin-left: 6px; }
.kfc-band[data-hero="event"] .ev-card .badge.early { background: var(--k4c-yellow); color: #5A4300; display: inline-flex; padding: 5px 10px; border-radius: var(--k4c-radius-pill); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--k4c-fw-bold); }

.ev-facts { border-top: 1px solid rgba(255,255,255,0.14); }
.ev-facts .k4c-container { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; padding-top: 18px; padding-bottom: 22px; }
.ev-fact b { display: block; font-family: var(--k4c-font-heading); font-size: 22px; font-weight: var(--k4c-fw-bold); color: #fff; } .ev-fact span { font-size: var(--k4c-fs-sm); color: var(--kfc-on-dim, #B9A6D4); }

/* B2 body */
.k4c-event .evbody { padding-top: var(--k4c-space-9); display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--k4c-space-8); align-items: start; }
.k4c-event .article { max-width: 76ch; font-family: var(--serif); font-size: var(--k4c-fs-md); line-height: 1.6; color: var(--ink); }
.k4c-event .article h2 { margin: 48px 0 16px; font-family: var(--display); font-size: var(--k4c-fs-2xl); line-height: 1.08; font-weight: var(--k4c-fw-extrabold); letter-spacing: -0.03em; text-wrap: balance; color: var(--brand); }
.k4c-event .article h2:first-child { margin-top: 0; }
.k4c-event .article p { margin: 0 0 1.2em; text-wrap: pretty; }

.k4c-event .pains { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; font-family: var(--sans); }
.k4c-event .pains li { padding: 16px 18px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); font-size: var(--k4c-fs-sm); line-height: 1.4; color: var(--ink-2); display: flex; gap: 10px; }
.k4c-event .pains li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 8px; }

.k4c-event .wound { margin: 8px 0 0; padding: 28px 32px; border-radius: 20px; background: var(--deep); color: #EDE6F5; font-size: 21px; line-height: 1.45; font-family: var(--serif); }
.k4c-event .wound strong { color: var(--lilac); font-weight: var(--k4c-fw-medium); display: block; margin-top: 12px; font-family: var(--display); font-size: 26px; letter-spacing: -0.02em; }

.k4c-event .isnt { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; font-family: var(--sans); }
.k4c-event .isnt div { border-radius: 16px; padding: 20px 22px; }
.k4c-event .isnt .is { background: var(--lilac-2); } .k4c-event .isnt .not { background: var(--white); border: 1px solid var(--line); }
.k4c-event .isnt b { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.k4c-event .isnt ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--k4c-fs-sm); line-height: 1.45; color: var(--ink-2); }
.k4c-event .isnt li { display: flex; gap: 8px; } .k4c-event .isnt li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; } .k4c-event .isnt .is svg { color: var(--brand); } .k4c-event .isnt .not svg { color: var(--ink-4); }

.k4c-event .outcomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; counter-reset: o; font-family: var(--sans); }
.k4c-event .outcomes li { counter-increment: o; padding: 18px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); font-size: var(--k4c-fs-sm); line-height: 1.45; color: var(--ink-2); }
.k4c-event .outcomes li::before { content: "0" counter(o); display: block; font-family: var(--display); font-size: 18px; font-weight: var(--k4c-fw-extrabold); color: var(--brand); margin-bottom: 6px; }
.k4c-event .outcomes li b { display: block; color: var(--ink); font-weight: var(--k4c-fw-semibold); margin-bottom: 2px; }

.k4c-event .included { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-family: var(--sans); }
.k4c-event .included li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--k4c-fs-sm); color: var(--ink-2); } .k4c-event .included li:last-child { border-bottom: 1px solid var(--line); }
.k4c-event .included li svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; margin-top: 3px; } .k4c-event .included li b { color: var(--ink); font-weight: var(--k4c-fw-semibold); }

.k4c-event .facilitator { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 22px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); font-family: var(--sans); font-size: var(--k4c-fs-sm); line-height: 1.5; color: var(--ink-2); }
.k4c-event .facilitator .avatar { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(160deg, #C9B7DC 0%, #512D7F 100%); background-size: cover; background-position: center; }
.k4c-event .facilitator b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); margin-bottom: 4px; }

.k4c-event [data-block="faq"] details { border-top: 1px solid var(--line); font-family: var(--sans); }
.k4c-event [data-block="faq"] details:last-of-type { border-bottom: 1px solid var(--line); }
.k4c-event [data-block="faq"] summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 16px 0; font-family: var(--display); font-size: 20px; font-weight: var(--k4c-fw-bold); color: var(--ink); }
.k4c-event [data-block="faq"] summary::-webkit-details-marker { display: none; }
.k4c-event [data-block="faq"] summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: center / 12px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23512D7F' stroke-width='2.5' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>"); transition: transform .3s var(--ev-ease); }
.k4c-event [data-block="faq"] details[open] summary::after { transform: rotate(45deg); }
.k4c-event [data-block="faq"] details > div { padding: 0 44px 18px 0; font-size: var(--k4c-fs-base); line-height: 1.55; color: var(--ink-2); }

/* sticky booking rail */
.k4c-event .book { position: sticky; top: 24px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 40px rgba(36,26,51,0.08); }
.k4c-event .book .price { font-size: 36px; line-height: 1; }
.k4c-event .book .k { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.k4c-event .book .dates { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.k4c-event .book .dates label { display: flex; align-items: center; gap: 10px; font-size: var(--k4c-fs-sm); font-weight: var(--k4c-fw-medium); }
.k4c-event .book .dates input { accent-color: var(--brand); width: 16px; height: 16px; }
.k4c-event .book .k4c-btn { width: 100%; }
.k4c-event .book .fine { font-size: 12px; color: var(--ink-4); text-align: center; }
.k4c-event .book .support { font-size: 12px; color: var(--ink-3); padding-top: 8px; border-top: 1px solid var(--line); line-height: 1.45; }
.k4c-event .book .support a { color: var(--brand); font-weight: var(--k4c-fw-semibold); }
.k4c-event .evclose { margin-top: var(--k4c-space-8); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .k4c-events .next { grid-template-columns: 1fr; } .k4c-events .next .side { border-left: 0; border-top: 1px solid var(--line); }
  .k4c-events .row { grid-template-columns: 90px 1fr; } .k4c-events .row .act { grid-column: 1 / -1; }
  .k4c-events .kinds { grid-template-columns: 1fr; }
  .k4c-events .ask, .k4c-event .ask { grid-template-columns: 1fr; }
  .kfc-band[data-hero="event"] .kfc-band__hero > .k4c-container { grid-template-columns: 1fr; }
  .kfc-band[data-hero="event"] .copy, .kfc-band[data-hero="event"] .ev-card { grid-column: auto; }
  .kfc-band[data-hero="event"] .ev-card { margin-bottom: 0; } .kfc-band[data-hero="event"] .copy { padding-bottom: var(--k4c-space-5); }
  .ev-facts .k4c-container { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .k4c-event .evbody { grid-template-columns: 1fr; padding-top: var(--k4c-space-7); } .k4c-event .book { position: static; }
  .k4c-event .pains, .k4c-event .isnt, .k4c-event .outcomes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kfc-band[data-hero="event"] .ev-card { grid-template-columns: 1fr; }
  .k4c-events .ask .actions, .k4c-event .ask .actions { flex-direction: column; }
  .k4c-events .ask .actions .k4c-btn, .k4c-event .ask .actions .k4c-btn { width: 100%; }
}

/* =====================================================================
   HUB HERO MEDIA — "Keeley in action" (#1001608)
   A still from the live site's group-day clip bleeds in from the right of
   the listing band (the look of keyforchange.com's video hero) — but it is a
   click-to-watch link, never an autoplaying background (YMYL §7.2). Desktop:
   absolute right-hand layer under the copy/counts, faded in from the left and
   tinted into the band purple. ≤1000px: an in-flow 16:9 card after the copy.
   Inline player (js/events.js) opens in .ev-hero-player under the hero row.
   ===================================================================== */
.kfc-band--media .kfc-band__hero > .k4c-container { position: static; }
.kfc-band--media .copy, .kfc-band--media .count { position: relative; z-index: 2; }
.kfc-band--media .ev-hero-media {
  position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 60%;
  display: block; overflow: hidden; color: #fff; text-decoration: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%);
          mask-image: linear-gradient(to right, transparent 0, #000 34%);
}
.kfc-band--media .ev-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 22%; display: block; }
/* purple grade: keeps white counts legible and ties the photo to the band */
.kfc-band--media .ev-hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(42,21,63,0.10) 0%, rgba(42,21,63,0.30) 55%, rgba(42,21,63,0.88) 100%),
              rgba(81,45,127,0.30);
}
.kfc-band--media .ev-hero-play {
  position: absolute; z-index: 2; left: 50%; top: calc(var(--k4c-nav-height) + 36%); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 20px 8px 8px; border-radius: var(--k4c-radius-pill);
  background: rgba(26,13,40,0.62); border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease; white-space: nowrap;
}
.kfc-band--media .ev-hero-play .btn { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--k4c-purple, #512D7F); display: grid; place-items: center; flex: none; box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.kfc-band--media .ev-hero-play .btn svg { width: 24px; height: 24px; margin-left: 3px; }
.kfc-band--media .ev-hero-play .lbl { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.kfc-band--media .ev-hero-play b { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold); font-size: var(--k4c-fs-sm); }
.kfc-band--media .ev-hero-play small { font-size: 12px; color: var(--kfc-on-soft); }
.kfc-band--media .ev-hero-media:hover .ev-hero-play,
.kfc-band--media .ev-hero-media:focus-visible .ev-hero-play { background: rgba(81,45,127,0.85); transform: translate(-50%, -50%) scale(1.04); }
.kfc-band--media .ev-hero-media:focus-visible { outline: 3px solid var(--kfc-lilac); outline-offset: -3px; }

/* the inline player (built by events.js on click) */
.kfc-band--media .ev-hero-player { position: relative; z-index: 2; }
.kfc-band--media .ev-hero-player .k4c-container { padding-bottom: var(--k4c-space-6); }
.kfc-band--media .ev-hero-player .frame { max-width: 960px; margin: 0 auto; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: #1a0d28; box-shadow: 0 20px 50px rgba(0,0,0,0.4); border: 3px solid rgba(255,255,255,0.9); }
.kfc-band--media .ev-hero-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.kfc-band--media .ev-hero-player .close { display: flex; margin: 12px auto 0; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--k4c-radius-pill); background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); font: inherit; font-size: var(--k4c-fs-sm); cursor: pointer; }
.kfc-band--media .ev-hero-player .close:hover { background: rgba(255,255,255,0.12); }

@media (max-width: 1000px) {
  .kfc-band--media .ev-hero-media {
    position: relative; inset: auto; width: auto; grid-column: 1 / -1; aspect-ratio: 16 / 9;
    border-radius: 18px; -webkit-mask-image: none; mask-image: none;
    border: 3px solid rgba(255,255,255,0.9); box-shadow: 0 14px 36px rgba(0,0,0,0.35);
  }
  .kfc-band--media .ev-hero-media::after { background: linear-gradient(180deg, rgba(42,21,63,0) 40%, rgba(42,21,63,0.55) 100%); }
  .kfc-band--media .ev-hero-play { top: auto; bottom: 14px; left: 14px; transform: none; }
  .kfc-band--media .ev-hero-media:hover .ev-hero-play,
  .kfc-band--media .ev-hero-media:focus-visible .ev-hero-play { transform: none; }
}
@media (max-width: 420px) {
  .kfc-band--media .ev-hero-play { padding-right: 14px; gap: 10px; }
  .kfc-band--media .ev-hero-play .btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .kfc-band--media .ev-hero-play { transition: none; }
}