/**
 * GCP Slider - Layout Structure
 * Layout base, grid, frames e posicionamento
 */

/* Altura mínima para evitar colapso antes do JS calcular */
.gcp-slider,
.gcp-slider-track {
    min-height: 300px;
}

/* ✅ SLIDER FULL WIDTH - SETAS FICAM FORA COM MARGENS NEGATIVAS */
.gcp-slider {
    margin: 0 0 60px 0; /* Apenas margem inferior para dots */
    width: 100%; /* Largura total da página */
    position: relative;
}

/* === FADES INTERNOS PARA FRAMES === */
.gcp-slider .gcp-slider-track {
    position: relative !important;
    display: block !important;
    aspect-ratio: 16 / 9;
}

/* ✅ FRAMES: Dissolve suave e elegante */
.gcp-slider .gcp-frame {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s linear !important; /* ✅ Transição bem suave */
    z-index: 1 !important;
    transform: translateZ(0); /* ✅ Força aceleração de hardware */
    will-change: opacity, visibility; /* ✅ Otimização para GPU */
}

/* ✅ FRAME ATIVO: Entrada suave e imediata */
.gcp-slider .gcp-frame.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
    transition-delay: 0.1s, 0s !important; /* ✅ Pequeno delay na opacity para dissolve cruzado */
}

/* ✅ FRAME SAINDO: Saída suave com delay */
.gcp-slider .gcp-frame:not(.is-active) {
    transition-delay: 0s, 1.2s !important; /* ✅ Opacity sai imediatamente, visibility com delay total */
}

/* ✅ LAYOUT BASE DOS FRAMES - COMPATÍVEL COM TRANSIÇÕES */
.gcp-slider .gcp-frame {
    /* Propriedades que não conflitam com transições */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ✅ FRAME NÃO-ATIVO: ESCONDIDO MAS MANTÉM TRANSIÇÃO */
.gcp-slider .gcp-frame:not(.is-active) {
    /* display: none é controlado pela transição de visibility */
}

/* ✅ FRAME ATIVO: VISÍVEL COM TRANSIÇÃO */
.gcp-slider .gcp-frame.is-active {
    /* Propriedades controladas pela primeira definição com transições */
}

/* ✅ SLIDE INTEIRO CLICÁVEL */
.gcp-slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
}

/* ✅ FORÇA GRID CORRETO PARA LINKS - IMPORTANTE! */
.gcp-grid > .gcp-slide-link {
    display: contents !important; /* Faz o link ser transparente ao grid - CRÍTICO PARA LAYOUT */
}

/* ✅ GARANTIR QUE SIDE TAMBÉM USE CONTENTS */
.gcp-side > .gcp-slide-link {
    display: contents !important;
}

.gcp-slide-link:hover,
.gcp-slide-link:focus,
.gcp-slide-link:active,
.gcp-slide-link:visited {
    text-decoration: none !important;
    color: inherit !important;
}

/* ✅ FORÇA GRID SEMPRE */
.gcp-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 !important;
    min-height: 300px;
    overflow: visible; /* ✅ Permite tags saírem */
    box-sizing: border-box !important;
}

/* ✅ GARANTIR QUE O GRID SEJA RESPEITADO MESMO EM FRAMES OCULTOS */
.gcp-frame .gcp-grid {
    visibility: visible !important; /* Grid sempre visível para manter estrutura */
}

.gcp-side {
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    overflow: visible; /* ✅ Permite tags saírem */
    box-sizing: border-box !important;
}

/* ✅ RESET TOTAL DE TODOS OS CARDS */
.gcp-card {
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Error states */
.gcp-error,
.gcp-block-placeholder {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    font-size: 14px;
}

.gcp-block-placeholder {
    background: #e2e3e5;
    color: #6c757d;
    border-color: #d6d8db;
    text-align: center;
    font-style: italic;
}