/* Training page (previews the tracks; sold on TEK-Brains). Builds on products.css. Values from tokens.css only. */

/* ---------- Landing hero ---------- */
.srv-training-hero__title { max-width: calc(var(--content-width) * 0.75); margin-top: var(--space-6); }
.srv-training-hero__intro {
  max-width: calc(var(--content-width) * 0.55);
  margin-top: var(--space-4);
  color: var(--ink-soft);
  font: 300 var(--text-body-lg) var(--font-sans);
}
.srv-training-overview__title { margin-top: var(--space-4); }
.srv-training-overview__grid { margin-top: var(--space-8); }
.srv-training-badge { margin-left: var(--space-2); vertical-align: middle; }

/* ---------- Track cards (link to TEK-Brains) ---------- */
.srv-training-intro { max-width: calc(var(--content-width) * 0.62); margin-top: var(--space-4); color: var(--ink-soft); font: 300 var(--text-body-lg) var(--font-sans); }
.srv-training-overview__grid > li { display: flex; scroll-margin-top: calc(var(--header-height) + var(--header-inset) * 2 + var(--space-6)); }
.srv-track-card { flex: 1; display: flex; color: inherit; text-decoration: none; transition: border-color var(--dur-fast); }
.srv-track-card .srv-card__inner { display: flex; flex: 1; flex-direction: column; }
a.srv-track-card:hover, a.srv-track-card:focus-visible { border-color: var(--line-strong); }
.srv-track-card__head { display: flex; align-items: center; gap: var(--space-3); }
.srv-track-card__title { margin-top: var(--space-3); }
.srv-track-card__topics { flex: 1; margin: var(--space-3) 0 0; padding-left: var(--space-4); color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans); }
.srv-track-card__topics li + li { margin-top: var(--space-1); }
.srv-track-card__go, .srv-track-card__soon { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); font: 500 var(--text-label) var(--font-display); }
.srv-track-card__go { color: var(--accent); }
.srv-track-card__go svg { width: var(--space-4); height: var(--space-4); transition: transform var(--dur-fast) var(--ease-reveal); }
a.srv-track-card:hover .srv-track-card__go svg { transform: translate(var(--space-1), calc(-1 * var(--space-1))); }
.srv-track-card__soon { color: var(--ink-muted); }
}

/* ---------- Landing sections from the layout PDF ---------- */
.srv-training-sub { margin-top: var(--space-2); color: var(--ink-soft); font: 300 var(--text-body-lg) var(--font-sans); }

/* Market statistics */
.srv-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-4);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}
.srv-stat { display: flex; }
.srv-stat .srv-card__inner { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); }
/* Each figure in its colour from layout v14 (tone in lib/training-landing.json). */
.srv-stat__value { color: var(--ink); font: 300 var(--text-display-lg) var(--font-serif); font-variant-numeric: lining-nums; }
.srv-stat--danger .srv-stat__value { color: var(--danger); }
.srv-stat--success .srv-stat__value { color: var(--success); }
.srv-stat--accent .srv-stat__value { color: var(--accent); }
.srv-stat--warning .srv-stat__value { color: var(--warning); }
.srv-stat--accent-2 .srv-stat__value { color: var(--accent-2); }
.srv-stat__label { padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }

@media (max-width: 767px) {
  /* Phones: two figures per row; an odd last one takes the full row. */
  .srv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-12); }
  .srv-stats > .srv-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .srv-stat .srv-card__inner { padding: var(--space-4); }
  .srv-stat__value { font: 300 var(--text-h2) var(--font-serif); }
}

/* The market in numbers, near the end (the client's Market Disruption Alert). */
.srv-training-stats__lead { max-width: calc(var(--content-width) * 0.75); }
.srv-training-stats .srv-stats { margin-top: var(--space-12); }

/* Job market transformation */
.srv-training-transform { margin-top: var(--space-24); }
.srv-training-transform__title { text-align: center; }
.srv-transform-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-6); margin-top: var(--space-8); }
.srv-training-transform__sub { max-width: calc(var(--content-width) * 0.62); margin: var(--space-8) auto 0; text-align: center; }
.srv-transform__h { font: 600 var(--text-h4) var(--font-display); }
.srv-risk { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.srv-risk__row { display: grid; grid-template-columns: calc(var(--space-24) * 1.4) 1fr calc(var(--space-12)); align-items: center; gap: var(--space-3); }
.srv-risk__row + .srv-risk__row { margin-top: var(--space-3); }
.srv-risk__role { color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans); text-align: right; }
.srv-risk__bar { width: 100%; height: var(--space-3); }
.srv-risk__track { fill: var(--surface-raised); }
.srv-risk__fill--danger { fill: var(--danger); }
.srv-risk__fill--warning { fill: var(--warning); }
.srv-risk__fill--success { fill: var(--success); }
.srv-risk__value { font: 600 var(--text-body-sm) var(--font-sans); font-variant-numeric: tabular-nums; }

