/* =====================================================================
   Floating Content Module — Figma "D - Floating Content Module" 6333:57568
   (mobile "M -" variant). A pale-blue "floating" card holding an H2
   (Axiforma Medium 32/45), a body paragraph (Axiforma Regular 18/25) and an
   optional CTA (reuses .btn / .btn--primary). Padding 40, radius 8, 20px gaps.

   Variants (content flags -> root modifier classes):
     default                          -> card only, full content width
     .floating-content--has-image     -> two-column row: card + image
     .floating-content--image-left    -> image sits on the LEFT (else right)

   Content locked to the 1240 area via .container. Tokens only.
   ===================================================================== */

.floating-content {
  padding-block: var(--home-sec-pad-y); /* 80px */
}

.floating-content__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--home-hero-gap); /* 80px */
}

/* ---- The pale-blue floating card ---------------------------------- */
.floating-content__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-stack-gap); /* 20px */
  padding: var(--redeem-adv-card-pad); /* 40px */
  background: var(--pale-blue);
  border-radius: var(--radius-8);
}

/* Standalone (no image): the card is the content, capped to a comfortable
   measure and centred in the 1240 area (Figma card is 800px wide). */
.floating-content:not(.floating-content--has-image) .floating-content__card {
  width: 100%;
  max-width: var(--cta-gs-heading-w); /* 590px ~ keeps a readable measure; see note */
}
.floating-content:not(.floating-content--has-image) .floating-content__inner {
  justify-content: flex-start;
}

/* With an image: card flexes alongside the media. */
.floating-content--has-image .floating-content__card {
  flex: 1 1 0;
}

/* ---- Heading (Axiforma Medium 32/45 — OG Desktop H2) -------------- */
.floating-content__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45); /* 45px */
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Body (Axiforma Regular 18/25 — OG Desktop Large Body) -------- */
.floating-content__body {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25); /* 25px */
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- CTA — reuses .btn / .btn--primary; just pins a comfy min-width */
.floating-content__cta {
  min-width: 160px;
}

/* ---- Media (optional adjacent image) ------------------------------ */
.floating-content__media {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-content__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-8);
  object-fit: cover;
}

/* Image on the LEFT: render media before the card. */
.floating-content--image-left .floating-content__inner {
  flex-direction: row-reverse;
}

/* ---- Tablet (768–1023): Archetype C — stack image|card columns ---- */
@media (max-width: 1023.98px) {
  .floating-content {
    padding-block: 64px;
  }

  /* Stack the 2-col image|card layout */
  .floating-content--has-image .floating-content__inner,
  .floating-content--image-left .floating-content__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  /* Image moves above the card */
  .floating-content--has-image .floating-content__media {
    order: -1;
    width: 100%;
    max-height: 380px;
    overflow: hidden;
  }

  .floating-content--has-image .floating-content__card {
    flex: none;
    width: 100%;
  }

  .floating-content__heading {
    font-size: var(--fs-28);
    line-height: 1.3;
  }
}

/* ---- Large-mobile (≤767.98): tighten gap + phone stack ---- */
@media (max-width: 767.98px) {
  .floating-content--has-image .floating-content__inner,
  .floating-content--image-left .floating-content__inner {
    gap: 24px;
  }

  .floating-content--has-image .floating-content__media {
    max-height: none;
    overflow: visible;
  }

  .floating-content {
    padding-block: var(--ba-pad-y); /* 40px */
  }

  .floating-content__inner,
  .floating-content--image-left .floating-content__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--home-stack-gap); /* 20px */
  }

  .floating-content__card {
    width: 100%;
    max-width: none;
    padding: var(--education-capsule-pad); /* 20px */
    gap: var(--home-stack-gap); /* 20px */
  }
  .floating-content:not(.floating-content--has-image) .floating-content__card {
    max-width: none;
  }

  .floating-content__heading {
    font-size: var(--fs-26); /* OG Mobile H2 */
    line-height: var(--lh-36); /* 36px */
  }

  .floating-content__body {
    font-size: var(--fs-16); /* OG Mobile Normal Body */
    line-height: normal;
  }

  /* Image stacks above the card. */
  .floating-content--has-image .floating-content__media {
    order: -1;
    width: 100%;
  }
}

/* ---- Phone (≤599): revert tablet+large-mobile gap to desktop base — matches main ≤599 ---- */
@media (max-width: 599.98px) {
  .floating-content--has-image .floating-content__inner,
  .floating-content--image-left .floating-content__inner {
    gap: var(--home-stack-gap); /* 20px */
  }
}