/* ============================================================
   SZIGET KALAUZ — Night Island visual overrides
   This file lives ABOVE v2.css + components.css and locks any rules
   that were hard-coded for the Helsinki/Rioja base into the festival
   theme. Do not change tokens here — those belong in tokens.css.
   Mostly: NoImageBlock neon-hatch, kt-display poster type,
   filter chip + pill polish on dark, focus ring re-tone.
============================================================ */

/* ---- Heroes: Anton poster shout (the festival voice) ----
   `.kt-display` is the legal name; everywhere the existing Rioja
   template rendered headers via plain h1/h2/h3 we re-tone them with
   Anton via this class. v2.css/tokens.css h1/h2 fallback (no class)
   still uses Space Grotesk per --kt-font-sans. */
.kt-display,
.kt-m-head h1.kt-display,
.kt-d-mainhead h2.kt-display,
.kt-tl__head h2.kt-display {
  font-family: var(--kt-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 0.95;
}
.kt-m-head h1.kt-display { font-size: 26px; }
.kt-d-mainhead h2.kt-display { font-size: 30px; }
.kt-tl__head h2.kt-display { font-size: 26px; }

/* eyebrow stays Space Mono via .kt-mono in tokens.css */

/* ---- NoImageBlock: bind the kind-tinted background to the new
   --kt-kind-*-bg tokens so cards-with-no-image read as the festival
   neon-on-night system, not the Helsinki cream washes. ---- */
.kt-c2__noimg                          { background: var(--kt-cobalt-050); color: var(--kt-cobalt-700); }
.kt-c2__noimg[data-kind="event"]       { background: var(--kt-kind-event-bg);   color: var(--kt-kind-event);   }
.kt-c2__noimg[data-kind="venue"]       { background: var(--kt-kind-venue-bg);   color: var(--kt-kind-venue);   }
.kt-c2__noimg[data-kind="service"]     { background: var(--kt-kind-service-bg); color: var(--kt-kind-service); }
/* Stronger diagonal hatch — closer to the React NoImageBlock's
   SVG pattern. The ::before in v2.css uses currentColor, so the
   line takes whatever color we set above per kind. */
.kt-c2__noimg::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .22;
  background: repeating-linear-gradient(45deg,
    currentColor 0 1.6px,
    transparent 1.6px 9px);
}
/* Subtle glow on the kind dot on dark — matches the React mockup */
.kt-c2__kind[data-kind="event"]::before   { box-shadow: 0 0 6px var(--kt-kind-event);   }
.kt-c2__kind[data-kind="venue"]::before   { box-shadow: 0 0 6px var(--kt-kind-venue);   }
.kt-c2__kind[data-kind="service"]::before { box-shadow: 0 0 6px var(--kt-kind-service); }

/* On-image kind chip needs a dark background on the Night Island —
   the v2.css default is rgba(white,.92) which fights the magenta. */
.kt-c2__kind--onimg {
  background: rgba(22, 10, 32, .82);
  color: var(--kt-ink-900);
  backdrop-filter: blur(4px);
}

/* ---- "ON TONIGHT" pill: acid-lime on near-black ink ---- */
.kt-c2__tonight {
  font-family: var(--kt-font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--kt-sun-500);
  color: #160a20;          /* hard ink for contrast against acid lime */
  text-shadow: none;
}

