/* jobbo.se home page styles (prefix st-home-). Owned by the home template.
   Ported from web/proto-hem.html. Tokens only: no hex outside inline SVG cover art in
   the template, no color-mix with raw colours (token-to-token color-mix is fine). */

/* Shared primitives (st-mark, st-fit-dot, st-eyebrow, st-display) live in site.css. */

/* ---- home scope ------------------------------------------------------------------- */
.st-home-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.st-home-section, .st-home-dark, .st-home-report, .st-home-close { padding: var(--st-section) 0; }
.st-home-sec-head { max-width: 62ch; }
.st-home-lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); margin: var(--s-5) 0 0; max-width: 54ch; }
.st-home-sec-head .st-home-lede { font-size: var(--text-lg); }

/* Hero */
.st-home-hero { padding-top: clamp(48px, 6vw, 88px); padding-bottom: 0; }
.st-home-hero .st-home-wrap { display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); gap: var(--s-12); align-items: center; }
.st-home-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.st-home-trust { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-6); font-size: var(--text-md); color: var(--ink-3); }
.st-home-trust span { display: inline-flex; align-items: center; gap: 6px; }
.st-home-trust svg { width: 14px; height: 14px; color: var(--fit-pass); }

/* Signature 4: the product scene */
.st-home-scene {
  position: relative; min-height: 460px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--accent-soft), var(--canvas-tint) 60%, var(--sun-soft));
  overflow: hidden;
}
.st-home-scene::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--line-soft); pointer-events: none; }
.st-home-win { position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-float); font-size: var(--text-sm); line-height: 1.4; }
.st-home-win-list { left: 28px; top: 36px; width: 300px; padding: var(--s-4); }
.st-home-day { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s-2); }
.st-home-day b { font-family: var(--font-display); font-size: 15px; }
.st-home-day span { color: var(--ink-3); font-size: var(--text-xs); }
.st-home-job { display: grid; grid-template-columns: 34px 1fr; gap: var(--s-3); padding: var(--s-2) 6px; border-radius: var(--r-sm); }
.st-home-job.is-selected { background: var(--selected); }
.st-home-tile { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--ink-inverse); font-size: var(--text-sm); }
.st-home-job h4, .st-home-job .st-home-h { display: block; }
.st-home-job h4, .st-home-job .st-home-h { margin: 0; font-size: 13.5px; font-weight: var(--weight-semibold); color: var(--ink); }
.st-home-job p { margin: 2px 0 0; color: var(--ink-3); font-size: var(--text-xs); }
.st-home-fitline { margin-top: 5px; font-size: var(--text-xs); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.st-home-win-fit { right: 24px; top: 96px; width: 330px; padding: var(--s-4) var(--s-4) var(--s-3); }
.st-home-win-fit h4, .st-home-win-fit .st-home-h { display: block; }
.st-home-win-fit h4, .st-home-win-fit .st-home-h { margin: 0 0 2px; font-family: var(--font-display); font-size: var(--text-lg); }
.st-home-win-fit .st-home-meta { color: var(--ink-3); font-size: var(--text-xs); margin-bottom: var(--s-3); }
.st-home-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.st-home-tri > div { padding: var(--s-2) var(--s-2) 8px; border-radius: var(--r-sm); background: var(--canvas-tint); border: 1px solid var(--line-soft); }
.st-home-tri h5, .st-home-tri .st-home-h { display: block; }
.st-home-tri h5, .st-home-tri .st-home-h { margin: 0 0 6px; font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-semibold); }
.st-home-tri .is-ok h5, .st-home-tri .is-ok .st-home-h { color: var(--fit-pass); }
.st-home-tri .is-missing h5, .st-home-tri .is-missing .st-home-h { color: var(--fit-missing); }
.st-home-tri .is-unclear h5, .st-home-tri .is-unclear .st-home-h { color: var(--fit-unclear); }
.st-home-tri ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--text-xs); color: var(--ink-2); }
.st-home-why { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line-soft); font-size: var(--text-xs); color: var(--ink-3); }
.st-home-win-cv { right: 64px; bottom: -40px; width: 200px; aspect-ratio: 1 / 1.3; padding: var(--s-5) var(--s-4); border-radius: var(--r-xs); }
.st-home-win-cv .st-home-nm { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 13px; }
.st-home-win-cv .st-home-ln { height: 5px; border-radius: var(--r-xs); background: var(--line); margin-top: 7px; }
.st-home-win-cv .st-home-ln.is-short { width: 60%; }
.st-home-win-cv .st-home-ln.is-accent { background: var(--sea); width: 35%; height: 6px; margin: var(--s-3) 0 var(--s-2); }
.st-home-win-cv .st-home-badge {
  position: absolute; top: -12px; left: -14px; background: var(--sun); color: var(--sun-ink);
  font-size: 11px; font-weight: var(--weight-bold); padding: 4px var(--s-2); border-radius: var(--r-pill);
  transform: rotate(-4deg);
}
.st-home-win-mail { left: 40px; bottom: 34px; width: 250px; padding: var(--s-3) var(--s-4); }
.st-home-win-mail .st-home-to { color: var(--ink-3); font-size: var(--text-xs); }
.st-home-win-mail .st-home-to b { color: var(--ink); font-weight: var(--weight-medium); }
.st-home-win-mail .st-home-att { display: flex; gap: 6px; margin-top: var(--s-2); }
.st-home-win-mail .st-home-att span { font-size: 11px; padding: 3px var(--s-2); border-radius: var(--r-pill); background: var(--sunken); color: var(--ink-2); }
.st-home-win-mail .st-home-send { margin-top: var(--s-2); display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--on-accent); background: var(--accent); padding: 5px var(--s-2); border-radius: 7px; }

