/* ========= Base: keep your background colors ========= */
.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-1.paragraph--view-mode--default {
  background-color: #56a35d;
}

.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-3.paragraph--view-mode--default {
  background-color: #f5ba9a;
}

.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-4.paragraph--view-mode--default {
  background-color: #46c0f0;
}

.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-2.paragraph--view-mode--default {
  background-color: #e6f0fb;
}

.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-5.paragraph--view-mode--default {
  background-color: #f8c543;
}

/* ========= Spacing: apply to the actual layout wrapper (.structure-block) ========= */

section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-1 > .structure-block,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-2 > .structure-block,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-5 > .structure-block {
  padding-left: 0;
}

/* clearfix-1: fluid right padding */
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-1 > .structure-block {
  padding-right: clamp(16px, 8vw, 240px);
}

/* clearfix-3: fluid left padding */
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-3 > .structure-block {
  padding-left: clamp(16px, 6vw, 130px);
}

/* clearfix-2: flex row with fluid padding + gap */
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-2 > .structure-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding-left: clamp(16px, 10vw, 210px);
  gap: clamp(16px, 12vw, 283px);
}

/* clearfix-5: fluid right padding */
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-5 > .structure-block {
  padding-right: clamp(16px, 10vw, 340px);
}

/* ========= Laptop/tablet: tighten spacing (but KEEP side-by-side) ========= */
@media (max-width: 1280px) {
  section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-2 > .structure-block {
    gap: 24px;
    padding-left: 24px;
  }

  section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-1 > .structure-block,
  section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-5 > .structure-block {
    padding-right: 24px;
  }

  section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-3 > .structure-block {
    padding-left: 24px;
  }
}

/* ========= Typography: responsive text sizing ========= */

/* Base text size for everything inside these blocks */
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-1,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-2,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-3,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-4,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-5 {
  font-size: clamp(14px, 0.95vw, 18px);
  line-height: 1.45;
}

/* Paragraph/body text explicitly */
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-1 p,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-2 p,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-3 p,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-4 p,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-5 p {
  font-size: 1em;
  line-height: 1.55;
}

/* Headings: scale smoothly */
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-1 h1,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-2 h1,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-3 h1,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-4 h1,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-5 h1 {
  font-size: clamp(24px, 2.4vw, 52px);
  line-height: 1.1;
}

section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-1 h2,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-2 h2,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-3 h2,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-4 h2,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-5 h2 {
  font-size: clamp(20px, 1.8vw, 38px);
  line-height: 1.2;
}

section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-1 h3,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-2 h3,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-3 h3,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-4 h3,
section.paragraph.paragraph--type--paragraph-block.no-pad.clearfix-5 h3 {
  font-size: clamp(18px, 1.4vw, 28px);
  line-height: 1.25;
}

/* ========= Global flex rules: keep right-side text from going off-screen (WITHOUT stacking) ========= */

/* Ensure structure-block is a row layout, and never exceeds viewport */
section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] > .structure-block {
  display: flex;
  flex-wrap: nowrap;       /* KEEP side-by-side */
  align-items: center;
  max-width: 100%;
  box-sizing: border-box;
}

/* Critical: allow children (esp text) to shrink */
section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] > .structure-block > * {
  min-width: 0;            /* KEY for flex overflow */
  box-sizing: border-box;
}

/* Assume the right-side text column is last child */
section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] > .structure-block > :last-child {
  flex: 1 1 0;             /* text takes remaining space and can shrink */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Optional: prevent the LEFT visual column(s) shrinking too much */
section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] > .structure-block > :first-child {
  flex: 0 0 auto;
}

/* Only stack on truly small screens */
@media (max-width: 768px) {
  section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] > .structure-block {
    flex-wrap: wrap;
  }

  section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] > .structure-block > :first-child,
  section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] > .structure-block > :last-child {
    flex: 1 1 100%;
  }
}

/* Give the coloured blocks real top/bottom padding so content never hugs the edge */
section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] > .structure-block {
  padding-top: clamp(20px, 3vw, 60px);
  padding-bottom: clamp(20px, 3vw, 60px);
}

/* Make list text match normal paragraph text */
section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] ul,
section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] ol {
  font-size: 1em;
  line-height: 1.55;
}

/* Force list items to inherit instead of using theme defaults */
section.paragraph.paragraph--type--paragraph-block.no-pad[class*="clearfix-"] li {
  font-size: inherit;
  line-height: inherit;
}