/* ==========================================================================
   Home page only — www.state3.co.nz
   --------------------------------------------------------------------------
   The hero intro, the knowledge-domains figure, the product screens and the
   artwork on the three-state cards. The capability graph in the hero is
   styled in components.css.
   ========================================================================== */

/* ---- Hero intro: headline left, short introduction and actions right ---- */
.home-hero { padding-top: var(--space-16); padding-bottom: var(--space-12); }
.home-hero__intro {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
  align-items: end; margin-bottom: var(--space-10);
}
.home-hero__intro h1.hero__title { max-width: 18ch; }
.home-hero__intro .sub { max-width: 52ch; }
.home-hero__intro .cta-row { margin-top: var(--space-6); }
@media (min-width: 900px) {
  .home-hero__intro { grid-template-columns: 1.15fr 1fr; gap: var(--space-16); }
}

/* ---- Strip under the graph: on to the domains and to STATE3 Enterprise ---- */
.home-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-10);
}
.home-next h2 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.home-next p { max-width: 62ch; font-size: var(--text-sm); color: var(--color-text-light); }
.home-next__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- Knowledge domains ---- */
.domains-figure { margin: 0 0 var(--space-10); }
.domains-figure a { display: block; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); overflow: hidden; }
.domains-figure a:focus-visible { outline: 2px solid var(--color-text-white); outline-offset: 3px; }
.domains-figure img { display: block; width: 100%; height: auto; }
.domains-figure figcaption, .screen figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-light); }
.domains-list { display: grid; grid-template-columns: 1fr; gap: var(--space-5) var(--space-8); margin: 0; }
@media (min-width: 640px)  { .domains-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .domains-list { grid-template-columns: repeat(3, 1fr); } }
.domains-list div { padding-top: var(--space-4); border-top: 1px solid var(--color-border-strong); }
.domains-list dt { font-weight: 600; margin-bottom: var(--space-1); }
.domains-list dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-light); }
.domains-note { margin-top: var(--space-8); max-width: 72ch; font-size: var(--text-sm); color: var(--color-text-light); }

/* ---- Product screens ---- */
.screens { display: grid; grid-template-columns: 1fr; gap: var(--space-12) var(--space-8); }
@media (min-width: 900px) {
  .screens { grid-template-columns: 1fr 1fr; }
  .screen--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.7fr; gap: var(--space-10); align-items: center; }
}
.screen h3 { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.screen__text p { line-height: var(--leading-relaxed); }
.screen__text .cap-item__link { padding-top: var(--space-3); }
.screen figure { margin: var(--space-5) 0 0; }
.screen--lead figure { margin-top: 0; }
.screen figure a {
  display: block; overflow: hidden;
  border: 1px solid #CBD5E1; border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.screen figure a:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 3px; }
.screen img { display: block; width: 100%; height: auto; }
.section--light .screen figcaption { color: var(--color-text-subtle); }
.section--light .screen .cap-item__link { color: var(--color-accent-dark); }

/* ---- Three states: a render across the top of each card ---- */
.maturity__step { overflow: hidden; }
.maturity__art {
  display: block; aspect-ratio: 4 / 3; object-fit: cover;
  width: calc(100% + 2 * var(--space-6)); max-width: none;
  margin: calc(-1 * var(--space-10)) calc(-1 * var(--space-6)) var(--space-6);
}
.maturity__step h3.name { line-height: var(--leading-snug); }