/* Event landing page — the dark, poster-led layout.
 *
 * ── WHY DARK, AND WHY THAT IS NOT A FIGHT WITH THE THEME ───────────────────────────────────
 *
 * DryVia runs with tb_site_brand.dark_chrome = true, which already paints the nav
 * (rgba(12,12,14,.95)) and the footer dark while content stays light. A light landing page is
 * therefore a white slab between two dark bars; the dark surface is the more coherent of the
 * two, not the exotic one. Only `body { background: var(--bg-primary) }` needs overriding, and
 * it is overridden by BODY CLASS so the change cannot reach any other page. dark_theme — the
 * whole-site flag — stays off and is not involved.
 *
 * ── TYPOGRAPHY: NO THIRD WEBFONT ───────────────────────────────────────────────────────────
 *
 * The mockup asks for Bebas Neue + Barlow from Google. Bebas Neue is already DryVia's heading
 * face via tb_site_brand (--tb-heading-font); Barlow is NOT loaded and is not going to be.
 * Body copy uses --tb-font (Montserrat, network-wide). Montserrat is not condensed, so
 * supporting text sets wider than the mockup's Barlow — the accepted trade against a third
 * face, a third render-blocking request and a third GDPR-relevant origin.
 *
 * ── THE ACCENT IS USABLE AS TEXT HERE, AND THAT IS THE POINT OF THE DARK SURFACE ────────────
 *
 * Measured against #0C0C0E: #FF652B = 5.9:1, #FAEB0A = 15.0:1 — both clear 4.5:1. On white the
 * same two colours are 2.94:1 and 1.24:1 and are unusable for text, which is why the light
 * version had to darken them (--lp-on-white, still derived in PHP for the one light surface
 * left). Kickers, links and numerals may use --lp-accent directly on this page.
 */

/* The dark surface, scoped to the template's own body class — never to .tb-lp, because the
   page background behind <main> belongs to <body> and a transparent main would show the
   theme's cream through at the edges and on overscroll. */
body.page-template-page-event-landing {
  background: #0C0C0E;
}
/* The global floating CTA says "Купи билет" and links to the events listing. On a landing page
   for a FREE ride, whose own CTA is a few hundred pixels away, it is both wrong and in the way
   — measured overlapping the registration heading at 390px. */
body.page-template-page-event-landing .tb-fab { display: none; }

.tb-lp {
  /* ⚠️ NOT --lp-ink. That token already exists and means "text ON the accent" — the template's
     inline per-event <style> sets it to tb_accent_ink(), i.e. #1A1818. Reusing the name for the
     page surface made the inline rule silently repaint the entire page #1A1818 instead of
     #0C0C0E, with no error and no warning: two meanings, one name, last one wins. Measured, not
     reasoned — getComputedStyle reported rgb(26,24,24) where #0C0C0E was expected. */
  --lp-bg:      #0C0C0E;
  --lp-bg-2:    #15151A;
  --lp-bg-3:    #1E1E25;
  --lp-paper:   #F4F1EC;
  --lp-dim:     #B8B4AE;
  --lp-body:    #C9C4BD;
  --lp-line:    rgba(244,241,236,.12);
  --lp-gap:     clamp(46px, 6vw, 78px);

  background: var(--lp-bg);
  color: var(--lp-paper);
  font-family: var(--tb-font);
  font-size: 17px;
  line-height: 1.65;
}

.tb-lp__wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.tb-lp__section { padding: var(--lp-gap) 0; }

/* ── Display type ── */
.tb-lp__title,
.tb-lp__h2,
.tb-lp__routeline,
.tb-lp__fact-v,
.tb-lp__next-badge,
.tb-lp__phone,
.tb-btn {
  font-family: var(--tb-heading-font, var(--tb-font));
  font-weight: 400;
  letter-spacing: .01em;
}

.tb-lp__kicker {
  font-size: 12px; letter-spacing: .21em; text-transform: uppercase;
  color: var(--lp-accent); font-weight: 700; margin: 0 0 11px;
  font-family: var(--tb-font);
}
/* ⚠️ colour stated explicitly on every heading. The theme sets h1/h2 colour by element
   (measured: rgb(26,24,24)), which beats anything inherited from .tb-lp — so on the dark
   surface every heading rendered black on black and the H1 was simply INVISIBLE. */
.tb-lp h1, .tb-lp h2, .tb-lp h3,
.tb-lp__title, .tb-lp__h2, .tb-lp__next-title { color: var(--lp-paper); }
.tb-lp__h2 {
  font-size: clamp(34px, 5vw, 54px); line-height: .96;
  text-transform: uppercase; margin: 0;
}
.tb-lp__sub {
  color: var(--lp-body); max-width: 60ch; margin: 15px 0 0; font-size: 18px;
}
.tb-lp__sec-head { margin-bottom: 42px; }

