/**
 * Swiper Custom Styles - Instituto Roche
 *
 * Estilos personalizados para que Swiper se vea idéntico al diseño original
 * Migración desde Owl Carousel → Swiper 12.0.3
 */

/* ============================================
   1. SLIDER SINGLE - Banner de 1 slide (#slider-single, #slider-single-alt)
   ============================================ */

   /*
   #slider-single.swiper {
    height: 251px !important;
}
*/
/* Altura fija del viewport para alinear con sidebar (375px) - Home noticias */
#slider-single-alt.swiper {
    height: 375px !important;
}

/* Altura específica para sliders de sección (312px) - Clase genérica reutilizable */
/* Usada en: Cátedra, Observatorio, y otras secciones principales */
#slider-single-alt.slider-section-height.swiper {
    height: 312px !important;
}

/* La zona azul (.post-content) debe estar superpuesta sobre la imagen */
#slider-single .post.feature-post,
#slider-single-alt .post.feature-post {
    position: relative !important;
}

#slider-single .post.feature-post .post-content,
#slider-single-alt .post.feature-post .post-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    min-height: 0 !important;  /* Sin altura mínima, se adapta totalmente al contenido */
    max-height: 120px !important;  /* Límite máximo */
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 20px 0px 20px !important;  /* Padding reducido: 5px arriba, 28px abajo (para bullets) */
    overflow: hidden;
    z-index: 10;
}

/* Paginador (bullets) DENTRO de la zona azul - slider-single (home) */
#slider-single .swiper-pagination {
    bottom: 10px !important;  /* 10px desde el borde inferior del slider */
    z-index: 100 !important;  /* Por encima de la zona azul */
    text-align: right !important;  /* Alineados a la derecha */
    right: 20px !important;  /* 20px desde el borde derecho */
    left: auto !important;  /* Desactivar alineación izquierda */
}

/* Paginador (bullets) más arriba - slider-single-alt (cátedra) */
#slider-single-alt .swiper-pagination {
    bottom: 20px !important;  /* 20px desde el borde inferior del slider */
    z-index: 100 !important;  /* Por encima de la zona azul */
    text-align: right !important;  /* Alineados a la derecha */
    right: 20px !important;  /* 20px desde el borde derecho */
    left: auto !important;  /* Desactivar alineación izquierda */
}

#slider-single .swiper-pagination-bullet,
#slider-single-alt .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5) !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 5px !important;
    opacity: 1 !important;
}

#slider-single .swiper-pagination-bullet-active,
#slider-single-alt .swiper-pagination-bullet-active {
    background: #fff !important;
    opacity: 1 !important;
}

/* ============================================
   2. SLIDER GRID - Múltiples items responsive (grid-2, grid-3, grid-4)
   ============================================ */

/* Espacio entre slides */
#slider-grid-4-compact .swiper-slide,
#slider-grid-4 .swiper-slide,
#slider-grid-3 .swiper-slide,
#slider-grid-3-alt .swiper-slide,
#slider-grid-3-main .swiper-slide,
#slider-grid-2 .swiper-slide {
    box-sizing: border-box;
}

/* Posicionamiento para etiquetas de categoría dentro de las imágenes */
#slider-grid-4-compact .entry-header,
#slider-grid-4 .entry-header,
#slider-grid-4-observatorio .entry-header,
#slider-grid-4-firmasalla .entry-header,
#slider-grid-4-show .entry-header,
#slider-grid-3 .entry-header,
#slider-grid-3-alt .entry-header,
#slider-grid-3-main .entry-header,
#slider-grid-2 .entry-header {
    position: relative;
}

#slider-grid-4-compact .entry-header .catagory,
#slider-grid-4 .entry-header .catagory,
#slider-grid-4-observatorio .entry-header .catagory,
#slider-grid-4-firmasalla .entry-header .catagory,
#slider-grid-4-show .entry-header .catagory,
#slider-grid-3 .entry-header .catagory,
#slider-grid-3-alt .entry-header .catagory,
#slider-grid-3-main .entry-header .catagory,
#slider-grid-2 .entry-header .catagory {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

/* Asegurar que los posts medium-post ocupen 100% del width del slide */
#slider-grid-4-compact .post.medium-post,
#slider-grid-4 .post.medium-post,
#slider-grid-4-observatorio .post.medium-post,
#slider-grid-4-firmasalla .post.medium-post,
#slider-grid-4-show .post.medium-post,
#slider-grid-3 .post.medium-post,
#slider-grid-3-alt .post.medium-post,
#slider-grid-3-main .post.medium-post,
#slider-grid-2 .post.medium-post {
    width: 100%;
    max-width: 100%;
}

/* Fix: Eliminar margin-right negativo heredado del sistema antiguo (bxSlider)
   que hace que los sliders se salgan del contenedor */
.slider-grid-wrapper {
    margin-right: 0 !important;
}

/* CLASE ANTIGUA COMENTADA - Si un slider se ve mal (se sale del contenedor):
   1. Buscar la clase "latest-news-wrapper" en la vista
   2. Cambiarla por "slider-grid-wrapper"
   3. Recompilar assets con: npm run build

.latest-news-wrapper {
    margin-right: 0 !important;
}
*/

/* Navegación (flechas) */
.swiper-button-next,
.swiper-button-prev {
    color: #0070c0 !important;
    background: rgba(255, 255, 255, 0.9);
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px !important;
    font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(255, 255, 255, 1);
}

/* ============================================
   3. SLIDER FADE - Single item con efecto fade (Twitter feeds, etc)
   ============================================ */

#slider-fade .swiper-pagination {
    bottom: 10px;
}

#slider-fade .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    width: 10px;
    height: 10px;
    margin: 0 5px;
}

#slider-fade .swiper-pagination-bullet-active {
    background: #fff;
}

/* ============================================
   4. GENERAL - Asegurar que todo ocupe el ancho correcto
   ============================================ */

.swiper {
    width: 100%;
}

.swiper-slide {
    display: flex;
    align-items: stretch;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   5. RESPONSIVE - Ajustes para móvil
   ============================================ */

@media (max-width: 768px) {
    #slider-single .swiper,
    #slider-single-alt .swiper {
        height: auto !important;
    }

    #slider-single .post.feature-post .post-content,
    #slider-single-alt .post.feature-post .post-content {
        position: relative !important;
        height: auto !important;
    }

    #slider-single .swiper-pagination,
    #slider-single-alt .swiper-pagination {
        bottom: 5px !important;
    }
}