/* VastalaMC profession wiki — mirrors the Generators role-model layout */
.profession-page-header{padding-bottom:16px;margin-bottom:20px}
.profession-page-header h1{max-width:none}
.profession-discovery{margin-bottom:38px}
.profession-discovery .wiki-discovery-links{justify-content:flex-start}

/* Overview */
.profession-overview-section{padding-top:0!important;border-top:0!important}
.profession-overview{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(285px,325px);gap:34px;align-items:stretch;margin-top:18px}
.profession-overview-copy{display:flex;align-items:center;min-height:100%}
.profession-overview-copy p{margin:0;max-width:64ch;color:#c4d1d6;font-size:1.01rem;line-height:1.78}
.profession-showcase{margin:0;width:100%;height:100%;min-height:280px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:16px;border:1px solid rgba(142,208,236,.18);background:linear-gradient(180deg,rgba(14,32,43,.78),rgba(7,18,26,.72));box-shadow:0 12px 30px rgba(0,0,0,.16)}
.profession-showcase-item{display:grid;place-items:center;min-width:0;border:1px solid rgba(142,208,236,.12);background:rgba(4,13,20,.58)}
.profession-showcase-item img{width:min(70%,72px);height:min(70%,72px);object-fit:contain;image-rendering:pixelated}
.profession-showcase-item.is-wide{grid-column:span 2}
.profession-showcase-item.is-tall{grid-row:span 2}

/* Main content sections */
.profession-section{padding-top:38px!important;border-top:1px solid rgba(142,208,236,.18)!important}
.profession-section>p:first-of-type{max-width:78ch}
.profession-subtle{color:#8ea4ad!important;font-size:.9rem!important}

/* Generator-style cards */
.profession-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 18px}
.profession-card{position:relative;min-height:140px;padding:17px;border:1px solid rgba(142,208,236,.16);background:linear-gradient(180deg,rgba(14,32,43,.78),rgba(7,18,26,.74));box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.profession-card:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(180deg,#52b4e1,rgba(82,180,225,.08));opacity:.68}
.profession-card-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.profession-card-icon{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;border:1px solid rgba(142,208,236,.15);background:#08151e}
.profession-card-icon img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.profession-card h3{margin:0!important;color:#eff7fa!important;font-family:var(--serif)!important;font-size:1.08rem!important;line-height:1.2!important}
.profession-card p{margin:0!important;color:#aebec5!important;font-size:.89rem!important;line-height:1.52!important}
.profession-card strong{color:#dcecf2}
.profession-card small{display:block;margin-top:7px;color:#7896a3;font-size:.76rem;line-height:1.4}

/* Icon item grids */
.profession-item-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0 22px}
.profession-item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;min-height:68px;padding:10px 11px;border:1px solid rgba(142,208,236,.13);background:rgba(7,18,26,.58)}
.profession-item img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}
.profession-item strong{display:block;color:#e8f2f5;font-size:.84rem;line-height:1.25}
.profession-item small{display:block;margin-top:2px;color:#7895a2;font-size:.72rem;line-height:1.25}

/* Flow / stages */
.profession-flow{display:flex;align-items:stretch;gap:7px;margin:18px 0 22px;overflow-x:auto;padding-bottom:4px}
.profession-flow-step{flex:1 0 110px;display:grid;place-items:center;min-height:72px;padding:10px 12px;text-align:center;border:1px solid rgba(142,208,236,.14);background:rgba(7,18,26,.6);color:#dce9ee;font-size:.82rem;font-weight:800}
.profession-flow-step img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated;margin-bottom:5px}
.profession-flow-arrow{align-self:center;color:#62899a;font-weight:900}
.profession-temp .profession-flow-step:nth-child(1){border-color:rgba(112,175,214,.3)}
.profession-temp .profession-flow-step:nth-child(2){border-color:rgba(183,184,118,.3)}
.profession-temp .profession-flow-step:nth-child(3){border-color:rgba(214,144,92,.3)}
.profession-temp .profession-flow-step:nth-child(4){border-color:rgba(218,102,81,.34)}

/* Tables */
.profession-table-wrap{margin-top:18px;border:1px solid rgba(142,208,236,.14);background:rgba(7,18,26,.46)}
.profession-table{margin:0!important;font-size:.89rem}
.profession-table th{padding:11px 13px;background:rgba(82,180,225,.06);color:#8fb5c5}
.profession-table td{padding:10px 13px;color:#c2d0d5}
.profession-table td:first-child{color:#e8f2f5;font-weight:800}
.profession-table tbody tr:last-child td{border-bottom:0}
.profession-table .wiki-item-name{display:flex;align-items:center;gap:9px}
.profession-table .wiki-item-name img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.profession-level{white-space:nowrap;color:#9fd7ed!important;font-weight:800}
.profession-muted{color:#819aa5!important}
.profession-nowrap{white-space:nowrap}

/* Compact numbered steps */
.profession-steps{counter-reset:profession-step;display:grid;margin:17px 0 24px;padding:0;list-style:none;border-top:1px solid var(--wiki-line)}
.profession-steps li{counter-increment:profession-step;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:9px;margin:0;padding:10px 0;border-bottom:1px solid var(--wiki-line);color:#bdcbd1;font-size:.92rem;line-height:1.42}
.profession-steps li::before{content:counter(profession-step);display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(82,180,225,.42);border-radius:50%;color:#a5def4;font-size:.69rem;font-weight:900}
.profession-steps strong{color:#eef6f8}

/* Clean details / long indexes */
.profession-details{margin-top:18px;border:1px solid rgba(142,208,236,.17)!important;background:rgba(7,18,26,.42)}
.profession-details summary{position:relative;padding:13px 16px!important;color:#e7f2f6!important;list-style:none}
.profession-details summary::-webkit-details-marker{display:none}
.profession-details summary:after{content:"+";position:absolute;right:16px;color:#7fc9e8;font-size:1.1rem;font-weight:900}
.profession-details[open] summary:after{content:"–"}
.profession-details>div{padding:0 16px 16px!important}
.profession-details .profession-table-wrap{margin-top:4px}
.profession-details+.profession-details{margin-top:10px}

/* Hero strips and special grids */
.profession-hero-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:18px 0 22px}
.profession-hero-strip figure{margin:0;display:grid;place-items:center;min-height:82px;border:1px solid rgba(142,208,236,.13);background:rgba(7,18,26,.58)}
.profession-hero-strip img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.profession-hero-strip figcaption{padding:0 6px 8px;color:#83a0ac;font-size:.7rem;text-align:center}

.profession-note{margin:18px 0;padding:14px 16px;border-left:3px solid var(--wiki-accent);background:rgba(82,180,225,.055);color:#aebfc6;font-size:.9rem;line-height:1.55}
.profession-note strong{color:#e4f1f5}
.profession-note.is-warning{border-left-color:#d29a4a;background:rgba(210,154,74,.06)}

/* Rune grid */
.rune-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.rune-grid .profession-item{grid-template-columns:36px minmax(0,1fr);min-height:62px;padding:9px}
.rune-grid .profession-item img{width:36px;height:36px}

/* Responsive */
@media(max-width:1050px){
  .profession-item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rune-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:980px){
  .profession-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profession-overview{grid-template-columns:minmax(0,1fr) minmax(245px,285px);gap:24px}
  .profession-showcase{min-height:250px}
  .profession-hero-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .profession-overview{grid-template-columns:1fr;align-items:start}
  .profession-overview-copy{display:block}
  .profession-showcase{width:min(100%,460px);min-height:250px}
  .profession-card-grid,.profession-item-grid,.rune-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .profession-card-grid,.profession-item-grid,.rune-grid{grid-template-columns:1fr}
  .profession-hero-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profession-card{min-height:0}
  .profession-showcase{min-height:220px;padding:10px;gap:6px}
  .profession-flow-step{flex-basis:100px}
  .profession-card-icon{width:39px;height:39px;flex-basis:39px}
  .profession-card-icon img{width:28px;height:28px}
}