/*
 * Página "Buraco a Buraco" (Zyrgon Hole Slider).
 *
 * As classes internas do conteúdo (.map-info-column-1, .map-info-column-2,
 * .map-tab-panel, .map-image-tab, .hole-info, .title-map, .title-id,
 * .hole-description, .slides-number, .close-map etc.) já são estilizadas em
 * wp-content/themes/zyrgon-child-theme/assets/css/plugin.css e são reaproveitadas
 * tal como estão. Este arquivo define só o wrapper de página cheia (sem o
 * comportamento de overlay fixo usado no mapa).
 */

.hole-slider-page {
    min-height: calc(100vh - 100px);
    background: #00512A;
}

.hole-slider-panel {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: calc(100vh - 100px);
}

.admin-bar .hole-slider-page {
    min-height: calc(100vh - 132px);
}

.admin-bar .hole-slider-panel {
    min-height: calc(100vh - 132px);
}

@media screen and (max-width: 767px) {
    .hole-slider-panel {
        flex-direction: column;
    }
}

/* Animação de entrada ao trocar de buraco (evita troca abrupta/estranha em
   clique rápido ou internet lenta): o conteúdo novo entra deslizando da
   direita ("next"), da esquerda ("prev") ou com um leve subir + fade
   (abertura inicial da página, sem direção). */
.hole-slider-panel .map-info-column-1,
.hole-slider-panel .map-info-column-2 {
    opacity: 1;
    transform: translateX(0) translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hole-slider-panel.map-info-nav-next .map-info-column-1,
.hole-slider-panel.map-info-nav-next .map-info-column-2 {
    opacity: 0;
    transform: translateX(28px);
}

.hole-slider-panel.map-info-nav-prev .map-info-column-1,
.hole-slider-panel.map-info-nav-prev .map-info-column-2 {
    opacity: 0;
    transform: translateX(-28px);
}

.hole-slider-panel.map-info-nav-fade .map-info-column-1,
.hole-slider-panel.map-info-nav-fade .map-info-column-2 {
    opacity: 0;
    transform: translateY(16px);
}