/**
 * CF Services Cards — six-mode framework per CF_MODULE_GUIDE §8.
 *
 * Modes:
 *   .cf-services-cards--light-sky    Briefing-grade default
 *   .cf-services-cards--light-slate  Analytical / operational
 *   .cf-services-cards--light-paper  Editorial / long-form (white bg)
 *   .cf-services-cards--light-mint   Positive outcome
 *   .cf-services-cards--dark-navy    Brand authority anchor
 *   .cf-services-cards--dark-ops     GSOC / command center
 *
 * Override variables (semantic roles):
 *   --cfsc-bg         section background, cards 1-5 background
 *   --cfsc-accent-bg  card 6 background (the inverted accent card)
 *   --cfsc-text       text on cards 1-5 (and section header)
 *   --cfsc-accent     eyebrow, arrow glyph color, hover border-top
 *   --cfsc-divider    hairline between cards
 *
 * Card 6 inverts: it sets background = --cfsc-accent-bg and text/arrow
 * color = --cfsc-bg, so the two surfaces always invert together.
 *
 * Mode rule blocks below set the five color variables to brand tokens
 * from cf_core/brand. The base block sets light_sky defaults so the
 * section renders correctly even if no mode class is applied.
 */

.cf-services-cards {
  /* Base defaults = light_sky. Mode classes below override. */
  --cfsc-bg: var(--cf-sky-light);
  --cfsc-accent-bg: var(--cf-navy);
  --cfsc-text: var(--cf-blue-gray);
  --cfsc-accent: var(--cf-navy);
  --cfsc-divider: var(--cf-blue-gray-tint);

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

.cf-services-cards *,
.cf-services-cards *::before,
.cf-services-cards *::after {
  box-sizing: inherit;
}

/* ── Light: Sky (briefing-grade default) ────────────────────────────── */
.cf-services-cards--light-sky {
  --cfsc-bg: var(--cf-sky-light);
  --cfsc-accent-bg: var(--cf-navy);
  --cfsc-text: var(--cf-blue-gray);
  --cfsc-accent: var(--cf-navy);
  --cfsc-divider: var(--cf-blue-gray-tint);
}

/* ── Light: Slate (analytical / operational) ────────────────────────── */
.cf-services-cards--light-slate {
  --cfsc-bg: var(--cf-blue-gray-lightest);
  --cfsc-accent-bg: var(--cf-navy);
  --cfsc-text: var(--cf-blue-gray);
  --cfsc-accent: var(--cf-navy);
  --cfsc-divider: var(--cf-blue-gray-tint);
}

/* ── Light: Paper (editorial / long-form) ───────────────────────────── */
.cf-services-cards--light-paper {
  --cfsc-bg: var(--cf-white);
  --cfsc-accent-bg: var(--cf-navy);
  --cfsc-text: var(--cf-blue-gray);
  --cfsc-accent: var(--cf-navy);
  --cfsc-divider: var(--cf-blue-gray-tint);
}

/* ── Light: Mint (positive outcome) ─────────────────────────────────── */
.cf-services-cards--light-mint {
  --cfsc-bg: var(--cf-apple-pale);
  --cfsc-accent-bg: var(--cf-navy);
  --cfsc-text: var(--cf-blue-gray);
  --cfsc-accent: var(--cf-navy);
  --cfsc-divider: var(--cf-sky-mid);
}

/* ── Dark: Navy (brand authority) ───────────────────────────────────── */
.cf-services-cards--dark-navy {
  --cfsc-bg: var(--cf-navy);
  --cfsc-accent-bg: var(--cf-sky);
  --cfsc-text: var(--cf-navy-lightest);
  --cfsc-accent: var(--cf-leaf);
  --cfsc-divider: rgba(255, 255, 255, 0.15);
}

/* ── Dark: Ops (GSOC / command center) ──────────────────────────────── */
.cf-services-cards--dark-ops {
  --cfsc-bg: var(--cf-slate-section);
  --cfsc-accent-bg: var(--cf-golden-orange);
  --cfsc-text: var(--cf-blue-gray-tint);
  --cfsc-accent: var(--cf-golden-orange);
  --cfsc-divider: rgba(255, 255, 255, 0.10);
}

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

.cf-services-cards__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.cf-services-cards__header {
  margin-bottom: 64px;
  max-width: 720px;
}

.cf-services-cards__eyebrow {
  color: var(--cfsc-accent);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}

.cf-services-cards__heading {
  color: var(--cfsc-text);
  font-size: clamp(36px, 4vw, 52px);
  margin: 0 0 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.cf-services-cards__intro {
  color: var(--cfsc-text);
  opacity: 0.7;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

.cf-services-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cfsc-divider);
}

@media (max-width: 900px) {
  .cf-services-cards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .cf-services-cards__grid { grid-template-columns: 1fr; }
}

.cf-services-cards__card {
  display: block;
  background: var(--cfsc-bg);
  color: var(--cfsc-text);
  padding: 40px 32px;
  border-top: 2px solid transparent;
  text-decoration: none;
  transition: border-color 0.2s ease;
  cursor: pointer;
}

.cf-services-cards__card:hover {
  border-top-color: var(--cfsc-accent);
}

.cf-services-cards__card-heading {
  color: inherit;
  font-size: 24px;
  margin: 0 0 12px;
  line-height: 1.25;
  font-weight: 600;
}

.cf-services-cards__card-desc {
  color: inherit;
  opacity: 0.7;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.cf-services-cards__card-arrow {
  color: var(--cfsc-accent);
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Card 6: inverted palette. Text/arrow color flip to --cfsc-bg so the
   two surfaces always invert together when the mode changes. */
.cf-services-cards__card--accent {
  background: var(--cfsc-accent-bg);
  color: var(--cfsc-bg);
}

.cf-services-cards__card--accent .cf-services-cards__card-arrow {
  color: var(--cfsc-bg);
}

.cf-services-cards__card--accent:hover {
  border-top-color: var(--cfsc-bg);
}

/* ── Phone treatment: feature-list rows + promoted bespoke-CTA ──────────
   Below 560px the 6 cards become:
   - One distinct "bespoke engagement" CTA tile at the TOP (card 6,
     order: -1) — the highest-conversion action in the section, lifted
     out of the bottom-of-list grave it sits in by default.
   - Five tight feature-list rows below — heading + description, no
     card box, hairline rules between rows, boilerplate "Learn more →"
     arrows hidden because they repeat on every card without adding
     information. Reads as a scannable list of service offerings,
     which is the right mental model for a CSO scanning "what do
     they do?" on a phone.                                              */
@media (max-width: 560px) {
  .cf-services-cards {
    padding: 72px 0;
  }
  .cf-services-cards__inner {
    padding: 0 20px;
  }
  .cf-services-cards__header {
    margin-bottom: 36px;
  }

  /* Drop the desktop gap-trick divider in favor of explicit row borders.
     The gap-trick (1px gap + section bg showing through) would create
     a 1px halo around the accent card's inverted background — switching
     to explicit border-top per row keeps the accent card visually clean. */
  .cf-services-cards__grid {
    gap: 0;
    background: transparent;
  }

  /* Regular cards 1–5 → feature-list rows. No box, no horizontal
     padding (content flows to the inner's 20px), hairline rule on top,
     tight vertical padding. */
  .cf-services-cards__card {
    padding: 20px 0;
    background: transparent;
    border-top: 1px solid var(--cfsc-divider);
  }

  /* Boilerplate "Learn more →" arrow hidden on every card — same string
     on all six, adds noise without information. */
  .cf-services-cards__card-arrow {
    display: none;
  }

  /* Card 6 (accent CTA) → promoted to first visual position via order,
     kept as a distinct tile (not a row) so the bespoke-engagement
     invite reads as a clear call-to-action. 16px bottom margin
     separates it from the row list that follows. The hairline rule
     on row 1 (which is DOM-card-1) then visually transitions
     "CTA → service list". */
  .cf-services-cards__card--accent {
    order: -1;
    background: var(--cfsc-accent-bg);
    color: var(--cfsc-bg);
    padding: 24px 20px;
    border-top: none;
    border-radius: 8px;
    margin-bottom: 24px;
  }
}