/**
 * Section Layout Component
 * Flexible column layouts for paragraphs
 * Note: Background is handled by paragraph.html.twig via paragraph-section-wrapper
 */

.section-layout {
  position: relative;
}

/* The row is now directly in section-layout (or in section-container if background is used) */
.section-layout .row,
.section-container .section-layout .row {
  --bs-gutter-x: 2rem;
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}

.section-layout__item {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  position: relative;
}

/* Remove extra margins from nested paragraphs */
.section-layout__item > .paragraph {
  margin-bottom: 0;
}

/* Ensure nested paragraphs don't have full-width backgrounds */
.section-layout__item .paragraph-section-wrapper,
.section-layout__item .paragraph-section-article {
  width: 100%;
  position: static;
  left: auto;
  right: auto;
  margin-left: 0;
  margin-right: 0;
}

/* Remove padding from nested section-containers to avoid double padding */
.section-layout__item .section-container {
  padding-left: 0;
  padding-right: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  /* Stack columns on mobile for all layouts */
  .section-layout .row > * {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Reduce gutter on mobile */
  .section-layout .row {
    --bs-gutter-x: 1rem;
  }
}

@media (max-width: 480px) {
  .section-layout .row {
    --bs-gutter-x: 0.5rem;
  }
}