/**
 * @file
 * Section component: a full-width band.
 */

.xp-section {
  padding-block: var(--xp-section-spacing);
}

.xp-section--spacing-compact {
  padding-block: var(--xp-section-spacing-compact);
}

.xp-section--spacing-large {
  padding-block: var(--xp-section-spacing-large);
}

.xp-section--spacing-none {
  padding-block: 0;
}

@media (min-width: 992px) {
  .xp-section {
    padding-block: var(--xp-section-spacing-lg);
  }

  .xp-section--spacing-compact {
    padding-block: var(--xp-section-spacing-compact-lg);
  }

  .xp-section--spacing-large {
    padding-block: var(--xp-section-spacing-large-lg);
  }

  .xp-section--spacing-none {
    padding-block: 0;
  }
}

/* Padding around the contents. In a container it is added to the
   container's own side padding (the gutter), so the contents stay clear of
   the screen edge; Edge to edge has no container, so there it is the
   padding alone. */
.xp-section--pad-small > .xp-section__content {
  --xp-section-pad: 1rem;
}

.xp-section--pad-medium > .xp-section__content {
  --xp-section-pad: 1.5rem;
}

.xp-section--pad-large > .xp-section__content {
  --xp-section-pad: 3rem;
}

@media (min-width: 992px) {
  .xp-section--pad-medium > .xp-section__content {
    --xp-section-pad: 3rem;
  }

  .xp-section--pad-large > .xp-section__content {
    --xp-section-pad: 4rem;
  }
}

[class*="xp-section--pad-"] > .xp-section__content {
  padding-block: var(--xp-section-pad);
}

.xp-section__content[class*="container"] {
  padding-inline: calc(var(--bs-gutter-x) * 0.5 + var(--xp-section-pad, 0px));
}

.xp-section--edge .xp-section__content {
  padding-inline: var(--xp-section-pad, 0);
}

/* Backgrounds. Dark ones also get xp-on-dark (light text). */
.xp-section--white {
  background-color: var(--xp-bg-white);
}

.xp-section--light {
  background-color: var(--xp-bg-light);
}

.xp-section--tint {
  background-color: var(--xp-bg-tint);
}

.xp-section--primary {
  background-color: var(--xp-bg-primary);
}

.xp-section--secondary {
  background-color: var(--xp-bg-secondary);
}

.xp-section--dark {
  background-color: var(--xp-bg-dark);
}

/* Two Sections in a row with the same background read as one band, so the
   second drops its top padding instead of doubling the gap. */
.xp-section--none + .xp-section--none,
.xp-section--white + .xp-section--white,
.xp-section--light + .xp-section--light,
.xp-section--tint + .xp-section--tint,
.xp-section--primary + .xp-section--primary,
.xp-section--secondary + .xp-section--secondary,
.xp-section--dark + .xp-section--dark {
  padding-top: 0;
}

/* Edge to edge: no container (see section.twig), so the content touches the
   screen edges. With no container padding to absorb them, the Columns' row
   gutters would push the page wider than the screen, so they are removed;
   spacing above and below goes too, so a hero or an image beside text meets
   the bands around it. */
.xp-section--edge,
.xp-section--edge:first-child {
  padding-block: 0;
}

.xp-section--edge .paragraph--type--xp-layout > .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.xp-section--edge > .xp-section__content > * > .vstack {
  gap: 0 !important;
}