/* =============================================================================
   PIERCING WORD — OPEN ROLES
   Only the actions row is new; the card shell itself reuses .card / .cards-wrap
   from pw-design-system.css so roles sit in the same visual system as every
   other card section on the site.
   ============================================================================= */

.pw-role{
  display:flex;
  flex-direction:column;
}

/* Push the actions to the bottom so cards in a row line up regardless of how
   long each blurb is. */
.pw-role__actions{
  margin-top:auto;
  padding-top:20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 18px;
}

.pw-role__actions .pw-btn{
  font-size:11px;
  padding:13px 22px;
}

.pw-role__info{
  font-family:var(--pw-body,'Sora',system-ui,sans-serif);
  font-weight:600;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--pw-indigo,#232993);
  border-bottom:1px solid rgba(35,41,147,.28);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.pw-role__info:hover{
  color:var(--pw-coral,#F0603F);
  border-bottom-color:var(--pw-coral,#F0603F);
}

/* On the deep/indigo card the indigo link would vanish. */
.card--deep .pw-role__info{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.4);
}
.card--deep .pw-role__info:hover{
  color:var(--pw-coral,#F0603F);
  border-bottom-color:var(--pw-coral,#F0603F);
}

/* Honest gap marker for a role whose application does not exist yet - same
   role as the [NEEDED: ...] notes in the hand-built sections. */
.pw-role__todo{
  font-family:var(--pw-body,'Sora',system-ui,sans-serif);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pw-muted,#6B6C86);
  border:1px dashed rgba(107,108,134,.5);
  border-radius:4px;
  padding:11px 16px;
}
.card--deep .pw-role__todo{
  color:rgba(255,255,255,.7);
  border-color:rgba(255,255,255,.3);
}

@media (max-width:640px){
  .pw-role__actions{ gap:12px; }
  .pw-role__actions .pw-btn{ width:100%; justify-content:center; }
}