/* ============================================================================
   BOOGIE NAIPE — DESIGN SYSTEM (bn-system.css)
   Fonte única de verdade para tipografia, espaçamento, raio e componentes.
   Objetivo: padronizar o vocabulário visual que antes vivia inline em cada
   template. Use SEMPRE estas classes; não reescreva valores à mão.

   Sumário:
     1. Tokens (:root)            — escalas de tipo, espaço, raio, cor
     2. Tipografia               — .bn-display-* / .bn-eyebrow / .bn-lead / ...
     3. Botões e links           — .bn-btn / .bn-iconbtn / .bn-link
     4. Layout                   — .bn-section / .bn-container
     5. Formulários              — .bn-field / .bn-input / .bn-select
     6. Utilitários              — cores de texto, acento, divisor
   Cores/fontes-base vêm do #bn-foundation (header.php). Aqui só estendemos.
   ============================================================================ */

:root{
  /* ---- Tipografia: tamanhos (clamp = fluido mobile→desktop) ---- */
  --fs-hero:      clamp(50px, 9vw, 140px);   /* H1 de hero (todas as páginas) */
  --fs-section:   clamp(40px, 6.5vw, 104px); /* H2 de seção (o mais comum)    */
  --fs-sub:       clamp(32px, 5vw, 60px);    /* H2/H3 secundário              */
  --fs-minor:     clamp(24px, 3.4vw, 40px);  /* H3 menor (bio, timeline...)   */
  --fs-card:      clamp(20px, 2.6vw, 34px);  /* título de card                */
  --fs-index:     clamp(56px, 8vw, 100px);   /* numeral grande (princípios)   */
  --fs-stat:      clamp(40px, 5.5vw, 68px);  /* valor de stat / ROI / ano     */

  --fs-lead:      clamp(15px, 1.8vw, 18px);  /* parágrafo de abertura         */
  --fs-body:      clamp(14px, 1.6vw, 16px);  /* corpo padrão                  */
  --fs-small:     13px;                      /* texto auxiliar                */
  --fs-eyebrow:   14px;                      /* sobrelinha mono               */
  --fs-meta:      10px;                       /* metadados/labels mono         */

  /* ---- Tipografia: line-height + tracking de display ---- */
  --lh-display:   0.86;
  --lh-hero:      0.84;
  --ls-display:   -0.025em;
  --ls-hero:      -0.028em;

  /* ---- Espaçamento (escala base 4) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---- Padding de seção (fluido) ---- */
  --pad-section-y:  clamp(56px, 8vw, 100px);
  --pad-section-x:  clamp(16px, 4vw, 40px);
  --pad-hero-top:   clamp(100px, 14vw, 180px); /* respiro p/ a nav fixa */

  /* ---- Gaps verticais padronizados (cabeçalho de seção) ---- */
  --gap-head:  16px;                    /* eyebrow → título  */
  --gap-lead:  clamp(18px, 2.2vw, 26px);/* título → subtítulo/lead */

  /* ---- Raio (cantos) ---- */
  --r-sm:   8px;
  --r-md:   16px;   /* cards de pôster/evento — padrão do projeto */
  --r-lg:   24px;
  --r-pill: 999px;
  --r-full: 50%;

  /* ---- Larguras de container ---- */
  --w-wide:   1480px;
  --w-narrow: 1280px;
  --w-prose:  1000px;
  --w-tight:  720px;

  /* ---- Cores de texto derivadas (opacidades calibradas p/ WCAG AA) ---- */
  --t-muted:      rgba(255,255,255,0.7);  /* corpo sobre fundo escuro */
  --t-faint:      rgba(255,255,255,0.62);
  --t-line:       rgba(255,255,255,0.12);
  --t-muted-ink:  rgba(0,0,0,0.78);       /* corpo sobre fundo paper  */
  --t-faint-ink:  rgba(0,0,0,0.62);
  --t-line-ink:   rgba(0,0,0,0.14);
  /* magenta mais claro só p/ TEXTO pequeno (eyebrows/labels) — passa AA no escuro;
     o magenta de marca (#D60E32) segue nos botões/acentos/títulos grandes. */
  --magenta-bright: #F0335A;
}

/* ---- Overrides de token no mobile ---- */
@media (max-width: 767px){
  :root{
    --fs-section: 50px;  /* H2 de seção maior no celular */
  }
}

/* ============================================================================
   2. TIPOGRAFIA
   ============================================================================ */

