/**
 * Carousel Hero – FSE. Blocos core, theme.json. Desktop/tablet/mobile via CSS.
 * Sobrescreve estilos inline do WordPress (layout flex) com !important onde necessário.
 * @package LeiteAlencar
 */
.la-hero-carousel {
    --la-carousel-min-height-desktop: 500px;
    --la-carousel-min-height-mobile: 400px;
    --la-slide-count: 3;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    min-height: var(--la-carousel-min-height-mobile);
    box-sizing: border-box;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

/* Container: largura = N × 100% do bloco. transform-origin 0 0 = slide a partir da esquerda. */
.la-hero-carousel .la-carousel-container,
.la-hero-carousel .la-carousel-container > .wp-block-group__inner-container {
    display: flex !important;
    flex-wrap: nowrap;
    width: calc(100% * var(--la-slide-count));
    min-width: calc(100% * var(--la-slide-count)) !important;
    max-width: none !important;
    min-height: 100%;
    justify-content: flex-start;
    transition: transform 0.5s ease;
    box-sizing: border-box;
    transform-origin: 0 0;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0;
}

/* Slide: 100% / N da largura visível. Um card por viewport. Sem inline do WP, CSS controla tudo. */
.la-hero-carousel .la-carousel-slide {
     flex: 0 0 calc(100% / var(--la-slide-count));
    width: calc(100% / var(--la-slide-count));
    min-width: calc(100% / var(--la-slide-count));
    max-width: calc(100% / var(--la-slide-count));
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
    box-sizing: border-box;
    padding: 0;
}

.la-hero-carousel .wp-block-group.la-carousel-slide {
    /* Keep slide width synced with translateX math (percent-based). */
    flex: 0 0 calc(100% / var(--la-slide-count)) !important;
    width: calc(100% / var(--la-slide-count)) !important;
    min-width: calc(100% / var(--la-slide-count)) !important;
    max-width: calc(100% / var(--la-slide-count)) !important;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
}

/* Conteúdo centralizado por padrão (editável via WP). Gap e padding antes no inline, agora no CSS. */
.la-hero-carousel .la-carousel-card-inner,
.la-hero-carousel .wp-block-group.la-carousel-card-inner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    gap: var(--wp--preset--spacing--40, 1.5rem);
    padding: 0 var(--wp--preset--spacing--40, 1.5rem);
}

/* Centralização padrão; alterável via WP (não usar !important aqui) */
.la-hero-carousel .la-carousel-card-inner .wp-block-heading,
.la-hero-carousel .la-carousel-card-inner p {
    text-align: center;
}
.la-hero-carousel .la-carousel-card-inner .wp-block-buttons {
    gap: 1rem;
    justify-content: center;
}

.la-hero-carousel .la-hero-content .wp-block-button {
    margin: 0;
}

.la-hero-carousel .la-hero-content .wp-block-button__link {
    transition: all 0.3s ease;
    font-weight: 600;
}

.la-hero-carousel .la-hero-content .wp-block-button.has-primary-background-color .wp-block-button__link {
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.la-hero-carousel .la-hero-content .wp-block-button.has-primary-background-color .wp-block-button__link:hover {
    filter: brightness(0.92);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.la-hero-carousel .la-hero-content .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid currentColor;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.la-hero-carousel .la-hero-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Nav: bolinhas (dots) sempre visíveis no rodapé do hero */
.la-hero-carousel .la-carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: var(--wp--preset--spacing--40, 1rem) 20px;
    pointer-events: none;
}
.la-hero-carousel .la-carousel-nav .la-carousel-dot {
    pointer-events: auto;
}

/* Dot: tamanho fixo e reset para qualquer elemento (parágrafo, botão, etc.) */
.la-hero-carousel .la-carousel-dot {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    border-radius: 50%;
    padding: 0; /* garante que não cresçam por padding */
    border: 2px solid #cbd5df; /* borda neutra por padrão */
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    margin: 0;
    line-height: 0;
    font-size: 0; /* evita que caracteres de texto escalem o elemento */
    overflow: hidden;
    box-sizing: border-box;
}
.la-hero-carousel .la-carousel-dot:hover {
    background-color: rgba(0, 0, 0, 0.06);
    transform: scale(1.25);
}
.la-hero-carousel .la-carousel-dot:focus {
    outline: 2px solid rgba(0, 0, 0, 0.12);
    outline-offset: 2px;
}
.la-hero-carousel .la-carousel-dot.la-dot-active {
    background-color: #fff;
    border-color: #fff;
    transform: scale(1.2);
}

@media (min-width: 1024px) {
    .la-hero-carousel { min-height: var(--la-carousel-min-height-desktop); }
    .la-hero-carousel .la-carousel-slide {
        padding-top: var(--wp--preset--spacing--80, 4rem);
        padding-bottom: var(--wp--preset--spacing--60, 2rem);
    }
    .la-hero-carousel .la-carousel-nav { padding: var(--wp--preset--spacing--40, 1rem) 20px; }
}

/* Força o carrossel a ocupar toda a largura da tela (fora do layout constrained) */
@media (min-width: 0px) {
    body:not(.editor-styles-wrapper) .la-hero-carousel,
    body:not(.editor-styles-wrapper) .wp-block-group.la-hero-carousel {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .la-hero-carousel .la-carousel-slide {
        padding: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--50, 1.5rem);
    }
    .la-hero-carousel .la-carousel-nav { padding: var(--wp--preset--spacing--40, 1rem) 18px; }
}

@media (max-width: 767px) {
    .la-hero-carousel { min-height: var(--la-carousel-min-height-mobile); }
    .la-hero-carousel { background-attachment: scroll; }
    .la-hero-carousel .la-carousel-slide {
        overflow: hidden;
        flex: 0 0 calc(100% / var(--la-slide-count)) !important;
        width: calc(100% / var(--la-slide-count)) !important;
        min-width: calc(100% / var(--la-slide-count)) !important;
        max-width: calc(100% / var(--la-slide-count)) !important;
        box-sizing: border-box;
        padding: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--40, 1rem);
        padding-bottom: 4rem;
    }
    .la-hero-carousel .la-carousel-nav {
        bottom: 0;
        padding: var(--wp--preset--spacing--40, 1rem) 16px;
        gap: 8px;
    }
    .la-hero-carousel .la-carousel-dot {
        width: 10px;
        height: 10px;
        min-width: 10px;
        min-height: 10px;
    }
}

