/*
|--------------------------------------------------------------------------
| MEMORIAS — ENTREVISTAS
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   TRANSICIÓN HERO → ENTREVISTAS
   ========================================================================== */

.amoladero-hero.amoladero-hero--memorias {
    position: relative;
    z-index: 20 !important;
    overflow: visible !important;
}

.amoladero-hero.amoladero-hero--memorias::before {
    z-index: 50 !important;
}


/* ==========================================================================
   SECTION
   ========================================================================== */

.memorias-entrevistas {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: none !important;

    margin: 0 !important;

    padding:
        clamp(86px, 7vw, 120px)
        0
        clamp(90px, 7vw, 125px);

    overflow: hidden;

    box-sizing:
        border-box;

    isolation:
        isolate;

    background:
        var(--amoladero-deep);

    color:
        var(--amoladero-white);
}


/* ==========================================================================
   INNER
   ========================================================================== */

.memorias-entrevistas__inner {
    width:
        min(
            calc(100% - 72px),
            1480px
        );

    margin:
        0 auto !important;

    padding:
        0 !important;

    box-sizing:
        border-box;
}


/* ==========================================================================
   HEADING
   ========================================================================== */

.memorias-entrevistas__heading {
    width:
        min(
            700px,
            94%
        );

    margin:
        0 auto
        clamp(42px, 4vw, 64px)
        !important;

    text-align:
        center;
}


.memorias-entrevistas__title {
    margin:
        0 0 16px !important;

    padding:
        0;

    color:
        var(--amoladero-white);

    font-family:
        var(--amoladero-font-display);

    font-size:
        clamp(
            2.8rem,
            4vw,
            4.5rem
        );

    font-weight:
        400;

    line-height:
        0.9;

    text-align:
        center;

    text-transform:
        uppercase;
}


.memorias-entrevistas__subtitle {
    width:
        min(
            650px,
            100%
        );

    margin:
        0 auto !important;

    color:
        var(--amoladero-white);

    font-family:
        var(--amoladero-font-heavy);

    font-size:
        clamp(
            0.72rem,
            0.9vw,
            0.92rem
        );

    font-weight:
        700;

    line-height:
        1.35;

    text-align:
        center;

    text-transform:
        uppercase;
}


/* ==========================================================================
   SLIDER
   ========================================================================== */

.memorias-entrevistas__slider {
    position: relative;

    width:
        min(
            100%,
            1240px
        );

    height:
        clamp(
            360px,
            31vw,
            480px
        );

    margin:
        0 auto !important;

    padding:
        0 !important;
}


/* ==========================================================================
   VIEWPORT
   ========================================================================== */

.memorias-entrevistas__viewport {
    position: absolute;

    z-index: 2;

    top: 0;

    right:
        clamp(
            78px,
            8vw,
            118px
        );

    bottom: 0;

    left:
        clamp(
            78px,
            8vw,
            118px
        );

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;
}


/* ==========================================================================
   TRACK
   ========================================================================== */

.memorias-entrevistas__track {
    position: relative;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible;
}


/* ==========================================================================
   CARD — BASE
   ========================================================================== */

.memorias-entrevistas__card {
    position: absolute;

    z-index: 0;

    top: 50%;
    left: 50%;

    width:
        clamp(
            170px,
            15vw,
            225px
        );

    aspect-ratio:
        0.68;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    /*
     * Fondo de seguridad mientras carga el thumbnail.
     *
     * El thumbnail ya NO se pinta directamente en la card:
     * se renderiza en ::after para poder ampliarlo y recortarlo
     * sin modificar el tamaño real de la tarjeta.
     */
    background:
        var(--amoladero-medium);

    /*
     * Variables ajustables por tarjeta si algún video necesita
     * un encuadre diferente.
     *
     * Ejemplo:
     *
     * --youtube-thumbnail-scale: 1.42;
     * --youtube-thumbnail-position: 50% 42%;
     */
    --youtube-thumbnail-scale:
        1.34;

    --youtube-thumbnail-position:
        50% 50%;

    filter:
        brightness(0.58)
        saturate(0.72);

    transform:
        translate(
            -50%,
            -50%
        )
        scale(0.72);

    transform-origin:
        center;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    will-change:
        left,
        opacity,
        filter,
        transform;

    transition:
        left 480ms
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            ),
        opacity 320ms ease,
        filter 320ms ease,
        transform 480ms
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            );
}


