/**
 * acf-content-columns — Centered header with multi-column list content.
 */

.acf-content-columns {
  position: relative;
  overflow: hidden;
}

.acf-content-columns:not([class*="bpa-local-grass-color--"]) {
  background-color: var(--color-light);
}

.acf-content-columns.alignfull,
.acf-content-columns.alignwide {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
}

.acf-content-columns__wave {
  display: block;
  line-height: 0;
}

.acf-content-columns__wave--top {
  margin-inline: 0;
  inline-size: 100%;
}

.acf-content-columns__wave--top svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 50px; /* styleguide-exception: wave decorative min */
  /* Unflipped so gallery gray sits on top and curves into the white checklist. */
}

.acf-content-columns__body {
  position: relative;
  padding-inline: var(--block-pad-inline);
  overflow: hidden;
  background-color: inherit;
}

.acf-content-columns:not([class*="bpa-local-grass-color--"]) .acf-content-columns__body {
  background-color: var(--color-light);
}

.acf-content-columns__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-inline: 0;
  padding-block: var(--block-pad-block);
}

.acf-content-columns--has-top-wave .acf-content-columns__container {
  padding-block-start: var(--space-2xl);
}

.acf-content-columns--has-bottom-wave .acf-content-columns__container {
  padding-block-end: var(--space-2xl);
}

.acf-content-columns__wave--bottom {
  margin-inline: calc(-1 * var(--block-pad-inline));
  inline-size: calc(100% + (2 * var(--block-pad-inline)));
}

.acf-content-columns__wave--bottom svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 50px; /* styleguide-exception: wave decorative min */
  transform: scaleY(-1);
}

.acf-content-columns:has(> .bpa-local-grass-divider):not(.acf-content-columns--has-bottom-wave) .acf-content-columns__body {
  padding-block-end: var(--space-xl);
}

.acf-content-columns--has-bottom-wave:has(> .bpa-local-grass-divider) > .bpa-local-grass-divider {
  margin-block-start: 0;
}

/* Header — centered serif title + intro. */
.acf-content-columns__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  text-align: center;
}

.acf-content-columns h2.acf-content-columns__heading {
  margin: 0;
  inline-size: 100%;
  max-inline-size: none;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-brand-forest);
}

.acf-content-columns__intro {
  max-inline-size: 48rem; /* styleguide-exception: intro column max width */
  margin: 0;
  color: var(--color-black);
  font-weight: var(--font-weight-normal);
}

.acf-content-columns__intro p {
  margin: 0;
}

/*
 * Desktop 3-up via flex wrap. Leftover last-row items (1 of 4, 2 of 5, etc.)
 * stay the same column width and center as a group.
 */
.acf-content-columns__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-8);
  inline-size: 100%;
}

.acf-content-columns__col {
  flex: 0 0 calc((100% - (2 * var(--spacing-8))) / 3);
  max-inline-size: calc((100% - (2 * var(--spacing-8))) / 3);
  min-inline-size: 0;
}

.acf-content-columns__col-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  min-inline-size: 0;
}

.acf-content-columns__col-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem; /* styleguide-exception: 24px icon well */
  block-size: 1.5rem;
  margin-block-start: 0.125rem;
}

.acf-content-columns__col-icon svg,
.acf-content-columns__col-icon-img {
  display: block;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  object-fit: contain;
}

.acf-content-columns__col-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-4);
  min-inline-size: 0;
}

.acf-content-columns h3.acf-content-columns__col-heading {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-brand-forest);
}

.acf-content-columns__col-body {
  margin: 0;
  color: var(--color-black);
}

.acf-content-columns__col-body > :first-child {
  margin-block-start: 0;
}

.acf-content-columns__col-body > :last-child {
  margin-block-end: 0;
}

.acf-content-columns__col-body p {
  margin: 0 0 var(--space-sm);
}

.acf-content-columns__col-body p:last-child {
  margin-block-end: 0;
}

.acf-content-columns__col-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.acf-content-columns__col-body li {
  position: relative;
  margin: 0 0 var(--space-sm);
  padding-inline-start: var(--space-sm);
}

.acf-content-columns__col-body li:last-child {
  margin-block-end: 0;
}

