/* ==========================================================================
   Benefits columns
   Figma "BenefitsV2 1440" (3012:95825), 1440 x 581 on the teal gradient:
   64px top and 80px bottom padding, three equal columns 33px apart (a 48px
   H3 headline over a 24px/1.2 intro, then two stacks of benefits 32px
   apart: 20px semibold title, 16px above 18px text). The corner image is 288px, flush with the
   section's bottom-left corner.

   The module is full-bleed (see _dnd.css) so that corner is the viewport
   edge, and it is the size container itself (container-type makes it the
   corner image's containing block too), so the queries measure the full
   width including gutters. Breakpoints follow the Figma frames (1121:162249
   1440, 161815 1024, 161841 768, 161867 390): the three columns hold down
   to 700px (33px apart, 24px under 1024px; 38px headline and 22px intro
   under 1024px); under 700px everything is one column, the header 48px
   above the benefits (32px apart, 18px titles 8px above 16px text). The
   corner image stays at every width: 288px, 317px under 1200px, 256px
   under 960px, 187px under 600px. The icon grid stacks under 1248px (1000px
   of content) and drops its image.

   Icon grid (Figma "Coadjute benefits" 3045:174139, 1440 x 440 on the teal
   gradient, 80px top and bottom): a 400px header (Figma 375px, which its
   399px one-line 56px H2 overflows; 22px/1.2 intro
   42px below, 353px wide) and, flush right, a 681px two-column grid, 32px
   between columns and 37px between rows. Each item is a 50px glyph in the
   text colour, 16px above a centred 24px/1.2 semibold title. Icons are the
   theme's 34px-box SVGs, whose glyph fills about 78% of the box, so the
   mask is 64px (a 50px glyph) with negative margins to put the glyph edges
   where Figma has them. The corner art is 317px and runs 88px past the
   bottom. It stacks and drops the art at the same widths as the columns.
   ========================================================================== */

.benefits-columns {
  container: benefits-columns / inline-size;
  position: relative;
  width: 100%;
  padding-block: var(--space-3xl, 64px) var(--space-5xl, 80px);
  overflow: clip;
}

.benefits-columns__inner {
  box-sizing: content-box;
  max-width: 1192px;
  margin-inline: auto;
  padding-inline: var(--section-padding-inline, 0px);
}

.benefits-columns__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-md, 32px) 33px;
}

.benefits-columns__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefits-columns__benefit {
  display: flex;
  flex-direction: column;
  gap: var(--space-s, 16px);
  margin: 0;
}

.benefits-columns .benefits-columns__title {
  font-weight: var(--font-weight-semibold, 600);
}

/* Figma Body/S is 18px/1.25; the global --line-height-normal is 1.2 */
.benefits-columns .benefits-columns__text {
  color: var(--fg-secondary);
  line-height: 1.25;
}

/* Corner image: in the module root's bottom-left corner, which is the
   section's (the module owns the section padding) */
.benefits-columns__art {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 288px;
  height: 288px;
  /* An uploaded image that isn't square keeps its shape, in the corner */
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
}

/* Parallax, like hero-split: once the section is centred in the viewport,
   the corner image drifts down by 30% of its height as the section scrolls
   up under the header, trailing the page. It only moves into the clipped
   bottom edge, so its cut edge never shows. Browsers without scroll
   timelines, and reduced motion, keep it still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .benefits-columns {
      view-timeline: --benefits-columns block;
      view-timeline-inset: var(--header-height, 86px) 0px;
    }

    .benefits-columns__art {
      animation: benefits-columns-drift linear both;
      animation-timeline: --benefits-columns;
      animation-range: cover 50% cover 100%;
    }
  }
}

@keyframes benefits-columns-drift {
  to {
    translate: 0 30%;
  }
}

.benefits-columns__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 24px);
}

.benefits-columns .benefits-columns__intro {
  color: var(--fg);
}

/* Optional button under the intro; in a narrow header (about 200px at
   768) its label wraps and the button grows, rather than pushing past the
   column */
.benefits-columns .benefits-columns__cta {
  align-self: flex-start;
  max-width: 100%;
  height: auto;
  min-height: 40px;
  white-space: normal;
}

/* Icon grid
   -------------------------------------------------------------------------- */
.benefits-columns--icon-grid {
  --icon-bg: transparent;
  --icon-fg: var(--fg);
  padding-block: var(--space-5xl, 80px);
}

