/* =========================================================================
   CAMPAIGN SYSTEM — direção de arte (projeto conceitual)
   Sistema visual modular para campanhas digitais.

   CONCEITO: "uma grade, todos os formatos". Este não é uma marca — é um
   CHASSI. Aurea e Verdeo escondem o sistema; aqui o sistema é o assunto: a
   grade aparece, os módulos são rotulados, as proporções são declaradas.

   REGRA DE OURO DESTA IDENTIDADE: nenhuma peça é desenhada duas vezes. Todo
   formato — do 160×600 ao 1920×1080 — sai da mesma grade de 3 × 3 módulos,
   da mesma rampa tipográfica e de um dos quatro níveis de intensidade.

   ---------------------------------------------------------------------------
   POR QUE cqi E NÃO vw NESTE ARQUIVO
   Os anúncios são apresentados lado a lado, em tamanhos diferentes do real.
   Com vw, o corpo do texto de um 300×250 seguiria a largura da JANELA e a
   peça quebraria em qualquer tamanho de exibição. Com container queries
   (`container-type: inline-size` + unidades cqi), cada anúncio se dimensiona
   pela PRÓPRIA caixa — a mesma peça vale para o thumbnail do board e para o
   arquivo final. É o que torna as "variações de formato" reais, e não
   maquetes redesenhadas uma a uma.
   ---------------------------------------------------------------------------

   Escopo: [data-project="campaign-system"].
   ========================================================================= */

[data-project="campaign-system"] {
  /* --- paleta base: a da Calaj, porque o sistema é demonstrado nela --- */
  --cs-ink: #0A0E16;
  --cs-ink-raised: #12161F;
  --cs-ink-deep: #05070C;
  --cs-ivory: #F5EFE3;
  --cs-ivory-dim: #A6A0A0;
  --cs-gold: #B8935A;
  --cs-gold-deep: #8C6C3E;
  --cs-line: rgba(245, 239, 227, 0.14);
  --cs-line-strong: rgba(245, 239, 227, 0.4);

  /* --- paleta de dados (ver seção "Dados" abaixo) --- */
  --cs-series-1: #B5832A;
  --cs-series-2: #5590DE;
  --cs-series-3: #C56AA8;
  --cs-grid: #2A2E38;
  --cs-axis: #3A3F4B;
  --cs-muted: #8A8580;

  --cs-display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --cs-text: 'Cabinet Grotesk', 'General Sans', -apple-system, Arial, sans-serif;
  --cs-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

/* ================= MARCA / MÓDULO ================= */
.cs-mark { color: var(--cs-gold); width: 100%; height: auto; }
.cs-stage { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); background: var(--cs-ink); min-height: 200px; }

/* As quatro posições do módulo: é isto que "modular" significa aqui. */
.cs-module { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; aspect-ratio: 1 / 1; width: min(140px, 100%); }
.cs-module i { border: 2px solid var(--cs-gold); opacity: 0.32; }
.cs-module i[data-on] { background: var(--cs-gold); opacity: 1; }
.cs-module i[data-round] { border-top-right-radius: 50%; }

/* ================= GRADE DO SISTEMA ================= */
.cs-gridspec {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cs-ink);
  background-image:
    repeating-linear-gradient(to right, var(--cs-line) 0 1px, transparent 1px calc(100% / 12)),
    repeating-linear-gradient(to bottom, var(--cs-line) 0 1px, transparent 1px calc(100% / 6));
  display: grid;
  place-items: center;
}
.cs-gridspec__label {
  font-family: var(--cs-mono);
  font-size: 11px;
  color: var(--cs-gold);
  letter-spacing: 0.1em;
}

/* ================= PEÇA DE CAMPANHA (base de todos os formatos) ================= */
.cs-piece {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  background: var(--cs-ink);
  color: var(--cs-ivory);
  display: grid;
  isolation: isolate;
}

/* Níveis de intensidade — a "escada de energia" do sistema.
   O mesmo texto, o mesmo formato, quatro temperaturas. */
