/* home.css — styles specific to the HOME page (hero, pillars, section cards).
   The shell (header/footer/buttons) lives in layout.css and is shared sitewide.
   Keeping page-specific styles separate from the shell is itself the DRY habit:
   each concern has one home. */

/* --- Hero: a black band, the page's strongest statement (Black ~70%) --- */
.hero {
  background: var(--color-bg-invert);
  color: var(--color-text-invert);
  padding-block: var(--space-6);
}
.hero__eyebrow { color: var(--color-accent); margin-bottom: var(--space-2); }
.hero h1 { color: var(--color-text-invert); max-width: 20ch; }
.hero__lead {
  color: #dddddd;
  font-size: 1.125rem;
  max-width: 52ch;
  margin-block: var(--space-3) var(--space-4);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.hero__secondary { color: var(--color-text-invert); }

/* --- Pillars: what the practice does --- */
.pillars { padding-block: var(--space-6); }
.pillars__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;                /* stacked on mobile */
}
@media (min-width: 720px) {
  .pillars__grid { grid-template-columns: repeat(3, 1fr); }  /* 3 across on wider screens */
}
.pillar { border-top: 3px solid var(--color-accent); padding-top: var(--space-2); }
.pillar h3 {
  font-family: var(--font-headline);
  font-size: var(--text-h2);
  margin-bottom: var(--space-1);
}

/* --- Core sections: where to go next --- */
.sections { padding-block: var(--space-6); background: #fafafa; }
.section-intro { margin-bottom: var(--space-4); }
.cards {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .cards { grid-template-columns: 1fr 1fr; }  /* 2 across on wider screens */
}
.card {
  display: block;
  background: var(--color-white);
  border: 1px solid #e6e6e6;
  padding: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover,
.card:focus-visible { border-color: var(--color-accent); transform: translateY(-2px); }
.card h3 {
  font-family: var(--font-headline);
  font-size: var(--text-h2);
  margin-bottom: var(--space-1);
}
.card__cue { display: inline-block; margin-top: var(--space-2); font-weight: var(--weight-semibold); }