/* 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; }
}