.acf-content-columns__col-body li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: 0;
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-black);
}

/* Optional CTAs — centered under the column grid. */
.acf-content-columns__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.acf-content-columns__actions .bpa-button--secondary {
  gap: var(--space-xs);
}

.acf-content-columns__button-icon {
  flex-shrink: 0;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--color-brand-green);
}

/*
 * One column: heading on the left, the list on the right.
 * Tracks are 608 and 600 inside the 1280 column, with 72px between them.
 * Two or more columns keep the centered grid above.
 */
.acf-content-columns--single .acf-content-columns__container {
  display: grid;
  grid-template-columns: minmax(0, 608fr) minmax(0, 600fr);
  column-gap: 72px; /* styleguide-exception: Figma gap between heading and list */
  align-items: center;
}

.acf-content-columns--single .acf-content-columns__header {
  align-items: flex-start;
  text-align: start;
}

.acf-content-columns--single h2.acf-content-columns__heading {
  text-align: start;
}

.acf-content-columns--single .acf-content-columns__intro {
  max-inline-size: none;
}

.acf-content-columns--single .acf-content-columns__grid {
  display: block;
}

.acf-content-columns--single .acf-content-columns__col {
  flex: none;
  inline-size: 100%;
  max-inline-size: none;
}

.acf-content-columns--single .acf-content-columns__actions {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .acf-content-columns--single .acf-content-columns__container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xl);
  }
}

/* Handoff — dark promo band above → white section. */
.acf-content-columns--has-top-wave {
  margin-block-start: -4px; /* styleguide-exception: seam cover from dark band above */
}

@media (max-width: 1279px) {
  .acf-content-columns__grid {
    gap: var(--space-lg);
  }

  /* Tablet 2-up. A leftover third column centers on the next row. */
  .acf-content-columns__col {
    flex-basis: calc((100% - var(--space-lg)) / 2);
    max-inline-size: calc((100% - var(--space-lg)) / 2);
  }
}

@media (max-width: 640px) {
  .acf-content-columns__body {
    padding-inline: var(--space-sm);
  }

  .acf-content-columns__wave--bottom {
    margin-inline: calc(-1 * var(--space-sm));
    inline-size: calc(100% + (2 * var(--space-sm)));
  }

  .acf-content-columns__grid {
    gap: var(--space-lg);
  }

  .acf-content-columns__col {
    flex-basis: 100%;
    max-inline-size: none;
  }

  .acf-content-columns h2.acf-content-columns__heading {
    font-size: var(--font-size-3xl);
  }

  .acf-content-columns__actions {
    flex-direction: column;
    align-items: stretch;
    inline-size: 100%;
    max-inline-size: 400px; /* styleguide-exception: mobile CTA stack */
    margin-inline: auto;
  }

  .acf-content-columns__actions .bpa-button {
    justify-content: center;
  }
}

/* Holiday Lighting. Red band, white copy, dot field behind the text. */
.acf-content-columns.acf-content-columns--holiday-dots {
  background-color: #a30022;
}

.acf-content-columns--holiday-dots .acf-content-columns__dots {
  position: absolute;
  z-index: 0;
  left: 0;
  top: -312px; /* styleguide-exception: Figma dot field starts above the band */
  inline-size: 100%;
  block-size: calc(100% + 312px);
  pointer-events: none;
  background-image: var(--acf-content-columns-dots);
  background-repeat: repeat;
  background-size: 272.58px 213.37px; /* styleguide-exception: one Figma dot repeat */
}

.acf-content-columns--holiday-dots .acf-content-columns__body {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.acf-content-columns--holiday-dots h2.acf-content-columns__heading,
.acf-content-columns--holiday-dots h2.acf-content-columns__heading *,
.acf-content-columns--holiday-dots .acf-content-columns__intro,
.acf-content-columns--holiday-dots h3.acf-content-columns__col-heading,
.acf-content-columns--holiday-dots .acf-content-columns__col-body {
  color: #fff;
}

/* List bullets stay. On the red band they are white so they still read. */
.acf-content-columns--holiday-dots .acf-content-columns__col-body li::before {
  background-color: #fff;
}