/*
 * Home do portal público: abertura (título, carrossel, busca), álbum da
 * temporada, Acontecendo agora, placar grátis, "Organize" e dúvidas.
 * Depende de tokens.css e album.css.
 */

/* ---------- abertura ---------- */
.vv-abre { padding-top: var(--vv-e6); }
.vv-abre__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--vv-e4); }
.vv-abre__tit {
    margin: 0;
    font: 900 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1.02 var(--vv-fonte-titulo); font-stretch: var(--vv-largo-max);
    letter-spacing: -0.03em; text-wrap: balance;
}
.vv-abre__sub { margin: var(--vv-e2) 0 0; font-size: var(--vv-t-l); color: var(--vv-tinta-2); max-width: 64ch; }

/* ---------- busca ---------- */
.vv-busca {
    display: grid; align-items: end; gap: var(--vv-e3) var(--vv-e4);
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "tit tit tit tit" "cid mes cat ir" "msg msg msg msg";
    margin-top: var(--vv-e2);
    padding: var(--vv-e4) var(--vv-e5) var(--vv-e5);
    background: var(--vv-folha-2);
    border-top: var(--vv-fio-larg) solid var(--vv-fio);
}
.vv-busca__tit { grid-area: tit; margin: 0; font: 800 var(--vv-t-m)/1.2 var(--vv-fonte-titulo); font-stretch: var(--vv-largo); }
.vv-busca__campo { display: grid; gap: var(--vv-e1); min-width: 0; }
.vv-busca__campo--cidade { grid-area: cid; }
.vv-busca__campo label { font-weight: 700; font-size: var(--vv-t-s); }
.vv-busca__campo input, .vv-busca__campo select {
    min-width: 0;   /* o campo de mês do Chrome não encolhe sozinho (invadia a categoria) */
    width: 100%; min-height: 48px; padding: 0 var(--vv-e3);
    font: 500 var(--vv-t-m) var(--vv-fonte); color: var(--vv-tinta);
    background: var(--vv-figura); border: var(--vv-fio-larg) solid var(--vv-fio); border-radius: var(--vv-raio-ctl);
    caret-color: var(--vv-azul);
}
.vv-busca__campo input::placeholder { color: var(--vv-tinta-2); opacity: 1; }
.vv-busca__campo select {
    appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234b5675' stroke-width='2' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
/* a seta do select no tema escuro (a cor do SVG não segue o tema) */
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .vv-busca__campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23aab4cf' stroke-width='2' d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); } }
:root[data-tema="escuro"] .vv-busca__campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23aab4cf' stroke-width='2' d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); }
.vv-busca__ir { grid-area: ir; min-height: 48px; padding-inline: var(--vv-e5); }
.vv-busca__msg { grid-area: msg; margin: 0; font-weight: 700; color: var(--vv-vermelho); }
.vv-busca__msg:empty { display: none; }
.vv-busca[aria-busy="true"] .vv-busca__ir { cursor: progress; }

/* ---------- álbum ---------- */
.vv-album { padding-top: var(--vv-e8); }
.vv-album__cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--vv-e2) var(--vv-e4); margin-bottom: var(--vv-e5); padding-bottom: var(--vv-e3); border-bottom: var(--vv-fio-larg) solid var(--vv-fio); }
.vv-album__conta { margin: 0; color: var(--vv-tinta-2); font-weight: 700; }
.vv-album__conta b { color: var(--vv-tinta); font-size: var(--vv-t-l); }
#vv-busca-limpar { margin-left: auto; min-height: 40px; }
.vv-album__grupo { margin: var(--vv-e2) 0 var(--vv-e4); font: 800 var(--vv-t-l)/1.2 var(--vv-fonte-titulo); font-stretch: var(--vv-largo); }
.vv-album__perto .vv-album__grupo:last-child { margin-top: var(--vv-e7); }
.vv-album__cidade { color: var(--vv-azul); }
.vv-album__nada { display: flex; align-items: center; gap: var(--vv-e5); padding: var(--vv-e5) 0; }
.vv-album__nada p { margin: 0; max-width: 48ch; }