/* ==========================================================================
   CARD THUMBNAIL — YOUTUBE
   --------------------------------------------------------------------------
   hqdefault.jpg puede traer franjas negras dentro del propio raster.
   Por eso el thumbnail vive en una capa independiente y se amplía
   ligeramente dentro de la tarjeta.
   ========================================================================== */

.memorias-entrevistas__card::after {
    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    background-image:
        var(
            --youtube-thumbnail,
            none
        );

    background-repeat:
        no-repeat;

    background-position:
        var(
            --youtube-thumbnail-position,
            50% 50%
        );

    background-size:
        cover;

    transform:
        scale(
            var(
                --youtube-thumbnail-scale,
                1.34
            )
        );

    transform-origin:
        center center;

    pointer-events:
        none;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    transition:
        transform 420ms
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            );
}


/* ==========================================================================
   CARD OVERLAY
   ========================================================================== */

.memorias-entrevistas__card::before {
    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        rgba(
            4,
            103,
            72,
            0.22
        );

    pointer-events:
        none;

    transition:
        background 320ms ease;
}


/*
 * Todo el contenido Gutenberg de la card queda por encima
 * del thumbnail y del overlay.
 */

.memorias-entrevistas__card
> * {
    position: relative;

    z-index: 4;
}


/* ==========================================================================
   LEFT
   ========================================================================== */

.memorias-entrevistas__card.is-prev {
    z-index: 2;

    left: 17%;

    visibility: visible;

    opacity: 1.58;

    pointer-events: auto;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(0.78);
}


/* ==========================================================================
   CENTER
   ========================================================================== */

.memorias-entrevistas__card.is-active {
    z-index: 5;

    left: 50%;

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    filter: none;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08);
}


.memorias-entrevistas__card.is-active::before {
    background:
        rgba(
            4,
            103,
            72,
            0.08
        );
}


/* ==========================================================================
   RIGHT
   ========================================================================== */

.memorias-entrevistas__card.is-next {
    z-index: 2;

    left: 83%;

    visibility: visible;

    opacity: 1.58;

    pointer-events: auto;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(0.78);
}


/* ==========================================================================
   PLAY
   ========================================================================== */

.memorias-entrevistas__play-wrap {
    position: absolute;

    z-index: 10;

    top: 50%;
    left: 50%;

    width: auto;

    margin: 0 !important;

    transform:
        translate(
            -50%,
            -50%
        );
}


.memorias-entrevistas__play {
    margin:
        0 !important;
}


.memorias-entrevistas__play
.wp-block-button__link {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        clamp(
            52px,
            4.4vw,
            68px
        );

    height:
        clamp(
            52px,
            4.4vw,
            68px
        );

    min-width:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--amoladero-accent);

    color:
        var(--amoladero-white);

    font-family:
        Arial,
        sans-serif;

    font-size:
        1.2rem;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        transform 180ms ease,
        background 180ms ease;
}


.memorias-entrevistas__play
.wp-block-button__link:hover {
    background:
        var(--amoladero-primary);

    transform:
        scale(1.08);
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.memorias-entrevistas__nav {
    position: absolute;

    z-index: 20;

    top: 50%;

    width: auto;

    margin: 0 !important;

    transform:
        translateY(-50%);
}


.memorias-entrevistas__nav--prev {
    left: 0;
}


.memorias-entrevistas__nav--next {
    right: 0;
}


.memorias-entrevistas__arrow {
    margin:
        0 !important;
}


.memorias-entrevistas__arrow
.wp-block-button__link {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        clamp(
            68px,
            6vw,
            88px
        );

    height:
        clamp(
            68px,
            6vw,
            88px
        );

    min-width:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--amoladero-light);

    color:
        var(--amoladero-primary);

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            2.2rem,
            3vw,
            3.3rem
        );

    font-weight:
        300;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        transform 180ms ease,
        background 180ms ease;
}


