/* 職業技能介紹（/classes 和 /classes/<職業>）
 * 頁面由 scripts/build-classes.mjs 產生；顏色、字型、卡片沿用 site.css。圖示是遊戲客戶端的官方圖示（--sheet 圖示圖，每格 56×56）。
 * 圖示圖：--sheet 網址、--cols 欄數；每個圖示的 --x、--y 是第幾欄、第幾列，--s 是畫面上的邊長。
 */
.cl-page [style*="--x"]{background-image:var(--sheet);background-repeat:no-repeat;
  background-size:calc(var(--cols) * var(--s)) auto;background-position:calc(var(--x) * var(--s) * -1) calc(var(--y) * var(--s) * -1)}

/* ---------- 列表頁 ---------- */
.cl-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cl-cards>li{display:flex}
.cl-card{flex:1;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"ci tx" "ds ds";gap:8px 12px;padding:12px 14px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:inset 0 1px 0 rgba(233,203,136,.05)}
.cl-card:hover{color:inherit;border-color:var(--cc)}
.cl-card:hover b{text-decoration:underline;text-underline-offset:3px}
.cl-card .ci{--s:52px;grid-area:ci;width:52px;height:52px;border-radius:9px;border:1px solid color-mix(in srgb,var(--cc) 55%,transparent);box-shadow:0 6px 16px rgba(0,0,0,.45)}
.cl-card .tx{grid-area:tx;display:flex;flex-direction:column;justify-content:center;min-width:0}
.cl-card b{font-family:var(--serif);font-weight:900;font-size:20px;line-height:1.2;color:var(--cc)}
.cl-card .sk{margin-top:3px;font-size:13px;font-weight:500;color:var(--text)}
.cl-card .sk i{font-style:normal;color:var(--faint)}
.cl-card .n{font-size:12px;color:var(--faint)}
.cl-card .ds{grid-area:ds;font-size:12.5px;line-height:1.65;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cl-notes{display:grid;gap:4px;padding:14px 2px 0;font-size:12.5px;line-height:1.7;color:var(--faint)}
.cl-notes p{margin:0}
.cl-notes a,.cl-src a,.page-h p a{color:var(--gold)}

/* ---------- 每個職業一頁 ---------- */
.cl-page>.crumbs{padding:22px 0 10px}   /* 麵包屑（class 要剛好是 crumbs，check-seo 才比對得到） */
.cl-switch{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin:0 0 12px}
.cl-switch a,.cl-switch span.on{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 6px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);font-size:13.5px;font-weight:700;white-space:nowrap;opacity:.72}
.cl-switch a:hover{opacity:1;color:inherit}
.cl-switch a:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.cl-switch span.on{opacity:1;border-color:currentColor;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px currentColor}
.cl-switch .ci{--s:20px;width:20px;height:20px;flex:none;border-radius:4px}
.cl-switch span:last-child{color:inherit}

