/*
 * Rpn_CmsPageLoader — ajustes de la landing de Innova para Breeze.
 *
 * Todo lo de aqui esta medido sobre la pagina, no estimado. Dos bloques:
 *   1. El dialogo de seleccion de sede.
 *   2. La pagina, que esta disenada a sangre (ancho completo de ventana).
 */


/* =========================================================================
   1. EL DIALOGO
   ========================================================================= */

/*
 * 1.a  El ancho de la caja.
 *
 * La imagen del dialogo (innova-popup-pc-1.jpeg) mide 1517x480, aspecto 3,16.
 * Por eso el CSS del modulo pide 702x222 y 900x285: son exactamente su proporcion
 * (900 / 3,16 = 285). Pero Breeze limita cualquier modal con su propia variable:
 *
 *     .modal-inner-wrap { max-width: var(--modal-max-width); }   // 500px por defecto
 *
 * y el modulo fija `width` SIN `max-width`, asi que la caja se quedaba en 500px:
 * la imagen salia recortada y sobraba blanco. Se sube la variable de Breeze en vez
 * de pelear con !important.
 */
@media only screen and (min-width: 769px) {
    .rpn-cpl-modal {
        --modal-max-width: 702px;
    }
}

@media only screen and (min-width: 1024px) {
    .rpn-cpl-modal {
        --modal-max-width: 900px;
    }
}

/*
 * 1.b  Los botones se comian la foto.
 *
 * En la imagen, el panel azul ocupa el 66 % del ancho y el nino esta en el 34 %
 * restante (medido: el corte de color cae en x=1008 de 1517). El titulo y el
 * desplegable ya se quedan en ese 66 %, pero el pie ocupaba el 100 %: ACEPTAR
 * quedaba a caballo del corte y CANCELAR encima de la cara del nino.
 *
 * Se limita el pie a esa columna azul y se alinean los botones debajo del
 * desplegable. La sangria izquierda no es la del titulo (32px) sino el 16 % del
 * ancho: el logo de Innova Schools esta incrustado en la imagen abajo a la
 * izquierda, entre el 2,0 % y el 13,7 % del ancho (medido sobre el JPEG), y con
 * 32px los botones se lo comian.
 *
 * Los selectores llevan `.modal-slide` porque Breeze anade esa clase a TODA modal
 * creada con `responsive: true`, tambien en escritorio (en Luma solo la pone por
 * debajo del punto de ruptura).
 */
@media only screen and (min-width: 769px) {
    .modal-popup.rpn-cpl-modal .modal-footer,
    .modal-popup.rpn-cpl-modal.modal-slide .modal-footer {
        display: flex;
        gap: 12px;
        width: 66%;                     /* donde acaba el panel azul de la imagen */
        margin-top: auto;               /* empuja los botones al pie de la caja */
        padding: 0 0 22px 16%;          /* 16%: despues del logo de Innova */
        box-sizing: border-box;
    }

    /* Se anulan el `width: 30%` y el `margin-left: 20%` del modulo, pensados para
       un pie a todo lo ancho. Con `flex: 1` los dos botones reparten la columna. */
    .rpn-cpl-modal.modal-popup .modal-footer button,
    .rpn-cpl-modal.modal-popup.modal-slide .modal-footer button,
    .rpn-cpl-modal.modal-popup.modal-slide .modal-footer button:first-of-type {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 11px 16px;
        white-space: nowrap;
    }

    /* El desplegable, a la medida de su columna y sin pasarse. */
    .rpn-cpl-modal .rpn-cpl-select {
        width: 100%;
        max-width: 420px;
    }

    /* La X cae sobre la foto, que es clara: sin una sombra apenas se ve. */
    .modal-popup.rpn-cpl-modal .action-close:before {
        text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    }
}


