/*
 * Rossa Plugins - Estilos Extra Para Pruebas
 *
 * Layout minimo extraido de un site con tema Astra + el inline
 * `rossa-local-ui-tweaks` que ya usan en produccion. Solo
 * distribucion (anchos, paddings, gaps, flex). Sin colores, sin
 * fondos, sin bordes, sin sombras.
 *
 * Acotado con `.rpeep-active` / `.rossa-plugin` para no afectar
 * a otras zonas del sitio.
 */

/* ---------------------------------------------------------------
 * 1. Reset minimo de caja + tipografia neutra
 *    line-height 1.65 lo cogemos de Astra, que es lo que da el
 *    aspecto "respirado" del site de referencia.
 * --------------------------------------------------------------- */
.rpeep-active,
.rpeep-active *,
.rpeep-active *::before,
.rpeep-active *::after {
    box-sizing: border-box;
}

.rpeep-active {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.65;
}

.rpeep-active p {
    margin: 0 0 1em;
}

/* ---------------------------------------------------------------
 * 2. Body en flex column con min-height 100vh
 *    Es el patron de #page que usa Astra: header arriba, contenido
 *    flex:1, footer abajo. Lo aplicamos al body porque en un WP sin
 *    tema no hay #page.
 * --------------------------------------------------------------- */
body.rpeep-active {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.rpeep-active #page,
body.rpeep-active main,
body.rpeep-active #content,
body.rpeep-active .site-content,
body.rpeep-active .wp-site-blocks {
    flex: 1 0 auto;
    width: 100%;
}

/* ---------------------------------------------------------------
 * 3. Wrapper del shortcode Rossa (plugin nuevo)
 *    El plugin nuevo renderiza siempre dentro de
 *    .rossa-shortcode > .rossa-shortcode__content. Le damos al
 *    primero el padding vertical/horizontal y al segundo el
 *    max-width centrado. Es exactamente el patron que usan en
 *    produccion (rossa-local-ui-tweaks).
 * --------------------------------------------------------------- */
.rossa-plugin .rossa-shortcode {
    padding: 24px 16px 48px;
}

.rossa-plugin .rossa-shortcode__content {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

/* ---------------------------------------------------------------
 * 4. Wrappers del plugin antiguo y otros wrappers Rossa que no
 *    estan envueltos en .rossa-shortcode__content. Mismo patron:
 *    max-width 1280, centrado, padding.
 * --------------------------------------------------------------- */
.rossa-plugin .rossa-shortcode-box,
.rossa-plugin .rossa-availability-box,
.rossa-plugin .rossa-checkout,
.rossa-plugin .rossa-payment-link,
.rossa-plugin .rossa-payment-content,
.rossa-plugin .rossa-background-container,
.rossa-plugin .rossa-wprentals-main-box,
.rossa-plugin .rossa-wprentals__shortcode {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 16px 48px;
    width: 100%;
}

/* ---------------------------------------------------------------
 * 5. Gaps internos
 *    El gap de 20px en rossa-box-availability__content viene del
 *    rossa-local-ui-tweaks. El resto los anadimos para que las
 *    cajas del checkout / payment / etc. no queden pegadas.
 * --------------------------------------------------------------- */
.rossa-plugin .rossa-box-availability__content {
    gap: 20px !important;
}

.rossa-plugin .rossa-checkout__boxes,
.rossa-plugin .rossa-payment-body,
.rossa-plugin .rossa-payment-link__body,
.rossa-plugin .rossa-payment-link__info__body {
    gap: 16px;
}

/* ---------------------------------------------------------------
 * 6. Grid de cards del plugin legacy (rossa-wprentals)
 * --------------------------------------------------------------- */
.rossa-plugin .rossa-wprentals__box-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* ---------------------------------------------------------------
 * 7. Neutralizar las restricciones de ancho de los temas FSE
 *    (Twenty Twenty-Four / Five). Estos temas constrinen
 *    .is-layout-flow / .is-layout-constrained al content-size de
 *    theme.json (~620px) y ahogan el shortcode antes incluso de
 *    que llegue al wrapper Rossa. Lo abrimos a 1280.
 * --------------------------------------------------------------- */
.rpeep-active .is-layout-flow > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.rpeep-active .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.rpeep-active .wp-site-blocks {
    padding: 0;
}

/* ---------------------------------------------------------------
 * 8. Responsive (mismo breakpoint que rossa-local-ui-tweaks)
 * --------------------------------------------------------------- */
@media (max-width: 768px) {
    .rossa-plugin .rossa-shortcode,
    .rossa-plugin .rossa-shortcode-box,
    .rossa-plugin .rossa-availability-box,
    .rossa-plugin .rossa-checkout,
    .rossa-plugin .rossa-payment-link,
    .rossa-plugin .rossa-payment-content,
    .rossa-plugin .rossa-background-container,
    .rossa-plugin .rossa-wprentals-main-box,
    .rossa-plugin .rossa-wprentals__shortcode {
        padding: 12px 8px 24px;
    }
}