.cl-hero{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:18px 20px;padding:18px 22px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:radial-gradient(520px 200px at 0% 0%,color-mix(in srgb,var(--cc) 16%,transparent),transparent 70%),var(--panel2)}
.cl-hero::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--line-gold),transparent)}
.cl-big{--s:72px;width:72px;height:72px;border-radius:12px;border:1px solid color-mix(in srgb,var(--cc) 60%,transparent);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.cl-hero-tx{min-width:0}
.cl-hero h1{margin:3px 0 0;font-family:var(--serif);font-weight:900;font-size:32px;line-height:1.2;letter-spacing:.04em;color:var(--cc)}
.cl-desc{margin:6px 0 0;max-width:66ch;font-size:14px;line-height:1.75;color:var(--muted)}
.cl-side{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.cl-facts{display:grid;grid-template-columns:repeat(4,auto);gap:1px;margin:0;border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;background:var(--line-soft)}
.cl-facts div{padding:6px 12px;background:#130f0b;text-align:center}
.cl-facts dt{font-size:11.5px;color:var(--faint);white-space:nowrap}
.cl-facts dd{margin:1px 0 0;font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.25;color:var(--text)}
.cl-facts dd small{margin-left:2px;font-family:var(--sans);font-weight:400;font-size:11px;color:var(--muted)}
.cl-talent span{display:inline-flex}
.cl-talent svg{width:14px;height:14px}

.cl-tabs{display:flex;margin:16px 0 12px;width:max-content;max-width:100%}
.cl-tabs button{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;font-size:14px}
.cl-tabs .ti{--s:20px;width:20px;height:20px;flex:none;border-radius:4px;opacity:.9}
.cl-tabs small{font-family:var(--latin);font-size:12px;font-weight:700;color:var(--faint)}
.cl-tabs button.on small{color:var(--gold)}
.cl-sec{margin:0 0 14px}
.cl-sec .card-h .ic.ti{--s:30px;border-color:var(--line)}
.cl-list{list-style:none;margin:0;padding:0 14px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;align-items:start}
.ab{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:10px 12px 11px;border:1px solid var(--line-soft);border-radius:8px;background:rgba(255,255,255,.015)}
.ab .ic{--s:42px;width:42px;height:42px;border-radius:7px;border:1px solid var(--line)}
.ab .bd{min-width:0}
.ab .hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.ab h3{margin:0;font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.35;color:var(--text)}
.ab .rk{font-size:12px;color:var(--faint);white-space:nowrap}
.ab .lv{margin-left:auto;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.ab .chip{height:18px;font-size:11px;align-self:center}
.chip.cl-var{color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.03)}
.chip.cl-race{color:var(--gold-hi);border-color:var(--line-gold);background:rgba(201,163,91,.1)}
.chip.cl-fac.a{color:var(--ally-hi);border-color:rgba(79,134,234,.55);background:rgba(79,134,234,.14)}
.chip.cl-fac.h{color:var(--horde-hi);border-color:rgba(216,74,81,.55);background:rgba(216,74,81,.14)}
.ab .mt{display:flex;flex-wrap:wrap;gap:0 4px;margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.ab .mt span+span::before{content:"・";margin-right:4px;color:var(--faint)}
/* 需求（需要戰鬥姿態, 防禦姿態／需要匕首）和材料：遊戲說明框裡沒達成時是紅字，這裡用淡橘色標出 */
.ab .rq{display:flex;flex-wrap:wrap;gap:0 4px;margin:1px 0 0;font-size:12.5px;color:#e8a77f}
.ab .rq span+span::before{content:"・";margin-right:4px;color:var(--faint)}
.ab .ds{margin:4px 0 0;font-size:13.5px;line-height:1.65;color:var(--text);white-space:pre-line;overflow-wrap:anywhere}
.ab .ds b{font-weight:700;color:var(--gold-hi)}
.ab .rks{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:7px 0 0}
.ab .rks .lab{margin-right:2px;font-size:11.5px;color:var(--faint)}
.ab .rks button{min-width:27px;height:22px;padding:0 5px;border:1px solid var(--line);border-radius:5px;background:#120e0a;color:var(--muted);
  font:inherit;font-family:var(--latin);font-size:11.5px;font-weight:700;line-height:1;cursor:pointer}
.ab .rks button:hover{color:var(--gold-hi);border-color:var(--line-gold)}
.ab .rks button.on{color:var(--gold-hi);border-color:var(--gold);background:rgba(201,163,91,.14)}
/* 有 JS 時一次只顯示一個分頁（沒有 JS 時三個分頁全部列出） */
.cl-class.js .cl-sec:not(.show){display:none}

.cl-pn{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:4px 0 0}
.cl-pn a{display:block;padding:9px 14px;border:1px solid var(--line-soft);border-radius:8px;background:rgba(255,255,255,.015);font-family:var(--serif);font-weight:700;font-size:15px}
.cl-pn a:hover{border-color:var(--line)}
.cl-pn small{display:block;font-family:var(--sans);font-weight:400;font-size:12px;color:var(--faint)}
.cl-pn .next{text-align:right}
.cl-pn .all{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--gold)}
.cl-src{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--faint)}

/* ---------- 版面 ---------- */
@media (max-width:1079px){
  .cl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-switch{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cl-hero{grid-template-columns:72px minmax(0,1fr)}
  .cl-side{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between}
}
@media (max-width:820px){
  .cl-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cl-cards{grid-template-columns:1fr;gap:8px}
  .cl-card{grid-template-columns:44px minmax(0,1fr);padding:10px 12px 11px;gap:6px 10px}
  .cl-card .ci{--s:44px;width:44px;height:44px}
  .cl-card b{font-size:18px}
  .cl-page>.crumbs{padding:16px 0 8px}
  .cl-switch{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
  .cl-switch a,.cl-switch span.on{height:34px;font-size:13px}
  /* 手機：圖示在左、英文小標和標題在右，介紹和數字排在下面整行 */
  .cl-hero{grid-template-columns:52px minmax(0,1fr);gap:0 12px;padding:14px 14px 14px 16px}
  .cl-big{--s:52px;width:52px;height:52px;border-radius:10px;grid-row:span 2;align-self:center}
  .cl-hero-tx{display:contents}
  .cl-hero-tx>.eyebrow{grid-column:2;align-self:end;font-size:10px;letter-spacing:.22em}
  .cl-hero-tx>h1{grid-column:2;margin:2px 0 0;font-size:25px;letter-spacing:.02em}
  .cl-desc{grid-column:1 / -1;margin-top:10px;font-size:13.5px;line-height:1.7}
  .cl-side{grid-column:1 / -1;margin-top:12px;flex-direction:column;align-items:stretch}
  .cl-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cl-facts div{padding:6px 4px}
  .cl-facts dd{font-size:16px}
  .cl-tabs{width:100%;margin:12px 0 10px}
  .cl-tabs button{flex:1 1 0;min-width:0;justify-content:center;gap:5px;padding:7px 4px;font-size:13.5px}
  .cl-tabs .ti{display:none}
  .cl-list{padding:0 10px 10px;gap:6px}
  .ab{grid-template-columns:36px minmax(0,1fr);gap:10px;padding:9px 10px 10px}
  .ab .ic{--s:36px;width:36px;height:36px;border-radius:6px}
  .ab h3{font-size:15.5px}
  .ab .ds{font-size:13.5px}
  .cl-pn{grid-template-columns:1fr 1fr}
  .cl-pn .all{grid-column:1 / -1;grid-row:2;text-align:center}
  .cl-pn a{padding:8px 11px;font-size:14px}
}