/* ==========================================================================
   V3REvent — Motor de páginas de evento (#22)
   Design system: projeto/docs/design-system.md
   Depende de public.css (tokens --v3revent-* de marca/forma) — só enfileirado
   quando o evento usa o layout `full` (PageTemplates\Router::enqueue_assets()).

   Temas (data-driven, PageTemplates\Themes) variam a ESTRUTURA da página:
   - largura:  .v3revent-page--boxed (centralizado, max-width) | --full (100%)
   - esquema:  .v3revent-page--light | --dark (paleta invertida via tokens)
   - hero:     presente (.v3revent-page-hero) ou ausente, conforme o tema
   - ordem das seções: vem de PHP (Sections::render_theme()), não daqui.
   Mobile-first: base = 375px; breakpoints em 768px e desktop amplo.
   ========================================================================== */

.v3revent-page {
    font-family: var(--v3revent-font);
    color: var(--v3revent-text);
    background: var(--v3revent-bg);
    line-height: 1.5;
    /* #104: controle de acessibilidade de fonte — escala o conteúdo da página
       (texto + imagens/espaços, efeito de zoom). A barra de controle fica FORA
       deste elemento, então não é escalada. Default 1 (sem efeito). */
    zoom: var(--v3revent-font-scale, 1);
}

/* ── Caixinha de acessibilidade (#104/#110) — irmã de .v3revent-page (NÃO sofre
   o zoom de fonte, por isso não cresce ao clicar A+). Reposicionada (#110) como
   um chip discreto e translúcido sobre o canto superior direito do hero: cores
   FIXAS (fundo escuro translúcido + glifos brancos), legível sobre qualquer
   hero (imagem/gradiente/texto) nos dois esquemas — não usa os tokens de
   esquema porque fica por cima do hero, não do fundo da página. */
.v3revent-a11y-bar {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    font-family: var(--v3revent-font);
}
.v3revent-a11y-icon { display: block; flex: none; color: #fff; opacity: .95; }
/* Rótulo apenas para leitores de tela (visualmente oculto). */
.v3revent-a11y-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.v3revent-a11y-btns { display: inline-flex; gap: 4px; }
.v3revent-a11y-btn {
    min-width: 30px;
    min-height: 30px;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.v3revent-a11y-btn--down  { font-size: 12px; }
.v3revent-a11y-btn--reset { font-size: 15px; }
.v3revent-a11y-btn--up    { font-size: 18px; }
.v3revent-a11y-btn[aria-pressed="true"] {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.30);
}
.v3revent-a11y-btn:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.6); }
.v3revent-a11y-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}
/* Alinha o chip à borda do CONTEÚDO no layout encaixotado (em telas largas o
   hero é centralizado em 1080px; sem isso o chip ficaria solto no canto da
   viewport, fora do hero). No full/estreito, fica a 14px da borda. */
@media (min-width: 1112px) {
    body.v3revent-page--boxed .v3revent-a11y-bar {
        right: calc((100% - 1080px) / 2 + 14px);
    }
}
@media (max-width: 600px) {
    .v3revent-a11y-bar { top: 10px; right: 10px; gap: 6px; padding: 4px 6px; }
    .v3revent-a11y-btn { min-width: 28px; min-height: 28px; }
}
.v3revent-page *,
.v3revent-page *::before,
.v3revent-page *::after { box-sizing: border-box; }

/* ── Canvas (#92): "Página do Plugin" é um documento próprio, sem cabeçalho/
   rodapé do tema. O <body> preenche a viewport com o fundo do esquema — inclui
   as laterais no layout encaixotado, então no modo escuro não sobra faixa
   branca (#91, no layout de tela cheia). A classe de esquema no body resolve
   `--v3revent-bg` (claro do :root do public.css; escuro da classe --dark). */
body.v3revent-canvas {
    margin: 0;
    min-height: 100vh;
    background: var(--v3revent-bg);
    /* Contexto de posicionamento da caixinha de acessibilidade (#110), que é
       `position:absolute` sobre o canto do hero. */
    position: relative;
}