/* álbum vazio: molduras tracejadas esperando as figurinhas */
.vv-vazio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--vv-e7); padding-block: var(--vv-e6) var(--vv-e7); }
.vv-vazio__folha { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vv-e4); }
.vv-vazio__folha i { aspect-ratio: 3 / 4; border: 3px dashed var(--vv-fio-leve); border-radius: var(--vv-raio-fig); }
.vv-vazio__folha i:nth-child(2) { border-color: var(--vv-tinta-2); }
.vv-vazio__folha--mini { grid-template-columns: repeat(3, 28px); gap: 6px; }
.vv-vazio__folha--mini i { border-width: 2px; }
.vv-vazio__acoes { display: flex; flex-wrap: wrap; gap: var(--vv-e3); margin-top: var(--vv-e5); }

/* ---------- Acontecendo agora ---------- */
.vv-agora { padding-top: var(--vv-e8); }
.vv-agora .vv-album__grade { margin-top: var(--vv-e5); }

/* ---------- placar grátis ---------- */
.vv-placar { margin-top: var(--vv-e8); padding-block: var(--vv-e7); background: var(--vv-folha-2); border-block: var(--vv-fio-larg) solid var(--vv-fio); }
.vv-placar__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--vv-e7); }
.vv-placar__txt p { margin: var(--vv-e4) 0 0; max-width: 54ch; font-size: var(--vv-t-l); line-height: 1.5; }
.vv-placar__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vv-e3) var(--vv-e5); margin-top: var(--vv-e5); }
.vv-placar__fig { margin: 0; transform: rotate(0.9deg); }
.vv-placar__fig figcaption { margin-top: var(--vv-e3); font-size: var(--vv-t-xs); color: var(--vv-tinta-2); text-align: right; }

/* a TV, como figurinha especial: invertida, borda branca */
.vv-mini {
    padding: var(--vv-e5) var(--vv-e5) var(--vv-e4);
    background: var(--vv-especial); color: var(--vv-especial-tinta);
    border: var(--vv-borda-larg) solid var(--vv-borda-fig); border-radius: var(--vv-raio-fig);
    font-family: var(--vv-fonte-titulo);
}
.vv-mini .a { color: var(--vv-azul-inv); }
.vv-mini .b { color: var(--vv-vermelho-inv); }
.vv-mini__nomes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; text-align: center; font-weight: 800; font-stretch: var(--vv-largo); font-size: var(--vv-t-l); }
.vv-mini__set { font: 700 var(--vv-t-s) var(--vv-fonte); opacity: 0.8; }
.vv-mini__pontos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; font-weight: 900; font-size: clamp(4rem, 2.5rem + 5vw, 6.5rem); line-height: 0.95; }
.vv-mini__x { font-size: 0.4em; opacity: 0.6; }
.vv-mini__fita { display: grid; grid-template-columns: repeat(41, minmax(0, 1fr)); grid-template-rows: 8px 8px; gap: 3px 2px; margin: var(--vv-e4) 0 var(--vv-e3); }
.vv-mini__fita i { border-radius: 1px; }
.vv-mini__fita i.a { grid-row: 1; background: var(--vv-azul-inv); }
.vv-mini__fita i.b { grid-row: 2; background: var(--vv-vermelho-inv); }
.vv-mini__livro { display: flex; justify-content: center; gap: var(--vv-e5); font-weight: 700; font-size: var(--vv-t-m); font-stretch: normal; }
.vv-mini__livro b { font-weight: 900; }

