/* ==========================================================================
   Homepage-only rules. Everything else (header, footer, buttons, cards,
   hero shell, FAQ, CTA, back-to-top, global typography, dark-mode colors)
   comes from css/*.css and must not be redefined here.
   Requires the full shared foundation to be loaded first.
   ========================================================================== */

/* ---- hero: homepage-scoped typography ----
   The shared h1/hero-copy scale (base.css/hero.css) is tuned for pages with
   shorter headlines. This homepage's headline is a full sentence, so it
   gets its own smaller scale rather than shrinking the shared tokens every
   other page relies on. */

.hero-home h1 {
  font-size: clamp(3.1rem, 4.6vw, 4.4rem);
  line-height: 1.08;
}

.hero-home .hero-copy {
  max-width: 640px;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.6;
}

@media (max-width: 520px) {
  /* Without a width constraint, "Build reporting your team can trust."
     naturally breaks with "trust." alone on the final line (a single-word
     orphan) across 375-520px. Capping the width forces "can trust." to
     stay together as the last line instead. Verified this is a no-op at
     320px (container already narrower than 330px) and that 521-760px
     wraps cleanly on its own without any constraint. */
  .hero-home h1 {
    max-width: 330px;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  /* Same orphan pattern recurs at 770-900px (the hero's single-column
     stacked range, where the h1 has the full container width rather than
     the narrower two-column text width used above 900px) - "Build
     reporting your team can" / "trust.". Verified the 641-760px band
     wraps cleanly without this constraint, and that it doesn't affect the
     desktop two-column layout that begins at 901px. */
  .hero-home h1 {
    max-width: 700px;
  }
}

/* H1-to-paragraph and paragraph-to-CTA mobile spacing used to be patched
   here (16px / 28px) because the shared hero component had no margin of
   its own. hero.css now sets those exact values as the shared default at
   <=640px, so this page-specific override was removed as redundant rather
   than kept duplicated - approved values are unchanged, just no longer
   declared twice. */

/* ---- hero: layout rebalance ----
   Align the card to the top of the row instead of centering it against the
   (now shorter) text column, and let it size to its own content. */

.hero-home .hero-grid {
  align-items: start;
}

/* ---- hero summary card (homepage-only illustration layout) ----
   Shell/media/copy/pills all come from the shared .hero-card--illustration
   family (hero.css). Only the title/copy max-widths are genuinely
   page-specific (tuned per headline), so they're the only rules left. */

.home-hero-card .hero-card__title {
  /* 24ch keeps "See what your reporting" / "needs next." together as a
     clean 2-line break with no single-word orphan - verified consistent
     across 320-1440px (a fixed px value would need per-breakpoint
     tuning since the card's own width varies a lot; ch scales with the
     text naturally instead). */
  max-width: 24ch;
}

.home-hero-card .hero-card__copy {
  max-width: 32ch;
}

/* ---- service selection guide: compact problem-to-service chooser ----
   Replaces an earlier real-<table> version that measured too tall for
   this position (verified: 5-row table + header consistently overshot
   the page-length budget at every width). This is deliberately a plain
   linked-row list, not a table - one markup structure throughout (no
   separate desktop/mobile copies), stacking via flex-direction at the
   mobile breakpoint. Row/list borders reuse this file's own .tools-row
   language (plain divided rows, no card/box/shadow) rather than the
   card-shell treatment used elsewhere on the page.

   Scoped section padding (not .section or .section--compact, which stay
   untouched) because this is a short decision tool, not a full section -
   approved direction for this component specifically. */

.service-guide {
  padding: 44px 0;
}

@media (max-width: 900px) {
  .service-guide {
    padding: 40px 0;
  }
}

@media (max-width: 640px) {
  .service-guide {
    padding: 36px 0;
  }
}

.service-guide-heading {
  margin-bottom: 20px;
}

.service-guide-list {
  border-top: 1px solid var(--border-color);
}

/* Each row is a single <a> (transparent content model, same technique
   already used by .related-link-card) wrapping both spans - the whole
   row is one link, not just the arrow or service name. */
.service-guide-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.service-guide-situation {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.5;
}

.service-guide-service {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--heading-color);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.service-guide-arrow {
  transition: transform 160ms ease;
}

/* Color + underline on the service name (not just the arrow) is the
   primary link affordance beyond the row's own href/cursor - satisfies
   "do not rely on the arrow alone" without needing a background tint. */
.service-guide-row:hover .service-guide-service,
.service-guide-row:focus-visible .service-guide-service {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.service-guide-row:hover .service-guide-arrow,
.service-guide-row:focus-visible .service-guide-arrow {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .service-guide-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .service-guide-service {
    white-space: normal;
  }
}

.service-guide-closing {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.6;
  text-align: center;
}

.service-guide-inline-link {
  color: var(--link-color);
  font-weight: 700;
}

.service-guide-inline-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- four-card service grid ---- */

.home-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: stretch;
}

.home-service-grid .card-link {
  margin-top: auto;
}

/* Matches the shared .icon-card default (120px, cards.css). Compared
   104/112/116/120px side by side at native resolution (DSF 1 and 2), and
   compared <img> vs inline <svg> at identical dimensions: rendering was
   equally crisp in every case - vector content has no sharpness-vs-size
   tradeoff. 120px is chosen for visual presence/detail legibility. */
.home-service-grid .icon-bubble,
.home-service-grid .icon-bubble img {
  width: 120px;
  height: 120px;
}

@media (max-width: 1100px) {
  .home-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  /* icon sized down independently of the shared .icon-card mobile default
     (100px); compared 88/92/96px, no crowding at 92px, so used here */
  .home-service-grid .icon-bubble,
  .home-service-grid .icon-bubble img {
    width: 92px;
    height: 92px;
  }

  .home-service-grid .card-base {
    padding: 24px 22px;
  }
}

/* ---- "simple first step" process grid ---- */

.home-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .home-process-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ---- tools & platforms: editorial capability rows ----
   No card, no outer panel border, no vertical divider columns. Four rows
   of label + tools, separated only by thin horizontal rules; the last
   row's own border-bottom doubles as the section's bottom rule. */

.home-tools-heading {
  margin-bottom: 32px; /* overrides layout.css's shared 48px: tighter per spec */
}

.home-tools-heading h2 {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
}

.home-tools-heading p {
  max-width: 700px;
  margin-top: 17px; /* overrides layout.css's shared 16px */
  margin-left: auto;
  margin-right: auto;
}

.tools-rows {
  border-top: 1px solid var(--border-color);
}

.tools-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-color);
}

.tools-row-label {
  color: var(--heading-color);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tools-row-items {
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.9;
}

/* plain text with muted centered-dot separators, no pills/borders */
.tools-row-items span:not(:last-child)::after {
  content: "\2022";
  display: inline-block;
  margin: 0 10px;
  color: var(--text-secondary);
  opacity: 0.45;
}

/* supporting sentence: the section's closing statement, centered beneath
   the rows. No button - removed per approved direction; BI Consulting
   Services still lives in the nav dropdown, footer, and structured data. */
.home-tools-supporting {
  max-width: 700px;
  margin: 28px auto 0;
  text-align: center;
}

.tools-platforms-copy {
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .tools-row {
    grid-template-columns: 190px 1fr;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .tools-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }
}