/* ═══════════════════════════════════════════════════════════════════════════
   COMIC CON BALTICS — INFO & LEGAL LAYER · info.css
   Layers on the base kit: tokens.css → main.css → blocks.css → info.css.
   The ONLY new patterns in this layer: the info/legal stage headers, the
   venue address + map + method cards + detail grid, and the legal ToC.
   Colors/space/type use existing tokens; px used only for radius/shadow.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{ --info-pad: max(var(--gutter), calc((100% - var(--container)) / 2)); }

/* ── SHARED STAGE HEADER (info pages) ──────────────────────────────────────
   Compact, transparent header sits over this band (Guests/News behaviour) —
   do NOT add .site-header--solid; the swirl must show through at scroll-top. */
.info-title{
  position:relative; overflow:hidden;
  background:var(--color-stage-deep); color:var(--color-stage-ink);
  padding:176px var(--info-pad) 44px;
  border-bottom:1px solid var(--color-stage-hairline);
}
.info-title__swirl{                 /* year key-art, fills band incl. behind header — same treatment as
                                       .page-title__art / .gp-hero-art (no luminosity blend, no lime glow):
                                       every interior band reads the same (client request 2026-09-06) */
  position:absolute; inset:0; background-position:center; background-size:cover;
  opacity:.14; pointer-events:none;
}
.info-title__in{ position:relative; }
.info-title__h{
  /* one page-top type scale site-wide (client decision): H1 64/52 like every band */
  font-family:var(--font-display); font-weight:400; font-size:64px; line-height:var(--lh-display);
  margin:16px 0 0; text-transform:uppercase; transform:skewX(-5deg);
}
.info-title__h .accent{ color:var(--color-accent); }
.info-title__lead{
  font-size:19px; font-weight:500; line-height:1.6;
  color:color-mix(in srgb, var(--color-stage-ink) 78%, transparent);
  margin:16px 0 0; max-width:600px; text-wrap:pretty;
}

/* ── SECTION HEADER (light body) ───────────────────────────────────────────*/
.info-eyebrow{ display:inline-flex; align-items:center; gap:9px; font:600 13px var(--font-label); text-transform:uppercase; letter-spacing:var(--tracking-8); color:var(--color-ink-soft); }
.info-eyebrow::before{ content:""; width:22px; height:3px; border-radius:2px; background:var(--color-accent); }
.info-h2{ font-family:var(--font-display); font-weight:400; font-size:30px; line-height:.98; margin:10px 0 0; text-transform:uppercase; transform:skewX(var(--skew-card)); color:var(--color-ink); }

/* ── BODY RAIL + READING MEASURE ───────────────────────────────────────────*/
.info-body{ padding:60px var(--info-pad) 92px; }
.info-rail{ max-width:1040px; margin:0 auto; }        /* THE column for every info/text page — 1040px (client decision 2026-09-06) */
.info-measure{ max-width:1040px; margin-inline:auto; } /* same 1040 column, centred */                     /* prose / accordion */
.info-section + .info-section{ margin-top:66px; }


