/* Flexbox (não CSS Grid) de propósito: grid deixa a última linha incompleta "grudada" à
   esquerda (item sozinho não centraliza sozinho) — flex-wrap + justify-content resolve isso
   nativamente, sem precisar de hacks de nth-child calculando quantos itens sobram na última
   linha. Cada card tem width calculado a partir de --lmw-pb-cols pra simular as colunas do grid. */
.lmw-pb-grid {
    --lmw-pb-cols: 3;
    --lmw-pb-cols-tablet: 2;
    --lmw-pb-cols-mobile: 1;
    --lmw-pb-gap: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--lmw-pb-gap);
    width: 100%;
    /* Largura de cada card é um calc() percentual — arredondamento de subpixel do navegador ao
       somar N cards + (N-1) gaps por linha ocasionalmente estoura o container por frações de
       pixel, o suficiente pra criar uma barra de scroll horizontal indesejada mesmo fora do
       modo carrossel. overflow-x:hidden absorve esse excesso sem cortar nada visível (o
       carrossel/scroll mobile, mais abaixo, sobrescreve de volta pra auto quando ativos).
       overflow-y:hidden é obrigatório junto — definir só overflow-x força o navegador a
       resolver overflow-y (nunca definido, ficaria "visible") pra "auto" também (regra do
       CSS 2.1: um eixo não-visible força o outro visible a virar auto). Sem isso, o grid virava
       um container de scroll vertical "sem querer", e o transform:translateY() dos cards ainda
       não revelados pela animação de entrada (.lmw-pb-card--entry) contava no scrollHeight desse
       container — aparecia uma barra de scroll vertical enquanto os cards não terminavam de
       entrar, sumindo quando a animação acabava. */
    overflow-x: hidden;
    overflow-y: hidden;
}

.lmw-pb-grid--center-last {
    justify-content: center;
}

.lmw-pb-card {
    --lmw-pb-zoom: 1.05;
    width: calc((100% - (var(--lmw-pb-gap) * (var(--lmw-pb-cols) - 1))) / var(--lmw-pb-cols));
    background: #f5f5f7;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.4s ease;
}

.lmw-pb-card__image-wrap {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    background: #eaeaea;
}

.lmw-pb-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.lmw-pb-card__image--hover {
    opacity: 0;
}

.lmw-pb-card--hover-zoom:hover .lmw-pb-card__image--main {
    transform: scale(var(--lmw-pb-zoom, 1.05));
}

.lmw-pb-card--hover-crossfade:hover .lmw-pb-card__image--hover,
.lmw-pb-card--hover-both:hover .lmw-pb-card__image--hover {
    opacity: 1;
}

.lmw-pb-card--hover-both:hover .lmw-pb-card__image--hover {
    transform: scale(var(--lmw-pb-zoom, 1.05));
}

.lmw-pb-card__content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.lmw-pb-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 12px;
    line-height: 1.3;
}

.lmw-pb-card__subtitle {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.4;
}

.lmw-pb-card__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 24px;
    flex-grow: 1;
}

/* Reset em todos os estados — mesma causa raiz do bug da seta do carrossel (BUG-009/2.13.0):
   <button> sem :hover/:focus/:active resetados herda a cor de destaque global do tema. */
.lmw-pb-card__desc-toggle,
.lmw-pb-card__desc-toggle:hover,
.lmw-pb-card__desc-toggle:focus,
.lmw-pb-card__desc-toggle:active,
.lmw-pb-card__desc-toggle:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0 0 12px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1d1d1f !important;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lmw-pb-card__desc-toggle-icon {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.lmw-pb-card__desc-toggle[aria-expanded="true"] .lmw-pb-card__desc-toggle-icon {
    transform: rotate(180deg);
}

/* margin-bottom só quando aberto — com o painel fechado (grid-template-rows:0fr colapsa o
   CONTEÚDO, mas não afeta a margem do próprio wrapper), a margem incondicional deixava um
   espaço vazio antes do próximo elemento (ex: rodapé "Indicado para") mesmo com a descrição
   escondida. */
.lmw-pb-card__desc-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease, margin-bottom 0.3s ease;
    margin-bottom: 0;
}

.lmw-pb-card__desc-wrap.is-open {
    grid-template-rows: 1fr;
    margin-bottom: var(--lmw-pb-desc-spacing, 24px);
}

/* -inner: item único do grid (necessário pro truque grid-template-rows:0fr→1fr colapsar de
   verdade) — quando o rodapé "Indicado para" entra no mesmo dropdown (opção "Rodapé dentro do
   mesmo dropdown"), descrição + rodapé viram DOIS filhos dentro desse wrapper único, e só ele
   precisa do overflow:hidden. Colocar os dois direto como filhos de .lmw-pb-card__desc-wrap não
   funcionaria — grid só colapsa a PRIMEIRA linha implícita, uma segunda linha (o rodapé) ficaria
   sempre visível mesmo com o dropdown fechado. */
.lmw-pb-card__desc-wrap > .lmw-pb-card__desc-wrap-inner {
    overflow: hidden;
}

/* !important: o controle "Descrição: espaçamento abaixo" também mira .lmw-pb-card__desc direto
   (pro modo sem dropdown) — dentro do wrapper, quem manda no espaçamento é o wrapper (acima),
   nunca a descrição em si, senão o valor do controle vaza mesmo com o dropdown fechado. */
