/* Full-width region: allows block backgrounds to extend to viewport edges */
.cms-blocks-region {
  overflow-x: clip;
}

/* Inner wrapper for all block content.
   Mirrors .container max-widths but with always-on horizontal padding,
   and uses width: 100% so it never overflows narrow columns (25%, 50%). */
.cms-block-body {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (max-width: 1680px) {
  .cms-block-body {
    max-width: 1140px;
  }
}

@media screen and (max-width: 1280px) {
  .cms-block-body {
    max-width: 960px;
  }
}

@media screen and (max-width: 980px) {
  .cms-block-body {
    max-width: 100%;
  }
}

/* Blocks container: stacks rows vertically */
blocks.blocks {
  display: block;
  width: 100%;
}

/* Row wrapper: spans full viewport width, holds one logical row of blocks.
   Background color is applied here so it covers 100% width regardless of
   how many blocks share the row (50%+50%, 50%+25%+25%, etc.).
   display: flow-root creates a new block formatting context, preventing child
   margins from collapsing outside the row background area. */
.cms-block-row {
  width: 100%;
  display: flow-root;
}

/* Inner flex container for block rows. Spans full viewport width so that
   block background colors extend edge-to-edge. Content centering is handled
   by .cms-block-body (max-width + margin:auto) inside each column. */
.cms-block-row-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.cms-block-row-inner > div {
  width: var(--block-desktop-width, 100%);
  box-sizing: border-box;
}

/* Multi-block rows respect the same content max-width as single blocks.
   The flex container is centred via margin:auto so columns divide the
   constrained width rather than the full viewport. */
.cms-block-row-inner {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1680px) {
  .cms-block-row-inner {
    max-width: 1140px;
  }
}

@media screen and (max-width: 1280px) {
  .cms-block-row-inner {
    max-width: 960px;
  }
}

@media screen and (max-width: 980px) {
  .cms-block-row-inner {
    max-width: 100%;
  }
}

/* Inside row columns, cms-block-body must fill the column rather than
   self-center via margin:auto. */
.cms-block-row-inner .cms-block-body {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Default vertical spacing for all collapsible-block wrappers */
.cms-block {
  margin: 1.5rem 0;
}

/* Keep native list markers inside clipping containers without moving the text. */
.cms-block ul:not([class]) {
  padding-left: 1.5em;
}

.cms-block ul:not([class]) > li {
  padding-left: 0;
}

/* Sections are full-width containers — spacing comes from py-8 on cms-block-body,
   not from block margin (which would collapse out of the parent background). */
.cms-section {
  margin: 0;
}

/* Section header matches .cms-block vertical rhythm so padding is equal above and below */
.cms-section-header {
  margin: 1.5rem 0;
}

.cms-spacing-block {
  height: var(--spacing-height, 2rem);
}

/* Column-major cluster: SD_top + content + SD_bottom stacked in one column.
   Width follows the shared --block-desktop-width token; on mobile the column
   goes full-width so the divider and its content travel together.
   flex-direction:column ensures SD_bottom is always pushed to the bottom of the
   stretched cluster when align-items:stretch makes all columns equal height. */
.cms-block-cluster {
  width: var(--block-desktop-width, 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Content area grows to fill any extra height from align-items:stretch,
   so the background color extends all the way down to the SD_bottom.
   Explicit width:100% ensures it fills the cluster edge-to-edge regardless of
   how the cluster's own width was computed (percentage, CSS var, etc.). */
.cms-block-cluster > div:not(.cms-style-divider) {
  flex: 1;
  width: 100%;
}

/* Ensure style-divider SVG fills the full cluster width edge-to-edge. */
.cms-block-cluster .cms-style-divider {
  width: 100%;
}

/* Remove vertical spacing inside clusters so dividers butt flush against content */
.cms-block-cluster .cms-block {
  margin: 0;
}

/* No line-height or font-size so SVG stacks flush with adjacent blocks */
.cms-style-divider {
  line-height: 0;
  font-size: 0;
}

/* In all-divider rows the row height = tallest SVG (e.g. Scallop 100px).
   Shorter SVGs must align to the edge that touches the adjacent content row
   so no blank strip appears between the wave edge and the next block.
   TOP dividers sit at the bottom of their column (wave faces downward into content below).
   BOTTOM dividers sit at the top (wave faces upward into content above). */
.cms-block-row-inner--dividers > div {
  display: flex;
  flex-direction: column;
}

.cms-block-row-inner--dividers > div:has(.cms-style-divider--top) {
  justify-content: flex-end;
}

/* In mixed rows (divider + content), center divider vertically. */
.cms-block-row-inner:not(.cms-block-row-inner--dividers) > div:has(.cms-style-divider) {
  display: flex;
  align-items: center;
}

/* Remove padding/margin gap between a divider row and the adjacent content row.
   A divider row directly above suppresses the top padding and first-child block
   margin of the next row. The reverse applies for a divider row below. */
.cms-block-row:has(.cms-style-divider) + .cms-block-row .py-8 {
  padding-top: 0;
  margin-top: -1px;
}

.cms-block-row:has(.cms-style-divider) + .cms-block-row .cms-block:first-child {
  margin-top: 0;
}

.cms-block-row:has(.py-8) + .cms-block-row:has(.cms-style-divider) .py-8 {
  padding-bottom: 0;
}

.cms-block-row:has(.py-8) + .cms-block-row:has(.cms-style-divider) .cms-block:last-child {
  margin-bottom: 0;
}

/* Tablet and mobile: always full width regardless of desktop width setting */
@media (max-width: 768px) {
  .cms-block-row-inner > div {
    width: 100%;
  }

  /* Cluster columns go full-width on mobile so each divider+content pair stacks at 100% */
  .cms-block-cluster {
    width: 100%;
  }

  .cms-block {
    margin: 1rem 0;
  }

  .cms-spacing-block--horizontal {
    height: 0;
  }
}