/* =====================================================================
   Content Card Module — Figma "D - Content Card Module" (6190:24664).
   Centred H2 (Axiforma Medium 32/45) over a row of content cards on a Pale
   Blue band, with an optional pair of CTAs below. Each card: media image
   (rounded, ~150px tall), a coloured content-type tag pill (12/Medium
   charcoal), an H3 title (Axiforma Medium 24/1.2), a body paragraph
   (Axiforma Regular 18/25) and a SemiBold meta line. Image-position is a
   content-driven variant (top default / left / right). Content locked to the
   1240 area via .container. Tokens only.
   ===================================================================== */

.content-card-module {
  background: var(--pale-blue);
  padding-block: 40px;
}

.content-card-module__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cb-block-gap); /* 40px */
}

/* ---- Heading (Axiforma Medium 32/45 — OG Desktop H2) ---- */
.content-card-module__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;
}

/* ---- Card row: equal-width cards side by side ---- */
.content-card-module__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: var(--home-stack-gap); /* 20px */
  width: 100%;
}

/* ---- Card: white, 20px radius, 20px padding ---- */
.content-card-module__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--home-stack-gap); /* 20px */
  padding: var(--home-compare-pad); /* 20px */
  background: var(--gray-0);
  border-radius: var(--radius-20);
}

/* Optional whole-card link (set href on an item). Carries the column layout
   so a linked card looks identical to a static one; image-top usage only. */
.content-card-module__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--home-stack-gap);
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.content-card-module__link:hover .content-card-module__title,
.content-card-module__link:focus-visible .content-card-module__title {
  text-decoration: underline;
}

/* ---- Media: rounded image block, ~150px tall ---- */
.content-card-module__media {
  width: 100%;
  flex: none;
}
.content-card-module__image {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-8);
  background: var(--gray-7); /* placeholder tile while loading */
}

/* ---- Content column ---- */
.content-card-module__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--redeem-adv-content-gap); /* 10px */
  width: 100%;
}

/* ---- Content-type tag pill (12/Medium charcoal, gold by default) ---- */
.content-card-module__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 15px;
  border-radius: var(--radius-4);
  background: var(--badge-gold);
  color: var(--charcoal);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: normal;
  letter-spacing: 0.12px;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ---- Title (Axiforma Medium 24/1.2 — OG Desktop H3) ---- */
.content-card-module__title {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--gray-8);
  word-break: break-word;
}

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

/* ---- Meta line (Axiforma SemiBold 18) ---- */
.content-card-module__meta {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  line-height: normal;
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- CTAs: row of buttons, centred ---- */
.content-card-module__ctas {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--cb-block-gap); /* 40px */
  flex-wrap: wrap;
}
/* Match the Figma button: 200px min, 12/24 padding, 16/Medium, 0.16 tracking.
   Grows for longer labels (e.g. "Browse the full Gold Guide") so text never clips. */
.content-card-module__cta.btn--primary {
  min-width: 200px;
  width: auto;
  max-width: 100%;
  padding: var(--btn-pad-y-lg) var(--btn-pad-x-lg);
  background: var(--og-blue);
  font-weight: var(--fw-medium);
  letter-spacing: 0.16px;
}
/* Secondary CTA: white fill, charcoal outline + label. */
.content-card-module__cta--secondary.btn--primary {
  background: var(--gray-0);
  border: var(--redeem-rule-w) solid var(--charcoal);
  color: var(--charcoal);
}

/* ---- Variant: image beside content (left / right) ---- */
.content-card-module--image-left .content-card-module__card,
.content-card-module--image-right .content-card-module__card {
  flex-direction: row;
  align-items: center;
}
.content-card-module--image-right .content-card-module__card {
  flex-direction: row-reverse;
}
.content-card-module--image-left .content-card-module__media,
.content-card-module--image-right .content-card-module__media {
  width: 40%;
  flex: none;
}

/* ---- Tablet (600–1023px): card row → 2-up; image-side variants collapse to
   image-top so the two cards share horizontal space cleanly. ---- */
@media (max-width: 1023.98px) {
  .content-card-module__heading {
    font-size: clamp(26px, 4vw, var(--fs-32));
    line-height: 1.35;
  }
  .content-card-module__row {
    flex-wrap: wrap;
  }
  .content-card-module__card {
    flex: 1 1 calc(50% - var(--home-stack-gap) / 2);
    min-width: 260px;
  }
  /* Image-beside variants → image-top at tablet for consistent 2-up layout */
  .content-card-module--image-left .content-card-module__card,
  .content-card-module--image-right .content-card-module__card {
    flex-direction: column;
    align-items: center;
  }
  .content-card-module--image-left .content-card-module__media,
  .content-card-module--image-right .content-card-module__media {
    width: 100%;
  }
}

/* ---- Responsive (mobile: stack cards + CTAs, reduce heading) ---- */
@media (max-width: 767.98px) {
  .content-card-module__heading {
    font-size: clamp(24px, 6.4vw, var(--fs-32));
    line-height: 1.3;
  }
  .content-card-module__row {
    flex-direction: column;
  }
  /* On mobile every variant returns to a stacked image-top card. */
  .content-card-module--image-left .content-card-module__card,
  .content-card-module--image-right .content-card-module__card {
    flex-direction: column;
    align-items: center;
  }
  .content-card-module--image-left .content-card-module__media,
  .content-card-module--image-right .content-card-module__media {
    width: 100%;
  }
  .content-card-module__title {
    font-size: var(--fs-20);
  }
  .content-card-module__body,
  .content-card-module__meta {
    font-size: var(--fs-16);
  }
  .content-card-module__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: var(--home-stack-gap); /* 20px */
    width: 100%;
  }
  .content-card-module__cta.btn--primary {
    width: 100%;
  }
}