/* Shared styles for the hobschedule.com landing pages. Colors match the training videos. */
:root {
  --bg: #F3F5F8; --surface: #FDFEFE; --ink: #172033; --muted: #566274; --line: #DCE2EA;
  --accent: #2B66CC; --accent-ink: #FDFEFE; --chip: #E3E8EF;
  --font-display: "Domine", Georgia, serif;
  --font-body: "Public Sans", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0E141E; --surface: #162030; --ink: #E6EBF2; --muted: #9DA9BA; --line: #2A3647;
    --accent: #78A6F5; --accent-ink: #0E141E; --chip: #223045; color-scheme: dark; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.page { max-width: 1040px; margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left)); }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
h1 { font-family: var(--font-display); font-size: clamp(30px, 6vw, 44px); line-height: 1.15; margin: 6px 0 10px; text-wrap: balance; }
.lede { margin: 0; color: var(--muted); max-width: 62ch; font-size: 17px; }
.hero { margin-bottom: 32px; }
.back { display: inline-block; margin-bottom: 20px; font-weight: 600; text-decoration: none; }
.back:hover { text-decoration: underline; }

/* Landing cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 20, 35, .12); }
.card h2 { font-family: var(--font-display); font-size: 22px; margin: 0; }
.card p { margin: 0; color: var(--muted); }
.card .note { color: var(--ink); font-weight: 600; }
.tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--ink); }
.go { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--accent); }
.go.muted { color: var(--muted); }
.soon { border-style: dashed; }
.foot { margin-top: 40px; color: var(--muted); font-size: 14px; }
.foot p { margin: 0; }

/* Training index */
.section { margin-top: 36px; }
.section h2 { font-family: var(--font-display); font-size: 24px; margin: 0 0 4px; }
.section > p { margin: 0 0 14px; color: var(--muted); }
.videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.video { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color .15s; }
.video:hover { border-color: var(--accent); }
.code { flex: none; min-width: 48px; text-align: center; font-weight: 700; font-size: 14px; padding: 6px 8px; border-radius: 8px;
  background: var(--chip); color: var(--ink); font-variant-numeric: tabular-nums; }
.video .title { font-weight: 600; }
.video .sub { display: block; font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .card, .video { transition: none; } a.card:hover { transform: none; } }