/* Homepage layout. Requires tokens.css + base.css.
   Editorial, asymmetric: a 7/5 hero split, ruled columns instead of cards, and
   guides set like newspaper entries. */

/* ---------- hero ---------- */

.home-hero { display: flex; border-bottom: 1px solid var(--line); }
.home-hero-main {
  width: 58.33%; box-sizing: border-box;
  padding: var(--s7) 44px var(--s7) var(--page-pad);
  border-right: 1px solid var(--line);
}
.home-hero-side { width: 41.67%; box-sizing: border-box; display: flex; flex-direction: column; }

.stamp { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: 22px; }
.stamp i { width: 7px; height: 7px; background: var(--red); display: block; }
.stamp span { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-40); }

.home-hero h1 { font-size: var(--t-display); line-height: 1.06; letter-spacing: -0.028em; margin-bottom: 22px; }
.home-hero .lede { font-size: 17.5px; line-height: 1.6; color: var(--ink-60); max-width: 500px; margin-bottom: 30px; }
.home-hero .cta-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
/* with no lede between them, the headline needs the paragraph's breathing room */
.home-hero h1 + .cta-row { margin-top: var(--s2); }
.home-hero .cta-row .btn { padding: 13px 24px; font-size: 15px; }

.side-counts { padding: 30px var(--page-pad) 26px 44px; border-bottom: 1px solid var(--line); }
.count-row { display: flex; gap: var(--s6); flex-wrap: wrap; }
.count-row b {
  display: block; font-family: var(--serif); font-size: 44px; font-weight: 600;
  line-height: 1; color: var(--ink);
}
.count-row span { display: block; font-size: var(--t-ui-sm); color: var(--ink-40); margin-top: 6px; }

.side-employers { padding: 26px var(--page-pad) 30px 44px; flex-grow: 1; background: var(--paper-2); }
.side-employers .eyebrow { display: block; margin-bottom: var(--s3); }
.employer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid #e3e5e1;
}
.employer-row span:first-child { font-size: var(--t-ui); color: var(--ink); }
.employer-row span:last-child { font-size: var(--t-ui-sm); color: var(--ink-40); }

/* ---------- ruled columns ---------- */

.steps { display: flex; border-bottom: 1px solid var(--line); }
.steps > div {
  flex: 1 1 0; box-sizing: border-box;
  padding: 30px 40px 32px; border-right: 1px solid var(--line);
}
.steps > div:last-child { border-right: none; }
.steps .n { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--blue); margin-bottom: var(--s3); }
.steps h3 { font-family: var(--sans); font-size: var(--t-body); font-weight: 600; letter-spacing: 0; margin-bottom: 7px; }
.steps p { font-size: var(--t-ui); line-height: 1.6; color: var(--ink-60); }

/* ---------- sections ---------- */

.home-section { padding: var(--s7) var(--page-pad); max-width: var(--page-max); margin: 0 auto; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  border-bottom: 2px solid var(--ink); padding-bottom: var(--s3); margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.section-head h2 { font-size: var(--t-h2); }
.section-head a { font-size: var(--t-ui-sm); font-weight: 600; }

/* tools */
.tools-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.tool-card { display: block; border-top: 1px solid var(--line); padding-top: var(--s4); color: inherit; }
.tool-card:hover { color: inherit; }
.tool-card:hover h3 { color: var(--blue); }
.tool-card .tag { display: block; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 9px; }
.tool-card h3 { font-size: var(--t-h3); margin-bottom: 7px; }
.tool-card p { font-size: var(--t-ui-sm); line-height: 1.55; color: var(--ink-60); }

/* live job preview */
.jobs-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.jp-card { display: block; border-top: 1px solid var(--line); padding-top: var(--s4); color: inherit; }
.jp-card:hover h3 { color: var(--blue); }
.jp-card h3 { font-size: var(--t-h3); line-height: 1.28; margin-bottom: 6px; }
.jp-card .co { font-size: var(--t-ui-sm); color: var(--ink-60); }
.jp-card .meta { display: flex; align-items: center; gap: var(--s2); margin-top: 10px; }
.jp-card .meta span { font-size: var(--t-meta); color: var(--ink-40); }
.jobs-loading { grid-column: 1 / -1; font-size: var(--t-ui); color: var(--ink-40); border-top: 1px solid var(--line); padding-top: var(--s4); }

/* guides */
.guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.guide { display: block; border-top: 1px solid var(--line); padding-top: var(--s4); color: inherit; }
.guide .kicker { display: block; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 9px; }
.guide h3 { font-size: var(--t-h3); line-height: 1.28; margin-bottom: 8px; }
.guide:hover h3 { color: var(--blue); }
.guide p { font-size: var(--t-ui-sm); line-height: 1.55; color: var(--ink-60); }

/* faq */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; color: var(--ink);
  padding: var(--s4) 0;
}
.faq-a { display: none; padding-bottom: var(--s4); }
.faq-item.open .faq-a { display: block; }
.faq-a p { font-size: var(--t-ui); line-height: 1.65; color: var(--ink-60); max-width: 720px; }

@media (max-width: 980px) {
  .tools-row, .guides-grid, .jobs-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { flex-direction: column; }
  .steps > div { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .home-hero { flex-direction: column; }
  .home-hero-main, .home-hero-side { width: 100%; border-right: none; }
  .home-hero-main { padding: var(--s6) var(--page-pad); }
  .side-counts, .side-employers { padding-left: var(--page-pad); padding-right: var(--page-pad); }
  .tools-row, .guides-grid, .jobs-preview { grid-template-columns: 1fr; }
}