/* ---- Free mark: lime green word, restrained ---- */
.kt-c2__free {
  background: var(--kt-leaf-050);
  color: var(--kt-leaf-500);
  padding: 2px 8px;
  border-radius: var(--kt-r-pill);
  font-family: var(--kt-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ---- LangTag (e.g. "HU" on Beton.Hofi) — quiet on dark ---- */
.kt-c2__lang {
  background: var(--kt-cobalt-050);
  color: var(--kt-cobalt-700);
  border-color: var(--kt-cobalt-100);
}

/* ---- Card surfaces on Night Island ---- */
.kt-c2 { background: var(--kt-card); border-color: var(--kt-line); }
.kt-c2:hover { border-color: var(--kt-cobalt-500); }
.kt-cardwrap.is-latest .kt-c2 {
  border-color: var(--kt-berry-500);
  box-shadow: 0 0 0 1px var(--kt-berry-500), 0 0 22px -8px var(--kt-berry-500), var(--kt-shadow-3);
}
.kt-cardwrap.is-earlier .kt-c2 { border-color: var(--kt-cobalt-100); }

/* ---- Composer textarea: stay 16px to avoid iOS zoom (playbook §9.5) ---- */
.kt-composer__pill textarea {
  font-size: 16px;
  background: transparent;
  color: var(--kt-ink-900);
}
.kt-composer__pill textarea::placeholder { color: var(--kt-ink-400); }

/* ---- Filter chip + pill on dark ----
   FIX (Antti bug): selected chip used `--kt-cobalt-700` (#ff2e7e magenta) bg
   with `--kt-ink-900` / white-ish text → ~3.3:1, FAILS WCAG AA for UI text.
   Pair magenta with the deep-aubergine ink (`--kt-paper` #160a20) instead;
   that reads at ~6.5:1, well above AA. Same fix applied to `.kt-pill.is-on`,
   `.kt-iconbtn.is-on`, the user-bubble and the `is-on` viewswitch tab so the
   magenta brand colour is consistently paired with ink, not white. */
.kt-chip { background: var(--kt-card); border-color: var(--kt-line); color: var(--kt-ink-700); }
.kt-chip.is-on { background: var(--kt-cobalt-700); color: var(--kt-paper); font-weight: 600; border-color: transparent; }
.kt-pill { background: var(--kt-card); border-color: var(--kt-line); color: var(--kt-ink-700); }
.kt-pill--cobalt { background: var(--kt-cobalt-050); border-color: var(--kt-cobalt-100); color: var(--kt-cobalt-700); }
.kt-pill.is-on { background: var(--kt-cobalt-700); color: var(--kt-paper); font-weight: 600; border-color: transparent; }

/* ---- Magenta interactive surfaces — always paired with dark ink for contrast ---- */
.kt-iconbtn.is-on { background: var(--kt-cobalt-700); color: var(--kt-paper); border-color: transparent; }
.kt-iconbtn__count { background: var(--kt-sun-500); color: var(--kt-paper); }   /* fix: lime bg vs near-white text → ~1:1 unreadable; ink on lime ~16:1 */
.kt-composer__send.is-active { background: var(--kt-cobalt-700); color: var(--kt-paper); }
.kt-cardwrap--inplan .kt-c2__add { background: var(--kt-cobalt-700); color: var(--kt-paper); border-color: transparent; }

/* ---- User bubble: magenta speech needs ink, not white, to read at AA ---- */
.kt-bubble--user { background: var(--kt-cobalt-700); color: var(--kt-paper); }
.kt-bubble--user a { color: var(--kt-paper); text-decoration: underline; }
.kt-bubble--ai a { color: var(--kt-berry-500); text-decoration: underline; }   /* Kalauz-voice cyan links on dark = ~13:1 */

/* ---- Desktop view-switch tab ----
   v2.css set `is-on` background to `--kt-ink-900` (#f8eefb on Sziget) and
   color #fff → white-on-white. Re-tone to the brand magenta + ink pair
   (matches the on-dark family) and keep the badge readable too. */
.kt-viewswitch button.is-on { background: var(--kt-cobalt-700); color: var(--kt-paper); }
.kt-viewswitch button.is-on .kt-viewswitch__badge { background: var(--kt-paper); color: var(--kt-cobalt-700); }
.kt-viewswitch__badge { background: var(--kt-cobalt-050); color: var(--kt-cobalt-700); }   /* default badge: cobalt-050 + cobalt-700 → ~5.7:1 (was ink-on-lime which is unreadable on dark theme) */

/* ---- Ask-Kalauz CTA ----
   Cyan bg + white text was ~1.4:1 (cyan is bright). Pair cyan with ink. */
.kt-tl__askopas { background: var(--kt-berry-500); color: var(--kt-paper); font-weight: 700; }

/* ---- TurnTag T1/T2 — matches the JSX TurnTag styling on dark ---- */
.kt-tt {
  font-family: var(--kt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kt-tt--latest  { background: var(--kt-berry-500); color: #0a0410; }
.kt-tt--earlier { background: var(--kt-cobalt-050); color: var(--kt-cobalt-700); border-color: var(--kt-cobalt-100); }

/* ---- ThinkingPhases dotted-line shape (from JSX reference) ----
   v2.css renders phases as an unordered list; here we sketch the
   dotted vertical guideline + active mark color so it reads as
   the React mockup. */
.kt-phases { position: relative; }
.kt-phases::before {
  content: "";
  position: absolute; left: 7px; top: 6px; bottom: 6px;
  border-left: 1px dashed var(--kt-line);
}
.kt-phases li.active .mark,
.kt-phases li.done .mark { color: var(--kt-berry-500); }

/* ---- Band header — neon dot on Night Island ---- */
.kt-band__dot--latest  { background: var(--kt-berry-500); box-shadow: 0 0 8px var(--kt-berry-500); }
.kt-band__dot--earlier { background: var(--kt-cobalt-700); }
.kt-band__dot--rest    { background: var(--kt-line); }

/* ---- Focus ring re-tone: cyan on Night Island ---- */
:focus-visible { outline-color: var(--kt-berry-500); }

/* ---- Brand mark on the topbar — square with the festival 'S' ---- */
.kt-brandmark {
  background: var(--kt-cobalt-700);
  color: #160a20;
  font-family: var(--kt-font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  border-radius: var(--kt-r-2);
}

/* ---- Body / scaffolds bg ---- */
body, .kt-gridwrap, .kt-mobile, .kt-desktop {
  background: var(--kt-paper);
  color: var(--kt-ink-900);
}
.kt-gridwrap { background: var(--kt-paper); }

/* ============================================================
   TIMELINE (audit categories 4 & 6) — keep the cyan NOW line
   electric (and animate it so it's unmistakable on dark) and
   re-tone the clash border/pill to MAGENTA so they don't fight
   the NOW line for the eye. Handoff README §timeline calls out
   "magenta-bordered Overlap pill" — we honor that here.
============================================================ */
.kt-tl__item.is-clash {
  border-color: var(--kt-cobalt-700);
  box-shadow: 0 0 0 1px var(--kt-cobalt-700), 0 0 14px -6px var(--kt-cobalt-700);
}
.kt-tl__overlap {
  background: var(--kt-cobalt-050);
  color: var(--kt-cobalt-700);
  border: 1px solid var(--kt-cobalt-100);
}
.kt-tl__sub .clash { color: var(--kt-cobalt-700); }   /* "· 1 overlap" tally next to plan count */
.kt-tl__rail { background: var(--kt-line-soft); }     /* dial back so picks pop on dark */

/* NOW indicator — electric cyan, pulsing dot */
.kt-tl__now { background: var(--kt-berry-500); box-shadow: 0 0 12px -2px var(--kt-berry-500); }
.kt-tl__now span:first-child { animation: kt-pulse 1.6s var(--kt-ease) infinite; }
.kt-tl__now span:last-child { color: var(--kt-berry-500); text-shadow: 0 0 6px rgba(47, 230, 219, 0.6); }

/* Timeline event ink — make sure the title and where line stay readable
   on the dark card surface (was implicit from v2.css but lock it for safety). */
.kt-tl__item { background: var(--kt-card); border-color: var(--kt-line); color: var(--kt-ink-900); }
.kt-tl__iname { color: var(--kt-ink-900); }
.kt-tl__iwhere { color: var(--kt-ink-500); }
.kt-tl__iwhere .free { color: var(--kt-leaf-500); }
.kt-tl__hour { color: var(--kt-ink-500); }
.kt-tl__itime { color: var(--kt-ink-500); }
.kt-tl__rm { color: var(--kt-ink-400); }
.kt-tl__empty { color: var(--kt-ink-500); }
.kt-tl__empty-icon { background: var(--kt-berry-050); color: var(--kt-berry-500); box-shadow: 0 0 18px -4px var(--kt-berry-500); }

/* ============================================================
   Display headings (audit category 7) — Anton, big, all-caps.
   The bigger sizes here echo the React mockup's poster shout.
============================================================ */
.kt-m-head h1.kt-display      { font-size: 28px; letter-spacing: 0.5px; }
.kt-d-mainhead h2.kt-display  { font-size: 34px; letter-spacing: 0.5px; }
.kt-tl__head h2.kt-display    { font-size: 30px; letter-spacing: 0.5px; }

/* ============================================================
   Drag handle (audit category 8) — the existing `--kt-ink-300`
   on `--kt-paper` reads ~3.5:1; brighten the bar so it's
   unmistakably grabbable on dark.
============================================================ */
.kt-rail { border-top: 1px solid var(--kt-line); box-shadow: 0 -8px 24px rgba(0,0,0,.5); }
.kt-rail__handle span { background: var(--kt-ink-500); width: 48px; height: 5px; }

/* ============================================================
   NoImageBlock typography (audit category 2) — the React
   reference uses Space Mono on the initial. v2.css set it to
   a sans 52px; lock the mono so the festival "ticker" reading
   matches the JSX mockup.
============================================================ */
.kt-c2__initial { font-family: var(--kt-font-mono); font-weight: 500; opacity: .9; }
.kt-c2__hood    { font-family: var(--kt-font-mono); opacity: .8; }

/* ============================================================
   Card name on dark: locked to ink-900 so it pops against the
   --kt-card surface (was inherit chain — explicit is safer).
============================================================ */
.kt-c2__name { color: var(--kt-ink-900); }
.kt-c2__desc { color: var(--kt-ink-500); }
.kt-c2__meta { color: var(--kt-ink-700); }
.kt-c2__mi--recurs { color: var(--kt-berry-500); }   /* recurring shows ride the Kalauz-voice cyan */

/* ============================================================
   Desktop pane backgrounds — v2.css uses an undefined
   `--kt-paper-grid` token; pin it to the deep aubergine night
   so the grid pane never falls back to transparent.
============================================================ */
.kt-d-main, .kt-gridwrap { background: var(--kt-paper); }
.kt-d-aside { border-left: 1px solid var(--kt-line); background: var(--kt-paper); }

/* ============================================================
   Detail overlay polish — the facts grid and provider link
   inherit base colours; lock them so they read on dark.
============================================================ */
.kt-detail-map { border-color: var(--kt-line); background: var(--kt-card); }
.kt-detail-map__link { color: var(--kt-cobalt-700); border-top-color: var(--kt-line-soft); }
.kt-ov__close { background: var(--kt-card); border-color: var(--kt-line); color: var(--kt-ink-900); }
.kt-detail__hero { background: var(--kt-card); }
.kt-ov__bar { border-bottom-color: var(--kt-line-soft); background: var(--kt-paper); }

/* ----------------------------------------------------------------
   Image framing — festival promo shots typically frame the
   subject's head in the top third. Default object-position: 50% 50%
   (center center) crops faces out at the small grid-card height.
   Anchor to 25% from the top so heads land in the visible window
   for both the grid card and the detail hero. Antti 2026-05-28.
   ---------------------------------------------------------------- */
.kt-c2__media img,
.kt-card__media img,
.kt-detail__hero img {
  object-position: center 22%;
}

/* ----------------------------------------------------------------
   Chat bubble — real paragraphs (Antti 2026-05-28). The renderer
   now wraps blank-line-separated chunks in <p class="kt-bubble__p">
   instead of <br><br>, so each pick / bucket / section gets a
   visible breathing-room gap. Tight on top of first, real margin
   between siblings.
   ---------------------------------------------------------------- */
.kt-bubble__p { margin: 0; }
.kt-bubble__p + .kt-bubble__p { margin-top: 0.85em; }

/* ============================================================
   B06.x — Sziget band-info detail overlay
   The rich band-info card surfaces lineup-JSON + S15 enrichment
   data Sziget hands us per artist. Layout: vertical scroll, max
   620px on desktop, full bleed on mobile.
============================================================ */

/* Center the column on desktop; mobile stays edge-to-edge. */
.kt-detail__scroll  { padding: 0; }
.kt-detail__col     { max-width: 620px; margin: 0 auto; padding: 0 18px 16px; }
.kt-detail__col > * + * { margin-top: 18px; }
.kt-detail__hero    { margin: 0 -18px 18px; }

/* Headline row: Anton poster name + tier badge on the right.
   Wraps gracefully on narrow mobile (badge drops below). */
.kt-detail__head {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: 18px;
}
.kt-detail__name {
  margin: 0; flex: 1; min-width: 0;
  font-family: var(--kt-font-display);
  font-size: 40px; line-height: 0.95; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--kt-ink-900);
}

/* Tier badges (detail variant — bigger than the grid corner chip).
   Pair fg with --kt-paper deep aubergine for ≥6.5:1 on both magenta
   and cyan. Lime archive variant is fully muted (no neon). */
.kt-tier {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--kt-r-pill);
  font-size: 11px; letter-spacing: 0.12em; font-weight: 700;
  white-space: nowrap;
}
.kt-tier__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
.kt-tier--headliner { background: var(--kt-cobalt-700); color: var(--kt-paper); }   /* magenta on ink ~6.5:1 */
.kt-tier--major     { background: var(--kt-berry-500);  color: var(--kt-paper); }   /* cyan on ink ~9:1 */
.kt-tier--archive   { background: var(--kt-cobalt-050); color: var(--kt-ink-500); } /* quiet, no glow */
.kt-tier--archive .kt-tier__dot { display: none; }

/* Genre + country chip row */
.kt-chiprow {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.kt-chip-meta {
  padding: 3px 9px;
  border-radius: var(--kt-r-pill);
  font-size: 10.5px; letter-spacing: 0.1em; font-weight: 600;
  border: 1px solid transparent;
}
.kt-chip-meta--genre   { background: var(--kt-cobalt-050); color: var(--kt-cobalt-700); border-color: var(--kt-cobalt-100); }
.kt-chip-meta--country { background: var(--kt-berry-050);  color: var(--kt-berry-500);  border-color: var(--kt-cobalt-100); }

/* Performance schedule list */
.kt-perf__head {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--kt-ink-500); margin-bottom: 8px;
}
.kt-perf__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kt-perf-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px;
  background: var(--kt-card);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-r-2);
  font-size: 13px;
  color: var(--kt-ink-700);
}
.kt-perf-row__time   { color: var(--kt-ink-900); font-weight: 600; min-width: 92px; }
.kt-perf-row__time--tba { color: var(--kt-ink-500); font-weight: 400; }
.kt-perf-row__sep    { color: var(--kt-ink-400); }
.kt-perf-row__venue  { color: var(--kt-ink-700); flex: 1; }
.kt-perf-row__past   { color: var(--kt-ink-400); font-size: 10px; letter-spacing: 0.1em; }
.kt-perf-row.is-next {
  border-color: var(--kt-berry-500);
  box-shadow: 0 0 0 1px var(--kt-berry-500), 0 0 12px -6px var(--kt-berry-500);
}
.kt-perf-row.is-next .kt-perf-row__time { color: var(--kt-berry-500); }
.kt-perf-row.is-past .kt-perf-row__time,
.kt-perf-row.is-past .kt-perf-row__venue { text-decoration: line-through; opacity: 0.75; }

/* Facts list (non-events) */
.kt-detail__facts {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  font-size: 14px; margin: 0;
}
.kt-detail__facts dt { color: var(--kt-ink-500); }
.kt-detail__facts dd { margin: 0; color: var(--kt-ink-900); }

/* Recurring-dates picker (kept for "Add this night" flow) */
.kt-detail__datepick-head {
  font-size: 11px; color: var(--kt-ink-500); text-transform: uppercase; margin-bottom: 8px;
}
.kt-detail__datepick-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* Bio block — lede (short_description) leads, body is the long
   description with a magenta "Read more" toggle when truncated. */
.kt-bio { color: var(--kt-ink-700); font-size: 14.5px; line-height: 1.55; }
.kt-bio__lede {
  margin: 0 0 10px;
  font-size: 15.5px; color: var(--kt-ink-900); font-weight: 500;
}
.kt-bio__body { margin: 0; color: var(--kt-ink-700); white-space: pre-line; }
.kt-bio__more {
  display: inline-block; margin-top: 8px;
  padding: 4px 10px;
  background: transparent; border: 1px solid var(--kt-cobalt-100);
  color: var(--kt-cobalt-700);
  border-radius: var(--kt-r-pill);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
.kt-bio__more:hover { background: var(--kt-cobalt-050); }

/* Wikipedia lede block — quiet quoted style, cyan accent rule */
.kt-wiki {
  border-left: 3px solid var(--kt-berry-500);
  background: var(--kt-card);
  padding: 12px 14px;
  border-radius: 0 var(--kt-r-2) var(--kt-r-2) 0;
}
.kt-wiki__quote {
  font-size: 13.5px; line-height: 1.5; color: var(--kt-ink-700);
  font-style: italic;
}
.kt-wiki__cite {
  display: block; margin-top: 6px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kt-berry-500);
}

/* last.fm stats row */
.kt-lfm {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0;
}
.kt-lfm__count {
  font-size: 15px; font-weight: 600; color: var(--kt-ink-900);
  letter-spacing: 0.02em;
}
.kt-lfm__cite {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kt-ink-500);
}

/* Spotify embed wrapper */
.kt-spotify {
  border-radius: var(--kt-r-2);
  overflow: hidden;
  background: #000;                                /* covers the iframe loading flash */
  border: 1px solid var(--kt-line);
}
.kt-spotify__frame {
  display: block;
  width: 100%; height: 180px; border: 0;
  border-radius: var(--kt-r-2);
}

/* Listen / follow icon row */
.kt-plat-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.kt-plat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--kt-r-pill);
  text-decoration: none;
  font-size: 11px; letter-spacing: 0.08em;
  border: 1px solid var(--kt-line);
  background: var(--kt-card);
  color: var(--kt-ink-900);
  transition: transform 80ms var(--kt-ease, ease-out), border-color 80ms;
}
.kt-plat:hover { transform: translateY(-1px); }
.kt-plat__glyph { font-size: 14px; line-height: 1; }
.kt-plat__label { font-weight: 600; }
/* Brand-tinted borders so the row reads at a glance without going circus. */
.kt-plat--spotify    { border-color: #1db95480; }   /* ~spotify green at 50% on dark = subtle hint */
.kt-plat--spotify:hover    { border-color: #1ed760; color: #1ed760; }
.kt-plat--apple              { border-color: var(--kt-cobalt-100); }
.kt-plat--apple:hover        { border-color: var(--kt-cobalt-700); color: var(--kt-cobalt-700); }
.kt-plat--soundcloud         { border-color: #ff550080; }
.kt-plat--soundcloud:hover   { border-color: #ff5500; color: #ff8c4a; }   /* lighten so contrast on dark stays ~5:1 */
.kt-plat--youtube            { border-color: #ff000080; }
.kt-plat--youtube:hover      { border-color: #ff4040; color: #ff8b8b; }   /* lighten for contrast on aubergine */
.kt-plat--instagram          { border-color: var(--kt-cobalt-700); }
.kt-plat--instagram:hover    { border-color: var(--kt-cobalt-700); color: var(--kt-cobalt-700); }

/* Related / Sounds like chips */
.kt-related__head {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--kt-ink-500); margin-bottom: 8px;
}
.kt-related__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.kt-related__chip {
  background: var(--kt-card);
  border: 1px solid var(--kt-line);
  color: var(--kt-ink-900);
  padding: 6px 12px;
  border-radius: var(--kt-r-pill);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--kt-font-sans);
}
.kt-related__chip:hover { border-color: var(--kt-berry-500); color: var(--kt-berry-500); }
.kt-related__chip--lfm { border-color: var(--kt-line); }            /* last.fm: neutral */
.kt-related__chip--sziget { border-color: var(--kt-cobalt-100); }   /* Sziget-marked: brand hint */

/* Sticky CTA at the bottom */
.kt-detail__cta {
  display: flex; gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--kt-line-soft);
  background: var(--kt-paper);
}

/* ============================================================
   B06.x — Grid card additions: tier corner, country chip,
   spotify quick-link, archive marker
============================================================ */

/* Tier corner badge — top-left of the media block, glowing dot. */
.kt-c2__tier {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: var(--kt-r-pill);
  font-size: 9.5px; letter-spacing: 0.12em; font-weight: 700;
  z-index: 2;
  pointer-events: none;
}
.kt-c2__tier-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 5px currentColor;
}
.kt-c2__tier--headliner { background: var(--kt-cobalt-700); color: var(--kt-paper); }
.kt-c2__tier--major     { background: var(--kt-berry-500);  color: var(--kt-paper); }

/* Spotify quick-link — top-right of the media block. Pointer-events on
   so the link captures clicks (tier badge above intentionally doesn't). */
.kt-c2__spotify {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(22, 10, 32, 0.78);
  border: 1px solid #1ed76080;
  border-radius: 50%;
  color: #1ed760;                                  /* spotify green on near-black ~10:1 */
  font-size: 13px;
  text-decoration: none;
  z-index: 3;
  backdrop-filter: blur(4px);
}
.kt-c2__spotify:hover { background: #1ed760; color: #160a20; border-color: #1ed760; }

/* Country chip next to the lang tag in the card name row */
.kt-c2__country {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 6px;
  font-size: 9.5px; letter-spacing: 0.08em;
  border-radius: var(--kt-r-pill);
  background: var(--kt-berry-050);
  color: var(--kt-berry-500);
  border: 1px solid var(--kt-cobalt-100);
}

/* Archive marker (replaces "ON TONIGHT" for past-year acts) */
.kt-c2__archive {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 8px;
  background: var(--kt-cobalt-050);
  color: var(--kt-ink-500);
  border-radius: var(--kt-r-pill);
  font-size: 10px; letter-spacing: 0.1em; font-weight: 600;
  z-index: 2;
}
/* Card-level archive treatment: dim slightly so past acts read as historical */
.kt-c2--archive { opacity: 0.82; }
.kt-c2--archive:hover { opacity: 1; }

/* Tier + archive can't coexist (archive_year null disables tier), but if a
   collision happens, push tier down so both stay visible. */
.kt-c2__archive ~ .kt-c2__tier { top: 38px; }