.cs-piece[data-level="1"] { background: var(--cs-ink); }
.cs-piece[data-level="2"] {
  background:
    repeating-linear-gradient(to right, rgba(245, 239, 227, 0.055) 0 1px, transparent 1px 7.5%),
    var(--cs-ink);
}
.cs-piece[data-level="3"] {
  background:
    radial-gradient(120% 90% at 108% 6%, rgba(184, 147, 90, 0.34), transparent 58%),
    linear-gradient(115deg, transparent 44%, rgba(184, 147, 90, 0.16) 50%, transparent 56%),
    var(--cs-ink-deep);
}
.cs-piece[data-level="4"] {
  background: linear-gradient(135deg, #C9A468 0%, #B8935A 46%, #8C6C3E 100%);
  color: var(--cs-ink);
}

/* Trama de pontos: o eco do campo de partículas do Hero da Calaj. */
.cs-piece[data-level="3"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(212, 176, 120, 0.5) 1px, transparent 1px);
  background-size: 9px 9px;
  mask-image: linear-gradient(112deg, transparent 30%, #000 62%, transparent 92%);
  -webkit-mask-image: linear-gradient(112deg, transparent 30%, #000 62%, transparent 92%);
}

.cs-piece__inner { padding: 7cqi; display: grid; align-content: space-between; gap: 4cqi; height: 100%; }
.cs-piece__brand {
  display: flex;
  align-items: center;
  gap: 2.6cqi;
  font-family: var(--cs-text);
  font-size: 3.4cqi;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cs-piece__brand svg { width: 5.4cqi; height: auto; flex: none; color: currentColor; }
.cs-piece__headline {
  font-family: var(--cs-display);
  font-weight: 400;
  font-size: 9.6cqi;
  line-height: 1.06;
  letter-spacing: 0.005em;
}
.cs-piece__sub { font-family: var(--cs-text); font-size: 3.6cqi; line-height: 1.5; opacity: 0.72; }
.cs-piece__cta {
  justify-self: start;
  font-family: var(--cs-text);
  font-size: 3.2cqi;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2.6cqi 4.4cqi;
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.cs-piece[data-level="4"] .cs-piece__cta { background: var(--cs-ink); color: var(--cs-ivory); }
.cs-piece__legal { font-family: var(--cs-text); font-size: 2.4cqi; opacity: 0.5; }

/* --- Formatos de anúncio --- */
.cs-ad--mpu { aspect-ratio: 300 / 250; }
.cs-ad--leaderboard { aspect-ratio: 728 / 90; }
.cs-ad--skyscraper { aspect-ratio: 160 / 600; }
.cs-ad--billboard { aspect-ratio: 970 / 250; }

/* O leaderboard e o billboard são FAIXAS: empilhar não funciona, então a
   mesma peça troca de fluxo — texto à esquerda, CTA à direita. */
/* Flex, e não grid de coluna automática: as faixas precisam que o CTA seja
   empurrado até a borda direita por `margin-left: auto`. Num grid de colunas
   auto-dimensionadas a sobra fica FORA das colunas, então o auto-margin não
   tem espaço para consumir e o botão encosta no texto. */
.cs-ad--leaderboard .cs-piece__inner,
.cs-ad--billboard .cs-piece__inner {
  display: flex;
  align-items: center;
  padding: 2.2cqi 3cqi;
  gap: 3.4cqi;
}
.cs-ad--leaderboard .cs-piece__headline { font-size: 3.6cqi; }
.cs-ad--leaderboard .cs-piece__brand { font-size: 1.5cqi; }
.cs-ad--leaderboard .cs-piece__brand svg { width: 2.6cqi; }
.cs-ad--leaderboard .cs-piece__cta { margin-left: auto; font-size: 1.5cqi; padding: 1.4cqi 2.6cqi; white-space: nowrap; }
.cs-ad--leaderboard .cs-piece__sub { display: none; }

.cs-ad--billboard .cs-piece__headline { font-size: 5.2cqi; }
.cs-ad--billboard .cs-piece__brand { font-size: 1.8cqi; }
.cs-ad--billboard .cs-piece__brand svg { width: 3.2cqi; }
.cs-ad--billboard .cs-piece__sub { font-size: 1.9cqi; max-width: 34ch; }
.cs-ad--billboard .cs-piece__cta { margin-left: auto; font-size: 1.7cqi; padding: 1.8cqi 3cqi; white-space: nowrap; }

/* O arranha-céu é o formato mais estreito: a headline encurta e o CTA vai
   para o rodapé, em largura cheia. */
.cs-ad--skyscraper .cs-piece__inner { padding: 6cqi 5cqi; }
.cs-ad--skyscraper .cs-piece__headline { font-size: 11cqi; }
.cs-ad--skyscraper .cs-piece__sub { font-size: 5cqi; }
.cs-ad--skyscraper .cs-piece__cta { justify-self: stretch; text-align: center; font-size: 4.4cqi; padding: 4cqi 2cqi; }
.cs-ad--skyscraper .cs-piece__brand { font-size: 4.6cqi; }
.cs-ad--skyscraper .cs-piece__brand svg { width: 8cqi; }

/* --- Formatos sociais --- */
.cs-social--square { aspect-ratio: 1 / 1; }
.cs-social--portrait { aspect-ratio: 4 / 5; }
.cs-social--story { aspect-ratio: 9 / 16; }
.cs-social--square .cs-piece__headline { font-size: 8.6cqi; }
.cs-social--portrait .cs-piece__headline { font-size: 9cqi; }
.cs-social--story .cs-piece__inner { padding: 9cqi 7cqi 14cqi; }
.cs-social--story .cs-piece__headline { font-size: 10cqi; }
.cs-social--story .cs-piece__sub { font-size: 4.2cqi; }
.cs-social--story .cs-piece__cta { font-size: 3.6cqi; }

/* Matriz de formatos: mostra as proporções em escala relativa correta. */
.cs-ratios { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; }
.cs-ratio { display: grid; gap: 8px; justify-items: center; }
.cs-ratio__box { border: 1px solid var(--cs-line-strong); background: rgba(184, 147, 90, 0.09); }
.cs-ratio__label { font-family: var(--cs-mono); font-size: 10px; color: var(--kit-ink-muted); }

/* ================= PAINEL DE DADOS =================
   PALETA DE SÉRIES — VALIDADA, NÃO ESCOLHIDA NO OLHO.
   #B5832A · #5590DE · #C56AA8 sobre a superfície #12161F, verificadas com o
   validador de paleta do método de dataviz (seis checks, modo dark, pares
   "all"): faixa de luminosidade OK, piso de croma OK, separação CVD pior par
   ΔE 9,0 (alvo ≥ 8), piso de visão normal ΔE 18,2 (piso ≥ 15), contraste ≥ 3:1
   nas três. O ouro da marca (#B8935A) NÃO passa como cor de série: fica claro
   demais para a faixa e confunde com verde sob protanopia — por isso a série 1
   é um passo mais escuro e mais cromático dele.

   O board é dark-only (color-scheme: dark), então esta é a paleta que
   efetivamente vai para a tela; não há um modo claro não validado escondido. */
.cs-panel {
  background: var(--cs-ink-raised);
  border: 1px solid var(--cs-line);
  padding: clamp(20px, 3vw, 34px);
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  font-family: var(--cs-text);
}
.cs-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cs-panel__title { font-family: var(--cs-display); font-size: clamp(1.1rem, 0.8rem + 1vw, 1.5rem); font-weight: 400; }
.cs-panel__flag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cs-gold);
  color: var(--cs-gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
}

.cs-stats { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); background: var(--cs-line); border: 1px solid var(--cs-line); }
@media (min-width: 720px) { .cs-stats { grid-template-columns: repeat(4, 1fr); } }
.cs-stat { background: var(--cs-ink-raised); padding: 18px; }
.cs-stat__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs-muted); }
.cs-stat__value { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.1; margin-top: 10px; }
.cs-stat__unit { font-size: 12px; color: var(--cs-ivory-dim); margin-top: 6px; }

