/* Section: band across the full page width (front end and editor) */
.sg-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* m = band of the group pages: 88 px, 60 px up to 900 px wide */
  &.is-pad-none { padding-block: 0; }
  &.is-pad-s { padding-block: clamp(32px, 4vw, 48px); }
  &.is-pad-m { padding-block: 88px; }
  &.is-pad-l { padding-block: clamp(72px, 9vw, 128px); }

  &.has-bg-white { background: var(--wp--preset--color--white); }
  &.has-bg-mint { background: var(--wp--preset--color--mint); }
  &.has-bg-cream { background: var(--wp--preset--color--cream); }
  &.has-bg-grey { background: var(--wp--preset--color--grey); }
  &.has-bg-teal { background: var(--wp--preset--color--teal); }
  &.has-bg-dark { background: var(--wp--custom--dark, #0d1a33); }

  /* text on dark backgrounds */
  &.is-dark {
    color: rgba(255, 255, 255, .9);

    & :where(h1, h2, h3, h4, h5, h6, strong) { color: #fff; }
    & .sg-hl { color: var(--wp--custom--on-dark, #9fd6c8); }
    & .is-style-eyebrow { color: var(--wp--custom--on-dark-muted, #cfe7e1); }
    & .is-style-lead { color: #fff; }
    & a:where(:not(.wp-element-button)) { color: #fff; }
  }

  /* teal band: pale text, pale highlight */
  &.has-bg-teal:not(.has-image) {
    color: #dcefea;

    & .sg-hl { color: var(--wp--preset--color--teal-pale, #a8d2c9); }
    & .is-style-eyebrow { color: #cfe8e2; }
  }
}

@media (max-width: 900px) {
  .sg-section.is-pad-m { padding-block: 60px; }
}

/* sections follow each other without a gap; the band itself brings the spacing */
.is-layout-constrained > .sg-section,
.is-layout-flow > .sg-section {
  margin-block: 0;
}

.sg-section__in {
  position: relative;
  margin-inline: auto;
  padding-inline: max(var(--wp--custom--gutter, 24px), env(safe-area-inset-left, 0px));
  max-width: calc(var(--wp--style--global--wide-size, 1312px) + 2 * var(--wp--custom--gutter, 24px));

  &.is-w-content {
    max-width: calc(var(--wp--style--global--content-size, 760px) + 2 * var(--wp--custom--gutter, 24px));
  }

  & > * { margin-block: 0; }
  & > * + * { margin-block-start: var(--wp--style--block-gap, 16px); }
  & > :is(h1, h2, h3) + * { margin-block-start: 20px; }
  /* head of a band (eyebrow, heading, text) → grid below: 52 px, 36 px up to 900 px */
  & > * + :is(.wp-block-buttons, .sg-cards, .sg-figures, .sg-split, .sg-collection.is-cards, .wp-block-columns, .sg-timeline, .sg-people, .sg-bars, .sg-graphic) { margin-block-start: 52px; }
  & > .wp-block-columns + * { margin-block-start: 52px; }
}

@media (max-width: 900px) {
  .sg-section__in {
    & > * + :is(.wp-block-buttons, .sg-cards, .sg-figures, .sg-split, .sg-collection.is-cards, .wp-block-columns, .sg-timeline, .sg-people, .sg-bars, .sg-graphic) { margin-block-start: 36px; }
    & > .wp-block-columns + * { margin-block-start: 36px; }
  }
}

/* "Statement": large uppercase heading next to a text (teal band of Vision & values) */
.sg-section.is-statement {
  & h2 {
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.02;
    letter-spacing: -.01em;
    text-transform: uppercase;
  }

  & p { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; }
  &.is-dark p { color: #e6f3f0; }
  & .wp-block-columns { align-items: center; }
}

/* "Call to action": closing band, smaller heading, text and button vertically centred */
.sg-section.is-cta {
  & h2 { font-size: clamp(26px, 3.2vw, 34px); }
  & .wp-block-columns { align-items: center; }
}

/* "Image band with white card": image (or dark gradient) without shading, the content sits in white cards
   (group style "White card") */
.sg-section.is-overlay {
  background: linear-gradient(135deg, #3e4b48, #24302d);
  color: #e8efed;

  &.is-pad-m { padding-block: 72px; }
  /* shading of the template: dark diagonal gradient over the photo */
  & .sg-section__bg::after { background: linear-gradient(135deg, rgba(30, 40, 38, .86), rgba(20, 28, 26, .7)); }
  & .sg-section__in > .wp-block-group.is-style-panel { margin-top: 40px; }
  & .is-style-eyebrow { color: #cfe8e2; }
}

/* "Light background image": photo without shading, normal (dark) text (governance map in the sky) */
.sg-section.is-light.has-image .sg-section__bg::after { display: none; }

/* teal band with background image (history "story behind the name"): teal shading instead of the night gradient */
.sg-section.has-bg-teal.has-image .sg-section__bg::after {
  background: linear-gradient(180deg, rgba(14, 110, 100, .84), rgba(10, 85, 77, .88));
}

/* background image with a dark gradient from the left (e.g. the night band of the home page) */
.sg-section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(6, 14, 36, .72) 0%, rgba(6, 14, 36, .45) 42%, rgba(6, 14, 36, .05) 70%),
      linear-gradient(180deg, rgba(6, 14, 36, .35) 0%, rgba(6, 14, 36, 0) 40%);
  }
}

/* night band of the home page (image band without a variant): tall, dark gradient, narrow text top left.
   The variants (teal, white card, light image) keep the normal band height and the full content width. */
.sg-section.has-image:not(.has-bg-teal, .is-overlay, .is-light) {
  min-height: clamp(600px, 88vh, 880px);
  display: flex;
  flex-direction: column;

  &.is-pos-top { padding-block: clamp(48px, 4.5vw, 64px) 40px; }
  &.is-pos-center { justify-content: center; }
  &.is-pos-bottom { justify-content: flex-end; }
  & .sg-section__in { width: 100%; }
  & .sg-section__in > * { max-width: 62ch; }
  & h2 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.08; max-width: 22ch; }
  & h2 .sg-hl { display: block; }
  & p:not(.is-style-eyebrow) { font-size: 16.5px; line-height: 1.6; }
  & .sg-section__in > .wp-block-buttons { margin-block-start: 24px; }
}

@media (max-width: 700px) {
  .sg-section.has-image:not(.has-bg-teal, .is-overlay, .is-light) {
    min-height: 820px;

    & .sg-section__in > * { max-width: none; }
  }
}

/*
 * Background image effects (option "Image effect when scrolling"; only on the page, the editor shows the image still).
 * Fixed: the image is fixed to the window and cut to the section (clip-path) – unlike background-attachment
 * this also works with a real <img> (srcset, lazy loading) and on iOS.
 * Fixed is no animation, so it also applies with "reduce motion" (like background-attachment: fixed).
 * Parallax: CSS scroll-driven animation, no script. Browsers without it (Firefox) and "reduce motion" in the
 * system get the fixed image instead – the depth effect stays, without the moving image.
 */
.sg-section:is(.has-effect-fixed, .has-effect-parallax) .sg-section__bg { clip-path: inset(0); }

.sg-section:is(.has-effect-fixed, .has-effect-parallax) .sg-section__bg img {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sg-section.has-effect-parallax .sg-section__bg { clip-path: none; }

    .sg-section.has-effect-parallax .sg-section__bg img {
      position: static;
      inset: auto;
      height: calc(100% + 24vh);
      animation: sg-section-parallax linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes sg-section-parallax {
  from { transform: translateY(-24vh); }
  to { transform: translateY(0); }
}

@media (max-width: 700px) {
  .sg-section__bg::after {
    background: linear-gradient(180deg, rgba(6, 14, 36, .6) 0%, rgba(6, 14, 36, .45) 60%, rgba(6, 14, 36, .1) 100%);
  }
}

/* buttons on dark backgrounds: white instead of teal */
.sg-section.is-dark .wp-block-button:not(.is-style-ghost, .is-style-link, .is-style-inverse) .wp-block-button__link {
  background: #fff;
  border-color: #fff;
  color: var(--wp--preset--color--teal);
}
.sg-section.is-dark .wp-block-button.is-style-ghost .wp-block-button__link {
  border-color: #fff;
  color: #fff;
}
.sg-section.is-dark .wp-block-button.is-style-link .wp-block-button__link { color: #fff; }