/* ── Largura ──────────────────────────────────────────────────────────── */
.v3revent-page--boxed {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px 48px;
}
.v3revent-page--full {
    width: 100%;
    padding: 0 0 48px;
}
.v3revent-page--full > .v3revent-page-section {
    padding-left: 16px;
    padding-right: 16px;
}

/* ── Esquema claro/escuro (estrutural, não só cor: inverte a paleta) ───── */
.v3revent-page--dark {
    /* Controles nativos (checkbox, date, scrollbar…) renderizam em estilo
       escuro — senão a caixa do checkbox some/fica clara sobre o fundo escuro. */
    color-scheme: dark;
    --v3revent-bg:            #0f172a; /* slate-900 */
    --v3revent-card-bg:       #1e293b; /* slate-800 */
    --v3revent-border:        #334155; /* slate-700 */
    --v3revent-border-strong: #475569; /* slate-600 */
    --v3revent-text:          #f1f5f9; /* slate-100 */
    --v3revent-muted:         #94a3b8; /* slate-400 */
}

/* Esquema "sistema" (#75): claro por padrão, escuro conforme o dispositivo do
   visitante (prefers-color-scheme), sem JS. */
@media (prefers-color-scheme: dark) {
    .v3revent-page--system {
        color-scheme: dark;
        --v3revent-bg:            #0f172a;
        --v3revent-card-bg:       #1e293b;
        --v3revent-border:        #334155;
        --v3revent-border-strong: #475569;
        --v3revent-text:          #f1f5f9;
        --v3revent-muted:         #94a3b8;
    }
}

/* ══ Identidade visual do tema (#75): tokens compostos ══════════════════ */

/* Contraste no modo escuro (WCAG AA) — inverte o que não invertia sozinho:
   - accent-text/secondary-text: cor da marca como TEXTO (primária/secundária
     escuras sumiriam no fundo escuro) → variante clareada (secundária +45%).
   - field-bg: fundo de campos/botões-secundários (era #fff fixo) → tom mais
     escuro que o card, destacando os campos com texto claro legível. */
