/* Forzar el comportamiento de la galería flex */
.wp-block-gallery.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1em; /* Ajusta según tu diseño */
    align-items: stretch;
}

.wp-block-gallery.is-layout-flex > .wp-block-image {
    margin: 0;
    flex-grow: 1;
    /* Esto ayuda a mantener la cuadrícula si hay 3 imágenes */
    flex-basis: calc(33.33% - 1em); 
}

/* Ajuste para móviles */
@media (max-width: 600px) {
    .wp-block-gallery.is-layout-flex > .wp-block-image {
        flex-basis: 100%;
    }
}

/* Fix para el contenedor Flow (Vertical) */
.is-layout-flow {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea a la izquierda por defecto */
}

/* Gestionar el espaciado vertical (Block Gap) */
.is-layout-flow > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Aplica espacio entre todos los elementos excepto el primero */
.is-layout-flow > * + * {
    margin-block-start: var(--wp--style--block-gap, 1.5rem);
}

/* Asegurar que los bloques anchos ocupen el 100% */
.is-layout-flow > .alignwide,
.is-layout-flow > .alignfull {
    width: 100%;
}

/* 1. Fix para el contenedor de columnas (el padre) */
.wp-block-columns.is-layout-flex {
    display: flex;
    flex-wrap: nowrap; /* Evita que las columnas caigan en desktop */
    gap: var(--wp--style--block-gap, 2em);
}

/* 2. Fix para cada columna individual */
.wp-block-column.is-layout-flow {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0; /* Evita desbordamientos */
    word-break: break-word;
}

/* 3. Fix para las cajas azules (simulacio-bloc-blau) dentro del flow */
.is-layout-flow > .simulacio-bloc-blau {
    margin-block-start: 0;
    margin-block-end: var(--wp--style--block-gap, 1.5rem);
    display: block;
    width: 100%;
}

/* 4. Responsive: que las columnas se apilen en móvil */
@media (max-width: 781px) {
    .wp-block-columns.is-layout-flex {
        flex-wrap: wrap;
    }
    .wp-block-column.is-layout-flow {
        flex-basis: 100% !important;
    }
}

/* Re-definir tamaños básicos si el preset falla */
.has-small-font-size { font-size: 13px !important; }
.has-medium-font-size { font-size: 20px !important; }
.has-large-font-size { font-size: 36px !important; }
.has-x-large-font-size { font-size: 42px !important; }

/* Re-definir colores básicos */
.has-white-color { color: #ffffff !important; }
.has-black-color { color: #000000 !important; }