.memorias-entrevistas__arrow
.wp-block-button__link:hover {
    background:
        var(--amoladero-white);

    transform:
        scale(1.04);
}


/* ==========================================================================
   FALLBACK BEFORE JS
   ========================================================================== */

.memorias-entrevistas:not(.is-slider-ready)
.memorias-entrevistas__card:nth-child(1) {
    left: 17%;

    visibility: visible;

    opacity: 0.58;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(0.78);
}


.memorias-entrevistas:not(.is-slider-ready)
.memorias-entrevistas__card:nth-child(2) {
    z-index: 5;

    left: 50%;

    visibility: visible;

    opacity: 1;

    filter: none;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08);
}


.memorias-entrevistas:not(.is-slider-ready)
.memorias-entrevistas__card:nth-child(3) {
    left: 83%;

    visibility: visible;

    opacity: 0.58;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(0.78);
}


/* ==========================================================================
   MODAL YOUTUBE
   ========================================================================== */

.memorias-video-modal {
    position: fixed;

    z-index: 999999;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        clamp(
            18px,
            4vw,
            60px
        );

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 240ms ease,
        visibility 0s linear 240ms;
}


.memorias-video-modal.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transition-delay: 0s;
}


.memorias-video-modal__backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            0,
            48,
            42,
            0.90
        );

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


.memorias-video-modal__dialog {
    position: relative;

    z-index: 2;

    width:
        min(
            100%,
            1100px
        );
}


.memorias-video-modal__player {
    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    background:
        #000;
}


.memorias-video-modal__player iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


.memorias-video-modal__close {
    position: absolute;

    z-index: 5;

    top: -56px;
    right: 0;

    width: 44px;
    height: 44px;

    padding: 0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.5
        );

    border-radius:
        50%;

    background:
        var(--amoladero-primary);

    cursor: pointer;
}


.memorias-video-modal__close::before,
.memorias-video-modal__close::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 20px;
    height: 2px;

    background:
        #fff;
}


.memorias-video-modal__close::before {
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(45deg);
}


.memorias-video-modal__close::after {
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(-45deg);
}


