/* ==========================================================================
   Card architecture (approved hierarchy):

     .card-base            surface: border, radius, background, shadow, padding
       .icon-card           shared icon+heading+paragraph layout
         .included-card       semantic: a service/deliverable included in an offer
         .process-icon-card   semantic: a process principle/step
     .card-base.process-card  separate numbered-badge component (no icon)

   .included-card and .process-icon-card render identically today (verified:
   the legacy CSS for .dr-included-card and .process-icon-card was byte-for-
   byte the same layout, differing only in an incidental hover-border hue —
   teal vs green, both legacy pre-token colors). They stay separate classes
   per approved decision because they represent different content roles,
   even though nothing currently makes them look different; a real visual
   distinction can be layered on later without touching markup.

   Requires tokens.css + base.css.
   ========================================================================== */

.card-base {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--surface-bg);
  box-shadow: var(--shadow-card);
  padding: 28px 26px;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.card-base:hover {
  transform: translateY(-4px);
  border-color: var(--accent-hover-border);
  box-shadow: 0 20px 44px var(--shadow-color);
}

.card-base h3 {
  margin: 0 0 10px;
  font-size: 1.22rem;
  line-height: 1.18;
  letter-spacing: var(--h3-tracking-tight);
}

.card-base p {
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.55;
}

/* ---- icon-card: shared layout for included-card / process-icon-card ---- */

.icon-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.icon-card .icon-bubble {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}

.icon-card .icon-bubble img {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .icon-card .icon-bubble,
  .icon-card .icon-bubble img {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
}

/* ---- process-card: numbered-badge component, no icon ---- */

.card-base.process-card {
  position: relative;
  overflow: hidden;
}

.process-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--accent-color);
}

.process-card .number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 34px;
  padding: 0 14px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--surface-muted-bg);
  color: var(--heading-color);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.process-card h3 {
  margin-bottom: 10px;
}

/* ---- dot-list: shared bulleted list for fit-guidance and example content ----
   Same accent-dot pattern already used independently by .fbi-fit-card li
   (fractional-bi-support.css) and .why-compare-list li (why-borrowed-bi.css).
   Promoted to a shared class here because Phase 2B adds fit-guidance and
   "common examples" lists to four more pages — four more one-off copies
   would have meant five duplicate versions of the same few lines of CSS. */

.dot-list {
  display: grid;
  gap: 12px;
}

.dot-list li {
  position: relative;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.55;
}

.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent-color);
}

/* ---- trio-grid: three-card fit section, modeled on why-borrowed-bi.html's
   "Where Borrowed BI fits" .why-compare-grid ----
   Powers the "is this the right fit" sections on Reporting Reality Check,
   Dashboard Rescue, Fractional BI Support, BI Consulting Services, and
   Reporting Automation - the last of these was rebuilt onto this shared
   family from its own one-off examples-block-plus-.pair-grid pattern,
   which is why .pair-grid/.pair-card (the two-card shell that pattern
   used) has been removed as dead code.
   Replaces two earlier attempts (.decision-layout's asymmetric list+cards
   pair, then .fit-check-panel's single bordered panel with internal
   dividers) - both read as overdesigned. This is deliberately plain:
   ordinary .card-base cards (no modifier needed - the default card-base
   h3 margin and the shared .dot-list already match why-compare-box's
   look) in a simple grid, same as the two-card reference section but
   with three columns. align-items:start keeps each card content-sized
   rather than stretching every card to match the tallest one.
   minmax(0, 1fr) (not plain 1fr) matches the pattern already used by
   who-it-helps.css's helps-service-grid - keeps a column from growing
   past its fair share if any single card's content ever needs more room.

   Three columns hold all the way down to the 640px canonical mobile
   breakpoint - confirmed by measurement, not assumption: at 768px each
   card is ~227px wide with no overflow and clean 3-5-word line wrapping;
   even right at the 641px edge (~186px per card) text still wraps
   cleanly with no overflow. There is deliberately no intermediate
   two-column tier - three columns stay three columns until they become
   one column. */

.trio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 640px) {
  .trio-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---- trio-footnote: very small, visually subordinate caption below a
   .trio-grid ----
   Only Dashboard Rescue currently uses this (its routing note toward
   Reporting Automation). Deliberately smaller and narrower than a normal
   secondary paragraph - font-size and max-width are both reduced from an
   earlier, wider "note" treatment that read as loose, same-weight body
   text sitting below the cards rather than a clearly subordinate aside.
   Sits outside the grid, never inside a card. */

.trio-footnote {
  max-width: 480px;
  margin: 16px auto 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}