/**
 * @file
 * Vertical rhythm between Layout Builder sections and the blocks inside them.
 * Every section pads itself; an adjacent-sibling rule drops the top half where
 * two sections share a background, so the pair still reads as one gap.
 */

/**
 * 48rem is the single page breakpoint. A media query cannot read a custom
 * property, so the number is duplicated in every consumer — grep for it. 64rem
 * (carousel) and 62rem (button) are deliberately component-level, not the page
 * breakpoint.
 */

:root {
  /* A full break between sections; a smaller step between blocks in one section. */
  --ln-section-gap: clamp(48px, 8vw, 96px);
  --ln-block-gap: clamp(40px, 5vw, 72px);
}

/* Padding, not margin, so a section's background colour covers its own gap. */
.layout {
  padding-top: var(--ln-section-gap);
  padding-bottom: var(--ln-section-gap);
}

/* One gap between same-background sections, two across a colour change — that
   doubling is what sets a band apart. Unclassed multi-column counts as white.
   A glow section is excluded on the left: the pair after it keeps both gaps so
   the bleed has room. */
.layout:not([class*="section-background-"]):not(.section-glow) + .layout:not([class*="section-background-"]),
.layout:not([class*="section-background-"]):not(.section-glow) + .section-background-white,
.section-background-white:not(.section-glow) + .layout:not([class*="section-background-"]),
.section-background-white:not(.section-glow) + .section-background-white,
.section-background-grey:not(.section-glow) + .section-background-grey,
.section-background-creme:not(.section-glow) + .section-background-creme {
  padding-top: 0;
}

/* The first section sits flush under the site header; the hero and carousel
   set their own top inset. */
.layout:first-child {
  padding-top: 0;
}

/**
 * Multi-column sections are capped at the page container, because a block's own
 * __inner caps at 1440 inside its column — in a 960px column that never binds,
 * so two columns would otherwise span the whole viewport.
 *
 * No padding here: each block's gutter already insets its content, so adding it
 * would double up. One-column sections are deliberately absent — the hero and
 * carousel backgrounds have to span the viewport.
 */
.layout--twocol-section,
.layout--threecol-section,
.layout--fourcol-section {
  max-inline-size: var(--ln-container-max, 1440px);
  margin-inline: auto;

  /**
   * row-gap only, not gap: these layouts are wrapping flex, so this applies
   * between flex LINES and is a no-op while the columns share one. Stacked
   * regions then match two blocks stacked in a one-column section, which is
   * what a multi-column section collapses to.
   *
   * A column-gap here would instead fight core's 50%/33%/25% bases and reflow
   * the desktop columns.
   */
  row-gap: var(--ln-block-gap);
}

/* Convention this implies: one section per visual band, so blocks that read as a
   unit go in the same section. */
.layout__region > * + * {
  margin-block-start: var(--ln-block-gap);
}

/* Keep anchor targets clear of the sticky site header. */
.layout__region [id] {
  scroll-margin-top: calc(var(--ln-site-header-height, 60px) + 24px);
}

/**
 * scroll-behavior only affects fragment navigation when set on the ROOT element;
 * a value on body is ignored for the viewport. The class keeps it off Site
 * Studio pages.
 */
@media (prefers-reduced-motion: no-preference) {
  html.ln-lb-page {
    scroll-behavior: smooth;
  }
}

/**
 * Layout Builder's region label and Add-block link are direct children of the
 * region, so they are siblings of the blocks and are exempt from the rhythm.
 *
 * @see \Drupal\layout_builder\Element\LayoutBuilder::buildAdministrativeSection()
 */
.layout-builder__region > .layout-builder__add-block,
.layout__region-info + * {
  margin-block-start: 0;
}

/**
 * The sticky CTA's wrapper is a zero-height sibling, so the rule above opens an
 * unexplained gap. Doubled class to (0,3,0) beats .layout__region > * + * at
 * (0,2,0) regardless of stylesheet order.
 */
.layout__region > .ln-block--sticky-cta.ln-block--sticky-cta {
  margin-block-start: 0;
}

/* Each class name is also the stored value of background_color. */
.section-background-white {
  background-color: #ffffff;
}

.section-background-grey {
  background-color: var(--ln-color-slate, #242a2a);
}

.section-background-creme {
  background-color: var(--ln-color-creme, #fbf6f0);
}

/**
 * filter, not backdrop-filter: the section behind is a flat color, so a backdrop
 * blur has nothing to sample. Sizes are retuned from Figma's 1023x281 at blur
 * 390, which spreads wider than the comp reads.
 *
 * isolation: position alone opens no stacking context, so the -1 below would
 * drop behind an ancestor's background.
 */
.section-glow {
  --ln-glow-inline-size: min(1088px, 85%);
  --ln-glow-block-size: 51%;
  --ln-glow-blur: 76px;

  position: relative;
  isolation: isolate;
  /* Load-bearing: without it the blur washes down over the next section. */
  overflow: hidden;
}

.section-glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Centred on the section's bottom edge, so overflow: hidden above leaves
     only the top half showing. */
  inset-block-end: calc(var(--ln-glow-block-size) / -2);
  inset-inline: 0;
  inline-size: var(--ln-glow-inline-size);
  block-size: var(--ln-glow-block-size);
  margin-inline: auto;
  border-radius: 1000px;
  background: #ced3d680;
  filter: blur(var(--ln-glow-blur));
  pointer-events: none;
}