/**
 * VIDEO INDICATOR — Play overlay para thumbnails
 * 
 * Uso:
 * <div class="wrapper has-video" style="position: relative;">
 *   <img src="..." />
 *   <?php echo informe_render_video_indicator(); ?>
 * </div>
 * 
 * Posiciones disponibles:
 * - informe-video-indicator--bottom-left (default)
 * - informe-video-indicator--top-left
 * - informe-video-indicator--center
 * 
 * @package InformeDigital
 */

/* ==========================================================
   BASE — Estilo común del indicador
   ========================================================== */

.informe-video-indicator {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;   /* 40px */
    height: 2.5rem;
    z-index: 5;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.informe-video-indicator svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Círculo: transparente, solo borde blanco */
.informe-video-indicator__circle {
    fill: none;
    stroke: #fff;
    stroke-width: 8; /* Relativo al viewBox 120 */
}

/* Triángulo play */
.informe-video-indicator__play {
    fill: #fff;
}

/* ==========================================================
   POSICIONES
   ========================================================== */

/* Default: bottom-left */
.informe-video-indicator,
.informe-video-indicator--bottom-left {
    bottom: 0.5rem;
    left: 0.5rem;
}

/* Top-left (similar a superdestacada legacy) */
.informe-video-indicator--top-left {
    top: 0.5rem;
    left: 0.5rem;
    bottom: auto;
}

/* Center (para cards grandes) */
.informe-video-indicator--center {
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 3.5rem;
    height: 3.5rem;
}

/* ==========================================================
   HOVER STATE — Efecto al hacer hover en el wrapper
   ========================================================== */

/* Wrapper con clase has-video activable */
.has-video:hover .informe-video-indicator {
    transform: scale(1.08);
}

.has-video:hover .informe-video-indicator--center {
    transform: translate(-50%, -50%) scale(1.1);
}

/* ==========================================================
   TAMAÑOS VARIANTES — Según contexto
   ========================================================== */

/* Para cards compactas */
.informe-post-card--compact .informe-video-indicator,
.informe-post-card--square .informe-video-indicator {
    width: 2rem;
    height: 2rem;
}

/* Para cards featured/grandes */
.informe-post-card--featured .informe-video-indicator,
.inf-superdestacada .informe-video-indicator {
    width: 3.25rem;
    height: 3.25rem;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {
    .informe-video-indicator {
        width: 2rem;
        height: 2rem;
    }
    
    .informe-video-indicator--center {
        width: 2.75rem;
        height: 2.75rem;
    }
    
    .informe-post-card--featured .informe-video-indicator,
    .inf-superdestacada .informe-video-indicator {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ==========================================================
   CONTENEDOR — El wrapper debe tener position relative
   ========================================================== */

/* Asegurar que el contenedor de imagen tenga position relative */
.informe-post-card__image {
    position: relative;
}

.informe-post-card__image a {
    display: block;
    position: relative;
}

/* Thumb partial */
.informe-thumb {
    position: relative;
}

.informe-thumb a {
    display: block;
    position: relative;
}

/* Related items thumb wrapper */
.informe-rel-thumb-wrap {
    position: relative;
    display: block;
}

/* Destacados wrappers */
.informe-destacado-main__image-wrapper {
    position: relative;
    display: block;
}

.informe-destacado-thumb {
    position: relative;
    display: block;
}

/* ER Medios Nacionales */
.informe-er-medios-nacionales__thumb {
    position: relative;
}

.informe-er-medios-nacionales__thumb a {
    display: block;
    position: relative;
}

/* Campo editorial */
.informe-campo-editorial__item-image {
    position: relative;
}

.informe-campo-editorial__item-image a {
    display: block;
    position: relative;
}

/* Municipales */
.muni-card__image {
    position: relative;
}

.muni-card__image a {
    display: block;
    position: relative;
}

/* Justicia y Policiales */
.informe-policial-editorial__main-image {
    position: relative;
}

.informe-policial-editorial__main-image a {
    display: block;
    position: relative;
}

.informe-policial-editorial__item-image {
    position: relative;
}

.informe-policial-editorial__item-image a {
    display: block;
    position: relative;
}

/* Superdestacada ya tiene el wrapper correcto */

/* ==========================================================
   COMPATIBILIDAD — Con otros componentes que ya tienen play
   ========================================================== */

/* Evitar duplicación si ya existe play de superdestacada */
.inf-superdestacada__play + .informe-video-indicator {
    display: none;
}