/**
 * @file
 * Layout Builder custom styles for LEWB Theme.
 * Converts default floats to Flex/Grid and uses theme spacing variables.
 */

/* 1. Base Layout Container */
.layout {
  margin-bottom: var(--space-6);
  width: 100%;
}

/* 2. Flexbox/Grid behavior for multi-column sections */

/* Two Columns (50/50 or configurable) */
.layout--twocol-section {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-6); /* Use theme tokens */
  row-gap: var(--space-4);
  align-items: flex-start;
}

.layout--twocol-section > .layout__region {
  flex: 1 1 45%;    /* Flexible basis */
  min-width: 300px; /* Breakpoint for stacking */
  box-sizing: border-box;
}

/* Three Columns (33/33/33) */
.layout--threecol-section {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-6);
  row-gap: var(--space-4);
  align-items: flex-start;
}

.layout--threecol-section > .layout__region {
  flex: 1 1 28%;    /* Fits 3 in a row with gap */
  min-width: 280px; /* Breakpoint for stacking */
  box-sizing: border-box;
}

/* Four Columns (25/25/25/25) */
.layout--fourcol-section {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
  row-gap: var(--space-4);
}

.layout--fourcol-section > .layout__region {
  flex: 1 1 21%;
  min-width: 240px;
}

/* 3. Utility: Remove default Drupal margins if they interfere */
.layout__region--content .block {
  margin-top: 0; 
  /* We let the gap or internal block spacing handle it */
}

.layout__region--content .block + .block {
  margin-top: var(--space-4); /* Add spacing between vertical blocks */
}

/* 4. Edit Mode Adjustments (Preview) */
.layout-builder__section {
  padding: var(--space-2);
  border: 1px dashed var(--border);
  margin-bottom: var(--space-4);
}

.layout-builder__region {
  outline: 1px dashed var(--border-strong);
  min-height: 50px;
}

/* Hide contextual links clutter in preview if desired */
/* .layout-builder-block .contextual { display: none; } */



/* Layout Builder - rendu front-end des sections */
.layout--twocol-section{
  display: grid;
  grid-template-columns: 1fr; /* mobile: stack */
  gap: 24px;
  align-items: start;
}

@media (min-width: 1000px){
  .layout--twocol-section--50-50{
    grid-template-columns: 1fr 1fr;
  }
}

/* Evite les debordements dans les colonnes */
.layout__region{
  min-width: 0;
}