/* ============================================================
 * Opettajien tekoälykysely — homepage (index) styles
 *
 * Loaded only from src/index.md. Everything here is homepage-only
 * so no risk of leaking into question pages. The shared tokens and
 * base type in styles/matrix-page.css remain the design system;
 * this file adds only the new components the homepage needs.
 * ============================================================ */

/* Hero note: the existing shared .meta class in styles/matrix-page.css is
 * reused for the "Oulun ja Itä-Suomen yliopistojen yhteistutkimus, kevät
 * 2025." line — no need to redefine it here. All hero rules
 * (.hero-title, .hero-lede, .hero-intro, .stat-monument) are also shared. */

/* ---------- 2. Findings shelf ---------- */

/* The section under the hero where 3 real result highlights are
 * displayed. The big figure is the load-bearing typographic moment on
 * the whole homepage — everything around it is quiet. */

.findings {
  margin: var(--space-7) 0 var(--space-8);
}
.findings__intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--color-muted);
  max-width: 46ch;
  margin: 0 0 var(--space-5);
}

.findings__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 800px) {
  .findings__grid { grid-template-columns: repeat(3, 1fr); }
}

/* One finding = a single result highlight. The whole tile is the link
 * so keyboard users get one focus stop per finding, matching the q-card
 * idiom already used on this site. */
.finding {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-left: 3px solid var(--color-accent);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  background: transparent;
  color: var(--color-ink);
  text-decoration: none;
  transition: background 120ms ease-out;
  min-height: 16rem;
}
.finding:hover,
.finding:focus-visible {
  background: var(--color-surface-soft);
  color: var(--color-ink);
  text-decoration: none;
  outline: none;
}
.finding:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
.finding__code {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-small);
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}
.finding__code em {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--step-fine);
  color: var(--color-muted);
  margin-left: 0.35em;
}

/* The figure is Source Serif 4 semibold, tight, tabular. The unit ("%")
 * is smaller and set in Plex Sans so the digits are the visual anchor. */
.finding__figure {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
}
.finding__num {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.finding__unit {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 500;
  color: var(--color-muted);
}

/* Split-figure variant — two group-specific percentages side by side,
 * separated by a thin rule. Used when the finding is a group comparison. */
.finding__split-figures {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.finding__split-half {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.finding__split-half .finding__figure {
  margin: 0;
}
.finding__split-divider {
  height: 3.5rem;
  width: 1px;
  background: var(--color-rule);
}
.finding__legend {
  font-family: var(--font-sans);
  font-size: var(--step-fine);
  color: var(--color-muted);
  margin: 0.25rem 0 0;
  line-height: 1.3;
}

.finding__claim {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  max-width: 40ch;
}

.finding__basis {
  font-family: var(--font-sans);
  font-size: var(--step-fine);
  line-height: 1.5;
  color: var(--color-muted);
  margin: auto 0 0;
  font-variant-numeric: tabular-nums;
}
.finding__basis cite {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink);
}

/* At ≤480px the split-figure needs to stay legible: the divider becomes
 * horizontal and both figures share width proportionally. */
@media (max-width: 480px) {
  .finding__split-figures {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }
  .finding__split-divider {
    height: 1px;
    width: 100%;
  }
}

/* ---------- 3. Result-theme navigation ---------- */

.hero-actions {
  margin: var(--space-5) 0 0;
}
.hero-cta,
.hero-cta:link,
.hero-cta:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  color: var(--color-paper);
  font-weight: 650;
  text-decoration: none;
}
.hero-cta:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}
.hero-cta:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.theme-index__intro {
  max-width: 52ch;
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  font-size: var(--step-small);
  line-height: 1.5;
}
.theme-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: var(--width-normal);
}
.theme-index__link {
  display: grid;
  gap: 0.2rem;
  min-height: 5.5rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  color: var(--color-ink);
  text-decoration: none;
}
.theme-index__link:hover {
  background: var(--color-surface-soft);
  color: var(--color-ink);
  text-decoration: none;
}
.theme-index__link:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.theme-index__title {
  align-self: end;
  font-family: var(--font-serif);
  font-size: var(--step-h4);
  font-weight: 500;
  line-height: 1.2;
}
.theme-index__meta {
  color: var(--color-muted);
  font-size: var(--step-fine);
  line-height: 1.35;
}
@media (max-width: 640px) {
  .theme-index { grid-template-columns: 1fr; }
  .theme-index__link { min-height: 4.75rem; }
}

/* ---------- 4. How to read the results ---------- */

/* Three short one-line explanations arranged as a horizontal strip that
 * mirrors the site's three-view tab bar (Jakaumat / Tunnusluvut /
 * Ryhmävertailu). This makes the vocabulary the user is about to see on
 * question pages already familiar. */

.reading-guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: var(--width-normal);
}
@media (min-width: 720px) {
  .reading-guide { grid-template-columns: repeat(3, 1fr); }
}
.reading-guide__item {
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  border-top: 2px solid var(--color-accent);
  background: transparent;
}
.reading-guide__view {
  font-family: var(--font-serif);
  font-size: var(--step-h4);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
.reading-guide__body {
  font-family: var(--font-sans);
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
}
.reading-guide__body b { color: var(--color-ink); font-weight: 500; }

/* Denominator note under the reading guide — spells out what a %
 * always means on this site so a reader who scrolls doesn't miss it. */
.denominator-note {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  max-width: var(--width-normal);
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--color-ink);
}
.denominator-note b { font-weight: 500; }