body.memorias-video-open {
    overflow: hidden;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1024px) {

    .memorias-entrevistas {
        padding:
            clamp(78px, 8vw, 100px)
            0
            clamp(82px, 8vw, 105px);
    }


    .memorias-entrevistas__inner {
        width:
            calc(100% - 48px);
    }


    .memorias-entrevistas__heading {
        width:
            min(
                650px,
                96%
            );

        margin-bottom:
            clamp(34px, 4vw, 50px)
            !important;
    }


    .memorias-entrevistas__slider {
        height:
            clamp(
                350px,
                42vw,
                440px
            );
    }


    .memorias-entrevistas__viewport {
        right:
            clamp(
                68px,
                8vw,
                84px
            );

        left:
            clamp(
                68px,
                8vw,
                84px
            );
    }


    .memorias-entrevistas__card {
        width:
            clamp(
                155px,
                19vw,
                205px
            );
    }


    .memorias-entrevistas__card.is-prev {
        left: 15%;
    }


    .memorias-entrevistas__card.is-next {
        left: 85%;
    }


    .memorias-entrevistas__arrow
    .wp-block-button__link {
        width:
            clamp(
                60px,
                7vw,
                76px
            );

        height:
            clamp(
                60px,
                7vw,
                76px
            );

        font-size:
            clamp(
                2rem,
                3.5vw,
                2.8rem
            );
    }


    .memorias-video-modal {
        padding:
            clamp(
                18px,
                3vw,
                36px
            );
    }


    .memorias-video-modal__dialog {
        width:
            min(
                100%,
                960px
            );
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 680px) {

    .memorias-entrevistas {
        padding:
            72px 0
            76px;
    }


    .memorias-entrevistas__inner {
        width:
            calc(100% - 24px);
    }


    .memorias-entrevistas__heading {
        width:
            min(
                100%,
                520px
            );

        margin-bottom:
            30px !important;
    }


    .memorias-entrevistas__title {
        font-size:
            clamp(
                2.25rem,
                11vw,
                3.15rem
            );
    }


    .memorias-entrevistas__subtitle {
        width:
            min(
                100%,
                430px
            );

        font-size:
            clamp(
                0.68rem,
                2.8vw,
                0.82rem
            );
    }


    .memorias-entrevistas__slider {
        width:
            100%;

        height:
            clamp(
                350px,
                108vw,
                410px
            );
    }


    .memorias-entrevistas__viewport {
        right: 54px;
        left: 54px;
    }


    /*
     * En móvil mantenemos únicamente
     * la tarjeta central.
     */

    .memorias-entrevistas__card.is-prev,
    .memorias-entrevistas__card.is-next {
        opacity: 0;

        visibility: hidden;

        pointer-events: none;
    }


    .memorias-entrevistas__card.is-active {
        left: 50%;

        width:
            min(
                64vw,
                220px
            );

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1);
    }


    /*
     * En pantallas pequeñas aplicamos un recorte ligeramente
     * mayor para impedir que reaparezcan franjas negras del
     * thumbnail de YouTube.
     */

    .memorias-entrevistas__card {
        --youtube-thumbnail-scale:
            1.38;
    }


    .memorias-entrevistas__arrow
    .wp-block-button__link {
        width: 48px;
        height: 48px;

        font-size:
            1.9rem;
    }


    .memorias-entrevistas__nav--prev {
        left: 2px;
    }


    .memorias-entrevistas__nav--next {
        right: 2px;
    }


    .memorias-video-modal {
        padding:
            14px;
    }


    .memorias-video-modal__dialog {
        width:
            100%;
    }


    .memorias-video-modal__player {
        border-radius:
            8px;
    }


    /*
     * El cierre entra dentro del modal en móvil.
     * Evita que quede fuera de pantalla.
     */

    .memorias-video-modal__close {
        top: 10px;
        right: 10px;

        width: 42px;
        height: 42px;

        border-color:
            rgba(
                255,
                255,
                255,
                0.7
            );

        background:
            rgba(
                4,
                103,
                72,
                0.88
            );

        backdrop-filter:
            blur(6px);

        -webkit-backdrop-filter:
            blur(6px);
    }

}


/* ==========================================================================
   MOBILE PEQUEÑO
   ========================================================================== */

@media (max-width: 420px) {

    .memorias-entrevistas {
        padding:
            64px 0
            68px;
    }


    .memorias-entrevistas__inner {
        width:
            calc(100% - 18px);
    }


    .memorias-entrevistas__slider {
        height:
            360px;
    }


    .memorias-entrevistas__viewport {
        right: 46px;
        left: 46px;
    }


    .memorias-entrevistas__card.is-active {
        width:
            min(
                66vw,
                205px
            );
    }


    .memorias-entrevistas__arrow
    .wp-block-button__link {
        width: 44px;
        height: 44px;

        font-size:
            1.75rem;
    }


    .memorias-entrevistas__play
    .wp-block-button__link {
        width: 50px;
        height: 50px;

        font-size:
            1.05rem;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .memorias-entrevistas__card,
    .memorias-entrevistas__card::after,
    .memorias-entrevistas__card::before,
    .memorias-entrevistas__play
    .wp-block-button__link,
    .memorias-entrevistas__arrow
    .wp-block-button__link,
    .memorias-video-modal {
        transition:
            none !important;
    }

}