/* ── VENUE · map block (real Google Maps embed) ─────────────────────────────*/
.venue-map{
  position:relative; overflow:hidden; border-radius:18px;
  border:1px solid var(--color-hairline);
  background:var(--color-bg-alt);
  box-shadow:0 8px 24px rgba(26,43,48,.14); aspect-ratio:16 / 6.4; min-height:250px;
  margin-top:20px;
}
.venue-map__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ── VENUE · method cards (NEW) ────────────────────────────────────────────*/
.methods{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.method{
  display:flex; flex-direction:column; padding:26px 24px;
  background:var(--color-surface); border:1px solid var(--color-hairline);
  border-radius:16px; box-shadow:0 2px 10px rgba(26,43,48,.05);
  transition:border-color .15s, box-shadow .15s, transform .2s;
}
.method:hover{ border-color:var(--color-accent); box-shadow:0 10px 26px rgba(26,43,48,.10); transform:translateY(-3px); }
.method__ic{
  flex:none; width:46px; height:46px; border-radius:12px;
  background:color-mix(in srgb, var(--color-accent) 20%, var(--color-surface));
  display:flex; align-items:center; justify-content:center;
}
.method h3{ font-family:var(--font-body); font-weight:800; font-size:18px; margin:16px 0 0; color:var(--color-ink); }
.method p{ font-size:14px; line-height:1.55; color:var(--color-ink-soft); margin:9px 0 0; text-wrap:pretty; }
.method__meta{ margin-top:14px; padding-top:13px; border-top:1px solid var(--color-hairline); display:flex; align-items:baseline; gap:9px; }
.method__meta b{ font:700 10.5px var(--font-label); text-transform:uppercase; letter-spacing:var(--tracking-6); color:var(--color-accent-ink); flex:none; }
.method__meta span{ font-size:13.5px; font-weight:600; color:var(--color-ink); }

/* ── VENUE · detail grid (NEW) ─────────────────────────────────────────────*/
.venue-details{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.detail{ display:flex; gap:15px; align-items:flex-start; background:var(--color-bg-alt); border-radius:14px; padding:18px 20px; }
.detail__ic{ flex:none; width:40px; height:40px; border-radius:10px; background:var(--color-surface); border:1px solid var(--color-hairline); display:flex; align-items:center; justify-content:center; }
.detail h3{ font-family:var(--font-body); font-weight:700; font-size:15.5px; color:var(--color-ink); margin:0; }
.detail p{ font-size:14px; line-height:1.5; color:var(--color-ink-soft); margin:5px 0 0; text-wrap:pretty; }

/* ── VENUE · #accessibility (handoff-rules: nav slot went to Festival Rules) */
#accessibility{ scroll-margin-top:104px; }
.access-note{
  display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  margin-top:16px; background:var(--color-surface); border:1px solid var(--color-hairline);
  border-radius:16px; padding:20px 24px; box-shadow:0 2px 10px rgba(26,43,48,.05);
}
.access-note p{ font-size:14.5px; line-height:1.55; color:var(--color-ink-soft); margin:0; max-width:520px; }

/* ── SEE-ALSO row ──────────────────────────────────────────────────────────*/
.see-also{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--color-surface); border:1px solid var(--color-hairline);
  border-radius:16px; padding:22px 28px; box-shadow:0 2px 10px rgba(26,43,48,.05); margin-top:56px;
}
.see-also__t{ font-size:16px; font-weight:600; color:var(--color-ink); }
.see-also__links{ display:flex; gap:12px; flex-wrap:wrap; }
.see-also__links a{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--color-hairline);
  border-radius:999px; padding:11px 20px; font:700 12.5px var(--font-label);
  text-transform:uppercase; letter-spacing:var(--tracking-3); color:var(--color-ink); text-decoration:none;
  transition:border-color .15s, color .15s;
}
.see-also__links a:hover{ border-color:var(--color-accent); color:var(--color-accent-ink); }

/* ── RULES · version badge (identical to cosplay-rules badge) ──────────────*/
.rules-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; }
.rules-version{
  display:inline-flex; align-items:center; gap:9px;
  font:600 12px var(--font-label); text-transform:uppercase; letter-spacing:var(--tracking-5);
  color:var(--color-ink-soft); padding:8px 15px; border:1px solid var(--color-hairline);
  border-radius:999px; background:var(--color-surface);
}
.rules-version .dot{ width:7px; height:7px; border-radius:50%; background:var(--color-accent); }
/* rule bullets inside .cb-faq panels */
.rule-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.rule-list li{ display:flex; align-items:baseline; gap:12px; font-size:15px; line-height:1.55; color:var(--color-ink-soft); text-wrap:pretty; }
.rule-list li::before{ content:""; flex:none; width:11px; height:3px; border-radius:2px; background:var(--color-accent); position:relative; top:-4px; }
.rule-more{ margin:14px 0 0; font-size:14.5px; }
.rule-more a{ color:var(--color-ink); font-weight:700; text-decoration:none; border-bottom:2px solid var(--color-accent); padding-bottom:1px; }
.rule-more a:hover{ color:var(--color-accent-ink); }

/* ═══ LEGAL TEMPLATE ═══════════════════════════════════════════════════════ */
.legal-title{
  position:relative; background:var(--color-stage-deep); color:var(--color-stage-ink);
  padding:172px var(--info-pad) 44px; border-bottom:1px solid var(--color-stage-hairline);
}
.legal-updated{ font:600 13px var(--font-label); text-transform:uppercase; letter-spacing:var(--tracking-5); color:color-mix(in srgb, var(--color-stage-ink) 66%, transparent); margin-top:14px; }

.legal-body{ padding:52px var(--info-pad) 96px; }
.legal-layout{ max-width:1312px; /* 216 sidebar + 56 gap = 1040 doc column, same as every other info page */ margin:0 auto; display:grid; grid-template-columns:216px minmax(0,1fr); gap:56px; align-items:start; }
/* No contents list (a document without H2s, e.g. the Cookie page today): one centred column, not the 216px sidebar track. */
.legal-layout:not(:has(.legal-toc)){ grid-template-columns:minmax(0,1fr); max-width:1040px; }

/* The ToC scrolls on its own when the document has many sections
   (legacy privacy has 14) — lower links stay reachable while pinned. */
.legal-toc{ position:sticky; top:104px; max-height:calc(100vh - 128px);
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--color-ink) 25%, transparent) transparent;
  padding-right:6px; }