.cs-charts { display: grid; gap: clamp(20px, 3vw, 30px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cs-charts { grid-template-columns: 1.25fr 1fr; } }

.cs-chart { display: grid; gap: 12px; align-content: start; }
.cs-chart__title { font-size: 13px; font-weight: 600; }
.cs-chart__sub { font-size: 11.5px; color: var(--cs-muted); }
.cs-chart svg { width: 100%; height: auto; overflow: visible; }

/* --- especificação de marcas (do método de dataviz) ---
   ATENÇÃO À ESCALA. Os dois SVG têm viewBox de 720 de largura e são exibidos
   em ~440 px (linha) e ~365 px (barras). Tudo aqui está em UNIDADES DE
   VIEWBOX, então um `font-size: 11` renderiza a ~6,7 px reais — ilegível.
   Os valores abaixo já estão pré-multiplicados pelo inverso da escala para
   cair em ~11–12 px na tela; o mesmo vale para os raios de marcador (alvo do
   método: ≥ 8 px) e para as espessuras de traço (alvo: 2 px). */
.cs-gridline { stroke: var(--cs-grid); stroke-width: 1.6; }
.cs-baseline { stroke: var(--cs-axis); stroke-width: 1.6; }
.cs-tick { fill: var(--cs-muted); font-size: 18px; font-family: var(--cs-text); }
.cs-tick--y { text-anchor: end; }
.cs-line { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cs-line--1 { stroke: var(--cs-series-1); }
.cs-line--2 { stroke: var(--cs-series-2); }
.cs-line--3 { stroke: var(--cs-series-3); }
.cs-endcap { r: 7; stroke: var(--cs-ink-raised); stroke-width: 3; }
.cs-endlabel { font-size: 19px; font-weight: 600; font-family: var(--cs-text); fill: var(--cs-ivory); }

.cs-bar { fill: var(--cs-series-1); transition: opacity 160ms ease; }
.cs-barrow:hover .cs-bar { opacity: 0.78; }
.cs-barlabel { fill: var(--cs-ivory-dim); font-size: 22px; font-family: var(--cs-text); }
.cs-barvalue { fill: var(--cs-ivory); font-size: 22px; font-weight: 600; font-family: var(--cs-text); font-variant-numeric: tabular-nums; }

/* --- camada de hover: crosshair + tooltip compartilhado, sem JavaScript ---
   Cada semana tem uma coluna invisível de captura. O alvo é a coluna inteira
   (82 × 250), muito maior que qualquer marca, que é o que o método pede. */
.cs-col .cs-cross,
.cs-col .cs-dot,
.cs-col .cs-tip { opacity: 0; transition: opacity 120ms ease; }
.cs-col:hover .cs-cross,
.cs-col:hover .cs-dot,
.cs-col:hover .cs-tip { opacity: 1; }
.cs-hit { fill: transparent; }
.cs-cross { stroke: var(--cs-line-strong); stroke-width: 1.6; stroke-dasharray: 5 5; }
.cs-dot { r: 7; stroke: var(--cs-ink-raised); stroke-width: 3; }
.cs-tip { pointer-events: none; }
.cs-tip rect { fill: #05070C; stroke: var(--cs-line-strong); stroke-width: 1.6; }
.cs-tip text { font-family: var(--cs-text); font-size: 17px; fill: var(--cs-ivory); }
.cs-tip .cs-tip__k { fill: var(--cs-muted); }
.cs-tip .cs-tip__v { font-weight: 600; text-anchor: end; font-variant-numeric: tabular-nums; }

/* --- legenda: sempre presente com 2+ séries --- */
.cs-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 11.5px; color: var(--cs-ivory-dim); }
.cs-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cs-legend i { width: 10px; height: 10px; flex: none; }

/* --- visão em tabela: o canal alternativo obrigatório --- */
.cs-table summary { cursor: pointer; font-size: 11.5px; color: var(--cs-muted); padding-block: 6px; }
.cs-table summary:hover { color: var(--cs-ivory); }
.cs-table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.cs-table th, .cs-table td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--cs-line); font-variant-numeric: tabular-nums; }
.cs-table th:first-child, .cs-table td:first-child { text-align: left; }
.cs-table thead th { color: var(--cs-muted); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ================= ESPÉCIMES TIPOGRÁFICOS ================= */
.cs-type-headline { font-family: var(--cs-display); font-weight: 400; font-size: clamp(2rem, 1rem + 3.4vw, 3.4rem); line-height: 1.06; }
.cs-type-label { font-family: var(--cs-text); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.cs-type-body { font-family: var(--cs-text); font-size: 16px; line-height: 1.7; max-width: 48ch; }
.cs-type-data { font-family: var(--cs-text); font-size: 2rem; font-variant-numeric: tabular-nums; }