/* stylelint-disable unit-allowed-list -- dvw/dvh (dynamic viewport units) are
 * intentional for full-bleed section sizing that accounts for mobile browser
 * chrome; vw/vh would regress that sizing. */

/* ── Section layout component ───────────────────────────────────────────── */

.cb-section {
  display: block;
  width: 100%;
}

/* Inner contained width (container_type = contained) */
.cb-section__inner {
  max-width: var(--cb-section-inner-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--cb-section-inner-px, 1rem);
}

/* Narrow reading-column width (container_type = narrow) */
.cb-section__inner--narrow {
  max-width: var(--cb-section-inner-narrow-max, 760px);
  margin-inline: auto;
  padding-inline: var(--cb-section-inner-px, 1rem);
}

/* Breakout: escapes any parent container padding to reach the viewport edge */
.cb-section--breakout {
  width: 100dvw;
  margin-inline: calc(50% - 50dvw);
}

/* Background media and overlay layers are position:absolute;inset:0 within
 * [data-component-uuid] — their positioning context is the wrapper div, not the
 * section. When the section is breakout we must extend those layers to the
 * viewport edge using the same calc, overriding only the inline inset longhands
 * (top/bottom stay 0; width is derived from left + right automatically). */
[data-component-uuid]:has(> .cb-section--breakout) .canvas-builder-bg-media,
[data-component-uuid]:has(> .cb-section--breakout) .canvas-builder-bg-overlay {
  right: calc(50% - 50dvw);
  left: calc(50% - 50dvw);
}

/* The wrapper's background-color class is bounded by the wrapper's own box
 * (contained width, plus its own padding band), while a breakout section
 * only bleeds its own shorter content box. Painting the color on the section
 * itself left a gap the size of the padding — a notch in all four corners.
 * Repaint instead on a ::before sized to the wrapper's full padding box,
 * bled horizontally with the same calc as the media layers above. Applies
 * unconditionally so it also covers the color-only case (no media layer).
 *
 * z-index:-1 is load-bearing: without it, this positioned pseudo-element
 * would paint in the CSS2.1 painting-order step for positioned descendants
 * (step 6), which is AFTER ordinary non-positioned in-flow content (step 3)
 * — so plain children (headings, paragraphs) would render underneath it,
 * while any child that happens to set its own `position` would accidentally
 * paint on top. z-index:-1 moves it to step 2, which always paints before
 * step 3, so every real child paints on top unconditionally. */
[data-component-uuid]:has(> .cb-section--breakout) {
  position: relative;
}

[data-component-uuid]:has(> .cb-section--breakout)::before {
  position: absolute;
  z-index: -1;
  right: calc(50% - 50dvw);
  left: calc(50% - 50dvw);
  content: "";
  pointer-events: none;
  background-color: inherit;
  inset-block: 0;
}

/* Full-height: fills the viewport minus any fixed Drupal admin toolbar.
 * max-height prevents the section from growing taller than the viewport
 * (e.g. with overflow content).
 *
 * `calc(var(--cb-editor-vh, 1dvh) * 100)` instead of bare `100dvh`: on the
 * published frontend --cb-editor-vh is unset so this resolves to plain
 * `100dvh` as before. Inside the Canvas editor, section-height-guard.css
 * defines --cb-editor-vh from the iframe's WIDTH instead of raw `dvh`
 * (which would resolve against the iframe's own content-driven height and
 * feed an unbounded resize loop via useSyncIframeHeightToContent). See
 * section-height-guard.css for the full rationale.
 *
 * display:flex + flex-direction:column propagates the height down to
 * .cb-columns so align-content (the valign prop) has room to center/start/
 * end the grid tracks within the full-height section. */
.cb-section--full-height {
  display: flex;
  flex-direction: column;
  max-height: calc(var(--cb-editor-vh, 1dvh) * 100);
}

/* The 100vh-equivalent floor lives on its own modifier so framework height
 * utilities (min-vh-100 / min-h-screen, classes engine) stay authoritative
 * for min-height; the flex scaffolding above still applies in every engine.
 * The --vh modifier is added only by the css_vars engine, which has no
 * framework class to set min-height. See --full-height above re: --cb-editor-vh. */
.cb-section--full-height--vh {
  min-height: calc(var(--cb-editor-vh, 1dvh) * 100 - var(--drupal-displace-offset-top, 0px));
}

/* Fit content: the band collapses to the natural height of its content. */
.cb-section--h-fit {
  height: fit-content;
}

/* Custom/min heights in vh/dvh (e.g. "150vh") only risk the iframe feedback
 * loop guarded against above while inside the Canvas editor's preview
 * iframe; on the published frontend they need no cap. So
 * .cb-section--height-vh-capped is intentionally NOT styled in this
 * always-loaded stylesheet — its max-height rule lives in the editor-only
 * section_height_guard library (section-height-guard.css), attached only on
 * the editor route by CanvasBuilderTrustedCallbacks::attachEditorLibraries(). */

.cb-section--full-height > .cb-section__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.cb-section--full-height > .cb-columns,
.cb-section--full-height > .cb-section__body > .cb-columns {
  flex: 1;
}