/**
 * 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;
}

/* La sortie de gabarit en 100vw provoquait un défilement horizontal : 100vw
   compte la largeur de la barre de défilement, pas #main-content. Or ce dernier
   n'est borné ni en largeur ni en marge — ce sont les conteneurs `boxed` qui se
   limitent eux-mêmes, via .container-inner. Une largeur de 100 % suffit donc,
   et supprime le débordement. */
.container-full-width {
    width: 100%;
}

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

/* === COLONNES === */

.columns {
    display: grid;
    width: 100%;
    /* Chaque colonne prend sa hauteur propre. Par défaut la grille étire ses items :
       à côté d'une image haute, une colonne de texte de 110 px se retrouvait étalée
       sur 680 px, laissant un vide de plus d'un demi-écran — et près de 900 px sur
       mobile, où les colonnes s'empilent. */
    align-items: start;
}

/* Recentrage vertical possible au cas par cas depuis l'éditeur. */
.columns[data-valign="center"] { align-items: center; }
.columns[data-valign="end"]    { align-items: end; }
.columns[data-valign="stretch"] { align-items: stretch; }

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

/* Layout 2 colonnes - différents ratios.
   Le repli ci-dessous compte : un ratio absent de la liste (saisi à la main, ou
   importé depuis un JSON) ne correspondait à aucune règle, la grille repassait
   à une seule colonne et les deux blocs s'empilaient sans que rien ne signale
   l'erreur. Un « deux colonnes » vaut au minimum deux colonnes. */
.columns-two-columns {
    grid-template-columns: 1fr 1fr;
}

.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;
}

/* Montage en quinconce : au-delà du seuil d'empilement, les deux colonnes
   s'échangent visuellement. On agit sur l'ordre de la grille, jamais sur le DOM,
   pour qu'en pile mobile le texte reste devant le média qu'il annonce. */
@media (min-width: 769px) {
    .columns[data-reverse="true"] > .column:first-child { order: 2; }
    .columns[data-reverse="true"] > .column:last-child  { order: 1; }
}

/* Colonne individuelle */
.column {
    position: relative;
    min-height: 50px;
    /* Un élément de grille ne rétrécit pas sous la largeur de son contenu
       (min-width: auto par défaut). Sans cette ligne, tout widget large — une
       grille de cartes, un tableau, une image — pousse sa colonne au-delà de
       la piste et fait défiler la page latéralement. */
    min-width: 0;
}

.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;
    }

    /* Garde le padding pour boxed et narrow */
    .container-boxed .container-inner,
    .container-narrow .container-inner {
        padding: 0 15px;
    }

    /* Supprime le padding uniquement pour full-width */
    .container-full-width .container-inner {
        padding: 0;
    }
}

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

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