/* Signature 3: the numbers */
.st-home-stats { padding-top: var(--s-12); padding-bottom: 0; }
.st-home-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.st-home-stat { background: var(--card); padding: var(--s-6) var(--s-6) var(--s-5); }
.st-home-stat b { display: block; font-family: var(--font-display); font-size: clamp(36px, 4vw, 56px); line-height: 1; font-weight: var(--weight-bold); letter-spacing: -0.03em; color: var(--ink); }
.st-home-stat b small { font-size: .42em; letter-spacing: 0; color: var(--ink-3); font-weight: var(--weight-semibold); margin-left: 4px; }
.st-home-stat p { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--text-lg); line-height: 1.4; }
.st-home-stat p a { color: var(--accent-ink); }

/* Steps */
.st-home-steps-section .st-home-steps { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; }
.st-home-step {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12); align-items: center;
  padding: var(--s-10) 0; border-top: 1px solid var(--line-soft);
}
.st-home-step:first-child { border-top: 0; }
.st-home-step:nth-child(even) .st-home-step-copy { order: 2; }
.st-home-step-n { font-family: var(--font-display); font-size: 56px; font-weight: var(--weight-bold); letter-spacing: -0.04em; line-height: 1; color: var(--accent); }
.st-home-step-title { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; margin: var(--s-3) 0 var(--s-2); }
.st-home-step-copy p { margin: 0; color: var(--ink-2); }
.st-home-ex { margin-top: var(--s-3); font-size: var(--text-md); color: var(--ink-2); display: grid; gap: 4px; }
.st-home-shot { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--canvas-tint); padding: var(--s-2); margin: 0; box-shadow: 0 1px 2px rgba(11, 31, 42, 0.04), 0 24px 48px -24px rgba(11, 31, 42, 0.22); }
.st-home-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--line-soft); }

/* Signature 5: the deep-sea band */
.st-home-dark { background: var(--ink); color: var(--canvas); }
.st-home-dark .st-h2 { color: var(--canvas); }
.st-home-dark .st-eyebrow { color: var(--cyan); }
.st-home-dark .st-eyebrow::before { background: var(--cyan); }
.st-home-dark .st-home-lede { color: color-mix(in srgb, var(--canvas) 72%, transparent); }
.st-home-dark .st-mark { background: linear-gradient(transparent 12%, var(--sun) 12%, var(--sun) 88%, transparent 88%); color: var(--ink); }
.st-home-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); margin-top: var(--s-10); }
.st-home-cell { grid-column: span 2; padding: var(--s-6) var(--s-6) var(--s-5); border-radius: var(--r-lg); background: color-mix(in srgb, var(--canvas) 7%, transparent); border: 1px solid color-mix(in srgb, var(--canvas) 12%, transparent); }
.st-home-cell.is-wide { grid-column: span 3; }
.st-home-cell-ic { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--cyan) 22%, transparent); color: var(--cyan); margin-bottom: var(--s-5); }
.st-home-cell-ic svg { width: 18px; height: 18px; }
.st-home-cell h3 { margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.015em; }
.st-home-cell p { margin: 0; color: color-mix(in srgb, var(--canvas) 70%, transparent); font-size: 15.5px; line-height: 1.55; }
.st-home-dark-link { display: inline-block; margin-top: var(--s-8); color: var(--cyan); font-weight: var(--weight-semibold); }

