/* ============================================================
   B9 — COBERTURA ESPECIAL (páginas de evento)
   Camada sobre o template de arquivo (b9-archive.css). Aplica-se
   às tags de evento (Cannes Lions, SXSW, etc.) para sinalizar uma
   cobertura especial: masthead escuro, "ao vivo", pauta e grid.
   Acento configurável por evento via --evt-accent.
   ============================================================ */

.evt-page {
  --evt-accent: var(--red);
  --evt-accent-ink: #fff;       /* texto sobre o acento */
}
.evt-page[data-accent="gold"]  { --evt-accent: #f0c579; --evt-accent-ink: #16140F; }
.evt-page[data-accent="blue"]  { --evt-accent: oklch(0.62 0.16 250); --evt-accent-ink: #fff; }

/* o raio acompanha o topo; fundo branco atrás dele */
.evt-page .art-fold { background: #fff; }
.evt-main { position: relative; z-index: 1; }

/* ── MASTHEAD ESCURO ─────────────────────────────────────── */
.evt-hero-wrap { padding: clamp(26px, 3.2vw, 44px) 0 clamp(30px, 3.6vw, 50px); }
.evt-hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  padding: clamp(30px, 4vw, 60px) clamp(26px, 4vw, 64px) clamp(28px, 3.4vw, 48px);
}
/* faixa de acento no topo do card */
.evt-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--evt-accent);
}
/* raio B9 fantasma no canto, marca d'água */
.evt-hero__ghost {
  position: absolute; right: clamp(-40px, -2vw, -10px); top: 50%;
  transform: translateY(-50%);
  width: clamp(220px, 26vw, 420px); aspect-ratio: 1 / 1; pointer-events: none;
  background: var(--evt-accent); opacity: 0.07;
  clip-path: polygon(58% 0, 100% 0, 42% 100%, 0 100%, 0 64%, 30% 64%);
}
/* variação com LOGO do evento: <img class="evt-hero__mark"> já vem tingida no
   acento (PNG pré-colorido) e bem esmaecida, sangrando pela borda direita. */
.evt-hero__mark {
  position: absolute; top: 50%; right: clamp(-180px, -9vw, -80px);
  transform: translateY(-50%);
  width: clamp(440px, 58vw, 880px); height: auto;
  pointer-events: none; user-select: none; z-index: 0;
  opacity: 0.16;
}

.evt-hero__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: clamp(22px, 2.6vw, 34px);
  position: relative; z-index: 1;
}
.evt-kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin: 0;
}
.evt-live {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--evt-accent); position: relative; flex-shrink: 0;
}
.evt-live::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--evt-accent); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .evt-live::after { animation: evtPulse 1.8s ease-out infinite; }
}
@keyframes evtPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}
.evt-edition {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.55);
}

.evt-hero__title {
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.035em;
  font-size: clamp(48px, 7.2vw, 116px); line-height: 0.92;
  color: #fff; margin: 0; text-wrap: balance;
}
[data-type="franklin"] .evt-hero__title,
[data-type="atf"] .evt-hero__title { font-weight: 800; }
.evt-hero__dek {
  position: relative; z-index: 1;
  font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  color: rgba(255,255,255,.78); margin: clamp(18px, 1.8vw, 26px) 0 0;
  max-width: 60ch; text-wrap: pretty;
}

/* faixa de meta (quando / onde / status) */
.evt-hero__meta {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px);
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid rgba(255,255,255,.16);
}
.evt-meta { display: flex; flex-direction: column; gap: 5px; }
.evt-meta__k {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.evt-meta__v {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(17px, 1.5vw, 21px); color: #fff;
}
.evt-meta__v em { color: var(--evt-accent); font-style: normal; }

/* nav de seções do evento (chips dark) */
.evt-nav {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 9px;
  margin: clamp(24px, 2.6vw, 34px) 0 0;
}
.evt-nav a {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em; color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.22); padding: 9px 16px; white-space: nowrap;
  transition: color .16s, border-color .16s, background .16s;
}
.evt-nav a:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.evt-nav a.is-active {
  color: var(--evt-accent-ink); background: var(--evt-accent);
  border-color: var(--evt-accent);
}
.evt-nav:empty { display: none; }

/* ── PAUTA / DESTAQUE ────────────────────────────────────── */
.evt-lead-wrap { padding-bottom: clamp(34px, 4vw, 56px); }
.evt-lead {
  display: grid; grid-template-columns: 1.16fr 1fr;
  gap: clamp(24px, 2.8vw, 46px); align-items: center;
}
.evt-lead__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2);
}
.evt-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.evt-lead:hover .evt-lead__media img { transform: scale(1.04); }
.evt-lead__flag {
  position: absolute; top: 0; left: 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--evt-accent); color: var(--evt-accent-ink); padding: 7px 13px;
}
.evt-lead__body { display: flex; flex-direction: column; min-width: 0; }
.evt-lead__cat {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 13px;
}
.evt-lead__title {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.028em;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.03; color: var(--ink);
  margin: 0; text-wrap: pretty; transition: color .16s;
}
[data-type="franklin"] .evt-lead__title, [data-type="atf"] .evt-lead__title { font-weight: 800; }
.evt-lead:hover .evt-lead__title { color: var(--red); }
.evt-lead__dek {
  font-family: var(--serif); font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.5;
  color: var(--fg-soft); margin: 15px 0 0; max-width: 48ch; text-wrap: pretty;
}
.evt-lead__meta {
  margin-top: 20px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted);
}
.evt-lead__meta b { color: var(--red); font-weight: 700; }

/* ── GRID (reaproveita .acard do arquivo) ────────────────── */
.evt-list { padding-bottom: clamp(48px, 6vw, 90px); }
.evt-list__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin-bottom: clamp(24px, 2.6vw, 36px); padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.evt-list__title {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: 9px;
}
.evt-list__title::before {
  content: ""; width: 13px; height: 10px; background: var(--evt-accent);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}
.evt-list__count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-muted); }

.evt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 3vw, 48px) clamp(24px, 2.6vw, 40px);
}

/* ── RESPONSIVO ──────────────────────────────────────────── */
@media (max-width: 1000px) {
  .evt-grid { grid-template-columns: repeat(2, 1fr); }
  .evt-lead { grid-template-columns: 1fr; gap: 20px; }
  .evt-lead__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .evt-grid { grid-template-columns: 1fr; }
  .evt-hero__meta { gap: 22px 36px; }
}
/* o título do masthead recua à direita no mobile pra não bater no raio */
@media (max-width: 767px) {
  .evt-hero { padding-left: clamp(30px, 9vw, 44px); }
}