/*
 * Figurinha do álbum (partial portal/partials/figurinha), a grade do álbum e
 * o carrossel de figurinhas grandes. Depende de tokens.css.
 *
 * Figurinha: borda branca, impressão chapada, colada com um ângulo pequeno
 * (--vv-gira, do partial). Profundidade só por sobreposição: o canto com o
 * número e o carimbo de esgotado ficam por cima da borda; nada de sombra.
 * Variantes: normal (álbum), grande (carrossel), especial (invertida, uma
 * por tela: Acontecendo agora).
 */

.vv-fig {
    --vv-campo: #1d4fd6;            /* fundo impresso atrás da foto (os dois temas) */
    --vv-canto: 56px;
    position: relative;
    display: flex;
    transform: rotate(var(--vv-gira, 0deg));
    transition: transform var(--vv-medio) var(--vv-ease);
    font-family: var(--vv-fonte);
    color: var(--vv-tinta);
}
.vv-fig:hover, .vv-fig:focus-within { transform: rotate(0deg) translateY(-3px); }

.vv-fig__moldura {
    flex: 1;
    display: flex; flex-direction: column;
    min-width: 0;
    background: var(--vv-figura);
    border: var(--vv-borda-larg) solid var(--vv-borda-fig);
    border-radius: var(--vv-raio-fig);
    outline: 1px solid var(--vv-fio-leve);
}

/* foto: inteira (cartaz não é cortado), sobre o campo azul impresso */
.vv-fig__foto {
    position: relative; display: block;
    aspect-ratio: 4 / 3;
    background: var(--vv-campo);
    overflow: hidden;
}
.vv-fig__foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vv-fig__foto img.vv-fig__marca { width: 46%; height: auto; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); }
.vv-fig__foto:has(.vv-fig__marca) { background: var(--vv-folha-2); }

/* carimbo de esgotado, sobre a foto */
.vv-fig__carimbo {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(-9deg);
    padding: var(--vv-e1) var(--vv-e4);
    background: var(--vv-figura); color: var(--vv-vermelho);
    border: 3px solid var(--vv-vermelho); border-radius: var(--vv-raio-fig);
    font: 900 var(--vv-t-l)/1.1 var(--vv-fonte-titulo); font-stretch: var(--vv-largo-max);
    letter-spacing: 0.04em; text-transform: uppercase;
}

.vv-fig__corpo {
    flex: 1;
    display: flex; flex-direction: column; gap: var(--vv-e2);
    padding: var(--vv-e4) var(--vv-e4) var(--vv-e4);
}
.vv-fig__nome {
    margin: 0;
    font: 800 var(--vv-t-l)/1.12 var(--vv-fonte-titulo); font-stretch: var(--vv-largo);
    letter-spacing: -0.015em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    text-wrap: balance;
}
.vv-fig__nome a { color: inherit; text-decoration: none; }
.vv-fig__nome a:hover { color: var(--vv-azul); }
.vv-fig__quando, .vv-fig__onde, .vv-fig__tipo, .vv-fig__aviso, .vv-fig__ao-vivo { margin: 0; font-size: var(--vv-t-s); line-height: 1.35; }
.vv-fig__quando { font-weight: 700; }
.vv-fig__data-curta { display: none; }
.vv-fig__onde, .vv-fig__onde a { color: var(--vv-tinta-2); }
.vv-fig__onde a:hover { color: var(--vv-azul); }
.vv-fig__onde .bi { margin-right: var(--vv-e1); }
.vv-fig__tipo { color: var(--vv-tinta-2); }
.vv-fig__aviso { font-weight: 700; color: var(--vv-tinta-2); }
.vv-fig__aviso--esgotado { color: var(--vv-vermelho); }