/* Report */
.st-home-report .st-home-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12); align-items: center; }
.st-home-sheet { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.st-home-sheet-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-5); background: var(--canvas-tint); border-bottom: 1px solid var(--line); font-size: var(--text-md); }
.st-home-sheet-bar b { font-family: var(--font-display); }
.st-home-sheet table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.st-home-sheet th { text-align: left; padding: 10px var(--s-5); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-soft); }
.st-home-sheet td { padding: 11px var(--s-5); border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.st-home-sheet td:first-child { color: var(--ink); font-weight: var(--weight-medium); }
.st-home-sheet .st-home-dt { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.st-home-sheet tr:last-child td { border-bottom: 0; }
.st-home-report-cta { margin-top: var(--s-5); }

/* Guides */
.st-home-hubs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-10); }
.st-home-hub { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.st-home-cover { height: 128px; position: relative; overflow: hidden; }
.st-home-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-home-cover-label { position: absolute; left: var(--s-5); bottom: var(--s-4); font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--ink-inverse); }
.st-home-cover.is-sun .st-home-cover-label { color: var(--ink); }
.st-home-hub-list { list-style: none; margin: 0; padding: var(--s-4) var(--s-5) var(--s-2); display: grid; }
.st-home-hub-list li a { display: block; padding: var(--s-2) 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); font-size: var(--text-lg); }
.st-home-hub-list li:last-child a { border-bottom: 0; }
.st-home-hub-list li a:hover { color: var(--accent-ink); }
.st-home-hub-all { margin: auto var(--s-5) var(--s-4); color: var(--accent-ink); font-weight: var(--weight-semibold); font-size: var(--text-md); }

/* Closing */
.st-home-close { background: var(--sun-soft); }
.st-home-close .st-home-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-10); align-items: center; }
.st-home-close .st-eyebrow { color: var(--sun-ink); }
.st-home-close .st-eyebrow::before { background: var(--sun-ink); }
.st-home-close .st-home-lede { color: var(--ink-2); }
.st-home-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.st-home-fact { background: color-mix(in srgb, var(--canvas) 70%, transparent); border: 1px solid color-mix(in srgb, var(--sun-ink) 12%, transparent); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--text-md); color: var(--ink-2); }
.st-home-fact b { display: block; font-family: var(--font-display); color: var(--ink); font-size: var(--text-lg); margin-bottom: 2px; }
.st-home-close-cta { margin-top: var(--s-8); }

@media (max-width: 960px) {
  .st-home-hero .st-home-wrap,
  .st-home-report .st-home-wrap,
  .st-home-close .st-home-wrap,
  .st-home-step { grid-template-columns: 1fr; }
  .st-home-step:nth-child(even) .st-home-step-copy { order: 0; }
  .st-home-stat-grid { grid-template-columns: 1fr 1fr; }
  .st-home-bento { grid-template-columns: 1fr 1fr; }
  .st-home-cell, .st-home-cell.is-wide { grid-column: span 1; }
  .st-home-hubs { grid-template-columns: 1fr 1fr; }
  .st-home-scene { min-height: 420px; }
  .st-home-win-fit { width: 290px; right: 12px; }
}
@media (max-width: 600px) {
  .st-home-stat-grid,
  .st-home-bento,
  .st-home-hubs,
  .st-home-facts { grid-template-columns: 1fr; }
  .st-home-scene { min-height: 0; padding: var(--s-4); display: grid; gap: var(--s-3); }
  .st-home-win { position: static; width: auto; }
  .st-home-win-cv, .st-home-win-mail { display: none; }
}

/* The illustrative report sheet: drop the fourth column on phones so the table never overflows. */
@media (max-width: 600px) {
  .st-home-sheet th:nth-child(4), .st-home-sheet td:nth-child(4) { display: none; }
  .st-home-sheet th, .st-home-sheet td { padding-left: var(--s-3); padding-right: var(--s-3); }
}

/* The closing sun band sits directly on the dark footer. */
main.st-home + .st-foot { margin-top: 0; }