/**
 * =============================================================================
 * ESTILOS PARA BLOQUES NATIVOS DE GUTENBERG
 * Soporte para Group, Row, Stack, Columns y Grid
 * =============================================================================
 */

/* =============================================================================
   BLOQUE GROUP / GRUPO
   ============================================================================= */

.wp-block-group {
    margin-bottom: 1.5rem;
}

/* Group con fondo */
.wp-block-group.has-background {
    padding: 1.5rem 2rem;
    border-radius: 8px;
}

/* Group alineación wide */
.wp-block-group.alignwide {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* Group alineación full */
.wp-block-group.alignfull {
    max-width: 100%;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* =============================================================================
   BLOQUE ROW / FILA (Flex horizontal)
   ============================================================================= */

.wp-block-group.is-layout-flex,
.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

/* Row con justificación */
.is-layout-flex.is-content-justification-left {
    justify-content: flex-start;
}

.is-layout-flex.is-content-justification-center {
    justify-content: center;
}

.is-layout-flex.is-content-justification-right {
    justify-content: flex-end;
}

.is-layout-flex.is-content-justification-space-between {
    justify-content: space-between;
}

/* Row verticalmente centrado */
.is-layout-flex.is-vertically-aligned-top {
    align-items: flex-start;
}

.is-layout-flex.is-vertically-aligned-center {
    align-items: center;
}

.is-layout-flex.is-vertically-aligned-bottom {
    align-items: flex-end;
}

/* Row sin wrap (una sola línea) */
.is-layout-flex.is-nowrap {
    flex-wrap: nowrap;
}

/* =============================================================================
   BLOQUE STACK / PILA (Flex vertical)
   ============================================================================= */

.wp-block-group.is-layout-constrained,
.is-layout-constrained {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.is-layout-constrained>* {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================================================
   BLOQUE COLUMNS / COLUMNAS
   ============================================================================= */

.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}

.wp-block-columns.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-columns.alignfull {
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Columna individual */
.wp-block-column {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    word-break: break-word;
}

/* Columnas - Alineación vertical */
.wp-block-columns.are-vertically-aligned-top {
    align-items: flex-start;
}

.wp-block-columns.are-vertically-aligned-center {
    align-items: center;
}

.wp-block-columns.are-vertically-aligned-bottom {
    align-items: flex-end;
}

/* Columnas sin gap */
.wp-block-columns.is-style-columns-no-gap {
    gap: 0;
}

/* Columnas con borde */
.wp-block-column.has-background {
    padding: 1.5rem;
    border-radius: 8px;
}

/* =============================================================================
   BLOQUE GRID / CUADRÍCULA (WordPress 6.3+)
   ============================================================================= */

.wp-block-group.is-layout-grid,
.is-layout-grid {
    display: grid;
    gap: 1.5rem;
}

/* Grid columnas automáticas (minmax responsive) */
.is-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Grid con columnas fijas */
.is-layout-grid.has-2-columns {
    grid-template-columns: repeat(2, 1fr);
}

.is-layout-grid.has-3-columns {
    grid-template-columns: repeat(3, 1fr);
}

.is-layout-grid.has-4-columns {
    grid-template-columns: repeat(4, 1fr);
}

.is-layout-grid.has-5-columns {
    grid-template-columns: repeat(5, 1fr);
}

.is-layout-grid.has-6-columns {
    grid-template-columns: repeat(6, 1fr);
}

/* Grid alineación de items */
.is-layout-grid.is-vertically-aligned-top {
    align-items: start;
}

.is-layout-grid.is-vertically-aligned-center {
    align-items: center;
}

.is-layout-grid.is-vertically-aligned-bottom {
    align-items: end;
}

/* =============================================================================
   UTILIDADES DE ESPACIADO (Block Gap)
   ============================================================================= */

/* Gaps pequeños */
.has-small-gap {
    gap: 0.75rem !important;
}

/* Gaps medianos (default) */
.has-medium-gap {
    gap: 1.5rem !important;
}

/* Gaps grandes */
.has-large-gap {
    gap: 2.5rem !important;
}

/* =============================================================================
   RESPONSIVE - MOBILE FIRST
   ============================================================================= */

@media (max-width: 781px) {

    /* Columns apiladas en móvil */
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-direction: column;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0;
    }

    /* Grid responsive */
    .is-layout-grid {
        grid-template-columns: 1fr !important;
    }

    .is-layout-grid.is-not-stacked-on-mobile {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Row responsive */
    .is-layout-flex:not(.is-nowrap) {
        flex-direction: column;
        align-items: stretch;
    }

    /* Group full en móvil */
    .wp-block-group.alignfull {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 600px) {
    .wp-block-columns {
        gap: 1rem;
    }

    .is-layout-grid,
    .is-layout-flex {
        gap: 1rem;
    }

    .wp-block-group.has-background {
        padding: 1rem;
    }
}

/* =============================================================================
   ESTILOS ADICIONALES PARA CONTENIDO
   ============================================================================= */

/* Bordes y sombras para groups */
.wp-block-group.has-border-color {
    border-width: 1px;
    border-style: solid;
}

.wp-block-group.has-shadow {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Colores de fondo predefinidos con el tema */
.wp-block-group.has-primary-background-color {
    background-color: var(--primary-color, #0073aa);
    color: #ffffff;
}

.wp-block-group.has-light-background-color {
    background-color: #f8f9fa;
}

.wp-block-group.has-dark-background-color {
    background-color: #212121;
    color: #ffffff;
}

/* Transiciones suaves */
.wp-block-group,
.wp-block-columns,
.wp-block-column {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect para cards */
.wp-block-column.has-background:hover,
.wp-block-group.has-background:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Dark mode support */
body.dark-mode .wp-block-group.has-light-background-color {
    background-color: #2a2a2a;
    color: #f5f5f5;
}

body.dark-mode .wp-block-group.has-background {
    border-color: #444;
}