/* ==========================================================================
   JOIN THE TEAM / APPLY STYLES
   Extends css/style.css. join-the-team.html uses the standard .page-banner
   (no photo — gradient + aurora + frost particles carry it, same as 404.html).
   apply.html reuses the .auth-page/.auth-card/.auth-form components from
   css/auth.css, extended here with select/textarea + radio-card styling.
   ========================================================================== */

.team-intro{padding:0 5% 40px; max-width:720px; margin:0 auto;}

.team-roles{padding:0 5% 140px; max-width:1200px; margin:0 auto;}
.role-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:24px;
  margin-top:60px;
}
.role-card{
  border:1px solid var(--border); border-radius:14px; padding:30px 28px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  display:flex; flex-direction:column;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.role-card:hover{
  transform:translateY(-5px); border-color:var(--frost-dim);
  box-shadow:0 20px 50px rgba(111,216,255,0.12);
}
.role-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.role-icon{width:38px; height:35px; filter:drop-shadow(0 0 10px rgba(111,216,255,0.35));}
.role-openings{
  font-size:0.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--frost-glow); border:1px solid var(--frost-dim); background:rgba(111,216,255,0.08);
  padding:5px 12px; border-radius:20px; white-space:nowrap;
}
.role-openings.filled{color:#8fe0a8; border-color:rgba(143,224,168,0.4); background:rgba(143,224,168,0.08);}
.role-openings.partial{color:#ffd98f; border-color:rgba(255,217,143,0.4); background:rgba(255,217,143,0.08);}
.role-card h3{font-family:var(--font-display); font-size:1.25rem; margin-bottom:12px;}
.role-card > p{color:var(--text-dim); font-size:0.88rem; line-height:1.75;}
.role-divider{
  margin-top:20px; margin-bottom:12px; color:var(--frost-glow);
  font-size:0.68rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
}
.role-list{display:flex; flex-direction:column; gap:8px; margin-bottom:26px;}
.role-list li{font-size:0.84rem; color:var(--text-dim); line-height:1.5; display:flex; gap:9px;}
.role-list li::before{content:"›"; color:var(--frost-glow); font-weight:700; flex-shrink:0;}
.role-apply{margin-top:auto; text-align:center;}
.role-apply.role-filled{
  display:inline-block; cursor:not-allowed; pointer-events:none;
  color:var(--text-dim); border-color:var(--border); background:none;
}
.role-apply.role-filled:hover{
  color:var(--text-dim); border-color:var(--border); background:none;
  box-shadow:none; transform:none;
}

/* ---------- APPLY FORM EXTRAS (select / textarea, matches css/auth.css inputs) ---------- */
.form-group select, .form-group textarea{
  width:100%; padding:13px 16px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg-alt); color:var(--text); font-family:var(--font-body); font-size:0.92rem;
  transition:border-color .2s;
}
.form-group select:focus, .form-group textarea:focus{outline:none; border-color:var(--frost-dim);}
.form-group textarea{resize:vertical; min-height:110px; line-height:1.6;}
.form-group select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238ea2b3'><path d='M5 8l5 5 5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}

.team-cta{
  text-align:center; padding:110px 5% 150px; max-width:680px; margin:0 auto;
  background:radial-gradient(ellipse at 50% 50%, rgba(111,216,255,0.08), transparent 65%), var(--bg);
}
.team-cta h2{font-family:var(--font-display); font-size:clamp(1.9rem,4vw,2.9rem); margin-top:16px; letter-spacing:1px; font-weight:600;}
.team-cta p{color:var(--text-dim); margin-top:18px; line-height:1.8;}
.team-cta .hero-actions{justify-content:center; margin-top:34px;}

@media(max-width:560px){
  .role-grid{grid-template-columns:1fr;}
}