/**
 * Styles pour les containers du Page Builder
 * Système Container → Colonnes → Widgets
 */

/* === CONTAINERS === */

.izibrick-container {
    width: 100%;
    position: relative;
}

/* Largeurs de containers */
.container-boxed .container-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow .container-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-full-width {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

.container-full-width .container-inner {
    max-width: 100%;
    padding: 0;
}

/* === COLONNES === */

.columns {
    display: grid;
    width: 100%;
}

/* Layout 1 colonne */
.columns-one-column {
    grid-template-columns: 1fr;
}

/* Layout 2 colonnes - différents ratios */
.columns-two-columns[data-ratio="50-50"] {
    grid-template-columns: 1fr 1fr;
}

.columns-two-columns[data-ratio="30-70"] {
    grid-template-columns: 3fr 7fr;
}

.columns-two-columns[data-ratio="70-30"] {
    grid-template-columns: 7fr 3fr;
}

.columns-two-columns[data-ratio="40-60"] {
    grid-template-columns: 4fr 6fr;
}

.columns-two-columns[data-ratio="60-40"] {
    grid-template-columns: 6fr 4fr;
}

/* Layout 3 colonnes */
.columns-three-columns[data-ratio="33-33-33"] {
    grid-template-columns: 1fr 1fr 1fr;
}

.columns-three-columns[data-ratio="25-50-25"] {
    grid-template-columns: 1fr 2fr 1fr;
}

/* Layout 4 colonnes */
.columns-four-columns {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Colonne individuelle */
.column {
    position: relative;
    min-height: 50px;
}

.column-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-style: italic;
    min-height: 100px;
}

/* === WIDGETS DANS LES COLONNES === */

.widget-wrapper {
    margin-bottom: 20px;
}

.widget-wrapper:last-child {
    margin-bottom: 0;
}

/* === RESPONSIVE === */

/* Tablettes */
@media (max-width: 992px) {
    .container-boxed .container-inner,
    .container-narrow .container-inner {
        padding: 0 15px;
    }

    .container-full-width .container-inner {
        padding: 0 20px;
    }

    /* 3 et 4 colonnes passent à 2 colonnes */
    .columns-three-columns,
    .columns-four-columns {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Toutes les colonnes passent en 1 colonne */
    .columns {
        grid-template-columns: 1fr !important;
    }

    .izibrick-container {
        padding: 40px 0 !important;
    }

    .container-boxed .container-inner,
    .container-narrow .container-inner,
    .container-full-width .container-inner {
        padding: 0 15px;
    }
}

/* Petits mobiles */
@media (max-width: 480px) {
    .izibrick-container {
        padding: 30px 0 !important;
    }

    .columns {
        gap: 20px !important;
    }
}