/* ---------- roles: new paid AI roles inside the company ---------- */
/* One bracketed board. On top, a WebGL path scene (js/sections/roles.js):
   YOUR TEAMS as points; a reticle finds one person per team, who lifts into
   a labelled AI Champion role (dashed while open, solid once filled, green
   pay mark); one more person takes the AI Hero role and walks with our FDE
   to proof, then to a permanent AI job. Under it, the two role sheets; their
   rows share one grid so the green pay rows read across.
   --roles-mode tells the script which composition to draw: one row (wide,
   mid) or two stacked bands on phones (stack). Keep the heights in step. */

.roles { padding: var(--section-y) 0; background: var(--bg); }

.roles-board {
  margin-top: clamp(64px, 7vw, 104px);
  padding: clamp(20px, 2.8vw, 40px);
}

/* the path scene */
.roles-path { --roles-mode: wide; position: relative; height: 244px; }
.roles-gl,
.roles-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.roles-svg { overflow: hidden; }
.no-webgl .roles-gl { visibility: hidden; }
html:not(.js) .roles-path { display: none; }

.roles-tag {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-3);
  opacity: 0;
  pointer-events: none;
}
.roles-tag[data-anchor="c"] { translate: -50% -50%; }
.roles-tag[data-anchor="l"] { translate: 0 -50%; }
.roles-tag[data-anchor="r"] { translate: -100% -50%; }
/* the names a reader needs first: who is there, and the new roles */
.roles-tag[data-tag="champ"],
.roles-tag[data-tag="teams"],
.roles-tag[data-tag="hero"],
.roles-tag[data-tag="job"] { color: var(--fg-2); }
/* bracket labels sit on their hairline and break it */
.roles-tag[data-tag="champ"],
.roles-tag[data-tag="teams"] { padding: 0 8px; background: var(--bg); }
/* the results bonus is money: the scene's only green words */
.roles-tag[data-tag="bonus"] { padding: 4px 6px 3px; background: var(--gain-dim); color: var(--gain); }

.roles-rule { margin-top: 18px; max-width: 40em; line-height: 1.5; color: var(--fg-2); }

/* the role sheets */
.role-specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 48px);
  margin-top: clamp(40px, 4.4vw, 56px);
}
.role { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.role-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.role h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.role-sub { margin-top: 8px; font-size: 1.0625rem; line-height: 1.45; color: var(--fg-2); }
.role-rows { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin: 0; }
.role-rows > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding-top: 14px; }
.role-rows dt {
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--fg-3);
}
.role-rows dd { margin: 0; line-height: 1.5; color: var(--fg); }
.role-pay dd { color: var(--gain); }

/* the supporting stat */
.roles-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  margin: clamp(56px, 6vw, 88px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.roles-stat p { color: var(--fg-2); }
.roles-stat-num { margin-right: 10px; font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 480; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--fg); }
.roles-stat figcaption { margin: 0; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.45; }
.roles-stat figcaption a { color: var(--fg-3); text-decoration-color: var(--line-2); transition: color 0.2s ease; }
.roles-stat figcaption a:hover { color: var(--fg); }

@media (max-width: 1040px) {
  .roles-path { --roles-mode: mid; height: 232px; }
}

@media (max-width: 860px) {
  .role-specs { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .role,
  .role-rows { display: block; }
  .role-rows > div:first-child { padding-top: 16px; }
}

/* phones: two bands, teams to Champions, then the Hero path */
@media (max-width: 640px) {
  .roles-path { --roles-mode: stack; height: 266px; }
  .roles-tag { font-size: 11px; letter-spacing: 0.06em; }
  .roles-tag[data-tag="champ"],
  .roles-tag[data-tag="teams"] { padding: 0 6px; }
}

/* the narrowest phones: the Champion label must stay inside its bracket */
@media (max-width: 359px) {
  .roles-tag { letter-spacing: 0.02em; }
  .roles-tag[data-tag="champ"],
  .roles-tag[data-tag="teams"] { padding: 0 4px; }
}

@media (max-width: 560px) {
  .roles-board { padding: 20px 16px; }
  .role-rows > div { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
}