/* experience-features — page-specific section for src/capsule/experience/
 *
 * Figma: Boukan — Capsule
 *   desktop 2668:4673 (frame 2602:865)   mobile 2935:887 (frame 2935:868)
 *
 * Deviations from the Figma source:
 *   - The heading "Les avantages de votre adhésion" (Heading/Mobile/H2, 36px)
 *     exists on the mobile frame only; the desktop frame has no counterpart.
 *     Confirmed with the client: it is dropped from 1024px up, not scaled.
 *   - Desktop lays the four items out as a 4-up row with the icon centred above
 *     the text; mobile stacks them with a 44px icon beside the text. That is a
 *     real layout change in Figma, not a responsive resize of one layout.
 *   - Tablet (768/1024) has no Figma frame: the mobile row layout is kept and
 *     placed two-up from 768px.
 */

.experience-features,
.experience-features *,
.experience-features *::before,
.experience-features *::after { box-sizing: border-box; }
.experience-features :where(p, h2, ul, li) { margin: 0; }
.experience-features ul { list-style: none; padding: 0; }

.experience-features {
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  width: 100%;
  padding: 64px 0;
  background: var(--color-surface, #FFFFFF);
  font-family: var(--font-body, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
}

.experience-features__inner {
  grid-column: 1 / 27;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 15px;
}

.experience-features__title {
  font-family: var(--font-heading, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-36, 36px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-gray-900, #101828);
}

.experience-features__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.experience-features__item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.experience-features__icon {
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.experience-features__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.experience-features__item-title {
  font-size: var(--fs-lg, 20px);
  font-weight: 500;
  line-height: 1.48;
  color: var(--color-gray-900, #101828);
}

.experience-features__item-description {
  font-size: var(--fs-base, 16px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-brand-dark-grey, #4C5155);
}

/* --------------------------------------------------------------- 768px + */

@media (min-width: 768px) {
  .experience-features__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px 56px;
  }

  .experience-features__item {
    flex: 1 1 calc(50% - 28px);
  }
}

/* -------------------------------------------------------------- 1024px + */

@media (min-width: 1024px) {
  .experience-features { padding: 88px 0; }

  .experience-features__inner {
    grid-column: 2 / 26;
    padding: 0;
  }

  .experience-features__title { display: none; }

  .experience-features__list {
    flex-wrap: nowrap;
    gap: 56px;
  }

  .experience-features__item {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .experience-features__icon { width: 64px; height: 64px; }

  .experience-features__text { width: 100%; text-align: center; }
}