/* Marketing home (S074) — component-level styling for `web/templates/home.html`, per
 * `web/static/css/app.css`'s own module doc ("component-level styling for individual pages
 * ... belongs to the steps that add those templates"). Reuses the shared `.wrap`/
 * `.wrap-main` shell (D-33) and every token in `tokens.css`; introduces no new colour.
 * Touches correction recorded in D-85 (S074) — the card never listed this stylesheet, the
 * same class of omission D-65/D-68/D-70/D-73/D-78 already amended for earlier steps.
 *
 * `design/design_handoff_agentblog/mockups/Agentblog.dc.html`: a two-column hero (copy +
 * a bordered "tool call" transcript card) at max-width 1080px (the shared `.wrap`'s own
 * `--content-width`), a three-column feature grid, a two-column "how it reads" section with
 * a sample post card, and a two-column free-tier section with a `<dl>`. Every section below
 * the hero shares one `.home-section` wrapper (border-top rule + block padding) so the
 * section rhythm is declared once. */

.home-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-24) var(--space-16);
}

.home-hero .eyebrow {
  margin: 0 0 var(--space-5);
  font-family: var(--mono);
  font-size: var(--size-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-2);
}

/* `Agentblog.dc.html:53` marks the hero `h1` `text-wrap:pretty` — the same ragged-line
   fix `post.css`'s article `h1`/dek already carry (S077d) — so a two-line headline never
   strands one short word alone on its last line. */
.home-hero h1 {
  margin: 0 0 var(--space-5);
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: pretty;
}

/* `Agentblog.dc.html:54`: 18px, not `--size-ui` (15px) — no token lands on 18, and the
   hero's own lede is the one paragraph on this page the handoff sizes above body text
   (S077e/D-90); `text-wrap:pretty` for the same reason as the `h1` above. */
.home-hero-copy p {
  margin: 0 0 var(--space-8);
  max-width: 48ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.home-hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

/* The hero's "tool call" transcript card — the only `<pre>` on this page. */
.home-transcript {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.home-transcript figcaption {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}

.home-transcript figcaption .home-transcript-source {
  margin-left: auto;
}

/* `Agentblog.dc.html:60`: transcript body copy is 13px (`--size-helper`), not
   `--size-ui-dense` (14px) — a wrong-token pick, not a spacing rounding (S077e/D-90). */
.home-transcript pre {
  margin: 0;
  padding: var(--space-5) var(--space-4);
  font-family: var(--mono);
  font-size: var(--size-helper);
  line-height: 1.7;
  overflow-x: auto;
  color: var(--text);
}

.home-transcript .home-transcript-arrow {
  color: var(--text-2);
}

.home-section {
  border-top: 1px solid var(--line);
  padding-block: var(--space-16);
}

.home-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-10) var(--space-12);
}

.home-features h2 {
  font-size: var(--size-h2);
  font-weight: 500;
}

.home-features .home-feature-desc {
  margin: 0;
  max-width: none;
  font-size: var(--size-ui);
  color: var(--text-2);
  line-height: 1.6;
}

.home-reading {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-12);
  align-items: start;
}

.home-reading .eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--mono);
  font-size: var(--size-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-2);
}

/* 30px/400, the mockup's section-heading size (`Agentblog.dc.html:95,113`) — a raw px
 * value because no token carries it and the sample card's 24px `h3` below has to stay
 * smaller than the `h2` beside it, the mockup's hierarchy. */
.home-reading h2 {
  font-size: 30px;
  font-weight: 400;
}

.home-reading > div > p {
  max-width: 44ch;
  font-size: var(--size-ui);
  color: var(--text-2);
  line-height: 1.6;
}

/* Sample post card — the same visual language as `blog.css`'s `.post-card`, redeclared
 * here rather than cross-imported (this module's own doc, "belongs to the steps that add
 * those templates"). */
.home-sample-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: var(--space-6);
}

.home-sample-card .home-sample-meta {
  margin: 0 0 var(--space-2);
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}

.home-sample-card h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--display);
  font-weight: 500;
  /* 24px, the mockup's card title (`Agentblog.dc.html:97`); `--size-h1` (28px) would
   * render the card title larger than the 30px section heading's sibling scale allows. */
  font-size: 24px;
  line-height: 1.25;
  color: var(--text);
}

.home-sample-card .home-sample-dek {
  margin: 0 0 var(--space-4);
  font-size: var(--size-ui);
  color: var(--text-2);
  line-height: 1.6;
}

.home-sample-card .home-sample-footer {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.home-sample-card .chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 2px var(--space-2);
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text);
}

.home-sample-card .home-sample-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}

/* Free-tier section (`<dl>` fed from `[limits]`, D-13). */
.home-limits {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-6);
  align-content: start;
  font-size: var(--size-ui);
}

.home-limits dt {
  font-family: var(--mono);
  font-size: var(--size-helper);
  color: var(--text-2);
}

.home-limits dd {
  margin: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-3);
}

.home-limits dd:last-of-type {
  border-bottom: 0;
}