.legal-toc__label{ font:700 11px var(--font-label); text-transform:uppercase; letter-spacing:var(--tracking-8); color:var(--color-ink-soft); margin-bottom:14px; }
.legal-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.legal-toc__link{
  display:flex; gap:10px; align-items:baseline; padding:9px 12px;
  border-left:2px solid var(--color-hairline); font-size:14px; line-height:1.35;
  color:var(--color-ink-soft); text-decoration:none; transition:color .15s, border-color .15s;
}
.legal-toc__link:hover{ color:var(--color-accent-ink); border-color:var(--color-accent); }
.legal-toc__link[aria-current="true"]{ color:var(--color-ink); border-color:var(--color-accent); font-weight:700; }
.legal-toc__link .n{ font:700 12px var(--font-label); color:var(--color-accent-ink); flex:none; }

.legal-doc{ max-width:none; } /* fills the 1040 layout's document track */
.legal-doc__intro{ font-size:16.5px; line-height:1.75; color:var(--color-ink); margin:0; text-wrap:pretty; }
.legal-note{ display:flex; align-items:baseline; gap:9px; margin-top:18px; background:var(--color-surface); border:1px solid var(--color-hairline); border-radius:12px; padding:13px 17px; }
.legal-note .dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--color-accent); position:relative; top:5px; }
.legal-note p{ font-size:13.5px; line-height:1.55; color:var(--color-ink-soft); margin:0; }
.legal-sections{ display:grid; gap:40px; margin-top:40px; }
.legal-section{ scroll-margin-top:112px; }
.legal-h2{
  display:flex; align-items:baseline; gap:14px; margin:0;
  font-family:var(--font-display); font-weight:400; font-size:30px; line-height:1;
  text-transform:uppercase; transform:skewX(var(--skew-card)); color:var(--color-ink);
}
.legal-h2 .n{ font-size:30px; color:var(--color-accent-ink); min-width:34px; }
.legal-section p{ font-size:16px; line-height:1.75; color:var(--color-ink); margin:16px 0 0; text-wrap:pretty; }
.legal-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
.legal-list li{ display:flex; align-items:baseline; gap:13px; font-size:15.5px; line-height:1.7; color:var(--color-ink); text-wrap:pretty; }
.legal-list li::before{ content:""; flex:none; width:11px; height:3px; border-radius:2px; background:var(--color-accent); position:relative; top:-4px; }
.legal-foot{ margin-top:44px; padding-top:22px; border-top:1px solid var(--color-hairline); font-size:13.5px; line-height:1.6; color:var(--color-ink-soft); }

/* ── RESPONSIVE ────────────────────────────────────────────────────────────*/
@media (max-width:960px){
  .info-title{ padding-top:150px; padding-bottom:36px; }
  .info-title__h{ font-size:52px; }
  .legal-title{ padding-top:150px; padding-bottom:32px; }
  .legal-title .info-title__h{ font-size:52px; }
}
/* Anchor jumps from the contents list land below the fixed header (104px desktop, 64px ≤860) */
.legal-section{ scroll-margin-top:124px; }
@media (max-width:860px){ .legal-section{ scroll-margin-top:84px; } }
@media (max-width:900px){
  .legal-layout{ grid-template-columns:minmax(0,1fr); gap:32px; } /* minmax(0): a wide table/URL in the doc must not widen the column */
  .legal-toc{ position:static; }
}
@media (max-width:760px){
  .methods{ grid-template-columns:1fr; }
  /* Fixed height: with aspect-ratio, the 250px min-height transfers to a
     625px min-WIDTH and the card ran off the phone (mobile audit 2026-09-06). */
  .venue-map{ aspect-ratio:auto; min-height:0; height:250px; }
}
@media (max-width:560px){
  .venue-details{ grid-template-columns:1fr; }
  .see-also{ flex-direction:column; align-items:flex-start; }
  .legal-h2{ font-size:22px; }
  .legal-h2 .n{ font-size:26px; min-width:30px; }
}
@media (prefers-reduced-motion: reduce){
  .method, .see-also__links a, .legal-toc__link{ transition:none !important; }
  .method:hover{ transform:none; }
}

/* Native editor content inside legal sections reads as the designed lists/paras
   (the template wraps the page's own H2-split content — no repeater). */
.legal-section ul:not([class]){ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
/* Block + absolute tick, NOT flex: legacy items open with <strong>…</strong> and a
   text node — flex turned those into side-by-side columns and, at phone
   widths, pushed the whole legal layout (ToC included) past the viewport
   (mobile audit 2026-09-06). */
.legal-section ul:not([class]) li{ position:relative; padding-left:24px; font-size:15.5px; line-height:1.7; color:var(--color-ink); text-wrap:pretty; }
.legal-section ul:not([class]) li::before{ content:""; position:absolute; left:0; top:.75em; width:11px; height:3px; border-radius:2px; background:var(--color-accent); }
.legal-doc__intro + .legal-doc__intro{ margin-top:14px; }