/**
 * CF Featured Report — six-mode framework per CF_MODULE_GUIDE §8.
 *
 * Modes (matches the family):
 *   .cf-featured-report--light-sky     Briefing-grade default
 *   .cf-featured-report--light-slate   Analytical / operational
 *   .cf-featured-report--light-paper   Editorial / long-form (default for this section)
 *   .cf-featured-report--light-mint    Positive outcome
 *   .cf-featured-report--dark-navy     Brand authority anchor
 *   .cf-featured-report--dark-ops      GSOC / command center
 *
 * Override variables:
 *   --cffr-bg              section background
 *   --cffr-text            body text color
 *   --cffr-heading         headline color
 *   --cffr-eyebrow         eyebrow / secondary-eyebrow color
 *   --cffr-cta-bg          CTA background
 *   --cffr-cta-text        CTA text color
 *   --cffr-cta-bg-hover    CTA background on hover
 *   --cffr-rule            divider above the secondary block
 *   --cffr-visual-bg       background panel of the image / SVG cover
 *
 * The fallback SVG cover uses its own variables so it tracks the theme:
 *   --cffr-cover-bg, --cffr-cover-paper, --cffr-cover-stroke,
 *   --cffr-cover-meta, --cffr-cover-rule
 */

.cf-featured-report {
  /* Base defaults = light_paper. Mode classes below override. */
  --cffr-bg: var(--cf-white);
  --cffr-text: var(--cf-blue-gray);
  --cffr-heading: var(--cf-navy);
  --cffr-eyebrow: var(--cf-navy);
  --cffr-cta-bg: var(--cf-navy);
  --cffr-cta-text: var(--cf-white);
  --cffr-cta-bg-hover: var(--cf-sky-mid);
  --cffr-btn-ghost: var(--cf-navy);
  --cffr-btn-ghost-hov: var(--cf-sky-mid);
  --cffr-rule: var(--cf-blue-gray-tint);
  --cffr-visual-bg: var(--cf-sky);

  --cffr-cover-bg: var(--cf-sky);
  --cffr-cover-paper: var(--cf-white);
  --cffr-cover-stroke: var(--cf-navy);
  --cffr-cover-meta: var(--cf-blue-gray);
  --cffr-cover-rule: var(--cf-leaf);

  background: var(--cffr-bg);
  color: var(--cffr-text);
  padding: 120px 0;
  font-family: var(--cf-font-stack);
  box-sizing: border-box;
}

.cf-featured-report *,
.cf-featured-report *::before,
.cf-featured-report *::after {
  box-sizing: inherit;
}

/* ── Light: Sky ─────────────────────────────────────────────────────── */
.cf-featured-report--light-sky {
  --cffr-bg: var(--cf-sky-light);
  --cffr-text: var(--cf-blue-gray);
  --cffr-heading: var(--cf-navy);
  --cffr-eyebrow: var(--cf-navy);
  --cffr-cta-bg: var(--cf-navy);
  --cffr-cta-text: var(--cf-white);
  --cffr-cta-bg-hover: var(--cf-sky-mid);
  --cffr-btn-ghost: var(--cf-navy);
  --cffr-btn-ghost-hov: var(--cf-sky-mid);
  --cffr-rule: var(--cf-blue-gray-tint);
  --cffr-visual-bg: var(--cf-sky);
}

/* ── Light: Slate ───────────────────────────────────────────────────── */
.cf-featured-report--light-slate {
  --cffr-bg: var(--cf-blue-gray-lightest);
  --cffr-text: var(--cf-blue-gray);
  --cffr-heading: var(--cf-navy);
  --cffr-eyebrow: var(--cf-navy);
  --cffr-cta-bg: var(--cf-navy);
  --cffr-cta-text: var(--cf-white);
  --cffr-cta-bg-hover: var(--cf-sky-mid);
  --cffr-btn-ghost: var(--cf-navy);
  --cffr-btn-ghost-hov: var(--cf-sky-mid);
  --cffr-rule: var(--cf-blue-gray-tint);
  --cffr-visual-bg: var(--cf-sky);
}

