/* Paragraph Spacing
   ------------------------------------------------
   Consistent responsive spacing for all paragraphs.
   Ensures paragraphs have appropriate vertical spacing between them.
   
   This applies to all paragraph types and works alongside
   the full-width background feature.
*/

/* Base spacing for all paragraphs */
/* Responsive padding: smaller on mobile, larger on desktop */
.main-content .paragraph {
  padding-top: clamp(1rem, 2vw, 1.875rem); /* 16px to 30px */
  padding-bottom: clamp(1rem, 2vw, 1.875rem); /* 16px to 30px */
}

/* Last paragraph can have bottom padding for spacing from footer */
.main-content .paragraph:last-child {
  padding-bottom: clamp(1rem, 2vw, 1.875rem);
}

/* Paragraphs with background colors get consistent padding */
.main-content .paragraph.paragraph--color {
  padding-top: clamp(1rem, 2vw, 1.875rem);
  padding-bottom: clamp(1rem, 2vw, 1.875rem);
}

/* Full-width paragraphs: spacing handled by constrained container, not paragraph element */
.main-content .paragraph--full-width-bg,
.main-content .paragraph--width--full {
  padding-top: 0 !important; /* Override base padding - constrained container handles spacing */
  padding-bottom: 0 !important;
}

/* Full-width constrained container handles spacing */
/* Note: This complements paragraph-full-width-bg.css which also sets padding */
.main-content .paragraph__constrained-container {
  padding-top: clamp(1rem, 2vw, 1.875rem);
  padding-bottom: clamp(1rem, 2vw, 1.875rem);
}

/* Full-width paragraphs with background color get top padding */
/* This ensures consistent spacing even with background colors */
.main-content .paragraph--full-width-bg.paragraph--color .paragraph__constrained-container,
.main-content .paragraph--width--full.paragraph--color .paragraph__constrained-container {
  padding-top: clamp(1rem, 2vw, 1.875rem);
}

/* Full-width colored paragraphs: add bottom margin to wrapper for spacing */
/* This creates visual space between colored background and next paragraph */
.main-content .paragraph__full-width-wrapper.paragraph--color {
  margin-bottom: clamp(1rem, 2vw, 1.875rem); /* Responsive: 16px to 30px */
}

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

/* Ensure spacing between consecutive paragraphs */
.main-content .paragraph + .paragraph {
  margin-top: 0; /* Remove any default margin, padding handles spacing */
}

/* Override for specific paragraph types that have custom spacing */
/* These can be adjusted if needed, but will inherit base spacing */
.main-content  .paragraph.p--tic {
  margin-top: 0; /* Remove old margin, use padding instead */
  margin-bottom: 0;
  padding-top: clamp(1rem, 2vw, 1.875rem);
  padding-bottom: clamp(1rem, 2vw, 1.875rem);
}