/**
 * Paragraph Background Sections
 * Full-width backgrounds for paragraph sections
 */

/* Basic Pages: Full-width background wrapper */
.paragraph-section-wrapper {
  padding: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Remove base.css section padding when element IS the background wrapper */
section.paragraph-section-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Section Header: Keep padding at 0 */
.paragraph--type--section_header.paragraph-section-wrapper {
  padding-bottom: 0;
}

/* Fullwidth Parallax: No padding and no background - the inner element handles everything */
.paragraph--type--fullwidth_parallax.paragraph-section-wrapper {
  padding: 0 !important;
  background: none !important;
}

/* Articles: Normal width (stays within grid, no full-width) */
.paragraph-section-article {
  padding: 0;
  width: auto;
  position: static;
}

/* Background color variations */
.paragraph-section-wrapper.bg-white,
.paragraph-section-article.bg-white {
  background-color: var(--bg-white);
}

.paragraph-section-wrapper.bg-light-gray,
.paragraph-section-article.bg-light-gray {
  background-color: #F5F5F5;
}

/* Container inside wrapper to constrain content */
.paragraph-section-wrapper .section-container {
  width: 100%;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Match Bootstrap 5.3.3 container breakpoints for .section-container */
@media (min-width: 576px) {
  .paragraph-section-wrapper .section-container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .paragraph-section-wrapper .section-container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .paragraph-section-wrapper .section-container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .paragraph-section-wrapper .section-container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .paragraph-section-wrapper .section-container {
    max-width: 1320px;
  }
}

/* Article-specific: No padding for paragraph wrappers */
body.node--type-article .paragraph-section-wrapper,
body.node--type-info-article .paragraph-section-wrapper {
  padding: 0;
}

body.node--type-article section.paragraph-section-wrapper,
body.node--type-info-article section.paragraph-section-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Container for article sections - no width constraints */
body.node--type-article .paragraph-section-wrapper .section-container,
.paragraph-section-article .section-container {
  padding: 0;
  max-width: none;
}

/* Responsive padding */
@media (max-width: 768px) {
  .paragraph-section-wrapper {
    padding: 0;
  }
  
  body.node--type-article .paragraph-section-wrapper,
  body.node--type-info-article .paragraph-section-wrapper {
    padding: 0;
  }
  
  body.node--type-article section.paragraph-section-wrapper,
  body.node--type-info-article section.paragraph-section-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .paragraph-section-article {
    padding: 0;
  }
  
  .paragraph--type--section_header.paragraph-section-wrapper {
    padding-bottom: 0;
  }
  
  /* Fullwidth Parallax: Keep padding at 0 on mobile */
  .paragraph--type--fullwidth_parallax.paragraph-section-wrapper {
    padding: 0 !important;
  }
  
  .paragraph-section-wrapper .section-container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 480px) {
  .paragraph-section-wrapper {
    padding: 0;
  }
  
  body.node--type-article .paragraph-section-wrapper,
  body.node--type-info-article .paragraph-section-wrapper {
    padding: 0;
  }
  
  body.node--type-article section.paragraph-section-wrapper,
  body.node--type-info-article section.paragraph-section-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .paragraph-section-article {
    padding: 0;
  }
  
  /* Fullwidth Parallax: Keep padding at 0 on mobile */
  .paragraph--type--fullwidth_parallax.paragraph-section-wrapper {
    padding: 0 !important;
  }
}