.v3revent-page        { --v3revent-accent-text: var(--v3revent-primary); }
.v3revent-page--dark {
    --v3revent-accent-text:    color-mix(in srgb, var(--v3revent-secondary), #fff 45%);
    --v3revent-secondary-text: color-mix(in srgb, var(--v3revent-secondary), #fff 45%);
    --v3revent-field-bg:       #0f172a;
}
@media (prefers-color-scheme: dark) {
    .v3revent-page--system {
        --v3revent-accent-text:    color-mix(in srgb, var(--v3revent-secondary), #fff 45%);
        --v3revent-secondary-text: color-mix(in srgb, var(--v3revent-secondary), #fff 45%);
        --v3revent-field-bg:       #0f172a;
    }
}

/* Tipografia — pilhas do sistema (zero requisição externa). */
.v3revent-page--font-sans    { --v3revent-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.v3revent-page--font-serif   { --v3revent-font: Georgia, Cambria, "Times New Roman", Times, serif; }
.v3revent-page--font-rounded { --v3revent-font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, sans-serif; }

/* Forma — escala de cantos. */
.v3revent-page--shape-sharp { --v3revent-radius: 0;    --v3revent-radius-lg: 0; }
.v3revent-page--shape-soft  { --v3revent-radius: 8px;  --v3revent-radius-lg: 12px; }
.v3revent-page--shape-round { --v3revent-radius: 16px; --v3revent-radius-lg: 24px; }

/* Densidade — respiro entre e dentro das seções. */
.v3revent-page--density-cozy { --v3revent-section-gap: 40px; --v3revent-section-pad: 22px; }
.v3revent-page--density-airy { --v3revent-section-gap: 64px; --v3revent-section-pad: 32px; }

/* Acento — tratamento decorativo dos cards de seção com a cor do evento.
   'minimal' = nada; 'bar' = linha fina superior (primária); 'blocks' = faixa
   grossa (secundária). Usa BORDA (não texto) → seguro em claro e escuro.
   #85: a classe `.v3revent-page--accent-minimal` É emitida (ThemeTokens::classes,
   por consistência do DOM) — apenas não tem regra aqui, de propósito (sem
   decoração). Não é bug: inspecionar o DOM verá a classe, sem estilo associado. */
.v3revent-page--accent-bar .v3revent-page-section--registration,
.v3revent-page--accent-bar .v3revent-page-section--info,
.v3revent-page--accent-bar .v3revent-page-section--gallery,
.v3revent-page--accent-bar .v3revent-page-section--schedule,
.v3revent-page--accent-bar .v3revent-page-section--sponsors,
.v3revent-page--accent-bar .v3revent-page-section--share {
    border-top: 3px solid var(--v3revent-primary);
}
.v3revent-page--accent-blocks .v3revent-page-section--registration,
.v3revent-page--accent-blocks .v3revent-page-section--info,
.v3revent-page--accent-blocks .v3revent-page-section--gallery,
.v3revent-page--accent-blocks .v3revent-page-section--schedule,
.v3revent-page--accent-blocks .v3revent-page-section--sponsors,
.v3revent-page--accent-blocks .v3revent-page-section--share {
    border-top: 6px solid var(--v3revent-secondary);
}

/* ── Seções ───────────────────────────────────────────────────────────── */
.v3revent-page-section {
    margin: 0 0 var(--v3revent-section-gap, 40px);
}
.v3revent-page-section:last-child { margin-bottom: 0; }
.v3revent-page-section--registration,
.v3revent-page-section--info,
.v3revent-page-section--gallery,
.v3revent-page-section--schedule,
.v3revent-page-section--sponsors,
.v3revent-page-section--share {
    background: var(--v3revent-card-bg);
    border: 1px solid var(--v3revent-border);
    border-radius: var(--v3revent-radius-lg);
    padding: var(--v3revent-section-pad, 20px);
}
.v3revent-page--full .v3revent-page-section--registration,
.v3revent-page--full .v3revent-page-section--info,
.v3revent-page--full .v3revent-page-section--gallery,
.v3revent-page--full .v3revent-page-section--schedule,
.v3revent-page--full .v3revent-page-section--sponsors,
    .v3revent-page--full .v3revent-page-section--share {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* ── Hero (tema hero=image; ausente quando hero=none) ───────────────────── */
.v3revent-page-hero {
    position: relative;
    margin: 0 0 40px;
    border-radius: var(--v3revent-radius-lg);
    overflow: hidden;
    background: var(--v3revent-primary);
    color: #fff;
}
.v3revent-page--full .v3revent-page-hero { border-radius: 0; }
/* Hero full-bleed no layout de largura total (#82): os cards de seção já vão
   de borda a borda; o hero seguia com 16px de folga lateral (herdados do
   padding da seção). Zera esse padding só na seção do hero, alinhando tudo. */
.v3revent-page--full > .v3revent-page-section--hero { padding-left: 0; padding-right: 0; }
.v3revent-page-hero-media { position: relative; }
.v3revent-page-hero-img { display: block; width: 100%; }

/* ── Modo imagem + texto (#74): arte de fundo (cover) + scrim + texto legível ── */
.v3revent-page-hero--image-text .v3revent-page-hero-img {
    height: 220px;
    object-fit: cover;
}
/* Scrim de contraste (degradê escuro na base) sobre a arte — garante que
   título/data/local fiquem legíveis por cima de qualquer imagem. */
.v3revent-page-hero--image-text .v3revent-page-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .08) 100%);
}
.v3revent-page-hero--image-text .v3revent-page-hero-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* Sombra no texto sobreposto: garante legibilidade do título/data/local sobre
   QUALQUER imagem de fundo (foto ou arte), somada ao scrim. */
.v3revent-page-hero--image-text .v3revent-page-hero-title,
.v3revent-page-hero--image-text .v3revent-page-hero-meta {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

/* ── Modo só imagem (#74): arte inteira, sem corte, sem texto sobreposto ── */
.v3revent-page-hero--image { background: none; }
.v3revent-page-hero--image .v3revent-page-hero-img { height: auto; }

/* ── Modo só texto (#74): conteúdo sobre fundo nas cores do evento ── */
.v3revent-page-hero--text {
    background: linear-gradient(135deg, var(--v3revent-hero-a, var(--v3revent-primary)), var(--v3revent-hero-b, var(--v3revent-secondary)));
}
.v3revent-page-hero--text .v3revent-page-hero-content { padding: 40px 24px; }

.v3revent-page-hero-content {
    position: relative;
    padding: 24px 20px;
}
.v3revent-page-hero-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.v3revent-page-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .92);
}

/* ── Info (#98) ───────────────────────────────────────────────────────────
   Data e local viram PÍLULAS centralizadas em relação ao hero (some o
   "perdido à esquerda" em telas wide/4K); a descrição segue centralizada e
   com largura de leitura. Cores por token → contraste garantido em claro e
   escuro (accent-text é a marca-como-texto que inverte no escuro, #75/#84;
   card-bg/border são a superfície da pílula). */
.v3revent-page-info { text-align: center; }
.v3revent-page-info-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.v3revent-page-info-meta > li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    /* Fundo CHEIO da cor do evento (--v3revent-secondary, data-driven) com
       texto branco — mesmo padrão dos CTAs do plugin (.v3revent-btn--cta) e do
       lote ativo. Máximo destaque contra a seção, em claro e escuro (a marca é
       a mesma nos dois esquemas; só os neutros invertem). Antes o tom leve
       sobre card-bg quase não separava. Borda levemente escurecida p/ recorte. */
    background: var(--v3revent-secondary);
    border: 1px solid var(--v3revent-accent-hover);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
}
.v3revent-page-info-icon { flex: none; }
.v3revent-page-info-pill-text { min-width: 0; text-align: left; }
/* #95: data robusta em qualquer tema. Cada data/hora é um bloco que NÃO quebra
   no meio (a quebra da faixa cai no separador, nunca em "15:30 – 19/09"); e o
   `::first-line` volta a herdar o peso/estilo do elemento, neutralizando temas
   que estilizam a 1ª linha (negrito parcial quando a data quebra no mobile). */
.v3revent-date-part { white-space: nowrap; }
/* `!important` porque alguns temas marcam o `::first-line` como !important; o
   seletor de classe do plugin é mais específico que o `li::first-line`/`p` do
   tema, então vence. A não-quebra acima já garante que, no pior caso, a data
   nunca parte no meio de um valor. */
.v3revent-page-info-date::first-line,
.v3revent-page-hero-date::first-line { font-weight: inherit !important; font-style: inherit !important; }
.v3revent-page-info-location a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.v3revent-page-info-description {
    color: var(--v3revent-text);
    font-size: 15px;
    /* Centralizada (#98). Sem limite de largura: ocupa a largura da seção,
       como era antes do #98 — o cap de 680px encolhia demais a descrição
       (regressão v1.46.0, corrigida em v1.46.1). */
    text-align: center;
}
.v3revent-page-info-description :first-child { margin-top: 0; }
.v3revent-page-info-description :last-child { margin-bottom: 0; }

/* ── Aviso de inscrições (#93) ────────────────────────────────────────────
   Card destacado quando as inscrições não estão abertas. Cores por token —
   contraste garantido em claro/escuro (accent-text é a marca-como-texto que
   inverte no escuro, #75/#84). "Em breve" usa o acento; "encerradas"/
   "indisponíveis" ficam neutras (não competem com o call-to-action). */
.v3revent-reg-notice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-radius: var(--v3revent-radius-lg, 16px);
    background: var(--v3revent-card-bg);
    border: 1px solid var(--v3revent-border);
    border-left: 4px solid var(--v3revent-accent-text, var(--v3revent-secondary));
    color: var(--v3revent-text);
}
.v3revent-reg-notice-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--v3revent-accent-text, var(--v3revent-secondary));
}
.v3revent-reg-notice-detail { font-size: 14px; color: var(--v3revent-muted); }
.v3revent-reg-notice--ended,
.v3revent-reg-notice--closed { border-left-color: var(--v3revent-border-strong); }
.v3revent-reg-notice--ended .v3revent-reg-notice-title,
.v3revent-reg-notice--closed .v3revent-reg-notice-title { color: var(--v3revent-text); }