/* ---------- Organize ---------- */
.vv-organize { padding-top: var(--vv-e8); }
.vv-organize__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vv-e6) var(--vv-e6); margin: var(--vv-e6) 0 0; }
.vv-organize__lista > div { padding-top: var(--vv-e3); border-top: var(--vv-fio-larg) solid var(--vv-fio); }
.vv-organize__lista dt { font: 800 var(--vv-t-l)/1.2 var(--vv-fonte-titulo); font-stretch: var(--vv-largo); letter-spacing: -0.01em; }
.vv-organize__lista dd { margin: var(--vv-e2) 0 0; color: var(--vv-tinta-2); }
.vv-organize__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vv-e3) var(--vv-e5); margin-top: var(--vv-e6); }

/* ---------- dúvidas ---------- */
.vv-duvidas { padding-top: var(--vv-e8); }
.vv-duvidas__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--vv-e6); align-items: start; }
.vv-duvidas__lista { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--vv-e6); }
.vv-duvidas__lista li { break-inside: avoid; border-bottom: 1px solid var(--vv-fio-leve); }
.vv-duvidas__lista a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--vv-e3);
    min-height: 52px; padding: var(--vv-e2) 0;
    color: var(--vv-tinta); font-weight: 700; text-decoration: none;
}
.vv-duvidas__lista a .bi { flex: none; color: var(--vv-azul); transition: transform var(--vv-rapido) var(--vv-ease); }
.vv-duvidas__lista a:hover { color: var(--vv-azul); }
.vv-duvidas__lista a:hover .bi { transform: translateX(3px); }

/* ---------- celular e tablet ---------- */
@media (max-width: 991.98px) {
    .vv-placar__in, .vv-vazio { grid-template-columns: minmax(0, 1fr); gap: var(--vv-e6); }
    .vv-organize__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vv-duvidas__in { grid-template-columns: minmax(0, 1fr); gap: var(--vv-e4); }
}
@media (max-width: 767.98px) {
    .vv-busca {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "tit tit" "cid cid" "mes cat" "ir ir" "msg msg";
        padding: var(--vv-e4);
    }
    .vv-busca__campo:nth-of-type(2) { grid-area: mes; }
    .vv-busca__campo:nth-of-type(3) { grid-area: cat; }
    .vv-duvidas__lista { columns: 1; }
}
/* celular estreito: o mês por extenso ("setembro de 2026") não cabe em meia
   largura; mês e categoria ficam um embaixo do outro */
@media (max-width: 479.98px) {
    .vv-busca { grid-template-areas: "tit tit" "cid cid" "mes mes" "cat cat" "ir ir" "msg msg"; }
}
@media (min-width: 768px) {
    .vv-busca__campo:nth-of-type(2) { grid-area: mes; }
    .vv-busca__campo:nth-of-type(3) { grid-area: cat; }
}
@media (max-width: 639.98px) {
    .vv-abre { padding-top: var(--vv-e5); }
    .vv-abre__cab { display: block; }
    .vv-abre__tit { font-size: 1.625rem; }
    .vv-abre .vv-abre__sub { display: none; }   /* a primeira tela fica para a figurinha e a busca */
    /* no celular: arrastar (a próxima aparece na borda); ficam a posição e o Pausar, ao lado do título */
    .vv-abre__cab { position: relative; }
    .vv-abre .vv-carrossel__ctl { position: absolute; top: 0; right: 0; }
    .vv-abre .vv-carrossel__ctl [data-vv-ant], .vv-abre .vv-carrossel__ctl [data-vv-prox] { display: none; }
    .vv-abre .vv-carrossel__ctl { gap: 0; }
    .vv-abre .vv-carrossel__pos { display: none; }
    .vv-album, .vv-agora, .vv-organize, .vv-duvidas { padding-top: var(--vv-e7); }
    .vv-placar { margin-top: var(--vv-e7); padding-block: var(--vv-e6); }
    .vv-organize__lista { grid-template-columns: minmax(0, 1fr); gap: var(--vv-e5); }
    .vv-vazio__folha { grid-template-columns: repeat(3, 1fr); gap: var(--vv-e3); }
}