/* o espaço vazio do álbum: uma moldura tracejada por vaga (até o limite) */
.vv-fig__vaga { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vv-e2) var(--vv-e3); font-size: var(--vv-t-s); font-weight: 700; }
.vv-fig__vazios { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.vv-fig__vazios i { width: 14px; height: 19px; border: 2px dashed var(--vv-tinta-2); border-radius: 2px; }
.vv-fig__vaga-txt .vv-num { font-size: 1.15em; }

.vv-fig__acoes { margin-top: auto; padding-top: var(--vv-e2); display: flex; gap: var(--vv-e2); }
.vv-fig__acoes > .vv-btn:first-child { flex: 1; min-width: 0; }

/* canto: o número da figurinha (vagas, até o limite; senão o dia) */
.vv-fig__canto {
    position: absolute; top: -10px; left: -10px; z-index: 2;
    width: var(--vv-canto); min-height: var(--vv-canto);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4px 2px;
    background: var(--vv-azul); color: var(--vv-azul-tinta);
    border: 3px solid var(--vv-borda-fig); border-radius: var(--vv-raio-fig);
    line-height: 1;
}
.vv-fig__canto b { font-weight: 900; font-size: calc(var(--vv-canto) * 0.42); letter-spacing: -0.02em; }
.vv-fig__canto small { margin-top: 2px; font: 700 calc(var(--vv-canto) * 0.2)/1 var(--vv-fonte); font-stretch: normal; }
.vv-fig__canto--vagas { background: var(--vv-especial); color: var(--vv-especial-tinta); }
.vv-fig--esgotado .vv-fig__canto { background: var(--vv-vermelho); color: var(--vv-vermelho-tinta); }

/* ---------- grande (carrossel) ---------- */
.vv-fig--grande { --vv-canto: 76px; height: 100%; transform: rotate(calc(var(--vv-gira, 0deg) * 0.5)); container-type: inline-size; }
.vv-fig--grande:hover, .vv-fig--grande:focus-within { transform: none; }
.vv-fig--grande .vv-fig__foto { aspect-ratio: 16 / 10; }
.vv-fig--grande .vv-fig__corpo { gap: var(--vv-e3); padding: var(--vv-e5); }
.vv-fig--grande .vv-fig__nome { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); line-height: 1.04; letter-spacing: -0.025em; -webkit-line-clamp: 5; line-clamp: 5; }   /* é o herói da página: o nome inteiro (5 linhas só como teto) */
.vv-fig--grande .vv-fig__quando { font-size: var(--vv-t-m); }
.vv-fig--grande .vv-fig__vazios i { width: 22px; height: 29px; }
.vv-fig--grande .vv-fig__vaga { font-size: var(--vv-t-m); }
.vv-fig--grande .vv-fig__acoes .vv-btn { min-height: 52px; font-size: var(--vv-t-m); }
@container (min-width: 620px) {
    .vv-fig--grande .vv-fig__moldura { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
    .vv-fig--grande .vv-fig__foto { aspect-ratio: auto; height: clamp(300px, 44vh, 420px); }
    .vv-fig--grande .vv-fig__corpo { padding: var(--vv-e6) var(--vv-e6) var(--vv-e5); }
}

/* ---------- especial: invertida (tinta na folha clara), uma por tela ---------- */
.vv-fig--especial .vv-fig__moldura { background: var(--vv-especial); color: var(--vv-especial-tinta); outline-color: var(--vv-especial); }
.vv-fig--especial .vv-fig__onde, .vv-fig--especial .vv-fig__onde a { color: var(--vv-especial-tinta); }
.vv-fig--especial .vv-fig__onde a:hover { color: var(--vv-especial-tinta); }
.vv-fig--especial .vv-fig__canto { background: var(--vv-vermelho); color: var(--vv-vermelho-tinta); }
.vv-fig__pulso { display: inline-block; width: 10px; height: 10px; margin-right: var(--vv-e2); vertical-align: 0.05em; border-radius: 50%; background: var(--vv-vermelho); animation: vv-pulso 1.6s var(--vv-ease) infinite; }
@keyframes vv-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.vv-fig__tabelas { list-style: none; margin: var(--vv-e1) 0 0; padding: 0; display: grid; gap: var(--vv-e2); }
.vv-fig__tabelas .vv-btn { width: 100%; justify-content: flex-start; }

/* botão sobre fundo invertido */
.vv-btn--claro { border-color: var(--vv-especial-tinta); color: var(--vv-especial-tinta); }
.vv-btn--claro:hover { background: var(--vv-especial-tinta); color: var(--vv-especial); }

/* ---------- grade do álbum ---------- */
.vv-album__grade {
    display: grid; gap: var(--vv-e7) var(--vv-e6);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
    padding: var(--vv-e3) 0 0 var(--vv-e2);
}
.vv-fig--normal { container-type: inline-size; }
.vv-fig--normal > .vv-fig__moldura { width: 100%; }

/* o espaço vazio do álbum, no fim da folha */
.vv-album__vago {
    display: flex; flex-direction: column; justify-content: center; gap: var(--vv-e1);
    min-height: 220px; padding: var(--vv-e5);
    border: 3px dashed var(--vv-fio-leve); border-radius: var(--vv-raio-fig);
    color: var(--vv-tinta-2); font-size: var(--vv-t-s); text-decoration: none;
}
.vv-album__vago-tit { font: 800 var(--vv-t-l)/1.15 var(--vv-fonte-titulo); font-stretch: var(--vv-largo); color: var(--vv-tinta); }
.vv-album__vago:hover { border-color: var(--vv-tinta-2); color: var(--vv-tinta); }

/* figurinha estreita (2 por linha no celular): só o essencial */
@container (max-width: 219.98px) {
    .vv-fig__corpo { padding: var(--vv-e3); gap: var(--vv-e1); }
    .vv-fig__nome { font-size: var(--vv-t-m); -webkit-line-clamp: 3; line-clamp: 3; }
    .vv-fig__quando, .vv-fig__aviso, .vv-fig__vaga { font-size: var(--vv-t-xs); }
    .vv-fig__onde, .vv-fig__tipo, .vv-fig__vazios, .vv-fig__partilha { display: none; }
    .vv-fig__acoes .vv-btn { min-height: 44px; padding-inline: var(--vv-e2); font-size: var(--vv-t-xs); }
    .vv-fig__data-longa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* figurinha estreita: "dom, 18/10" numa linha */
    .vv-fig__data-curta { display: inline; }
    .vv-fig__carimbo { max-width: 90%; padding: 2px var(--vv-e2); border-width: 2px; font-size: var(--vv-t-s); letter-spacing: 0.02em; }
}

/* ---------- carrossel: scroll-snap nativo; setas e posição no js/vv/carrossel.js ---------- */
/* figurinha no centro (snap center); o respiro das pontas deixa a primeira e
   a última chegarem ao meio, com as vizinhas aparecendo dos dois lados */
.vv-carrossel { --vv-item: min(960px, 86vw); --vv-pad: max(var(--vv-gutter), calc((100% - var(--vv-item)) / 2)); }
.vv-carrossel__trilho {
    list-style: none; margin: 0;
    display: flex; gap: var(--vv-e6);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: var(--vv-e4) var(--vv-pad) var(--vv-e5);
    scrollbar-width: thin; scrollbar-color: var(--vv-fio-leve) transparent;
}
.vv-carrossel__trilho:focus-visible { outline-offset: -3px !important; }
.vv-carrossel__item { flex: 0 0 var(--vv-item); scroll-snap-align: center; display: flex; padding: 12px 0 0 12px; }
/* a grande é container (container-type): sem largura própria, ocupa o item */
.vv-carrossel__item > .vv-fig { flex: 1 1 auto; width: 100%; min-width: 0; }
.vv-carrossel__ctl { display: flex; align-items: center; gap: var(--vv-e2); }
.vv-carrossel__pos { min-width: 4.5ch; text-align: center; font-size: var(--vv-t-l); font-weight: 700; }
.vv-carrossel__pos b { font-weight: 900; }
.vv-carrossel__pos [aria-hidden] { margin: 0 2px; color: var(--vv-tinta-2); }

@media (max-width: 639.98px) {
    .vv-fig { --vv-canto: 52px; }
    .vv-fig--grande { --vv-canto: 60px; }
    .vv-fig--grande .vv-fig__corpo { padding: var(--vv-e4); gap: var(--vv-e2); }
    .vv-fig--grande .vv-fig__foto { aspect-ratio: 2 / 1; }
    .vv-carrossel__trilho { gap: var(--vv-e4); }
    .vv-carrossel { --vv-item: 88vw; }
    .vv-fig--normal { --vv-canto: 44px; }
    .vv-album__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vv-e5) var(--vv-e4); padding-left: var(--vv-e2); }
    .vv-album__vago { min-height: 160px; padding: var(--vv-e3); }
    .vv-album__grade--agora { grid-template-columns: minmax(0, 1fr); }
}

/* animação "descolar e colar" (index.js): estados que o JS liga */
.vv-fig.vv-descolando { pointer-events: none; }