/* cms2 text module */
/* Full-bleed band, but its CONTENT sits on the site's grid rather than on a
   viewport-derived gutter. Before this the side padding was clamp(22px, 4vw,
   48px), so at 1440 the text started at x=48 while the header and footer started
   at x=80 -- a block of prose visibly out of line with the bar above it.
   The +40 is the border-box allowance the theme notes describe: this inner
   carries its own 20px gutter, so it has to be that much wider than the grid to
   put its TEXT edge on the line.

   var() with no fallback on purpose. render.php emits --cms2-max-width only for a
   site that set one; without it this declaration is invalid at computed-value
   time and max-width falls back to `none`, which is exactly the full-bleed
   behaviour those sites have today. So sites 1, 2 and 3 line up and site 4,
   which sets no width, is untouched. */
.cms2-text {
    padding-block: clamp(28px, 5vw, 64px);
    padding-inline: 20px;
    max-width: calc(var(--cms2-max-width) + 40px);
    margin-inline: auto;
    box-sizing: border-box;
}
.cms2-text-align-left { text-align: left; }
.cms2-text-align-center { text-align: center; }
.cms2-text-align-right { text-align: right; }
.cms2-text-heading {
    margin: 0 0 16px;
    font-size: clamp(24px, 3.4vw, 38px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
}
.cms2-text-body { font-size: 16px; line-height: 1.7; color: #333; max-width: var(--text-mw, 760px); }
.cms2-text-align-center .cms2-text-body { margin-left: auto; margin-right: auto; }
.cms2-text-align-right .cms2-text-body { margin-left: auto; }
.cms2-text-body p { margin: 0 0 14px; }
.cms2-text-body img { border-radius: 10px; }

.cms2-text-b .cms2-text-box {
    background: #f5f5f4;
    border-radius: 16px;
    padding: clamp(24px, 4vw, 48px);
}