.lmw-pb-card__desc-wrap-inner > .lmw-pb-card__desc {
    margin: 0 !important;
}

.lmw-pb-card__desc-wrap-inner > .lmw-pb-card__footer {
    margin-top: 12px;
}

.lmw-pb-card__divider {
    width: 48px;
    height: 3px;
    background-color: #1d1d1f;
    border: none;
    margin: 0 0 16px;
}

.lmw-pb-card__footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lmw-pb-card__footer-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.lmw-pb-card__footer-text {
    font-size: 0.8125rem;
    line-height: 1.5;
}

.lmw-pb-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 16px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 0px solid transparent;
    background: #1d1d1f;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.lmw-pb-card__btn svg,
.lmw-pb-card__btn i {
    width: 1em;
    height: 1em;
    display: inline-block;
}

/* Animação de entrada (fade-in-up com stagger opcional via JS) */
.lmw-pb-card--entry {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.lmw-pb-card--entry.lmw-pb-is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ───────────────────────── CARROSSEL NO DESKTOP ───────────────────────── */
.lmw-pb-carousel {
    position: relative;
}

@media (min-width: 601px) {
    .lmw-pb-grid--carousel-desktop {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .lmw-pb-grid--carousel-desktop::-webkit-scrollbar { display: none; }
    .lmw-pb-grid--carousel-desktop .lmw-pb-card {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    /* "Centralizar linha final incompleta" (.lmw-pb-grid--center-last, justify-content:center)
       não pode conviver com o carrossel: com o conteúdo rolável CENTRALIZADO, o navegador
       distribui o overflow igualmente pros dois lados — mas scrollLeft nunca é negativo, então
       a metade do overflow que "vazou" pra esquerda fica inacessível (não dá pra rolar pra trás
       pra alcançar), e o primeiro card já nasce deslocado pro meio do container em vez de
       encostado na borda esquerda. flex-start bem aqui garante o primeiro card sempre começar
       na borda, com TODO o overflow disponível rolando só pra direita (como um carrossel normal
       precisa se comportar). */
    .lmw-pb-grid--carousel-desktop.lmw-pb-grid--center-last {
        justify-content: flex-start;
    }
}

/* ── Arrastar com o mouse (carrossel desktop e scroll mobile) ──
   .lmw-pb-grid--scrollable só é aplicada via JS quando existe overflow de verdade (recalculado
   no resize) — cursor grab avisa que dá pra arrastar mesmo sem touch, útil pra testar redimen-
   sionando o navegador no PC. Durante o arraste em si (.lmw-pb-grid--dragging), cursor vira
   grabbing e a seleção de texto/imagem é desativada (senão arrastar seleciona o texto dos cards
   por baixo, comportamento padrão chato do navegador). */
.lmw-pb-grid--scrollable {
    cursor: grab;
}
.lmw-pb-grid--scrollable.lmw-pb-grid--dragging {
    cursor: grabbing;
}
.lmw-pb-grid--dragging,
.lmw-pb-grid--dragging * {
    user-select: none;
}
.lmw-pb-grid--scrollable img {
    -webkit-user-drag: none;
}

/* Reset defensivo em todos os estados (:hover/:focus/:active/:visited) — sem isso, o botão
   herda o estilo de :focus/:active que o tema do site define globalmente pra qualquer <button>
   (cor de destaque do tema, às vezes roxo/vinho), o que fazia a seta trocar de cor sozinha
   depois de clicada e não tinha nenhum controle no painel pra sobrescrever isso. Mesma causa
   raiz já vista em outros widgets (checkbox do FormGrid, divisores da Tabela Comparativa) —
   ver BUG-005/007/008 no guia-ia.md. */
.lmw-pb-carousel__arrow,
.lmw-pb-carousel__arrow:hover,
.lmw-pb-carousel__arrow:focus,
.lmw-pb-carousel__arrow:active,
.lmw-pb-carousel__arrow:visited {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    outline: none;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    color: #1d1d1f !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.lmw-pb-carousel__arrow:hover { background: #f0f0f0 !important; }
.lmw-pb-carousel__arrow--prev { left: -14px; }
.lmw-pb-carousel__arrow--next { right: -14px; }

@media (min-width: 601px) {
    .lmw-pb-carousel--enabled .lmw-pb-carousel__arrow { display: flex; }
}

/* ───────────────────────── RESPONSIVO ───────────────────────── */
@media (max-width: 991px) {
    .lmw-pb-grid { --lmw-pb-cols: var(--lmw-pb-cols-tablet); }
}

@media (max-width: 600px) {
    .lmw-pb-grid { --lmw-pb-cols: var(--lmw-pb-cols-mobile); gap: 16px; }

    .lmw-pb-grid--mobile-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .lmw-pb-grid--mobile-scroll::-webkit-scrollbar { display: none; }
    .lmw-pb-grid--mobile-scroll .lmw-pb-card {
        flex: 0 0 85%;
        width: 85%;
        scroll-snap-align: start;
    }
    /* Mesmo motivo do carrossel desktop: justify-content:center (de .lmw-pb-grid--center-last)
       com conteúdo rolável centraliza e deixa metade do overflow inacessível pra trás. */
    .lmw-pb-grid--mobile-scroll.lmw-pb-grid--center-last {
        justify-content: flex-start;
    }
}