/* ── Light: Paper (default for this section) ────────────────────────── */
.cf-featured-report--light-paper {
  --cffr-bg: var(--cf-white);
  --cffr-text: var(--cf-blue-gray);
  --cffr-heading: var(--cf-navy);
  --cffr-eyebrow: var(--cf-navy);
  --cffr-cta-bg: var(--cf-navy);
  --cffr-cta-text: var(--cf-white);
  --cffr-cta-bg-hover: var(--cf-sky-mid);
  --cffr-btn-ghost: var(--cf-navy);
  --cffr-btn-ghost-hov: var(--cf-sky-mid);
  --cffr-rule: var(--cf-blue-gray-tint);
  --cffr-visual-bg: var(--cf-sky);
}

/* ── Light: Mint ────────────────────────────────────────────────────── */
.cf-featured-report--light-mint {
  --cffr-bg: var(--cf-apple-pale);
  --cffr-text: var(--cf-blue-gray);
  --cffr-heading: var(--cf-navy);
  --cffr-eyebrow: var(--cf-navy);
  --cffr-cta-bg: var(--cf-navy);
  --cffr-cta-text: var(--cf-white);
  --cffr-cta-bg-hover: var(--cf-leaf);
  --cffr-btn-ghost: var(--cf-navy);
  --cffr-btn-ghost-hov: var(--cf-leaf);
  --cffr-rule: var(--cf-sky-mid);
  --cffr-visual-bg: var(--cf-apple-pale);
}

/* ── Dark: Navy ─────────────────────────────────────────────────────── */
.cf-featured-report--dark-navy {
  --cffr-bg: var(--cf-navy);
  --cffr-text: var(--cf-navy-lightest);
  --cffr-heading: var(--cf-navy-lightest);
  --cffr-eyebrow: var(--cf-leaf);
  --cffr-cta-bg: var(--cf-sky);
  --cffr-cta-text: var(--cf-navy);
  --cffr-cta-bg-hover: var(--cf-leaf);
  --cffr-btn-ghost: var(--cf-navy-lightest);
  --cffr-btn-ghost-hov: var(--cf-sky);
  --cffr-rule: rgba(255, 255, 255, 0.15);
  --cffr-visual-bg: var(--cf-navy-lifted);

  --cffr-cover-bg: var(--cf-navy-lifted);
  --cffr-cover-paper: var(--cf-navy);
  --cffr-cover-stroke: var(--cf-sky);
  --cffr-cover-meta: var(--cf-navy-lightest);
  --cffr-cover-rule: var(--cf-leaf);
}

/* ── Dark: Ops ──────────────────────────────────────────────────────── */
.cf-featured-report--dark-ops {
  --cffr-bg: var(--cf-slate-section);
  --cffr-text: var(--cf-blue-gray-soft);
  --cffr-heading: var(--cf-blue-gray-tint);
  --cffr-eyebrow: var(--cf-golden-orange);
  --cffr-cta-bg: var(--cf-golden-orange);
  --cffr-cta-text: var(--cf-slate-section);
  --cffr-cta-bg-hover: var(--cf-blue-gray-tint);
  --cffr-btn-ghost: var(--cf-blue-gray-tint);
  --cffr-btn-ghost-hov: var(--cf-golden-orange);
  --cffr-rule: rgba(255, 255, 255, 0.10);
  --cffr-visual-bg: var(--cf-slate-card);

  --cffr-cover-bg: var(--cf-slate-card);
  --cffr-cover-paper: var(--cf-slate-section);
  --cffr-cover-stroke: var(--cf-blue-gray-tint);
  --cffr-cover-meta: var(--cf-blue-gray-soft);
  --cffr-cover-rule: var(--cf-golden-orange);
}

.cf-featured-report--fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.cf-featured-report__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}