@media (max-width: 600px) {
    .la-hero-carousel { min-height: 360px; }
    .la-hero-carousel .la-carousel-slide {
        padding: var(--wp--preset--spacing--40, 1rem);
        padding-bottom: 3.5rem;
    }
    .la-hero-carousel .la-carousel-nav { gap: 6px; padding: var(--wp--preset--spacing--30, 0.75rem) 12px; }
    .la-hero-carousel .la-carousel-dot {
        width: 8px;
        height: 8px;
        min-width: 8px;
        min-height: 8px;
    }
}

@media (min-width: 768px) {
    .la-hero-carousel .la-carousel-dot {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .la-hero-carousel .la-carousel-container,
    .la-hero-carousel .la-carousel-slide,
    .la-hero-carousel .la-carousel-dot { transition: none; }
    .la-hero-carousel .la-carousel-dot:hover,
    .la-hero-carousel .la-carousel-dot.la-dot-active { transform: none; }
    .la-hero-carousel .la-hero-content .wp-block-button__link:hover { transform: none; }
}

@media (prefers-color-scheme: dark) {
    .la-hero-carousel .la-carousel-dot { background-color: rgba(100, 116, 139, 0.6); }
    .la-hero-carousel .la-carousel-dot:hover { background-color: rgba(100, 116, 139, 0.9); }
    .la-hero-carousel .la-carousel-dot.la-dot-active { background-color: rgba(100, 116, 139, 1); }
}

/* ==========================================================================
   Editor FSE: uma única seção – slides empilhados, editáveis, sem carrossel
   ========================================================================== */
body.editor-styles-wrapper .la-hero-carousel,
html .block-editor-block-list__layout .la-hero-carousel,
.editor-styles-wrapper .la-hero-carousel,
.block-editor-block-list__block .la-hero-carousel {
    overflow: visible !important;
    min-height: auto !important;
}

body.editor-styles-wrapper .la-hero-carousel .la-carousel-container,
html .block-editor-block-list__layout .la-hero-carousel .la-carousel-container,
.editor-styles-wrapper .la-carousel-container {
    transform: none !important;
    transform-origin: 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

body.editor-styles-wrapper .la-hero-carousel .la-carousel-slide,
html .block-editor-block-list__layout .la-hero-carousel .la-carousel-slide,
.editor-styles-wrapper .la-carousel-slide {
    display: flex !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 300px !important;
    margin-bottom: 40px !important;
    border: 2px dashed #ccc !important;
    box-sizing: border-box !important;
}

body.editor-styles-wrapper .la-hero-carousel .la-carousel-nav,
html .block-editor-block-list__layout .la-hero-carousel .la-carousel-nav,
.editor-styles-wrapper .la-hero-carousel .la-carousel-nav,
.block-editor-block-list__block .la-hero-carousel .la-carousel-nav {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    padding: 20px 0 !important;
    margin-top: 20px !important;
    border-top: 1px solid #e5e7eb !important;
}