/* Well-being — "Doing your best work starts with feeling supported".
   Dark Land band: eyebrow + large intro statement; expandable-looking list (left);
   supporting image + Benefits panel (right). Matches Figma node 3060:19322. */

.well-being {
  padding-block: var(--section-y);
  background: var(--color-land);
  color: var(--c-inverse);
  overflow-x: clip; /* contain the right-edge bleed of the media (100vw vs scrollbar) */
}

.well-being__inner {
  position: relative; /* anchor for the absolutely-placed media (right columns) */
  row-gap: var(--sp-3xl);
  align-items: start;
}

/* — Header (eyebrow + large statement) — */
.well-being__head {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 20px);
}

.well-being__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-h7); /* 18px */
  line-height: var(--lh-body);
  color: var(--color-white);
}

.well-being__intro {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h5); /* → 40px */
  line-height: var(--lh-snug);
  color: var(--color-alabaster);
}

/* — Expandable-looking list (left column) — */
.well-being__list {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
}

.well-being__item {
  padding-block: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid
    color-mix(in srgb, var(--color-alabaster) 55%, transparent);
}

.well-being__item:last-child {
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-alabaster) 55%, transparent);
}

.well-being__item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-h6); /* 26px */
  line-height: var(--lh-snug);
  color: var(--color-white);
}

/* +/- affordance — plain by default (plus), open rows show a minus */
.well-being__item-icon {
  position: relative;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
}

.well-being__item-icon::before,
.well-being__item-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--color-white);
  transform: translateY(-50%);
}

.well-being__item-icon::after {
  transform: translateY(-50%) rotate(90deg); /* vertical bar → makes a "+" */
}

.well-being__item.is-open .well-being__item-icon::after {
  opacity: 0; /* hide vertical bar → "-" */
}

/* Collapsible region (copy + optional image). No padding/margin of its own so
   GSAP can tween height 0 ↔ auto to a clean, gap-free close; overflow clips it. */
.well-being__item-body {
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body-sm); /* 16px */
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--color-white) 70%, transparent);
}

/* Spacing lives on the inner children so it is clipped away when height → 0. */
.well-being__item-body > * {
  margin-top: clamp(14px, 1.8vw, 20px);
}

.well-being__item-copy {
  max-width: 46ch;
}
.well-being__item-copy > :first-child {
  margin-top: 0;
}
.well-being__item-copy > :last-child {
  margin-bottom: 0;
}

/* Image shown when a row is expanded — spans the list column. */
.well-being__item-media {
  margin-inline: 0; /* drop the default <figure> left/right margin */
  overflow: hidden;
}
.well-being__item-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pre-JS / no-GSAP fallback: closed rows hide their body (JS takes over inline). */
.js .well-being__item:not(.is-open) .well-being__item-body {
  display: none;
}

/* — Benefits (middle columns, beside the list) — */
.well-being__benefits {
  grid-column: 5 / 9;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  column-gap: clamp(16px, 2vw, 28px);
  border-top: 1px solid
    color-mix(in srgb, var(--color-alabaster) 70%, transparent);
  padding-top: var(--sp-md);
}

/* — Media (right columns 9–12): image in the section's top-right corner —
   Absolutely placed and pulled up past the section's top padding (negative top)
   so it sits flush in the top-right corner, then runs down to the content bottom.
   Anchored to .well-being__inner's padding box; the column maths subtract 2
.well-being   gutters so a column here equals a real grid column. The left edge holds on
   column 9 while the right edge bleeds out to the viewport: --wb-edge-bleed is
   the container's centred side-margin ((100vw − container) / 2), added to the
   width and used as a negative right so both edges stay put but for the bleed.
   Width = 4 of 12 columns + their 3 inner gaps (+ the bleed). */
.well-being__media {
  --wb-edge-bleed: max(0px, (100vw - var(--container)) / 2);
  position: absolute;
  top: calc(-1 * var(--section-y)); /* reach the section's top edge */
  bottom: 0;
  right: calc(var(--gutter) - var(--wb-edge-bleed)); /* leave a gutter-wide gap at the viewport's right edge */
  width: calc(
    (100% - 2 * var(--gutter) - 11 * var(--grid-gap)) / 12 * 4 +
      3 * var(--grid-gap) + var(--wb-edge-bleed) - var(--gutter)
  );
  margin: 0;
  overflow: hidden; /* clip the wipe-down reveal to the frame */
}

.well-being__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional dot-motif in the media's bottom-right corner (per the design).
   Colour follows currentColor; overridden inline by the chosen colour. */
.well-being__motif {
  position: absolute;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 2; /* above the image + its reveal wipe */
  color: var(--color-white);
  pointer-events: none;
}
.well-being__motif .dot-motif {
  --motif-size: clamp(4.6875rem, 3.929rem + 3.2363vw, 7.8125rem);
}

.well-being__benefits-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-h6); /* 26px */
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.well-being__benefits-list {
  margin: 0;
  padding-left: 1.4em;
  list-style: disc;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body-main); /* → 20px */
  line-height: var(--lh-body);
  color: var(--color-white);
}

.well-being__benefits-list li {
  margin-bottom: 0.5em;
}
.well-being__benefits-list li:last-child {
  margin-bottom: 0;
}

/* — Tablet — content stays clear of the absolute media (cols 8–12) — */
@media (max-width: 1024px) {
  .well-being__head {
    grid-column: 1 / 8;
  }
  .well-being__list {
    grid-column: 1 / span 4;
  }
  .well-being__benefits {
    grid-column: 5 / 8;
  }
}

/* — Mobile (stack) — media returns to normal flow, full width — */
@media (max-width: 767px) {
  .well-being__head,
  .well-being__list,
  .well-being__benefits,
  .well-being__media {
    grid-column: 1 / -1;
  }

  .well-being__intro {
    max-width: none;
  }

  .well-being__benefits {
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 3vw, 18px);
  }

  .well-being__media {
    position: relative; /* back into normal stack flow; still anchors the motif */
    width: 100%;
  }

  .well-being__img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}