/* ============================================================
   VOKAVIA — Join Talent Program (Candidate) page
   Page-specific styles. Reuses tokens + components from
   vokavia.css and partner.css (both loaded first).
   ============================================================ */

/* ── Hero — reuses .hero / .hero-inner / .section-label.on-dark ── */
.ta-hero h1{font-size:var(--fs-hero);line-height:1.03;letter-spacing:-.03em;font-weight:700;margin:24px 0 26px;text-wrap:balance;max-width:15ch;}
.ta-hero .sub{font-size:var(--fs-lead);line-height:1.55;color:rgba(255,255,255,.74);max-width:620px;margin-bottom:30px;}
.ta-hero-note{
  display:flex;align-items:flex-start;gap:10px;margin-top:6px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;line-height:1.55;
  color:rgba(255,255,255,.5);max-width:560px;
}
.ta-hero-note::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-top:6px;}

/* ── Card grids that don't need the seamless look (incomplete rows ok) ── */
.ta-cards{display:grid;grid-template-columns:1fr;gap:14px;}
.ta-card{
  background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius);
  padding:24px clamp(20px,2.2vw,26px);position:relative;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.ta-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px -28px rgba(31,40,83,.32);border-color:var(--grey-300);}
.ta-card .n{font-family:var(--mono);font-size:.72rem;color:var(--coral);letter-spacing:.1em;}
.ta-card .t{font-size:1.1rem;font-weight:600;letter-spacing:-.012em;margin:13px 0 6px;line-height:1.2;}
.ta-card .d{font-size:.9rem;color:var(--muted);line-height:1.5;}

/* ── 0 → 1 readiness journey — navy feature band ── */
.ta-journey{position:relative;background:var(--navy);color:#fff;overflow:hidden;}
.ta-journey::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 90% 0%,rgba(255,78,70,.16),transparent 52%);}
.ta-journey::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:clamp(80px,11vw,160px) 100%;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);}
.ta-journey .wrap{position:relative;}
.ta-journey .section-label{color:var(--muted-light);}

.ta-zero-top{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,46px);align-items:center;margin-bottom:clamp(34px,4.4vw,52px);}
.ta-zero-big{display:flex;align-items:center;gap:clamp(14px,3vw,26px);font-weight:700;letter-spacing:-.04em;line-height:.9;font-size:clamp(4rem,15vw,6.4rem);}
.ta-zero-big .arrow{color:var(--coral);font-size:.66em;}
.ta-zero-copy .t{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance;}
.ta-zero-copy .d{font-size:var(--fs-lead);color:rgba(255,255,255,.72);line-height:1.55;margin-top:16px;max-width:520px;}

/* horizontal node flow on navy */
.ta-flow{display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch;}
.ta-node{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);
  padding:18px 20px;display:flex;flex-direction:column;gap:7px;
}
.ta-node .nn{font-family:var(--mono);font-size:.72rem;color:var(--coral);font-weight:600;letter-spacing:.1em;}
.ta-node .nt{font-size:.98rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;}
.ta-node-arrow{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.32);}
.ta-node-arrow svg{transform:rotate(90deg);width:20px;height:20px;}
.ta-flow-note{
  margin-top:clamp(24px,3vw,34px);display:flex;align-items:flex-start;gap:10px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;line-height:1.55;
  color:rgba(255,255,255,.55);max-width:780px;
}
.ta-flow-note::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-top:6px;}

/* ── Pathways candidates may explore — reuses homepage .pcat cards ── */
.ta-path-note{
  margin-top:clamp(22px,2.6vw,30px);display:flex;align-items:flex-start;gap:10px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;line-height:1.55;color:var(--muted);max-width:780px;
}
.ta-path-note::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-top:6px;}

/* ── How the Talent Program works — numbered sequence ── */
.ta-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--grey-200);}
.ta-steps li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,34px);
  padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--grey-200);align-items:start;
}
.ta-steps .sn{
  font-family:var(--mono);font-size:.82rem;color:var(--coral);font-weight:600;letter-spacing:.08em;
  padding-top:5px;min-width:34px;
}
.ta-steps .st{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em;line-height:1.2;}
.ta-steps .sd{font-size:1rem;color:var(--muted);line-height:1.56;margin-top:8px;max-width:620px;}

/* ── Candidate support strip ── */
.ta-support{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  margin-top:clamp(30px,3.4vw,44px);padding:24px clamp(22px,2.4vw,28px);
  background:var(--grey-50);border:1px solid var(--grey-150);border-radius:var(--radius);
}
.ta-support .l{font-size:1rem;color:var(--ink);line-height:1.5;}
.ta-support a{color:var(--coral);font-weight:600;}

/* ── Responsive ── */
@media (min-width:640px){
  .ta-cards{grid-template-columns:1fr 1fr;}
}
@media (min-width:880px){
  .ta-zero-top{grid-template-columns:.9fr 1.1fr;}
  .ta-flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;}
  .ta-node-arrow svg{transform:none;}
}
@media (min-width:1000px){
  .ta-cards{grid-template-columns:repeat(3,1fr);}
}