/**
 * Modal de gate (Cn_Subscriptions_Gate_Modal_Template).
 *
 * Es el panel del bloqueo suave abierto al pulsar un disparador
 * (`data-cn-gate="{slug}"`) en vez de al hacer scroll. Vale para cualquier
 * gate: el de audio hoy, y los que se sumen (guardar articulo, ...). Lo que
 * cambia entre gates es el copy, no la apariencia, asi que aqui no hay reglas
 * por slug.
 *
 * El modal NO define la apariencia del panel: emite la clase .cn-locked-panel,
 * con la que cn-subscriptions-soft-block.css comparte la del panel del bloqueo
 * suave (fondo, radio, sombra, tipografia, botones, modo oscuro y movil). Lo
 * unico que vive en este archivo es lo que el modal tiene y el softblock no:
 * su propio velo, aparecer al pulsar y, en los gates `dismissible`, el boton
 * de cierre. Por defecto no se puede cerrar: igual que el bloqueo suave, una
 * vez abierto se queda.
 *
 * Se encola solo en las paginas que imprimen algun modal
 * (Cn_Subscriptions_Public::render_gate_modals()), con enqueue versionado y no
 * como @import de cn-subscriptions-public.css.
 */

/* Sin esto el modal se veria al cargar: `display: flex` de una hoja de autor le
   gana a `[hidden] { display: none }` del user-agent aunque empaten en
   especificidad. */
.cn-gate[hidden] {
    display: none;
}

/* Misma hoja anclada abajo que el softblock: en vez de posicionar el panel a
   mano, el contenedor lo alinea abajo y centrado, lo que reproduce el
   `bottom: 24px` + `left: 50%` + `translateX(-50%)` de
   `body.cn-soft-block-reveal-ready section#locked-content`.
   Por encima del panel del softblock (z-index 9) y por debajo de Magnific Popup
   (1042), para que el popup de registro se dibuje sobre el modal. */
.cn-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 24px;
}

html.cn-gate-open,
body.cn-gate-open {
    overflow: hidden;
}

/* Mismo velo que el del softblock. Alli es decorativo (pointer-events: none)
   porque el scroll lo bloquea el JS; aqui tapa toda la pagina y, como el modal
   no se puede cerrar, no hace falta que reaccione al clic. */
.cn-gate__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(71, 85, 105, 0.75);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

/* Solo en los gates que se cierran el velo reacciona al clic (ver
   initGateModals()); el cursor lo anticipa. */
.cn-gate--dismissible .cn-gate__backdrop {
    cursor: pointer;
}

/* Ni padding ni gap: los define (o no) cn-subscriptions-soft-block.css, y la
   idea es que la caja sea la misma que la del softblock en cada breakpoint. */
.cn-gate__panel {
    position: relative;
    width: min(760px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: cn-gate-in 360ms ease-out;
}

@keyframes cn-gate-in {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cn-gate__panel {
        animation: none;
    }
}

@media screen and (max-width: 992px) {
    .cn-gate {
        padding-bottom: 8px;
    }

    .cn-gate__panel {
        width: min(370px, calc(100% - 12px));
        max-height: calc(100vh - 72px);
    }
}

/* ------------------------------------------------------ Boton de cierre */

/* Solo lo imprimen los gates `dismissible`. Va en la esquina del panel, sin
   ocupar sitio en el flujo para no mover el titulo respecto del softblock. */
.cn-gate__panel .cn-gate__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--neutral-900);
    cursor: pointer;
}

.cn-gate__panel .cn-gate__close:hover,
.cn-gate__panel .cn-gate__close:focus-visible {
    background: rgba(71, 85, 105, 0.12);
}

.cn-gate__panel .cn-gate__close svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

body.jnews-dark-mode .cn-gate__panel .cn-gate__close {
    color: var(--neutral-50);
}

/* ------------------------------------------------ Ajustes sobre el panel */

/* El tema le da a ul.jeg_menu un margen inferior grande que en el modal
   separaba demasiado el boton de la linea de inicio de sesion; a cero
   quedaban pegados. */
.cn-gate__panel .locked-content-action ul.jeg_menu {
    margin-bottom: 15px;
}

/* En movil, cn-subscriptions-soft-block.css reemplaza por CSS el texto de la
   linea de inicio de sesion (font-size: 0 + ::before/::after con el copy del
   softblock). El copy de cada gate vive en PHP y no tiene por que coincidir, asi
   que aqui se deshace ese reemplazo y se muestra el texto real. */
@media screen and (max-width: 992px) {
    .cn-gate__panel p.jeg_accountlink {
        font-size: 12px;
        line-height: 18px;
    }

    .cn-gate__panel p.jeg_accountlink::before,
    .cn-gate__panel p.jeg_accountlink a.cn-locked-link::after {
        content: none;
    }
}