/*
 * OW Responsive Featured Slideshow — Premium Stylesheet
 * Version: 1.1.0
 *
 * BEM class prefix: .ow-featured-slideshow
 */

/* ─── Custom Properties ───────────────────────────────────────────────────── */
.ow-featured-slideshow {
    --ow-font:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ow-duration-fade:   800ms;
    --ow-duration-zoom:   7s;
    --ow-duration-enter:  600ms;
    --ow-ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ow-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Cores */
    --ow-white:           #ffffff;
    --ow-white-60:        rgba(255,255,255,0.60);
    --ow-white-30:        rgba(255,255,255,0.30);
    --ow-white-12:        rgba(255,255,255,0.12);
    --ow-black-80:        rgba(0,0,0,0.80);
    --ow-accent:          #4f8df9;
    --ow-accent-dark:     #3a72e8;

    /* Tamanho padrão: sobrescrito pelo shortcode */
    --ow-slide-height:    620px;
}

/* ─── Reset interno ───────────────────────────────────────────────────────── */
.ow-featured-slideshow,
.ow-featured-slideshow * {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

/* ─── Wrapper principal ───────────────────────────────────────────────────── */
.ow-featured-slideshow {
    position:         relative;
    width:            100%;
    height:           var(--ow-slide-height);
    overflow:         hidden;
    font-family:      var(--ow-font);
    background-color: #0a0a0a;
    /* Isolamento de stacking context */
    isolation:        isolate;
}

/* ─── Track (contém os slides) ───────────────────────────────────────────── */
.ow-featured-slideshow__track {
    position: relative;
    width:    100%;
    height:   100%;
}

/* ─── Slide ───────────────────────────────────────────────────────────────── */
.ow-featured-slideshow__slide {
    position:   absolute;
    inset:      0;
    display:    flex;
    align-items: center;
    opacity:    0;
    visibility: hidden;
    transition:
        opacity    var(--ow-duration-fade) ease-in-out,
        visibility var(--ow-duration-fade) ease-in-out;
    /* Impede interação com slides ocultos */
    pointer-events: none;
}

.ow-featured-slideshow__slide.is-active {
    opacity:        1;
    visibility:     visible;
    z-index:        1;
    pointer-events: auto;
}

/* ─── Background (img responsiva + Ken Burns) ────────────────────────────── */
.ow-featured-slideshow__bg {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    display:    block;
    object-fit: cover;
    object-position: center;
    /* Estado "recolhido" para slides inativos */
    transform:   scale(1.08);
    transition:  transform var(--ow-duration-zoom) var(--ow-ease-out-expo);
    will-change: transform;
    pointer-events: none;
    user-select: none;
}

/* Fallback div (sem thumbnail) mantém cover via background */
div.ow-featured-slideshow__bg {
    object-fit: unset;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Ativa o Ken Burns apenas no slide ativo */
.ow-featured-slideshow__slide.is-active .ow-featured-slideshow__bg {
    transform: scale(1);
}

/* Fallback quando não há imagem destacada — gradiente premium */
.ow-featured-slideshow__slide--no-thumb .ow-featured-slideshow__bg {
    background:
        radial-gradient(ellipse at 30% 50%, rgba(79,141,249,0.20) 0%, transparent 60%),
        linear-gradient(135deg, #0d1117 0%, #161b22 40%, #1c2333 100%);
}

/* ─── Overlay em dupla camada (vignette + gradiente direcional) ───────────── */
.ow-featured-slideshow__overlay {
    position: absolute;
    inset:    0;
    z-index:  1;
    /* Camada 1 – vignette perimetral */
    background:
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%),
        /* Camada 2 – fade da esquerda para criar área de leitura */
        linear-gradient(
            100deg,
            rgba(0,0,0,0.82) 0%,
            rgba(0,0,0,0.55) 45%,
            rgba(0,0,0,0.10) 75%,
            transparent      100%
        );
}

/* Overlay desativado (shortcode ou meta do slide) */
.ow-featured-slideshow--no-overlay .ow-featured-slideshow__overlay,
.ow-featured-slideshow__slide--no-overlay .ow-featured-slideshow__overlay {
    display: none;
}

/* ─── Modo natural: altura segue a proporção da imagem ────────────────────── */
.ow-featured-slideshow--natural {
    height: auto;
    aspect-ratio: var(--ow-slide-aspect, auto);
    background-color: transparent;
}

.ow-featured-slideshow--natural .ow-featured-slideshow__bg {
    object-fit: contain;
    object-position: center;
    transform: none;
    will-change: auto;
}

.ow-featured-slideshow--natural .ow-featured-slideshow__slide.is-active .ow-featured-slideshow__bg {
    transform: none;
}

/* ─── Container de conteúdo ───────────────────────────────────────────────── */
.ow-featured-slideshow__container {
    position:  relative;
    z-index:   2;
    width:     100%;
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 56px;
}

/* ─── Bloco de conteúdo ───────────────────────────────────────────────────── */
.ow-featured-slideshow__content {
    max-width: 580px;
    color:     var(--ow-white);
}

/* Animação de entrada para cada elemento do conteúdo */
.ow-featured-slideshow__slide .ow-featured-slideshow__content > * {
    opacity:   0;
    transform: translateY(24px);
    transition:
        opacity   var(--ow-duration-enter) var(--ow-ease-out-expo),
        transform var(--ow-duration-enter) var(--ow-ease-out-expo);
}

/* Stagger: cada filho com delay crescente */
.ow-featured-slideshow__slide .ow-featured-slideshow__title    { transition-delay: 0ms;   }
.ow-featured-slideshow__slide .ow-featured-slideshow__excerpt  { transition-delay: 80ms;  }
.ow-featured-slideshow__slide .ow-featured-slideshow__button   { transition-delay: 160ms; }

/* Ativa as animações de entrada quando o slide se torna ativo */
.ow-featured-slideshow__slide.is-active .ow-featured-slideshow__content > * {
    opacity:   1;
    transform: translateY(0);
}

/* ─── Título ──────────────────────────────────────────────────────────────── */
.ow-featured-slideshow__title {
    font-size:   clamp(1.75rem, 3.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color:       var(--ow-white);
    text-shadow: 0 2px 20px rgba(0,0,0,0.40);
    margin-bottom: 1rem;
}

/* ─── Excerpt ─────────────────────────────────────────────────────────────── */
.ow-featured-slideshow__excerpt {
    font-size:   clamp(0.9rem, 1.5vw, 1.125rem);
    font-weight: 400;
    line-height: 1.65;
    color:       rgba(255,255,255,0.80);
    text-shadow: 0 1px 6px rgba(0,0,0,0.30);
    margin-bottom: 2rem;
    /* Limita a 3 linhas */
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* ─── Botão CTA premium ───────────────────────────────────────────────────── */
.ow-featured-slideshow__button {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    background:      var(--ow-white);
    color:           #111827;
    font-family:     var(--ow-font);
    font-weight:     700;
    font-size:       0.9375rem;
    letter-spacing:  0.01em;
    padding:         13px 28px;
    border-radius:   100px;
    text-decoration: none;
    border:          none;
    cursor:          pointer;
    position:        relative;
    overflow:        hidden;
    transition:
        background  0.28s ease,
        color       0.28s ease,
        transform   0.28s var(--ow-ease-spring),
        box-shadow  0.28s ease;
    box-shadow:
        0 0 0 0 rgba(255,255,255,0),
        0 4px 16px rgba(0,0,0,0.25);
}

/* Shimmer animado */
.ow-featured-slideshow__button::before {
    content:   '';
    position:  absolute;
    top:       0;
    left:      -75%;
    width:     50%;
    height:    100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.55) 50%,
        transparent 100%
    );
    transform:   skewX(-20deg);
    transition:  none;
    pointer-events: none;
}

.ow-featured-slideshow__button:hover::before {
    left:       130%;
    transition: left 0.55s ease;
}

.ow-featured-slideshow__button:hover {
    background: #f8faff;
    transform:  translateY(-2px);
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.25),
        0 8px 28px rgba(0,0,0,0.30);
}

.ow-featured-slideshow__button:active {
    transform:  translateY(0) scale(0.97);
}

.ow-featured-slideshow__button-icon {
    display:     inline-flex;
    align-items: center;
    width:       18px;
    height:      18px;
    transition:  transform 0.25s var(--ow-ease-spring);
}

.ow-featured-slideshow__button:hover .ow-featured-slideshow__button-icon {
    transform: translateX(4px);
}

.ow-featured-slideshow__button-icon svg {
    width:  100%;
    height: 100%;
}

/* ─── Arrows ──────────────────────────────────────────────────────────────── */
.ow-featured-slideshow__arrow {
    position:       absolute;
    top:            50%;
    transform:      translateY(-50%);
    z-index:        3;
    width:          52px;
    height:         52px;
    min-width:      52px;
    min-height:     52px;
    border-radius:  50%;
    background:     rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border:         1px solid rgba(0, 0, 0, 0.10);
    color:          #111827;
    cursor:         pointer;
    display:        flex !important;
    align-items:    center;
    justify-content: center;
    padding:        0;
    margin:         0;
    line-height:    1;
    font-size:      0;
    box-shadow:     0 2px 14px rgba(0, 0, 0, 0.18);
    appearance:     none;
    -webkit-appearance: none;
    transition:
        background  0.25s ease,
        border-color 0.25s ease,
        transform   0.25s var(--ow-ease-spring),
        box-shadow  0.25s ease,
        opacity     0.25s ease;
    opacity:        1;
}

.ow-featured-slideshow__arrow svg {
    width:     22px;
    height:    22px;
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
    display:   block;
    overflow:  visible;
    pointer-events: none;
    stroke:    currentColor;
    fill:      none;
}

.ow-featured-slideshow__arrow:hover {
    background:   #ffffff;
    border-color: rgba(0, 0, 0, 0.16);
    transform:    translateY(-50%) scale(1.08);
    box-shadow:   0 4px 20px rgba(0, 0, 0, 0.22);
    color:        #111827;
}

.ow-featured-slideshow__arrow:active {
    transform: translateY(-50%) scale(0.96);
}

.ow-featured-slideshow__arrow:focus-visible {
    outline:        3px solid #111827;
    outline-offset: 3px;
}

.ow-featured-slideshow__arrow--prev { left:  20px; }
.ow-featured-slideshow__arrow--next { right: 20px; }

/* ─── Bullets / Dots ──────────────────────────────────────────────────────── */
.ow-featured-slideshow__bullets {
    position:        absolute;
    bottom:          28px;
    left:            50%;
    right:           auto;
    transform:       translateX(-50%);
    width:           auto;
    max-width:       calc(100% - 40px);
    display:         flex !important;
    flex-direction:  row;
    flex-wrap:       nowrap;
    justify-content: center;
    align-items:     center;
    gap:             8px;
    z-index:         3;
    margin:          0;
    padding:         6px 10px;
    list-style:      none;
    background:      rgba(0, 0, 0, 0.35);
    border-radius:   100px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ow-featured-slideshow__bullet {
    display:       block !important;
    flex:          0 0 auto;
    width:         8px;
    height:        8px;
    min-width:     8px;
    min-height:    8px;
    border-radius: 100px;
    background:    rgba(255, 255, 255, 0.45);
    border:        1.5px solid rgba(255, 255, 255, 0.70);
    padding:       0;
    margin:        0;
    cursor:        pointer;
    line-height:   1;
    font-size:     0;
    box-shadow:    none;
    appearance:    none;
    -webkit-appearance: none;
    transition:
        width      0.35s var(--ow-ease-out-expo),
        background 0.30s ease,
        box-shadow 0.30s ease,
        opacity    0.30s ease;
    opacity:       1;
}

.ow-featured-slideshow__bullet:hover {
    background: rgba(255, 255, 255, 0.80);
}

.ow-featured-slideshow__bullet.is-active {
    width:        32px;
    min-width:    32px;
    background:   #ffffff;
    border-color: #ffffff;
    box-shadow:   0 0 8px rgba(255, 255, 255, 0.35);
    opacity:      1;
}

.ow-featured-slideshow__bullet:focus-visible {
    outline:        2px solid #ffffff;
    outline-offset: 3px;
}

/* Fundo claro (sem overlay / altura natural): bullets com contraste escuro */
.ow-featured-slideshow--natural .ow-featured-slideshow__bullets,
.ow-featured-slideshow--no-overlay .ow-featured-slideshow__bullets {
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    border:     1px solid rgba(0, 0, 0, 0.08);
}

.ow-featured-slideshow--natural .ow-featured-slideshow__bullet,
.ow-featured-slideshow--no-overlay .ow-featured-slideshow__bullet {
    background:    rgba(0, 0, 0, 0.25);
    border-color:  rgba(0, 0, 0, 0.35);
}

.ow-featured-slideshow--natural .ow-featured-slideshow__bullet:hover,
.ow-featured-slideshow--no-overlay .ow-featured-slideshow__bullet:hover {
    background: rgba(0, 0, 0, 0.45);
}

.ow-featured-slideshow--natural .ow-featured-slideshow__bullet.is-active,
.ow-featured-slideshow--no-overlay .ow-featured-slideshow__bullet.is-active {
    background:   #111827;
    border-color: #111827;
    box-shadow:   none;
}

.ow-featured-slideshow--natural .ow-featured-slideshow__bullet:focus-visible,
.ow-featured-slideshow--no-overlay .ow-featured-slideshow__bullet:focus-visible {
    outline-color: #111827;
}

.ow-featured-slideshow--natural .ow-featured-slideshow__progress,
.ow-featured-slideshow--no-overlay .ow-featured-slideshow__progress {
    background: rgba(0, 0, 0, 0.08);
}

.ow-featured-slideshow--natural .ow-featured-slideshow__progress-bar,
.ow-featured-slideshow--no-overlay .ow-featured-slideshow__progress-bar {
    background: linear-gradient(90deg, rgba(17, 24, 39, 0.45), rgba(17, 24, 39, 0.90));
}

/* ─── Progress Bar (autoplay) ─────────────────────────────────────────────── */
.ow-featured-slideshow__progress {
    position:  absolute;
    bottom:    0;
    left:      0;
    width:     100%;
    height:    3px;
    z-index:   4;
    background: rgba(255,255,255,0.10);
    overflow:  hidden;
}

.ow-featured-slideshow__progress-bar {
    height:     100%;
    width:      0%;
    background: linear-gradient(90deg, rgba(255,255,255,0.60), rgba(255,255,255,0.95));
    transform-origin: left;
}

/* Estado animando (adicionado via JS) */
.ow-featured-slideshow__progress-bar.is-running {
    transition: width linear;
}

/* ─── Responsividade ──────────────────────────────────────────────────────── */

/* Tablet landscape */
@media (max-width: 1024px) {
    .ow-featured-slideshow:not(.ow-featured-slideshow--natural) {
        height: min(var(--ow-slide-height), 70vh, 520px);
    }

    .ow-featured-slideshow__container {
        padding: 0 40px;
    }
}

/* Tablet portrait */
@media (max-width: 768px) {
    .ow-featured-slideshow:not(.ow-featured-slideshow--natural) {
        height: min(var(--ow-slide-height), 65vh, 500px);
    }

    /* Em mobile, o conteúdo fica na parte inferior */
    .ow-featured-slideshow__slide {
        align-items: flex-end;
    }

    /* Overlay mais forte vindo de baixo para cima */
    .ow-featured-slideshow__overlay {
        background:
            radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.50) 100%),
            linear-gradient(
                to top,
                rgba(0,0,0,0.92) 0%,
                rgba(0,0,0,0.60) 40%,
                rgba(0,0,0,0.10) 80%,
                transparent      100%
            );
    }

    .ow-featured-slideshow__container {
        padding:        0 24px;
        padding-bottom: 68px;
    }

    .ow-featured-slideshow__content {
        max-width: 100%;
    }

    .ow-featured-slideshow__title {
        margin-bottom: 0.6rem;
    }

    .ow-featured-slideshow__excerpt {
        font-size:             0.9375rem;
        margin-bottom:         1.25rem;
        -webkit-line-clamp:    2;
    }

    .ow-featured-slideshow__arrow {
        width:      40px;
        height:     40px;
        min-width:  40px;
        min-height: 40px;
    }

    .ow-featured-slideshow__arrow svg {
        width:      18px;
        height:     18px;
        min-width:  18px;
        min-height: 18px;
    }

    .ow-featured-slideshow__arrow--prev { left:  12px; }
    .ow-featured-slideshow__arrow--next { right: 12px; }
}

