/* =====================================================
   Instagram Reels Carousel — Estilos
   ===================================================== */

.irc-carousel-wrapper {
    position: relative;
    width: 100%;
    /* Sin overflow:hidden aquí para que las flechas no se corten */
}

/* --- Swiper base --- */
.irc-carousel-wrapper .irc-swiper {
    width: 100%;
    overflow: hidden; /* El swiper gestiona su propio recorte */
    padding-bottom: 50px;
}

/* --- Tarjeta de reel --- */
.irc-reel-item {
    position: relative;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.irc-has-shadow .irc-reel-item {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* --- Contenedor del iframe ---
 *
 * Instagram embeds para Reels usan padding-bottom:125% internamente
 * (el video se renderiza en formato 4:5, no 9:16).
 * Usamos la misma proporción para que el video llene el contenedor
 * exactamente. El header (~90px) y el footer/caption quedan fuera
 * del área visible gracias a overflow:hidden + desplazamiento del iframe.
 *
 * Estructura interna del embed (de arriba a abajo):
 *   ~90px  — Header (avatar + nombre de usuario + botón)
 *   125%   — Video (relación 4:5 del ancho del iframe)
 *   ~300px — Footer (likes, comentarios, caption, etc.)
 * -------------------------------------------------------- */
.irc-iframe-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 125%; /* 4:5: coincide con el video real del embed */
    overflow: hidden;
    background: #000;
}

/*
 * Por defecto mostramos el video en 4:5 ocultando siempre el header.
 * El iframe sube 90px para que el header quede fuera del wrapper.
 * La altura extra cubre el header arriba + el footer abajo.
 */
.irc-reel-iframe {
    position: absolute;
    top: -90px;           /* Sube el iframe → header queda fuera */
    left: 0;
    width: 100%;
    height: calc(100% + 390px); /* 90px header + 300px footer/caption */
    border: none;
    display: block;
}

/*
 * Cuando el usuario elige MOSTRAR el encabezado (hide_header=no),
 * bajamos el iframe a top:0 — el header aparece arriba y el video
 * empieza algo más abajo dentro del mismo wrapper 4:5.
 */
.irc-iframe-wrap:has(.irc-reel-iframe:not(.irc-hide-header)) .irc-reel-iframe {
    top: 0;
}

/* Fallback sin :has() — clase añadida via JS */
.irc-iframe-wrap.irc-show-header .irc-reel-iframe {
    top: 0;
}

/* --- Footer visible (descripción + botones de acción) ---
 *
 * El footer del embed ocupa ~300px (likes, comentarios, caption, barra).
 * Por defecto está oculto (overflow:hidden sobre el wrapper 125%).
 * Cuando caption o actions se muestran, expandimos el wrapper para
 * que el footer quede dentro del área visible.
 *
 * Casos:
 *   solo footer visible  →  calc(125% + 300px)
 *   header + footer      →  calc(125% + 390px)   (90 header + 300 footer)
 * -------------------------------------------------------- */
.irc-iframe-wrap.irc-show-footer {
    padding-bottom: calc(125% + 300px);
}

.irc-iframe-wrap.irc-show-header.irc-show-footer {
    padding-bottom: calc(125% + 390px);
}

/* :has() — footer visible cuando caption o actions no están ocultos */
.irc-iframe-wrap:has(.irc-reel-iframe:not(.irc-hide-caption)),
.irc-iframe-wrap:has(.irc-reel-iframe:not(.irc-hide-actions)) {
    padding-bottom: calc(125% + 300px);
}

/* :has() — header + footer ambos visibles */
.irc-iframe-wrap:has(.irc-reel-iframe:not(.irc-hide-header)):has(.irc-reel-iframe:not(.irc-hide-caption)),
.irc-iframe-wrap:has(.irc-reel-iframe:not(.irc-hide-header)):has(.irc-reel-iframe:not(.irc-hide-actions)) {
    padding-bottom: calc(125% + 390px);
}

/* --- Etiqueta opcional --- */
.irc-reel-label {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    background: #fff;
    text-align: center;
}

/* --- Blockquote embed oficial (modo no-iframe) --- */
.irc-reel-item .instagram-media {
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* --- Botones de navegación (inset por defecto) --- */
.irc-btn-prev,
.irc-btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E1306C;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: background 0.2s, transform 0.2s;
    padding: 0;
    outline: none;
}

.irc-btn-prev:hover,
.irc-btn-next:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Inset: dentro del área del carrusel */
.irc-btn-prev {
    left: 10px;
}

.irc-btn-next {
    right: 10px;
}

.irc-btn-prev svg,
.irc-btn-next svg {
    fill: #fff;
    flex-shrink: 0;
}

/* --- Paginación ---
 * Dejamos la posición absoluta de Swiper y usamos el padding
 * del swiper como espacio para que los puntos sean visibles.
 */
.irc-carousel-wrapper .swiper-pagination {
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.irc-carousel-wrapper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    opacity: 1;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
    display: inline-block;
}

.irc-carousel-wrapper .swiper-pagination-bullet-active {
    background: #E1306C;
    transform: scale(1.3);
}

/* --- Estado deshabilitado de flechas (swiper) --- */
.irc-btn-prev.swiper-button-disabled,
.irc-btn-next.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}