/* Paragraph Full-Width Background
   ------------------------------------------------
   Generic CSS for any paragraph type to have full-width backgrounds
   while keeping content constrained to main-content width.
   
   Usage: Add class 'paragraph--full-width-bg' to any paragraph element
   or use the bp_width field value 'full' to trigger this behavior.
   
   Also supports blocks with the same wrapper structure.
*/

/* Full-width background wrapper - breaks out of main-content container */
/* Note: Wrapper is OUTSIDE the paragraph/block element, so we target it directly */
/* Uses calc() to break out of any parent container by positioning relative to viewport */
/* This works by moving the element left by (50% of parent - 50% of viewport) */
.paragraph__full-width-wrapper,
.block__full-width-wrapper {
  width: 100vw;
  position: relative;
  left: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  box-sizing: border-box;
}

/* Constrained content container - matches main-content width */
/* Responsive padding matches paragraph-spacing.css for consistency */
.paragraph__constrained-container,
.block__constrained-container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bs-gutter-x, 0.75rem);
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-bottom: clamp(1rem, 2vw, 1.875rem); /* Responsive: 16px to 30px */
}

/* Ensure paragraph element spans full width within wrapper */
.paragraph__full-width-wrapper > .paragraph {
  width: 100%;
}

/* Add top padding when paragraph has background color - responsive */
/* Note: paragraph-spacing.css also handles this, but keeping for specificity */
.paragraph--full-width-bg.paragraph--color .paragraph__constrained-container,
.paragraph--width--full.paragraph--color .paragraph__constrained-container {
  padding-top: clamp(1rem, 2vw, 1.875rem); /* Responsive: 16px to 30px */
}

/* Add responsive bottom margin to full-width wrapper when it has color classes */
/* This creates space between the colored background and the next paragraph */
/* The wrapper receives color classes from the template, so we target it directly */
.paragraph__full-width-wrapper.paragraph--color {
  margin-bottom: clamp(1rem, 2vw, 1.875rem); /* Responsive: 16px to 30px */
}

/* Also handle when color classes are on nested paragraph element */
.paragraph__full-width-wrapper:has(.paragraph.paragraph--color) {
  margin-bottom: clamp(1rem, 2vw, 1.875rem); /* Responsive: 16px to 30px */
}

/* Match Bootstrap container widths at different breakpoints */
@media (min-width: 576px) {
  .paragraph__constrained-container,
  .block__constrained-container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .paragraph__constrained-container,
  .block__constrained-container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .paragraph__constrained-container,
  .block__constrained-container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .paragraph__constrained-container,
  .block__constrained-container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .paragraph__constrained-container,
  .block__constrained-container {
    max-width: 1320px;
  }
}