/* =====================================================================
   Feature carousel — horizontal-scrolling row of OneGold "feature" cards.
   Figma: Default 8707:52059 / Variant2 8707:52100 (+ matching M- mobile).
   Each card: rounded soft-blue-bordered tile, full-bleed background image,
   top-left title lock-up (gradient H3 24/1.2 + 14px subtitle). The track is a
   horizontal scroller (snap) on all breakpoints; on mobile it bleeds to the
   screen edge. Optional centred H2 + intro lead above the track.

   Two themes via the .feature-carousel--dark modifier:
     Default  — blue→navy gradient title, black subtitle (light imagery).
     Variant2 — soft-blue→white gradient title, white subtitle (dark imagery).
   Token-only; BEM, all classes prefixed .feature-carousel-.
   ===================================================================== */

.feature-carousel {
  /* ---- Component-scoped layout tokens (no global token fit) ---- */
  --fc-card-w: 295px;            /* base card width  (Figma 295px)      */
  --fc-card-w-wide: 320px;       /* wide card width  (Figma 320px)      */
  --fc-card-h: 400px;            /* base card height (Figma 400px)      */
  --fc-card-h-wide: 400px;       /* wide card height (Figma 400px)      */
  --fc-card-gap: 25px;           /* gap between cards (Figma 25px)      */
  --fc-card-pad: 40px 25px;      /* card padding (Figma 40 / 25)        */
  --fc-card-shadow: 0 4px 4px rgba(153, 204, 250, 0.25); /* soft-blue glow */
  --fc-title-gap: 10px;          /* title → subtitle gap (Figma 10px)   */

  /* Subtle white→light-grey band (Figma D - Carousel: white from 57.4% to #f0f0f0). */
  background: linear-gradient(to top, #f0f0f0 0%, var(--gray-0) 57.4%);
  padding-block: var(--home-sec-pad-y);
}

/* Optional centred CTA button below the track (Figma "Get Started Today"). */
.feature-carousel__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 14px 24px;
  border-radius: var(--radius-8);
  background: var(--og-blue);
  color: var(--gray-0);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: 1;
  letter-spacing: 0.16px;
  text-decoration: none;
  white-space: nowrap;
}
.feature-carousel__cta:hover { opacity: 0.92; }

.feature-carousel__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--redeem-adv-stack-gap);
}

/* ---- Optional heading block ---- */
.feature-carousel__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cb-list-gap);
  width: 100%;
}

.feature-carousel__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--gray-8);
  text-align: center;
  word-break: break-word;
}

.feature-carousel__intro {
  margin: 0;
  max-width: var(--ba-body-max);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  color: var(--color-text-muted);
  text-align: center;
  word-break: break-word;
}

/* ---- Track: horizontal scroller; locked to .container, snaps per card. ---- */
.feature-carousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--fc-card-gap);
  /* Stretch so all cards share the tallest card's height (equal heights). */
  align-items: stretch;
  /* Centre the cards when they all fit; fall back to start-aligned (so the
     first card is never clipped) once the row overflows and scrolls. */
  justify-content: safe center;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* clean carousel: hide native scrollbar */
}
.feature-carousel__track::-webkit-scrollbar { display: none; }

.feature-carousel__item {
  flex: 0 0 var(--fc-card-w);
  width: var(--fc-card-w);
  scroll-snap-align: start;
}
.feature-carousel__item--wide {
  flex-basis: var(--fc-card-w-wide);
  width: var(--fc-card-w-wide);
}

/* ---- Card: bordered rounded tile with full-bleed image + title lock-up. ---- */
.feature-carousel__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-stack-gap);
  /* min-height as a floor; height:100% fills the stretched track row so every
     card is the SAME height and grows to fit longer (e.g. French) copy. */
  min-height: var(--fc-card-h);
  height: 100%;
  padding: var(--fc-card-pad);
  overflow: hidden;
  background: var(--gray-0);
  border: 1px solid var(--soft-blue);
  border-radius: var(--radius-20);
  box-shadow: var(--fc-card-shadow);
  text-decoration: none;
}
.feature-carousel__item--wide .feature-carousel__card {
  height: var(--fc-card-h-wide);
}

/* Full-bleed background image, sits behind the title lock-up. */
.feature-carousel__media {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-20);
  overflow: hidden;
  pointer-events: none;
}
.feature-carousel__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Title lock-up floats above the image. */
.feature-carousel__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-title-gap);
  width: 100%;
  word-break: break-word;
}

/* Title — OG Desktop H3 (Axiforma Medium 24/1.2), blue→navy gradient text. */
.feature-carousel__title {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: 1.2;
  letter-spacing: -0.24px;
  background-image: var(--hp-comparison-eyebrow-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Subtitle — OG Desktop Medium Body (Axiforma Regular 14), black. */
.feature-carousel__subtitle {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: normal;
  color: var(--gray-8);
}

/* ---- Variant2 (dark theme): soft-blue→white title, white subtitle. ---- */
.feature-carousel--dark .feature-carousel__title {
  background-image: var(--hp-hiw-text-grad);
}
.feature-carousel--dark .feature-carousel__subtitle {
  color: var(--gray-0);
}

/* ---- Tablet (600–1023px): reduce heading type; track still scrolls. ---- */
@media (max-width: 1023.98px) {
  .feature-carousel__heading {
    font-size: var(--fs-26);
    line-height: var(--lh-36);
  }
  .feature-carousel__intro {
    font-size: var(--fs-16);
  }
}

/* ---- Large-mobile / phone (<=767.98px): track bleeds to screen edge, smaller cards. ---- */
@media (max-width: 767.98px) {
  .feature-carousel__track {
    margin-inline: calc(var(--pad-mobile) * -1);
    padding-inline: var(--pad-mobile);
    /* keep the first card off the edge under scroll-snap */
    scroll-padding-inline: var(--pad-mobile);
  }

  /* Slightly smaller cards so more peeks in on a phone. */
  .feature-carousel__title {
    font-size: var(--fs-20);
  }
}