/*
Vitrine elastica de categorias (Home, 20/08/2026) — substitui a lista
editorial de texto (home.css, .vitrine-categoria-linha*, mantida no arquivo
so como historico, sem uso) por uma galeria "elastica": 4 paineis lado a
lado (empilhados no mobile), a foto real de cada categoria preenche o card
inteiro em camada propria (__foto), o painel ativo ganha 4x mais espaco e
revela nome/contagem/CTA por cima da foto com gradiente. Ativo trocado via
JS (main.js) no hover (desktop) ou toque (mobile) — nao em :hover puro, pra
poder colapsar os irmaos ao mesmo tempo, mesmo modelo do componente de
referencia que o Ricardo mandou (activeId unico entre os itens).
*/
.vitrine-categoria-elastica{
    display: flex;
    flex-direction: column;
    gap: var(--espaco-xs);
    height: clamp(520px, 62vw, 620px);
}
@media (min-width: 768px){
    .vitrine-categoria-elastica{
        flex-direction: row;
        height: clamp(420px, 34vw, 560px);
    }
}

.vitrine-categoria-item{
    position: relative;
    display: block;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    transition: flex-grow 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.vitrine-categoria-item.is-active{
    flex-grow: 4;
}

/* Camada da foto, isolada do conteudo de texto — o brightness/scale do
   hover so pode afetar a imagem, nunca escurecer o texto que fica por cima
   (ver nota do achado nesta sessao: filter no card inteiro escurecia tudo
   junto, corrigido isolando a foto num elemento proprio). */
.vitrine-categoria-item__foto{
    position: absolute;
    inset: 0;
    background-color: var(--cor-linho-2);
    background-image: var(--img);
    background-size: cover;
    background-position: center;
    filter: brightness(0.6);
    transform: scale(1.08);
    transition: filter 0.6s ease, transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.vitrine-categoria-item.is-active .vitrine-categoria-item__foto{
    filter: brightness(1);
    transform: scale(1);
}
/* Fallback de cor quando a categoria nao tem foto cadastrada (nunca
   inventa foto — mesma regra do redesign anterior), ciclando a paleta. */
.vitrine-categoria-item:nth-child(4n+1) .vitrine-categoria-item__foto{ background-color: var(--cor-mata); }
.vitrine-categoria-item:nth-child(4n+2) .vitrine-categoria-item__foto{ background-color: var(--cor-musgo); }
.vitrine-categoria-item:nth-child(4n+3) .vitrine-categoria-item__foto{ background-color: var(--cor-terracota); }
.vitrine-categoria-item:nth-child(4n+4) .vitrine-categoria-item__foto{ background-color: var(--cor-salvia); }

.vitrine-categoria-item__gradiente{
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(51, 41, 31, 0.88) 0%, rgba(51, 41, 31, 0.32) 48%, rgba(51, 41, 31, 0) 78%);
    opacity: 0.5;
    transition: opacity 0.5s ease;
}
.vitrine-categoria-item.is-active .vitrine-categoria-item__gradiente{
    opacity: 1;
}

.vitrine-categoria-item__conteudo{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--espaco-xs);
    padding: var(--espaco-lg);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}
.vitrine-categoria-item.is-active .vitrine-categoria-item__conteudo{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}
.vitrine-categoria-item__tag{
    padding: var(--espaco-2xs) var(--espaco-sm);
    background: var(--vidro-bg-claro);
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
    border: 1px solid var(--vidro-borda-clara);
    border-radius: var(--raio-pill);
    font-family: var(--fonte-corpo);
    font-size: var(--texto-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cor-linho);
    white-space: nowrap;
}
.vitrine-categoria-item__nome{
    font-family: var(--fonte-display);
    font-size: var(--texto-2xl);
    line-height: 1.05;
    color: var(--cor-linho);
}
.vitrine-categoria-item__cta{
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2xs);
    font-family: var(--fonte-corpo);
    font-size: var(--texto-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cor-terracota-claro);
}
.vitrine-categoria-item__cta .icone{
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}
.vitrine-categoria-item.is-active .vitrine-categoria-item__cta .icone{
    transform: translateX(4px);
}

/* Rotulo do estado inativo: nome deitado (mobile, painel curto e largo) ou
   em pe (desktop, painel estreito e alto). Some quando o painel ativa. */
.vitrine-categoria-item__vertical{
    position: absolute;
    left: 50%;
    bottom: var(--espaco-lg);
    transform: translateX(-50%);
    max-width: calc(100% - var(--espaco-lg) * 2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--fonte-display);
    font-size: var(--texto-md);
    letter-spacing: 0.04em;
    color: var(--cor-linho);
    opacity: 1;
    transition: opacity 0.35s ease;
}
.vitrine-categoria-item.is-active .vitrine-categoria-item__vertical{
    opacity: 0;
}
@media (min-width: 768px){
    .vitrine-categoria-item__vertical{
        writing-mode: vertical-rl;
        max-height: calc(100% - var(--espaco-lg) * 2);
    }
}