.srv-timeline { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.srv-timeline li { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.srv-timeline__glow { position: absolute; inset: -1px; z-index: 0; border: 1px solid var(--accent); border-radius: inherit; background: var(--surface-raised); opacity: 0; pointer-events: none; }
.srv-timeline__period, .srv-timeline__text { position: relative; z-index: 1; }
.srv-timeline__period { color: var(--accent); font: 600 var(--text-body) var(--font-sans); font-variant-numeric: lining-nums; }
.srv-timeline__text { color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans); }

/* Job landscape */
.srv-landscape-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.srv-landscape-card { display: flex; flex-direction: column; height: 100%; }
.srv-landscape-card__text { margin-top: var(--space-3); color: var(--ink-soft); }
.srv-landscape-card__source {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font: 400 var(--text-caption) var(--font-sans);
  overflow-wrap: anywhere;
}
.srv-landscape-card__text + .srv-landscape-card__source { margin-top: var(--space-6); }

/* Skills gap (the PDF gives no bar values, so only the gap level is shown) */
.srv-gap { margin: var(--space-8) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.srv-gap__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.srv-gap__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line-strong); pointer-events: none; }
.srv-gap__skill { font: 400 var(--text-body-lg) var(--font-sans); }
.srv-gap__level { font: 600 var(--text-overline) var(--font-sans); letter-spacing: var(--tracking-overline); text-transform: uppercase; }
.srv-gap__level--danger { color: var(--danger); }
.srv-gap__level--warning { color: var(--warning); }
.srv-gap__level--success { color: var(--success); }

/* TEK-RACKS */
.srv-racks__text { max-width: calc(var(--content-width) * 0.7); margin-top: var(--space-4); color: var(--ink-soft); font: 400 var(--text-body-lg) var(--font-sans); }
.srv-racks__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.srv-racks__cta { margin-top: var(--space-8); }

@media (max-width: 767px) {
  .srv-transform-grid { grid-template-columns: 1fr; }
  .srv-training-transform { margin-top: var(--space-16); }
  .srv-risk__row { grid-template-columns: calc(var(--space-24)) 1fr calc(var(--space-12)); }
  .srv-stat__value { font: 300 var(--text-h1) var(--font-serif); font-variant-numeric: lining-nums; }
}

/* Multi-hat imperative */
.srv-training-sub--wide { max-width: calc(var(--content-width) * 0.75); }
.srv-roles { display: grid; gap: var(--space-3); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.srv-role {
  display: grid;
  grid-template-columns: auto calc(var(--space-24) * 2) 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.srv-role__dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: currentColor; }
.srv-role__name { color: var(--ink); font: 600 var(--text-body) var(--font-display); }
.srv-role__skills { color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans); }
.srv-role--accent { color: var(--accent); }
.srv-role--warning { color: var(--warning); }
.srv-role--accent-2 { color: var(--accent-2); }
.srv-role--success { color: var(--success); }
.srv-role--danger { color: var(--danger); }

.srv-disagg { margin-top: var(--space-8); border-color: var(--accent-2); }
.srv-disagg__title { color: var(--accent-2); font: 600 var(--text-overline) var(--font-sans); letter-spacing: var(--tracking-overline); text-transform: uppercase; }
.srv-disagg__text { margin-top: var(--space-3); color: var(--ink-soft); }

/* The clock is ticking */
.srv-clock { border-color: var(--warning); }
.srv-clock__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--warning);
  font: 600 var(--text-h4) var(--font-display);
}
.srv-clock__title svg { flex-shrink: 0; }
.srv-clock__icon { display: inline-flex; flex-shrink: 0; }
.srv-clock__list { margin: var(--space-4) 0 0; padding-left: var(--space-6); }
.srv-clock__list li + li { margin-top: var(--space-2); }
.srv-clock__list li::marker { color: var(--warning); }

/* Why now */
.srv-why--accent-2 { border-top-color: var(--accent-2); }
.srv-why--accent { border-top-color: var(--accent); }
.srv-why--warning { border-top-color: var(--warning); }
.srv-why--success { border-top-color: var(--success); }

/* Closing band (solid, no gradient) */
.srv-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card-outer);
  background: var(--surface);
}
.srv-why-grid { perspective: 1200px; }
.srv-band__cta { display: inline-flex; }
.srv-band__text { max-width: calc(var(--content-width) * 0.6); font: 300 var(--text-h2) var(--font-serif); }

@media (max-width: 767px) {
  .srv-role { grid-template-columns: auto 1fr; padding: var(--space-4); }
  .srv-role__skills { grid-column: 2; }
  .srv-band { padding: var(--space-6); }
}