/* Smartphone */
@media (max-width: 480px) {
    .ow-featured-slideshow:not(.ow-featured-slideshow--natural) {
        height: min(var(--ow-slide-height), 60vh, 480px);
    }

    /* Em telas muito pequenas: setas menores, ainda visíveis */
    .ow-featured-slideshow__arrow {
        width:      36px;
        height:     36px;
        min-width:  36px;
        min-height: 36px;
    }

    .ow-featured-slideshow__arrow svg {
        width:      16px;
        height:     16px;
        min-width:  16px;
        min-height: 16px;
    }

    .ow-featured-slideshow__arrow--prev { left:  8px; }
    .ow-featured-slideshow__arrow--next { right: 8px; }

    .ow-featured-slideshow__container {
        padding:        0 18px;
        padding-bottom: 64px;
    }

    .ow-featured-slideshow__button {
        padding:   11px 22px;
        font-size: 0.875rem;
    }

    .ow-featured-slideshow__bullets {
        bottom: 16px;
        gap:    6px;
        padding: 5px 8px;
    }

    .ow-featured-slideshow__bullet {
        width:      7px;
        height:     7px;
        min-width:  7px;
        min-height: 7px;
    }

    .ow-featured-slideshow__bullet.is-active {
        width:     24px;
        min-width: 24px;
    }
}

/* Respeita preferência do usuário por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .ow-featured-slideshow__bg {
        transition: none;
    }

    .ow-featured-slideshow__slide {
        transition: opacity 200ms ease;
    }

    .ow-featured-slideshow__slide .ow-featured-slideshow__content > * {
        transition: none;
        opacity:   1;
        transform: none;
    }

    .ow-featured-slideshow__progress-bar.is-running {
        transition: none;
    }
}