/* T2 class page (scripts/lib/templates/class.mjs, ops/design/templates/class/contract.md).
   The class sheet, the headline changes and the talent pane open the page. Below 72rem they
   stack in that order; from 72rem the sheet sits left (5 of 12) beside the pane (7 of 12)
   and the headline changes run across both underneath, so neither column ends in empty
   stone. Everything below runs in the guide grid with the table of contents. Brand v2.1
   tokens only; the accent is the class color set by .class-<slug> on <main>. Shared
   component styles live in public/components/. */

.class-page { padding-bottom: var(--s-6); }
.class-head .wfg-page-head { padding-bottom: var(--s-2); }

.class-top { display: grid; gap: var(--s-3); align-items: start; }
@media (min-width: 72rem) {
  .class-top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "sheet pane" "leads leads";
  }
  .class-top > [data-class-sheet] { grid-area: sheet; align-self: stretch; }
  .class-top > [data-class-pane] { grid-area: pane; }
  .class-top > [data-class-leads] { grid-area: leads; }
  /* The loaded calculator needs the full width, so the pane drops under the rest. */
  .class-top:has([data-calc-view="calc"]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sheet" "leads" "pane"; }
  /* 2026-10-02: the partner CTA (components/partner-cta.css) sits right under the sheet in the
     left column; the pane's extra height goes to the CTA's row, so the left column ends in
     page ground under the CTA rather than pushing it down. Below 72rem it follows the sheet. */
  .class-top.has-cta { grid-template-areas: "sheet pane" "cta pane" "leads leads"; grid-template-rows: auto 1fr auto; }
  .class-top > .wfg-cta { grid-area: cta; }
  .class-top.has-cta:has([data-calc-view="calc"]) { grid-template-areas: "sheet" "cta" "leads" "pane"; grid-template-rows: none; }
}

/* ---------- Class sheet: the answer ----------
   The answer box, label, tree rows, legend and caption rules are shared with spec pages and
   live in public/components/sheet.css; the video takeaways in public/components/takeaways.css. */

.class-race-line { margin: 0 0 .4rem; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }

/* The race strip is portraits only; the sentence above names every race, and each link
   keeps its name as its accessible label. Nine 2rem portraits fit a 390 px phone. */
.class-race-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.class-race-strip .wfg-race { padding: 0; border: 0; gap: 0; }
.class-race-strip .wfg-race img { width: 2rem; height: 2rem; box-shadow: 0 0 0 1px var(--edge), 0 0 0 2px var(--wfg-faction); }
.class-race-strip .wfg-race span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.class-race-strip .wfg-race-new { top: -.45rem; right: -.6rem; padding: 0 .22rem; font-size: .66rem; line-height: 1.35; }

/* ---------- Headline changes ---------- */

/* A label, not a title bar: the headline changes read as the sheet's continuation. */
[data-class-leads] > .class-label { margin-bottom: .2rem; }
[data-class-leads] .wfg-fact:first-child { border-top: 0; }
@media (min-width: 48rem) {
  [data-class-leads] .wfg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: var(--s-5); }
  [data-class-leads] .wfg-fact { border-top: 0; padding-block: 0; }
  [data-class-leads] { padding-block: 10px 8px; }
}

/* ---------- Talent pane ---------- */

.class-frame[hidden] { display: none; }
[data-class-pane] .wfg-calc { margin-top: var(--s-3); }
[data-class-pane] .wfg-calc[data-calc-state="idle"] { margin-top: 0; }
[data-class-pane] .talent-calculator-attribution { margin-top: var(--s-2); font-size: .8rem; color: var(--ink-3); }
[data-class-pane] .wfg-calc[data-calc-state="idle"] .talent-calculator-attribution { display: none; }

/* Talent size follows the pane's width so all three trees fit side by side from 44rem: the
   frame's own scroll track stays for narrower screens, and phones get the tree tabs. 40 px
   icons from 60rem, in the one-column layout up to 72rem and beside the sheet at 1440. */
@media (min-width: 44rem) {
  [data-class-pane] .wfg-tree { padding: .8rem .75rem 1rem; }
  [data-class-pane] .wfg-tree-head { margin-bottom: .7rem; }
  [data-class-pane] .wfg-talents[data-mode="class"] .wfg-trees { gap: .6rem; }
}
@media (min-width: 44rem) and (max-width: 60rem) {
  [data-class-pane] .wfg-talents[data-mode="class"] { --cell: clamp(1.6rem, 4.2vw, 2.35rem); --gap: calc(var(--cell) * .28); }
  [data-class-pane] .wfg-talents[data-mode="class"] .wfg-trees { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; padding-bottom: 0; }
}
@media (min-width: 60rem) and (max-width: 72rem) {
  [data-class-pane] .wfg-talents[data-mode="class"] { --cell: 2.5rem; --gap: .7rem; }
}
@media (min-width: 72rem) {
  [data-class-pane] .wfg-talents[data-mode="class"] { --cell: clamp(1.9rem, 2.8vw, 2.5rem); --gap: calc(var(--cell) * .2); }
  [data-class-pane] .wfg-tree { padding: .6rem .75rem .8rem; }
  [data-class-pane] .wfg-tree-head { margin-bottom: .5rem; }
}

/* ---------- Sections below the first screen ---------- */

.class-lower > .article-column { padding-bottom: var(--s-5); }
.class-block { margin: 0 0 var(--s-7); }
.class-block > h2 { margin: 0 0 .4rem; font: var(--heading-weight) clamp(1.7rem, 3.2vw, 2.2rem)/1.2 var(--font-heading); letter-spacing: 0; color: var(--ink); }

/* Races and racials: the playable races by faction; a checkbox shows the rest (CSS only). */
.class-race-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-bottom: var(--s-3); font: 400 .9rem/1.3 var(--font-ui); color: var(--ink-2); cursor: pointer; }
.class-race-toggle input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); }
.class-race-columns { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 44rem) {
  .class-race-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.class-race-column > h3 { margin: 0 0 .5rem; font: var(--heading-weight) .8rem/1.3 var(--font-heading); letter-spacing: 0; text-transform: uppercase; }
.class-race-column[data-faction="alliance"] > h3 { color: var(--alliance); }
.class-race-column[data-faction="horde"] > h3 { color: var(--horde-text); }
.class-race { margin: 0 0 var(--s-3); padding: 8px 12px 10px; border: 1px solid var(--edge); border-left: 3px solid var(--line-control); box-shadow: var(--shadow-inner); background: var(--panel); }
.class-race-column[data-faction="alliance"] .class-race { border-left-color: var(--alliance); }
.class-race-column[data-faction="horde"] .class-race { border-left-color: var(--horde); }
.class-race[hidden] { display: none; }
.class-races:has(.class-race-toggle input:checked) .class-race[hidden] { display: block; }
/* A race that can't play the class dims its portrait only; its text keeps full contrast. */
.class-race[data-playable="0"] { border-left-color: var(--line-control); }
.class-race[data-playable="0"] > .wfg-race img { filter: grayscale(1); opacity: .6; }
.class-race > .wfg-race { margin: 0 0 .35rem -.4rem; }

.class-notes { margin-bottom: var(--s-6); }
.class-page .wfg-faq { margin: 0 0 var(--s-7); }