/* v5.5.44 · Four equal, narrower specialization cards.
   Desktop rail targets ~1120px total: 4 equal cards + compact gaps.
   Perk descriptions become click-to-expand accordions. */

@media(min-width:1281px){
  #specializationPanel #specializationCards.specialization-cards{
    width:min(1120px,100%)!important;
    max-width:1120px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
    margin:0!important;
    padding:0!important;
    align-self:flex-start!important;
  }

  #specializationCards .specialization-card{
    min-width:0!important;
  }

  /* Slightly tighten horizontal internals so a ~270px card remains calm. */
  #specializationCards .specialization-card .spec-info-block,
  #specializationCards .specialization-card .spec-requirements{
    margin-left:12px!important;
    margin-right:12px!important;
  }
  #specializationCards .specialization-card .spec-card-actions{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}

/* ---------- Perk accordion ---------- */
#specializationCards .base-perk-block .spec-perk-row.rich,
#specializationCards .spec-extra-perk-block .spec-perk-row.rich{
  padding:0!important;
  overflow:hidden!important;
  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease!important;
}

#specializationCards .base-perk-block .spec-perk-main,
#specializationCards .spec-extra-perk-block .spec-perk-main{
  gap:0!important;
  width:100%!important;
}

#specializationCards .base-perk-block .spec-perk-top,
#specializationCards .spec-extra-perk-block .spec-perk-top{
  position:relative!important;
  min-height:36px!important;
  padding:0 28px 0 10px!important;
  cursor:pointer!important;
  user-select:none!important;
  outline:none!important;
}

#specializationCards .base-perk-block .spec-perk-top::after,
#specializationCards .spec-extra-perk-block .spec-perk-top::after{
  content:"›";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  color:#7e8994;
  font-size:16px;
  font-weight:500;
  line-height:1;
  transition:transform .26s ease,color .22s ease;
}

#specializationCards .base-perk-block .spec-perk-row.rich.is-expanded .spec-perk-top::after,
#specializationCards .spec-extra-perk-block .spec-perk-row.rich.is-expanded .spec-perk-top::after{
  transform:translateY(-50%) rotate(90deg);
  color:#c7d0d8;
}

#specializationCards .base-perk-block .spec-perk-top:hover,
#specializationCards .spec-extra-perk-block .spec-perk-top:hover{
  background:rgba(255,255,255,.018);
}

#specializationCards .base-perk-block .spec-perk-desc,
#specializationCards .spec-extra-perk-block .spec-perk-desc,
#specializationCards .spec-extra-perk-block .spec-reward-desc{
  display:block!important;
  max-height:0!important;
  margin:0 10px!important;
  padding:0!important;
  overflow:hidden!important;
  opacity:0!important;
  color:#85919b!important;
  font-size:9px!important;
  line-height:1.48!important;
  transform:translateY(-3px);
  transition:
    max-height .34s cubic-bezier(.22,.68,.24,1),
    opacity .26s ease,
    transform .34s cubic-bezier(.22,.68,.24,1),
    padding .34s cubic-bezier(.22,.68,.24,1)!important;
}

#specializationCards .base-perk-block .spec-perk-row.rich.is-expanded .spec-perk-desc,
#specializationCards .spec-extra-perk-block .spec-perk-row.rich.is-expanded .spec-perk-desc,
#specializationCards .spec-extra-perk-block .spec-perk-row.rich.is-expanded .spec-reward-desc{
  max-height:96px!important;
  padding:0 0 9px!important;
  opacity:1!important;
  transform:translateY(0);
}

#specializationCards .base-perk-block .spec-perk-row.rich.is-expanded,
#specializationCards .spec-extra-perk-block .spec-perk-row.rich.is-expanded{
  border-color:rgba(205,216,227,.11)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.030),rgba(255,255,255,.015))!important;
}

/* Keep unlocked base-perk identity when expanded. */
#specializationCards .base-perk-block .spec-perk-row.rich.is-unlocked.is-expanded{
  border-color:rgba(216,184,95,.20)!important;
  background:linear-gradient(180deg,rgba(216,184,95,.068),rgba(255,255,255,.018))!important;
}

@media(max-width:760px){
  #specializationCards .base-perk-block .spec-perk-top,
  #specializationCards .spec-extra-perk-block .spec-perk-top{
    min-height:38px!important;
  }
}