/* ============================================================
   GraceX — Careers page (v2 design system)
   relies on styles-v2.css for tokens, nav, buttons, footer
   ============================================================ */

/* ---------- HERO ---------- */
.cr-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(8rem, 13vh, 11rem) 0 clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(1000px 520px at 50% -10%, #fff 0%, transparent 64%),
    radial-gradient(640px 460px at 14% 10%, rgba(31,87,219,.13) 0%, transparent 60%),
    radial-gradient(580px 440px at 86% 14%, rgba(238,138,62,.11) 0%, transparent 60%),
    var(--paper);
}
.cr-hero-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 var(--pad); }
.cr-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); margin-bottom: 1.1rem; }
.cr-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.03; letter-spacing: -.03em; margin-bottom: 1.3rem; }
.cr-hero h1 .muted { color: var(--muted-2); }
.cr-hero-sub { font-size: 1.22rem; color: var(--muted); max-width: 40rem; margin: 0 auto 2.2rem; line-height: 1.55; }
.cr-hero-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.cr-meta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 2.6rem; }
.cr-meta span { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 999px; padding: .44rem .95rem; }
.cr-meta span i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); flex: none; }

/* ---------- WHY / VALUES ---------- */
.cr-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.cr-val { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 1.8rem; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cr-val:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cr-val-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--violet-wash); color: var(--violet); margin-bottom: 1.1rem; }
.cr-val-ic svg { width: 23px; height: 23px; }
.cr-val h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.cr-val p { color: var(--muted); font-size: .96rem; line-height: 1.55; }

/* ---------- PERKS ---------- */
.cr-perks { background: var(--soft); max-width: none; margin: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cr-perks > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }
.cr-perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.cr-perk { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem 1.25rem; }
.cr-perk-ic { width: 30px; height: 30px; flex: none; color: var(--violet); }
.cr-perk-ic svg { width: 100%; height: 100%; }
.cr-perk b { display: block; color: var(--text); font-size: .98rem; font-weight: 600; margin-bottom: .2rem; }
.cr-perk span { color: var(--muted); font-size: .88rem; line-height: 1.45; }

/* ---------- OPEN ROLES ---------- */
.cr-roles { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.cr-role { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem 1.7rem; box-shadow: var(--shadow-xs); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.cr-role:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.cr-role-dept { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.cr-role h3 { font-size: 1.22rem; margin: .35rem 0 .45rem; letter-spacing: -.01em; }
.cr-role p { color: var(--muted); font-size: .95rem; line-height: 1.5; max-width: 46rem; }
.cr-role-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.cr-role-tags span { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--band); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; }
.cr-role-tags svg { width: 13px; height: 13px; }
.cr-role .btn { flex: none; }
.cr-roles-note { text-align: center; color: var(--muted); margin-top: 2rem; font-size: .96rem; }
.cr-roles-note a { color: var(--violet); font-weight: 600; }

/* ---------- APPLY (dark/navy) ---------- */
.cr-apply { position: relative; overflow: hidden; max-width: none; margin: 0; padding-left: 0; padding-right: 0;
  background:
    radial-gradient(820px 480px at 50% 0%, rgba(79,131,242,.20), transparent 56%),
    linear-gradient(178deg, #16223C, #0F1A30);
  border-top: 1px solid #20304e; }
.cr-apply > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }
.cr-apply .section-head h2 { color: #fff; }
.cr-apply .section-head .lede { color: rgba(214,224,245,.74); }
.cr-form { max-width: 680px; margin: 0 auto; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: clamp(1.6rem, 3vw, 2.4rem); }
.cr-field { margin-bottom: 1.1rem; }
.cr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.cr-field label { display: block; font-size: .82rem; font-weight: 600; color: rgba(214,224,245,.82); margin-bottom: .45rem; }
.cr-field label .opt { color: rgba(214,224,245,.45); font-weight: 500; }
.cr-field input, .cr-field select, .cr-field textarea {
  width: 100%; font-family: inherit; font-size: .98rem; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 11px;
  padding: .8rem 1rem; transition: border-color .2s, background .2s;
}
.cr-field textarea { resize: vertical; min-height: 96px; }
.cr-field input::placeholder, .cr-field textarea::placeholder { color: rgba(255,255,255,.4); }
.cr-field input:focus, .cr-field select:focus, .cr-field textarea:focus { outline: none; border-color: rgba(120,150,255,.7); background: rgba(255,255,255,.1); }
.cr-field select option { color: #111; }
/* file inputs as styled drop labels */
.cr-file { position: relative; }
.cr-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.cr-file-box { display: flex; align-items: center; gap: .7rem; border: 1px dashed rgba(255,255,255,.26); border-radius: 11px; padding: .8rem 1rem; color: rgba(214,224,245,.7); font-size: .92rem; transition: border-color .2s, background .2s; }
.cr-file:hover .cr-file-box { border-color: rgba(120,150,255,.6); background: rgba(255,255,255,.05); }
.cr-file-box svg { width: 18px; height: 18px; flex: none; color: #9fb4e0; }
.cr-file-box .fn { color: #fff; font-weight: 500; }
/* file rifiutato (estensione errata) e budget allegati sfondato:
   stesso rosso di .cr-form-error e di setNote() in script.js */
.cr-file-box .err { color: #ffb4b4; font-weight: 500; }
#careerBudget.over { color: #ffb4b4; }
.cr-form .btn { width: 100%; margin-top: .6rem; }
.cr-form-note { text-align: center; color: rgba(214,224,245,.5); font-size: .82rem; margin-top: .9rem; }
.cr-form-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.cr-form-note a:hover { color: rgba(214,224,245,.85); }
.cr-form-error { color: #ffb4b4; }
.cr-form-error[hidden] { display: none; }
.cr-success { display: none; text-align: center; color: #fff; padding: 1rem 0; }
.cr-success.show { display: block; }
.cr-success .sc-ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(52,211,153,.16); color: #34d399; display: grid; place-items: center; margin: 0 auto 1rem; }
.cr-success .sc-ic svg { width: 26px; height: 26px; }
.cr-success h3 { color: #fff; font-size: 1.3rem; margin-bottom: .5rem; }
.cr-success p { color: rgba(214,224,245,.74); }
.cr-success a { color: #9fb4e0; font-weight: 600; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .cr-values-grid { grid-template-columns: 1fr; }
  .cr-perks-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cr-role { grid-template-columns: 1fr; }
  .cr-role .btn { width: 100%; }
  .cr-perks-grid { grid-template-columns: 1fr; }
  .cr-row2 { grid-template-columns: 1fr; }
}