/**
 * LSC New Theme - Paragraph Vertical Spacing
 * Unified vertical spacing for all paragraph types
 */

/* ===== GLOBAL PARAGRAPH SPACING ===== */

/* All paragraph elements get consistent vertical spacing */
.paragraph,
[class*="paragraph--type-"] {
  margin-bottom: 2rem;
}

/* Paragraphs with background wrapper have no margins - wrapper provides spacing */
.paragraph-section-wrapper {
  margin-bottom: 0 !important;
}

/* First paragraph has no top margin */
.paragraph:first-child,
[class*="paragraph--type-"]:first-child {
  margin-top: 0;
}

/* Last paragraph has no bottom margin */
.paragraph:last-child,
[class*="paragraph--type-"]:last-child {
  margin-bottom: 0;
}

/* ===== SPECIFIC PARAGRAPH TYPES ===== */

/* Hero Paragraphs - No bottom margin (usually first element) */
.paragraph--type-hero,
.paragraph--type-hero-stage {
  margin-bottom: 0;
}

/* Section Headers - Reduced bottom margin (they're followed by content) */
.paragraph--type-section-header {
  margin-top: 2rem;
}

/* Content Paragraphs - Standard spacing */
.paragraph--type-image-text,
.paragraph--type-fullwidth-parallax,
.paragraph--type-pdf-download,
.paragraph--type-manual-teaser,
.paragraph--type-pages-grid,
.paragraph--type-contact-form {
  margin-bottom: 2rem;
}

/* Gallery & Stats - Standard spacing */
.paragraph--type-content-gallery,
.paragraph--type-impact-stats {
  margin-bottom: 2rem;
}

/* FAQ Accordion - Standard spacing */
.paragraph--type-faq-accordion {
  margin-bottom: 2rem;
}

/* Instagram Feed - Standard spacing */
.paragraph--type-instagram-feed {
  margin-bottom: 2rem;
}

/* ===== RESPONSIVE SPACING ===== */

@media (max-width: 991px) {
  .paragraph,
  [class*="paragraph--type-"] {
    margin-bottom: 1.5rem;
  }
  
  .paragraph--type-section-header {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 767px) {
  .paragraph,
  [class*="paragraph--type-"] {
    margin-bottom: 1.25rem;
  }
  
  .paragraph--type-section-header {
    margin-bottom: 1rem;
  }
}

/* ===== PARAGRAPH CONTAINER SPACING ===== */

/* Field that contains paragraphs */
.field--name-field-content {
  display: flex;
  flex-direction: column;
}

/* Inner padding for paragraph containers */
.paragraph__content,
.paragraph-inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* Sections with colored backgrounds need internal padding */
.paragraph.has-background {
  padding: 2rem 0;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .paragraph.has-background {
    padding: 1.5rem 0;
  }
}

@media (max-width: 767px) {
  .paragraph.has-background {
    padding: 1.25rem 0;
  }
}

/* Adjacent paragraphs with backgrounds */
.paragraph.has-background + .paragraph.has-background {
  padding-top: 0;
}

/* ===== SECTION CONTAINER CONSISTENCY ===== */

/* Ensure all section-based paragraphs have consistent container behavior */
/* Match Bootstrap 5.3.3 .container responsive breakpoints */
.paragraph .section-container,
.paragraph .container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

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

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

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

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

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