/* ── Buttons ── */
.tb-btn {
  font-size: 22px; letter-spacing: .08em; text-transform: uppercase;
  padding: 15px 40px; text-decoration: none; border: 2px solid transparent;
  display: inline-block; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.tb-btn--fill  { background: var(--lp-accent); color: var(--lp-ink); }
.tb-btn--fill:hover  { background: var(--lp-paper); color: var(--lp-ink); }
.tb-btn--ghost { border-color: rgba(244,241,236,.35); color: var(--lp-paper); background: transparent; }
.tb-btn--ghost:hover { border-color: var(--lp-paper); }
.tb-btn:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: 3px; }

/* ── Hero ──
 *
 * ⚠️ The nav is position:fixed (assets/css/nav.css), so every top-of-page template must pay for
 * it. The archive and the page template both do calc(var(--nav-h) + …); this one did not, and
 * at mobile spacing the h1 rendered UNDERNEATH the black bar — the first line of the title was
 * simply not readable on a phone.
 *
 * Poster-right is the DESIGN, not a bonus: the grid is authored for it, and --noposter is the
 * fallback that stops an absent image from reserving a void. */
.tb-lp__hero {
  border-bottom: 1px solid var(--lp-line);
  padding: calc(var(--nav-h, 72px) + 56px) 0 64px;
}
.tb-lp__hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 960px) {
  .tb-lp__hero-grid { grid-template-columns: 1fr 420px; gap: 56px; }
  .tb-lp__hero--noposter .tb-lp__hero-grid { grid-template-columns: minmax(0, 860px); }
}
.tb-lp__poster { position: relative; max-width: 420px; margin: 0 auto; }
.tb-lp__poster img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 28px 70px rgba(0,0,0,.6);
}
.tb-lp__poster::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(244,241,236,.14);
}

.tb-lp__eyebrow {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 11px; margin: 0 0 22px;
}
.tb-lp__eyebrow-date {
  background: var(--lp-accent); color: var(--lp-ink);
  font-family: var(--tb-heading-font, var(--tb-font));
  font-size: 19px; letter-spacing: .07em; padding: 5px 15px;
}
.tb-lp__eyebrow-txt {
  font-size: 13px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--lp-dim); font-weight: 600;
}
.tb-lp__title {
  font-size: clamp(52px, 9vw, 104px); line-height: .92;
  text-transform: uppercase; margin: 0;
}
.tb-lp__routeline {
  display: flex; align-items: center; gap: 15px; margin: 26px 0 30px;
  font-size: clamp(23px, 3vw, 33px); letter-spacing: .05em; text-transform: uppercase;
}
.tb-lp__dash {
  flex: 1; height: 2px; max-width: 130px;
  background: repeating-linear-gradient(90deg, var(--lp-accent) 0 11px, transparent 11px 21px);
}
.tb-lp__lede { font-size: 19px; color: #DDD8D1; max-width: 56ch; margin: 0 0 34px; }
.tb-lp__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0; }

/* ── Facts strip ──
 *
 * auto-fit, NOT repeat(4, 1fr): the mockup has four facts and these two rides have two, and a
 * fixed four-column grid renders the missing ones as empty cells. With auto-fit two facts
 * occupy the width of two facts and the strip still reads as deliberate. */
.tb-lp__facts { background: var(--lp-bg-2); border-bottom: 1px solid var(--lp-line); }
.tb-lp__facts-grid {
  display: grid; gap: 34px; padding-top: 34px; padding-bottom: 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
}
.tb-lp__fact-k {
  font-size: 12px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--lp-dim); font-weight: 600; margin-bottom: 7px;
}
.tb-lp__fact-v { font-size: 29px; letter-spacing: .03em; line-height: 1.1; }
.tb-lp__fact-v small {
  display: block; font-family: var(--tb-font); font-size: 14px;
  letter-spacing: 0; color: var(--lp-dim); margin-top: 3px; line-height: 1.4;
}

/* ── Cause + steps ── */
.tb-lp__cause { background: var(--lp-bg-2); }
.tb-lp__cause-grid { display: grid; gap: 38px; align-items: start; }
@media (min-width: 960px) { .tb-lp__cause-grid { grid-template-columns: 1.15fr .85fr; gap: 52px; } }
.tb-lp__cause-card {
  border-left: 3px solid var(--lp-accent); padding: 4px 0 4px 26px; margin-top: 26px;
}
.tb-lp__cause-card p { margin: 0; color: var(--lp-body); }
.tb-lp__cause-card p + p { margin-top: 15px; }

.tb-lp__steps { list-style: none; counter-reset: s; margin: 26px 0 0; padding: 0; }
.tb-lp__steps li {
  counter-increment: s; display: flex; gap: 18px; padding: 17px 0;
  border-bottom: 1px solid var(--lp-line);
}
.tb-lp__steps li:last-child { border-bottom: 0; }
.tb-lp__steps li::before {
  content: counter(s);
  font-family: var(--tb-heading-font, var(--tb-font));
  font-size: 23px; color: var(--lp-accent); min-width: 32px; line-height: 1.1;
}
.tb-lp__steps b { display: block; margin-bottom: 2px; }
.tb-lp__steps span { color: var(--lp-dim); font-size: 15.5px; }