/*
 * 1.c  Por debajo de 769px sobraba una franja blanca a la derecha.
 *
 * Ahi la modal usa la imagen vertical innova-popup-mobil-1.jpeg, de 768x1300
 * (aspecto 0,591), con `background-size: contain`. Pero el ANCHO de la caja lo
 * pone Breeze (`--modal-max-width`, 500px) y el ALTO lo limitan el `max-height`
 * del modulo y la pantalla; como la caja sale mas apaisada que la imagen,
 * `contain` ajusta por el alto y deja hueco a la derecha. Medido: 12px a 360,
 * 26px a 390, 45px a 600 y 121px a 768.
 *
 * Se le da a la caja la proporcion exacta de la imagen y se deja que el ancho lo
 * mande el alto. Con eso la franja desaparece en todo el rango (0px de 360 a 768;
 * 2px a 320, donde el ancho ya lo limita la pantalla).
 */
@media only screen and (max-width: 768px) {
    .rpn-cpl-modal .modal-inner-wrap {
        aspect-ratio: 768 / 1300;   /* la imagen de movil, al pixel */
        width: auto;                /* el alto manda; el ancho lo sigue */
        max-width: 100%;
    }

    /*
     * Y que la caja quepa en la pantalla. El modulo hace `max-height: unset` para
     * `_inner-scroll`, asi que en una ventana baja —768x600, por ejemplo— la modal
     * medIa 682px y el titulo quedaba cortado por arriba. Este selector tiene la
     * misma especificidad que el suyo y va despues, asi que gana sin `!important`.
     * Con `aspect-ratio`, al limitar el alto el ancho se ajusta solo y no reaparece
     * la franja.
     */
    .modal-popup.rpn-cpl-modal._inner-scroll .modal-inner-wrap {
        max-height: 92vh;
    }
}


/* =========================================================================
   2. LA PAGINA — esta disenada a sangre
   ========================================================================= */

/*
 * Los banners de la landing son de 1920x810, aspecto 2,370, que es exactamente
 * 1 / 0,42; y sus filas piden `min-height: 42vw`. Es decir: la fila encaja al pixel
 * con su imagen SOLO si mide lo mismo que la ventana. (Los dos banners de 1920x360
 * siguen la misma regla con `min-height: 18,75vw`.)
 *
 * Pero el tema estrecha el contenido:
 *
 *     .rpn-css.page-layout-1column.cms-page-view .page-main-full-width {
 *         max-width: 96%;
 *     }
 *
 * A 1440px eso deja 1342px utiles: la imagen se dibuja a 566px de alto dentro de una
 * caja de 605 y sobran ~39px de blanco POR FILA. Con nueve filas asi, mas de 300px de
 * huecos repartidos por la pagina. Eso es lo que se veia mal.
 *
 * Se limita a esta pagina: ese 96% es deliberado y lo comparten las otras 31 paginas
 * CMS del sitio (portada y estaticas incluidas), asi que NO se toca en general.
 * El `!important` es el mismo caso que ya documenta `_static-pages.less`: la regla del
 * tema lleva una clase mas que esta.
 */
.cms-uniformes-innova .page-main-full-width {
    max-width: none !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.cms-uniformes-innova .column.main {
    max-width: none;
}

/* El contenido se inyecta aqui por AJAX; sin esto hereda la caja estrecha. */
.cms-uniformes-innova #dynamic-cms-content {
    width: 100%;
}

/*
 * Los banners, de borde a borde de verdad.
 *
 * Page Builder mete 8px de sangria a cada lado en `[data-element=inner]`. Con el
 * ancho ya completo, esos 16px siguen impidiendo que la imagen cuadre: la caja
 * quedaba en 1409 y la imagen se dibujaba a 594 dentro de una fila de 605.
 * Los diez banners de esta landing son el unico hijo de su `inner`, asi que se
 * sacan con margen negativo (mas compatible que `:has()`).
 */
.cms-uniformes-innova #dynamic-cms-content [data-element="inner"] > [data-content-type="banner"] {
    margin-left: -8px;
    margin-right: -8px;
}