/* Calm Balance: document scroll, straight center, independent fixed outer background. */
.cbl-layout-active { overflow-x: clip; }
.cbl-three-panel {
  --cbl-center-width: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--cbl-center-width)) minmax(0, 1fr);
  align-items: start; gap: 0; width: 100vw; max-width: none;
  position: relative; left: 50%; transform: translateX(-50%);
  margin: 0; padding: 0; background-color: #f4f1ed; background-attachment: fixed;
}
.cbl-three-panel, .cbl-three-panel *, .cbl-three-panel *::before, .cbl-three-panel *::after { box-sizing: border-box; }
.cbl-three-panel__side { min-width: 0; overflow-wrap: anywhere; padding: 28px clamp(12px, 2vw, 28px); background: transparent;
  position: sticky; top: 16px; align-self: start;
}
body.admin-bar .cbl-three-panel__side { top: 48px; }
.cbl-three-panel__center {
  position: relative; min-width: 0; min-height: 100vh; min-height: 100svh;
  margin: 0; padding: 0 20px 32px; border: 0; border-radius: 0; box-shadow: none;
  overflow-wrap: anywhere; background-color: #ffffff;
}
.cbl-three-panel__side > :first-child, .cbl-three-panel__center > :first-child { margin-top: 0; }
.cbl-three-panel__side > :last-child, .cbl-three-panel__center > :last-child { margin-bottom: 0; }
.cbl-three-panel__center img { max-width: 100%; height: auto; }
.cbl-three-panel__center > .alignfull { width: calc(100% + 40px); max-width: none; margin-left: -20px; margin-right: -20px; left: auto; }
@media (max-width: 1100px) and (min-width: 768px) {
  .cbl-three-panel { grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--cbl-center-width), 60vw)) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .cbl-three-panel { display: block; width: 100%; left: auto; transform: none; }
  .cbl-three-panel__side { display: none !important; }
  .cbl-three-panel__center { width: 100%; margin: 0; padding: 0 12px 16px; border-radius: 0; }
  .cbl-three-panel__center > .alignfull { width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cbl-three-panel { scroll-behavior: auto; }
}

/* Full-bleed Gutenberg image blocks while preserving text padding. */
.cbl-three-panel__center > .wp-block-image,
.cbl-three-panel__center > .wp-block-cover,
.cbl-three-panel__center > .wp-block-gallery {
  width: calc(100% + 40px);
  max-width: none;
  margin-left: -20px;
  margin-right: -20px;
}
.cbl-three-panel__center > .wp-block-image img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
@media (max-width: 767px) {
  .cbl-three-panel__center > .wp-block-image,
  .cbl-three-panel__center > .wp-block-cover,
  .cbl-three-panel__center > .wp-block-gallery {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
  }
}

/* Full-width images only when they are standalone blocks in the central content.
   Images nested in columns, groups and other layouts keep their natural size. */
.cbl-layout-active .cbl-three-panel__center > :is(.wp-block-image, .wp-block-cover, .wp-block-gallery) {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: var(--cbl-center-width);
  max-width: var(--cbl-center-width);
  margin-left: 0;
  margin-right: 0;
}
.cbl-layout-active .cbl-three-panel__center > .wp-block-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media (max-width: 1100px) and (min-width: 768px) {
  .cbl-layout-active .cbl-three-panel__center > :is(.wp-block-image, .wp-block-cover, .wp-block-gallery) {
    width: min(var(--cbl-center-width), 60vw);
    max-width: min(var(--cbl-center-width), 60vw);
  }
}
@media (max-width: 767px) {
  .cbl-layout-active .cbl-three-panel__center > :is(.wp-block-image, .wp-block-cover, .wp-block-gallery) {
    width: 100%;
    max-width: 100%;
  }
}

/* Keep the theme footer intact; remove the theme's patterned background from
   the pre-footer area while the body wrapper provides the three-panel colors. */
body.cbl-layout-active .l-footer { margin-top: 0 !important; }
body.cbl-layout-active .l-footer__before,
body.cbl-layout-active .l-footer__widgetArea { background-image: none !important; }