/* ── Registration ──
 * The panel itself is a SHARED COMPONENT and lives in components.css, because the same partial
 * renders on the event page and could render anywhere. Only the landing page's own layout
 * around it stays here.
 *
 * ⚠️ It did not move the first time. That extraction was done by line range, and these rules sat
 * between two blocks that did move — so the form stayed .tb-lp-scoped and was styled ONLY on the
 * landing page. On the event page it fell back to theme defaults: 153px inputs in a 375px
 * column and a 10px grey price note. The portability test missed it because it checked the
 * widget on the landing page, which is the one surface where the rules applied.
 */
.tb-lp__register .tb-ep-ticket { max-width: 620px; margin-inline: auto; text-align: left; }

/* ── The other ride ── */
.tb-lp__next { background: var(--lp-bg-2); border-top: 1px solid var(--lp-line); }
.tb-lp__next-grid { display: grid; gap: 26px; align-items: center; }
@media (min-width: 960px) {
  .tb-lp__next-grid { grid-template-columns: 280px 1fr; gap: 44px; }
  .tb-lp__next-grid--noposter { grid-template-columns: minmax(0, 860px); }
}
.tb-lp__next-poster { display: block; max-width: 280px; }
.tb-lp__next-poster img { width: 100%; height: auto; display: block; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.tb-lp__next-badge {
  display: inline-block; background: var(--sib-accent); color: var(--sib-ink);
  font-size: 17px; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 15px; margin-bottom: 17px;
}
.tb-lp__next-title { font-size: clamp(30px, 4vw, 44px); margin-bottom: 15px; }
.tb-lp__next .tb-lp__sub { margin-bottom: 26px; }

.tb-lp-empty { max-width: 700px; margin: 0 auto; padding: 60px 20px; color: var(--lp-dim); }

@media (max-width: 560px) {
  .tb-lp__wrap { padding: 0 20px; }
  .tb-lp .tb-ep-ticket { padding: 26px 22px; }
  /* Nothing may scroll sideways — the same rule the operator table follows. */
  .tb-lp, .tb-lp__section, .tb-lp__hero { overflow-x: visible; }
}
/* A cancelled sibling: stated, not advertised. Muted rather than alarming — the reader is
   being informed, not warned. */
.tb-lp__next-badge--off{background:transparent;border:1px solid currentColor;opacity:.75;}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   THE REGISTRATION/PURCHASE SECTION'S ASIDE
   ══════════════════════════════════════════════════════════════════════════════════════════

   ⚠️ THIS MARKUP HAS BEEN ON THE PAGE ALL ALONG WITH NO STYLESHEET BEHIND IT.

   page-event-landing.php emits `.tb-lp__form-shell` containing the panel and an `.tb-lp__aside`
   holding "Въпроси?" (phones), "Какво да вземеш" and "Важно" — and it emits a
   `--noaside` modifier for the case where the organiser entered none of them. Not one of those
   three class names appeared anywhere in the CSS. So the shell was a plain block div: the aside
   fell BELOW the form instead of beside it, rendered with browser-default h3 sizing and default
   disc bullets, visibly unstyled against the rest of the page, and the modifier controlled
   nothing.

   The empty area beside the form was therefore never "space freed by buy mode" — measured, buy
   mode frees 408px of form HEIGHT (1837 -> 1429), while the column next to it was missing in
   both modes. Content the organiser had already entered was sitting under the fold instead of
   answering "what do I bring" at the moment someone decides to come.

   ⚠️ 340px, not a fraction. The aside holds short lists whose line length should not grow with
   the viewport; the form takes the rest. Below 900px it stacks, form first, because on a phone
   the action matters more than the packing list. */

.tb-lp__form-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
}

/* Does what its name claims, now that the grid exists. */
.tb-lp__form-shell--noaside { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  .tb-lp__form-shell { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

.tb-lp__aside { display: flex; flex-direction: column; gap: 28px; }

.tb-lp__aside-block h3 {
  font-family: var(--tb-heading-font, var(--tb-font));
  font-size: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--lp-paper, #F4F1EC);
}

.tb-lp__aside-block p { margin: 0 0 10px; font-size: 14px; opacity: .8; }

/* The default disc bullets were the loudest sign this block had no styles. A small accent
   square matches the page's own language and keeps the list scannable. */
.tb-lp__aside-block ul { list-style: none; margin: 0; padding: 0; }

.tb-lp__aside-block li {
  position: relative;
  padding-left: 18px;
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.45;
}

.tb-lp__aside-block li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  background: var(--lp-accent, currentColor);
}