/* ── Contagem regressiva (#96) ────────────────────────────────────────────
   Box com um ou dois contadores (evento / fim das inscrições). Cores por
   token — contraste claro/escuro. */
.v3revent-countdowns { display: flex; flex-wrap: wrap; gap: 12px; }
.v3revent-countdown {
    flex: 1 1 240px;
    padding: 14px 18px;
    border-radius: var(--v3revent-radius-lg, 16px);
    background: var(--v3revent-card-bg);
    border: 1px solid var(--v3revent-border);
    text-align: center;
}
.v3revent-countdown-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--v3revent-muted);
    margin-bottom: 8px;
}
.v3revent-countdown-units { display: flex; justify-content: center; gap: 12px; }
.v3revent-countdown-unit { display: flex; flex-direction: column; min-width: 44px; }
.v3revent-countdown-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--v3revent-accent-text, var(--v3revent-secondary));
    font-variant-numeric: tabular-nums;
}
.v3revent-countdown-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--v3revent-muted); }

/* ── Contato dos organizadores (#94) ──────────────────────────────────────
   Card opcional com os canais (e-mail/WhatsApp/telefone). Cores por token. */
.v3revent-contact {
    padding: 16px 20px;
    border-radius: var(--v3revent-radius-lg, 16px);
    background: var(--v3revent-card-bg);
    border: 1px solid var(--v3revent-border);
    color: var(--v3revent-text);
}
.v3revent-contact-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--v3revent-accent-text, var(--v3revent-secondary));
}
.v3revent-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v3revent-contact-item { font-size: 14px; }
.v3revent-contact-kind { font-weight: 600; color: var(--v3revent-muted); margin-right: 4px; }
.v3revent-contact-item a { color: var(--v3revent-accent-text, var(--v3revent-secondary)); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

/* ── Logo do evento (#90) ─────────────────────────────────────────────────
   Destaque próprio, sobre cartão branco (legível em claro/escuro, como os
   patrocinadores no #88). Posição por evento (topo/abaixo do hero/junto do
   info); `hidden` não renderiza a seção. */
.v3revent-page-section--event_logo { display: flex; justify-content: center; }
.v3revent-event-logo-band {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 28px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--v3revent-radius-lg, 16px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    max-width: 100%;
}
.v3revent-event-logo-img {
    display: block;
    max-height: 150px; /* fallback; os presets abaixo definem por tamanho (#97) */
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Tamanho por evento (#97): presets. `custom` usa estilo inline no <img>. */
.v3revent-event-logo--small .v3revent-event-logo-img  { max-height: 90px; }
.v3revent-event-logo--medium .v3revent-event-logo-img { max-height: 150px; }
.v3revent-event-logo--large .v3revent-event-logo-img  { max-height: 220px; }
@media (max-width: 640px) {
    .v3revent-event-logo-band { padding: 16px 20px; }
    .v3revent-event-logo--small .v3revent-event-logo-img  { max-height: 72px; }
    .v3revent-event-logo--medium .v3revent-event-logo-img { max-height: 110px; }
    .v3revent-event-logo--large .v3revent-event-logo-img  { max-height: 150px; }
}

/* ── Section headings (rótulo simples por seção, opcional via tema) ────── */
.v3revent-page-section--gallery .v3revent-gallery,
.v3revent-page-section--schedule .v3revent-schedule,
.v3revent-page-section--share .v3revent-share {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* ── Responsivo (mobile-first: 375 base; 768 tablet; desktop amplo) ────── */
@media (min-width: 768px) {
    .v3revent-page--boxed { padding: 0 24px 64px; }
    .v3revent-page-hero--image-text .v3revent-page-hero-img { height: 320px; }
    .v3revent-page-hero-title { font-size: 32px; }
    .v3revent-page-section--registration,
    .v3revent-page-section--info,
    .v3revent-page-section--gallery,
    .v3revent-page-section--schedule,
    .v3revent-page-section--sponsors,
.v3revent-page-section--share {
        /* Respeita a densidade (#75) no desktop, com folga horizontal. */
        padding: var(--v3revent-section-pad, 22px) calc(var(--v3revent-section-pad, 22px) + 10px);
    }
}

@media (min-width: 1280px) {
    .v3revent-page--boxed { padding: 0 32px 80px; }
    .v3revent-page-hero--image-text .v3revent-page-hero-img { height: 400px; }
}