/* Títulos de display — Big Shoulders 900, caixa-alta. */
.bn-display-hero,
.bn-display-section,
.bn-display-sub,
.bn-display-minor,
.bn-display-card{
  font-family: var(--f-disp);
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  color: inherit;
}
.bn-display-hero{    font-size: var(--fs-hero);    line-height: var(--lh-hero);    letter-spacing: var(--ls-hero); }
.bn-display-section{ font-size: var(--fs-section); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.bn-display-sub{     font-size: var(--fs-sub);     line-height: 0.9;  letter-spacing: -0.02em; }
.bn-display-minor{   font-size: var(--fs-minor);   line-height: 0.92; letter-spacing: -0.015em; }
.bn-display-card{    font-size: var(--fs-card);    line-height: 0.9;  letter-spacing: -0.015em; }

/* Acento itálico magenta dentro de um título (ex.: <em class="bn-accent">). */
.bn-accent{
  font-family: var(--f-disp2);
  font-style: italic;
  color: var(--magenta);
}
.bn-accent--ink{ color: var(--ink); }
.bn-accent--bone{ color: var(--bone); }

/* Numerais grandes (índice de princípios, ano de timeline, valor de stat). */
.bn-index,
.bn-stat-value{
  font-family: var(--f-disp);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.025em;
  color: var(--magenta);
}
.bn-index{ font-size: var(--fs-index); }
.bn-stat-value{ font-size: var(--fs-stat); }
.bn-stat-value--ink{ color: var(--ink); }

/* Sobrelinha (eyebrow) mono com traço magenta. Markup: <span class="bn-eyebrow">texto</span> */
.bn-eyebrow{
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--magenta);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bn-eyebrow::before{
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.bn-eyebrow--center{ justify-content: center; }
.bn-eyebrow--plain::before{ display: none; } /* sem o traço */

/* Label mono curto (metadados, "Resposta média", tags de slice). */
.bn-meta{
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-faint);
}

/* Parágrafos. */
.bn-lead{ font-size: var(--fs-lead); line-height: 1.65; color: var(--t-muted); margin: 0; }
.bn-body{ font-size: var(--fs-body); line-height: 1.6;  color: var(--t-muted); margin: 0; }
.bn-lead--ink{ color: var(--t-muted-ink); }
.bn-body--ink{ color: var(--t-muted-ink); }

/* Gaps padronizados do cabeçalho de seção — vencem o margin-top inline
   (irmão-adjacente). Garante eyebrow→título e título→subtítulo iguais em todo o site. */
.bn-eyebrow + h1, .bn-eyebrow + h2, .bn-eyebrow + h3,
.bn-eyebrow + [class*="bn-display"]{ margin-top: var(--gap-head) !important; }
/* Só .bn-lead (subtítulo de hero/seção). .bn-body fica de fora de propósito:
   ali o título costuma ter margin-bottom próprio e dobraria o espaço. */
[class*="bn-display"] + .bn-lead{ margin-top: var(--gap-lead) !important; }

/* ============================================================================
   3. BOTÕES E LINKS
   ============================================================================ */

.bn-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: clamp(13px,1.8vw,17px) clamp(22px,3vw,34px);
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease, background .25s ease, color .25s ease;
}
.bn-btn--primary{ background: var(--magenta); color: #fff; }
.bn-btn--on-paper{ background: #fff; color: var(--magenta-deep); }
.bn-btn--ghost{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85);
}
.bn-btn--lg{ min-height: 52px; padding: clamp(16px,2vw,20px) clamp(28px,4vw,44px); font-size: clamp(12px,1.5vw,15px); }
.bn-btn--sm{ min-height: 40px; padding: 10px 18px; font-size: 10px; letter-spacing: 0.14em; }
.bn-btn--block{ width: 100%; }
@media (hover:hover){
  .bn-btn:hover{ transform: translateY(-3px); }
  .bn-btn--primary:hover{ filter: brightness(1.06); }
  .bn-btn--ghost:hover{ background: rgba(255,255,255,0.12); }
}

/* Botão-ícone circular (setas de carrossel, prev/next de calendário). */
.bn-iconbtn{
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.bn-iconbtn:hover{ background: rgba(255,255,255,0.12); }
.bn-iconbtn--ink{ border-color: rgba(0,0,0,0.15); color: var(--ink); background: transparent; }
.bn-iconbtn--ink:hover{ background: rgba(0,0,0,0.05); border-color: var(--magenta); }
.bn-iconbtn--sm{ width: 40px; height: 40px; font-size: 14px; }

/* Link de texto sublinhado ("Ver todos →"). */
.bn-link{
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-muted);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  transition: color .2s ease, border-color .2s ease;
  display: inline-block;
}
.bn-link:hover{ color: #fff; border-color: var(--magenta); }

/* ============================================================================
   4. LAYOUT
   ============================================================================ */

.bn-section{ padding: var(--pad-section-y) var(--pad-section-x); }
.bn-section--hero{ padding-top: var(--pad-hero-top); }
.bn-section--sm{ padding-block: clamp(48px,7vw,80px); }
.bn-section--lg{ padding-block: clamp(64px,9vw,110px); }

.bn-container{ max-width: var(--w-wide); margin-inline: auto; width: 100%; }
.bn-container--narrow{ max-width: var(--w-narrow); }
.bn-container--prose{ max-width: var(--w-prose); }
.bn-container--tight{ max-width: var(--w-tight); }

/* ============================================================================
   5. FORMULÁRIOS  (padroniza inputs/selects que hoje variam por página)
   ============================================================================ */

/* Linha de campo: número magenta + label mono. */
.bn-field-head{ margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; }
.bn-field-num{ font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--magenta); letter-spacing: 0.18em; }
.bn-field-label{ font-family: var(--f-mono); font-size: var(--fs-meta); color: rgba(0,0,0,0.75); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }

/* Input "linha" (fundo paper) — usado no formulário de booking. */
.bn-input{
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(0,0,0,0.25);
  padding: 12px 0;
  font-family: var(--f-sans);
  font-size: 16px; /* 16px evita zoom automático no iOS */
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease;
}
.bn-input:focus{ border-color: var(--magenta); }
.bn-input::placeholder{ color: rgba(0,0,0,0.4); }
select.bn-input{ appearance: none; -webkit-appearance: none; cursor: pointer; }

/* Select "caixa" (fundo escuro) — usado nos filtros de agenda. */
.bn-select{
  width: 100%;
  background: #15110f;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  padding: 14px 42px 14px 16px;
  font-family: var(--f-sans);
  font-size: 14px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color .2s ease;
}
.bn-select:focus{ border-color: var(--magenta); }

/* ============================================================================
   6. UTILITÁRIOS
   ============================================================================ */

/* Timeline (página Sobre) — 3 colunas no desktop, 1 coluna no mobile. */
.bn-timeline-row{
  display: grid;
  grid-template-columns: clamp(80px,12vw,180px) 1fr 2fr;
  gap: clamp(16px,3vw,40px);
  align-items: start;
}
@media (max-width: 640px){
  .bn-timeline-row{ grid-template-columns: 1fr; gap: 8px; }
}

/* Bio "Continuar lendo" — colapsa em ~5 linhas (fundo paper) e expande no clique.
   .is-expanded (via JS no footer) remove o limite. O botão some sozinho se a bio
   já couber em 5 linhas. */
.bn-bio{ position: relative; max-height: 8.5em; overflow: hidden; }
.bn-bio::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em;
  background: linear-gradient(transparent, var(--paper)); pointer-events: none;
}
.bn-bio.is-expanded{ max-height: none; }
.bn-bio.is-expanded::after{ display: none; }
.bn-bio-more{
  margin-top: 14px; padding: 8px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--magenta);
  display: inline-flex; align-items: center; gap: 8px;
}
.bn-bio-more::after{ content: "↓"; font-size: 11px; transition: transform .2s ease; }
.bn-bio-more[aria-expanded="true"]::after{ transform: rotate(180deg); }
@media (hover:hover){ .bn-bio-more:hover{ color: var(--magenta-deep); } }

.bn-muted{ color: var(--t-muted); }
.bn-faint{ color: var(--t-faint); }
.bn-muted-ink{ color: var(--t-muted-ink); }
.bn-divider{ border: 0; border-top: 1px solid var(--t-line); margin: 0; }
.bn-divider--ink{ border-top-color: var(--t-line-ink); }

/* Acessibilidade: foco visível consistente em controles interativos. */
.bn-btn:focus-visible,
.bn-iconbtn:focus-visible,
.bn-link:focus-visible,
.bn-input:focus-visible,
.bn-select:focus-visible{
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}