/**
 * @file
 * Vertical rhythm between Layout Builder sections and the blocks inside them.
 * Adjacent-sibling selectors only, so nothing is added before the first sibling
 * or after the last.
 */

/**
 * 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);
}

.layout + .layout {
  margin-block-start: var(--ln-section-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);
}

/**
 * Space before the site footer. Padding, not margin: a bottom margin with
 * nothing below it collapses out through ancestors this module does not own.
 */
.layout:last-child {
  padding-block-end: var(--ln-section-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;
}