/**
 * Podcast · The Frozen Tundra — [sptf_episodio_texto] / [sptf_episodio_imagen]
 *
 * Estilos mínimos y deliberadamente neutros: el bloque de la home lo maqueta
 * Elementor (fondo verde, rótulo, botones, onda inferior) y la tipografía se
 * hereda del contenedor. Aquí solo va lo que Elementor no puede dar: el
 * recorte 16:9 de la miniatura y el botón de play superpuesto.
 *
 * Para cambiar tamaños o colores del texto, usa los controles de tipografía
 * de Elementor sobre .sptf-fecha y .sptf-titulo en la CSS de la página.
 *
 * Paleta:
 *   Verde Spanish Packers: #10301f
 *   Dorado Spanish Packers: #f9b45b
 */

/* ── Texto: fecha + título ──────────────────────────────────────────── */

.sptf-episodio {
    color: inherit;
}

.sptf-episodio .sptf-fecha {
    font-size: .95rem;
    line-height: 1.3;
    opacity: .9;
}

.sptf-episodio .sptf-titulo {
    margin-top: .15rem;
    line-height: 1.25;
    color: #f9b45b;
}

/* ── Miniatura ──────────────────────────────────────────────────────── */

.sptf-thumb {
    position: relative;
    line-height: 0;
}

.sptf-thumb a {
    display: block;
    position: relative;
    line-height: 0;
    text-decoration: none;
}

.sptf-thumb .sptf-thumb-img {
    display: block;
    width: 100%;
    height: auto;
    /* Las miniaturas de YouTube son 16:9; el recorte evita el salto de
       maquetación mientras cargan y absorbe las que llegan en 4:3. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
}

/* ── Botón de play superpuesto ──────────────────────────────────────── */

.sptf-thumb .sptf-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border-radius: 12px;
    background-color: rgba(16, 48, 31, .75);
    pointer-events: none;
    transition: background-color .2s ease;
}

.sptf-thumb .sptf-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #ffffff;
}

.sptf-thumb a:hover .sptf-play,
.sptf-thumb a:focus-visible .sptf-play {
    background-color: rgba(249, 180, 91, .9);
}

.sptf-thumb a:focus-visible {
    outline: 2px solid #f9b45b;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sptf-thumb .sptf-play {
        transition: none;
    }
}

/* ── Móvil ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .sptf-thumb .sptf-play {
        width: 54px;
        height: 38px;
    }

    .sptf-thumb .sptf-play::after {
        border-width: 8px 0 8px 13px;
    }
}