/* Talent spec pages (/talents/<class>-<spec>/) and the class directory on /talents/.
   Sits on top of info-blocks.css (the .ib-* cards) and the calculator styles. */

/* call-to-action boxes (same look as on the guides and BiS pages) */
.cta-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:12px; margin:22px 0 4px; }
a.cta{ --cta:255,128,0; display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid rgba(var(--cta),.6); border-radius:12px; background:linear-gradient(135deg,rgba(var(--cta),.17),rgba(var(--cta),.04)); box-shadow:0 0 0 1px rgba(var(--cta),.10), 0 0 20px rgba(var(--cta),.26), inset 0 0 18px rgba(var(--cta),.08); color:#fff; text-decoration:none; transition:transform .18s, box-shadow .18s, border-color .18s; }
a.cta:hover, a.cta:focus-visible{ transform:translateY(-2px); border-color:rgba(var(--cta),.95); box-shadow:0 0 0 1px rgba(var(--cta),.25), 0 0 30px rgba(var(--cta),.46), inset 0 0 22px rgba(var(--cta),.14); }
.ib .ib-card a.cta:not(.btn){ color:#fff; text-decoration:none; }
.ib .ib-card a.cta:not(.btn) b{ color:#fff; }
a.cta-bis{ --cta:76,201,240; }
a.cta-guide{ --cta:176,124,255; }
.cta-ico{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:10px; background:rgba(var(--cta),.16); border:1px solid rgba(var(--cta),.5); color:rgb(var(--cta)); }
.cta-ico svg{ width:23px; height:23px; }
.cta-txt{ flex:1; min-width:0; }
.cta-txt b{ display:block; font-size:17.5px; line-height:1.25; color:#fff; letter-spacing:.01em; }
.cta-txt small{ display:block; margin-top:3px; font-size:13px; line-height:1.45; color:#d6ccc0; }
.cta-go{ flex:none; font-size:24px; line-height:1; color:rgb(var(--cta)); transition:transform .18s; }
a.cta:hover .cta-go{ transform:translateX(4px); }

/* numbers strip */
.tp-chips{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:22px 0 0; }
.tp-chips li{ display:flex; flex-direction:column; gap:2px; min-width:118px; padding:10px 16px; border:1px solid #3a2f24; border-radius:10px; background:rgba(255,255,255,.03); }
.tp-chips b{ font:700 22px/1.1 'Chakra Petch',sans-serif; color:#fff; }
.tp-chips span{ font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#a89a8b; }

/* tables */
.tp-scroll{ overflow-x:auto; margin-top:14px; border:1px solid #33291f; border-radius:10px; }
.tp-table{ width:100%; min-width:560px; border-collapse:collapse; font-size:15px; line-height:1.55; }
.tp-table th, .tp-table td{ padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid #2c241b; color:#d6cabc; }
.tp-table th{ font:600 12px/1.2 'Chakra Petch',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:#a89a8b; background:rgba(255,255,255,.03); white-space:nowrap; }
.tp-table tbody tr:last-child td{ border-bottom:0; }
.tp-table tbody tr:hover td{ background:rgba(255,255,255,.02); }
.tp-table td b{ color:#f4eadc; }
.tp-num{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.tp-builds td:nth-child(2){ font-weight:700; color:#f4eadc; white-space:nowrap; }
.tp-tag{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,128,0,.55); background:rgba(255,128,0,.12); color:#ffb066; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.tp-arrow{ color:#ffc857; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tp-more{ color:#a89a8b; font-size:13.5px; }
.tp-stats{ display:block; margin-bottom:4px; font-size:13px; font-weight:600; color:#ffc857; }

/* one block per talent tree */
.tp-tree{ margin-top:16px; }
.tp-tree > summary{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid #3a2f24; border-radius:10px; background:linear-gradient(90deg,rgba(255,128,0,.10),rgba(255,255,255,.02)); cursor:pointer; list-style:none; }
.tp-tree > summary::-webkit-details-marker{ display:none; }
.tp-tree > summary::before{ content:"\25B8"; color:#ff9a3c; margin-right:10px; transition:transform .15s; }
.tp-tree[open] > summary::before{ transform:rotate(90deg); }
.tp-tree-n{ flex:1; font:700 18px/1.2 'Chakra Petch',sans-serif; color:#f7f0e7; }
.tp-tree-p{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#ffc857; }
.tp-tree > summary:focus-visible{ outline:2px solid #fff2d6; outline-offset:3px; }

/* glyphs */
.ib .tp-h3{ margin:22px 0 12px; font:700 15px/1.2 'Chakra Petch',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#b07cff; }
.ib .tp-h3:first-child{ margin-top:0; }
.tp-glyphs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px; list-style:none; padding:0; margin:0; }
.tp-glyph{ display:flex; gap:14px; align-items:flex-start; padding:12px 14px; border:1px solid #33291f; border-radius:10px; background:rgba(255,255,255,.025); }
.tp-glyph img, .tp-glyph-ico{ flex:none; width:40px; height:40px; border-radius:6px; border:1px solid #5b4b36; background:#0c0a08; }
.tp-glyph b{ display:block; color:#f4eadc; font-size:15.5px; line-height:1.3; }
.ib .tp-glyph p{ margin:4px 0 0; font-size:14px; line-height:1.55; color:#cfc3b5; }
.ib .tp-alt{ margin:14px 0 0; font-size:14.5px; color:#cfc3b5; }
.ib .tp-alt b{ color:#f4eadc; }

/* links to the other specs of the class */
.ib .tp-sibs{ display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.tp-sibs a{ display:inline-flex; align-items:center; padding:9px 16px; border:1px solid #3a2f24; border-radius:999px; background:rgba(255,255,255,.03); color:#f4eadc !important; text-decoration:none !important; font-weight:600; font-size:15px; }
.tp-sibs a:hover, .tp-sibs a:focus-visible{ border-color:#ffc857; color:#fff !important; }

/* directory of all spec pages on /talents/ */
.tp-dir .ib-specs a{ display:inline-flex; gap:8px; align-items:baseline; padding:5px 11px; border-radius:999px; font-size:13.5px; font-weight:600; color:#e6dac9; border:1px solid color-mix(in srgb,var(--cls,#ffc857) 45%,#2a231c); background:rgba(255,255,255,.03); text-decoration:none; }
.tp-dir .ib-specs a small{ color:#a89a8b; font-size:12px; font-variant-numeric:tabular-nums; }
.tp-dir .ib-specs a:hover, .tp-dir .ib-specs a:focus-visible{ border-color:var(--cls,#ffc857); color:#fff; }
.tp-dir .ib-class-name a{ color:inherit; text-decoration:none; }

@media (max-width:640px){
  .tp-chips li{ flex:1 1 44%; min-width:0; }
  .tp-tree-n{ font-size:16px; }
  /* the tables fit the phone screen instead of scrolling sideways */
  .tp-table{ min-width:0; font-size:14px; }
  .tp-table th, .tp-table td{ padding:9px 10px; }
  .tp-builds thead{ display:none; }
  .tp-builds, .tp-builds tbody, .tp-builds tr, .tp-builds td{ display:block; width:100%; }
  .tp-builds tr{ padding:10px 2px; border-bottom:1px solid #2c241b; }
  .tp-builds tr:last-child{ border-bottom:0; }
  .tp-builds td, .tp-builds td:nth-child(2){ border:0; padding:4px 10px; white-space:normal; }
  .tp-builds td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:2px; font:600 11px/1.2 'Chakra Petch',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:#a89a8b; }
}
@media (prefers-reduced-motion:reduce){ a.cta, .cta-go, .tp-tree > summary::before{ transition:none; } a.cta:hover, a.cta:hover .cta-go{ transform:none; } }

/* author and update line under the heading */
.byline{ margin:14px auto 0; font-size:13.5px; line-height:1.5; color:#a89a8b; text-align:center; }
.byline a{ color:#e6dac9; text-decoration:underline; text-underline-offset:3px; }
.byline time{ color:#d6cabc; }