@media (max-width: 900px) {
  .cf-featured-report { padding: 80px 0; }
  .cf-featured-report__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.cf-featured-report__visual {
  background: var(--cffr-visual-bg);
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  /* Matted "framed report cover" treatment — the panel acts as the mat,
     the inner image gets a thin stroke. Inset matches the mockup SVG
     (40px on a 320×400 panel = 12.5% horizontal, 10% vertical). */
  padding: 10% 12.5%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.cf-featured-report__visual .cf-featured-report__image {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cffr-cover-paper);
  border: 2px solid var(--cffr-cover-stroke);
  overflow: hidden;
}

.cf-featured-report__visual .cf-featured-report__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SVG fallback cover — already drawn with internal padding, so it
   spans the whole panel without the matted padding above. */
.cf-featured-report__visual:has(.cf-featured-report__cover) {
  padding: 0;
}

.cf-featured-report__cover {
  width: 100%;
  height: 100%;
  display: block;
}

.cf-featured-report__eyebrow {
  color: var(--cffr-eyebrow);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}

.cf-featured-report__headline {
  color: var(--cffr-heading);
  font-size: clamp(36px, 4vw, 52px);
  margin: 0 0 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.cf-featured-report__body {
  color: var(--cffr-text);
  font-size: 17px;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 24px;
}

.cf-featured-report__body :first-child { margin-top: 0; }
.cf-featured-report__body :last-child  { margin-bottom: 0; }

/* ── Recency pill ───────────────────────────────────────────────────────
   Small badge above the eyebrow signalling freshness. Tracks the active
   theme mode via --cffr-eyebrow + --cffr-bg so it never clashes. */
.cf-featured-report__recency {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cffr-eyebrow);
  background: color-mix(in srgb, var(--cffr-eyebrow) 12%, transparent);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

/* ── Embedded peer quote (from cf_quote_rotator) ────────────────────────
   Sits between body and CTA. Smaller and quieter than a full
   cf_quote_rotator section — reads as a pullquote, not a hero quote.
   Selectors target the inner template that cf_quote_rotator emits
   (.cf-quote-rotator-inner / blockquote / .cf-quote-rotator-attr) so
   no template override is required. */
.cf-featured-report__quote {
  margin: 8px 0 28px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--cffr-eyebrow);
}
.cf-featured-report__quote .cf-quote-rotator-inner {
  max-width: 520px;
  margin: 0;
  text-align: left;
  padding: 0;
}
.cf-featured-report__quote blockquote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--cffr-heading);
  margin: 0 0 10px 0;
  padding: 0;
}
/* Suppress the decorative quote marks the cf_quote_rotator section adds
   when rendered as a hero — they read as noise at this size. */
.cf-featured-report__quote blockquote::before,
.cf-featured-report__quote blockquote::after {
  content: none;
}
.cf-featured-report__quote .cf-quote-rotator-attr {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cffr-text);
  font-weight: 600;
  text-transform: uppercase;
}
.cf-featured-report__quote .cf-quote-rotator-attr span {
  color: var(--cffr-text);
  opacity: 0.75;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Trust / scale signal ───────────────────────────────────────────────
   Single line of social-proof copy above the actions row. Sits visually
   close to the CTA so the proof and the action are read together. */
.cf-featured-report__trust-signal {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cffr-text);
  font-weight: 600;
  margin: 0 0 16px;
  max-width: 520px;
}

/* Actions row: primary (filled) + optional secondary (ghost). Mirrors
   the cf_hero hero-actions pattern so the marketing-section family
   reads consistently. Wraps to a new row on narrow viewports. */
.cf-featured-report__actions {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.cf-featured-report__cta {
  display: inline-block;
  background: var(--cffr-cta-bg);
  color: var(--cffr-cta-text);
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.cf-featured-report__cta:hover,
.cf-featured-report__cta:focus {
  background: var(--cffr-cta-bg-hover);
}

/* Ghost CTA — mirrors .cf-hero__btn-ghost: uppercase underlined link,
   color tracks the active theme mode via --cffr-btn-ghost. */
.cf-featured-report__btn-ghost {
  color: var(--cffr-btn-ghost);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cffr-btn-ghost);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cf-featured-report__btn-ghost:hover,
.cf-featured-report__btn-ghost:focus {
  color: var(--cffr-btn-ghost-hov);
  border-color: var(--cffr-btn-ghost-hov);
}

/* ── Cost-of-engagement microcopy ───────────────────────────────────────
   Tiny line directly under the actions telling the reader what
   they're committing to (file format, page count, "no login required"
   etc.). Quiet on purpose — it removes friction, it doesn't sell. */
.cf-featured-report__cost {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cffr-text);
  opacity: 0.75;
  margin: 12px 0 0;
  letter-spacing: 0.02em;
}

.cf-featured-report__secondary {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--cffr-rule);
}

.cf-featured-report__secondary-eyebrow {
  color: var(--cffr-eyebrow);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}

.cf-featured-report__secondary-body {
  color: var(--cffr-text);
  font-size: 14px;
  line-height: 1.6;
}

.cf-featured-report__secondary-body :first-child { margin-top: 0; }
.cf-featured-report__secondary-body :last-child  { margin-bottom: 0; }