.benefits-columns--icon-grid .benefits-columns__layout {
  grid-template-columns: minmax(0, 400px) minmax(0, 681px);
  justify-content: space-between;
  column-gap: var(--space-md, 32px);
}

.benefits-columns--icon-grid .benefits-columns__header {
  gap: 42px;
}

.benefits-columns--icon-grid .benefits-columns__intro {
  max-width: 353px;
}

.benefits-columns__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 37px var(--space-md, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefits-columns__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s, 16px);
  margin: 0;
  text-align: center;
}

.benefits-columns__icon {
  width: 64px;
  height: 64px;
  margin: -7px 0 -9px;
}

.benefits-columns--icon-grid .benefits-columns__title {
  font-size: 24px;
  line-height: 1.2;
}

.benefits-columns--icon-grid .benefits-columns__art {
  bottom: -88px;
  width: 317px;
  height: 317px;
}

/* Icon grid stacked: header above the grid, no corner image, once the
   content box is under 1000px (the grid would drop under 580px)
   -------------------------------------------------------------------------- */
@container benefits-columns (max-width: 1247px) {
  .benefits-columns--icon-grid .benefits-columns__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-md, 32px);
  }

  .benefits-columns--icon-grid .benefits-columns__header {
    margin-bottom: var(--space-s, 16px);
  }

  .benefits-columns--icon-grid .benefits-columns__art {
    display: none;
  }
}

/* Text columns: breakpoints
   -------------------------------------------------------------------------- */
.benefits-columns--columns .benefits-columns__intro {
  font-size: 24px;
  line-height: 1.2;
}

@container benefits-columns (max-width: 1199px) {
  .benefits-columns--columns .benefits-columns__art {
    width: 317px;
    height: 317px;
  }
}

@container benefits-columns (max-width: 1023px) {
  .benefits-columns--columns .benefits-columns__layout {
    column-gap: var(--space-sm, 24px);
  }

  .benefits-columns--columns .benefits-columns__headline {
    font-size: 38px;
    letter-spacing: -0.76px;
  }

  .benefits-columns--columns .benefits-columns__intro {
    font-size: 22px;
  }
}

@container benefits-columns (max-width: 959px) {
  .benefits-columns--columns .benefits-columns__art {
    width: 256px;
    height: 256px;
  }
}

/* One column: header, then every benefit (the two stacks read as one).
   Under 700px, so a 768px screen with a scrollbar (753px) keeps 3 columns */
@container benefits-columns (max-width: 699px) {
  .benefits-columns--columns .benefits-columns__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xl, 48px);
  }

  .benefits-columns--columns .benefits-columns__list + .benefits-columns__list {
    margin-top: -16px; /* 32px, as between benefits */
  }

  .benefits-columns--columns .benefits-columns__intro {
    font-size: 24px;
    line-height: 1.25;
  }

  .benefits-columns--columns .benefits-columns__benefit {
    gap: var(--space-2xs, 8px);
  }
}

@container benefits-columns (max-width: 599px) {
  .benefits-columns--columns .benefits-columns__art {
    width: 187px;
    height: 187px;
  }
}

@container benefits-columns (max-width: 607px) {
  .benefits-columns__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .benefits-columns--icon-grid .benefits-columns__header {
    margin-bottom: 0;
  }
}

/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .benefits-columns {
    padding-block: var(--space-xl, 48px) 56px;
  }

  /* Figma 390 frame: the 187px corner image sits under the text, not over
     it (and 80px without one) */
  .benefits-columns--columns {
    padding-bottom: var(--space-5xl, 80px);
  }

  .benefits-columns--columns:has(.benefits-columns__art) {
    padding-bottom: calc(187px + var(--space-2xl, 56px));
  }

  /* The global mobile rule takes .text-body-m to 16px, under the 18px text */
  .benefits-columns .benefits-columns__title {
    font-size: var(--font-size-body-m, 20px);
  }

  /* Figma 390 frame: 18px/1.25 titles, 16px/1.25 text */
  .benefits-columns--columns .benefits-columns__title {
    font-size: var(--font-size-md, 18px);
    line-height: 1.25;
  }

  .benefits-columns--columns .benefits-columns__text {
    font-size: var(--font-size-s, 16px);
  }
}