/* =====================================================================
   p-carreiras.css · careers pages (index + Case Manager + Business Development) · direction A · 20-10-2026
   Loaded after a.css, motion.css and inner.css. Prefix .p-car-  Tokens from a.css :root.
   Reuses: ph / glance / facts / prose / reqs / side / ix-card / steps-n / callout (inner.css) and the
   form pieces of a.css (.contact-form, .cf, .f, .f-check, .err, .hp, .form-ok), so the mock submit of
   motion.js (A3) and the "mobile bar steps aside" rule keep working.
   CONTENTS  1 Index: roles + process · 2 Role page: header tags, side list · 3 Application form
   ===================================================================== */

/* ---------- 1. Index: open roles + hiring process ---------- */
/* vertical rhythm like the other interior pages: the body block after a facts band is 64/96 (as .lay), a white band is the section rhythm (112, as .faq) */
.p-car-roles{padding:var(--s8) 0 var(--s12)}
.p-car-roles .head{margin-bottom:var(--s5)}
.p-car-process{padding:var(--sec) 0;background:var(--white);border-block:1px solid var(--line)}
.p-car-process-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s12);align-items:start}
.p-car-process .head{margin-bottom:0}
@media (max-width:1000px){
  .p-car-process-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--s5)}
}
@media (max-width:720px){
  .p-car-roles{padding:var(--s6) 0 var(--s8)}
  .p-car-process{padding:var(--sec) 0}
}

/* ---------- 2. Role page: header tags, "How we hire" side list ---------- */
.p-car-tags{margin-top:var(--s3)}
.p-car-mini{counter-reset:pm;display:grid;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.p-car-mini li{position:relative;min-height:32px;padding-left:44px;counter-increment:pm;font-size:.9375rem;line-height:1.45;color:var(--mute)}
.p-car-mini li::before{content:counter(pm);position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;border:1.5px solid var(--bronze);border-radius:50%;background:var(--white);font-size:.9375rem;font-weight:700;color:var(--navy)}
.p-car-mini b{display:block;font-size:1rem;font-weight:700;line-height:1.35;color:var(--navy)}
.p-car-side .link-arrow{margin-top:var(--s2)}

/* ---------- 3. Application form ----------
   <section class="p-car-apply" id="apply"> : intro on the left (sticky from 1001px), form card on the right.
   The card is .contact-form (a.css) turned warm; fields are a.css .f. Groups are <fieldset>s with a legend. */
.p-car-apply{background:var(--white);border-top:1px solid var(--line)}
.p-car-apply-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--s12);align-items:start}
.p-car-apply-intro{position:sticky;top:calc(var(--header) + 32px)}
.p-car-apply-intro .head{margin-bottom:var(--s4)}
@media (max-height:760px){.p-car-apply-intro{position:static}}
@media (max-width:1000px){
  .p-car-apply-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
  .p-car-apply-intro{position:static}
}
.p-car-card{background:var(--off);border:1px solid var(--line);box-shadow:none}
.p-car-reqnote{font-size:.875rem;color:var(--mute)}
.p-car-reqnote span{color:var(--bad)}
.p-car-form{margin-top:var(--s2);gap:var(--s5)}
.p-car-group{min-width:0;margin:0;padding:0;border:0}
.p-car-group+.p-car-group{padding-top:var(--s5);border-top:1px solid var(--line)}
.p-car-group legend{float:left;width:100%;display:flex;align-items:center;gap:12px;margin:0 0 var(--s3);padding:0;font-size:1.25rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--navy)}
.p-car-group legend+*{clear:both}
.p-car-k{flex:none;width:32px;height:32px;display:grid;place-items:center;border:1.5px solid var(--bronze);border-radius:50%;background:var(--white);font-size:.9375rem;font-weight:700;letter-spacing:0;color:var(--navy)}
.p-car-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.p-car-wide{grid-column:1 / -1}
.p-car-form .p-car-grid-end>.f{align-content:end}  /* a row whose labels wrap to different heights keeps its inputs on one line */
@media (max-width:700px){.p-car-grid{grid-template-columns:minmax(0,1fr)}}
.p-car-form .f{align-content:start;min-width:0}
.p-car-form .f label{line-height:1.4}
.p-car-opt{font-size:.8125rem;font-weight:400;color:var(--mute)}
.p-car-help{font-size:.875rem;line-height:1.5;color:var(--mute)}
.p-car-form .f textarea{min-height:132px;line-height:1.5}
.p-car-form .f select{padding-right:8px}
.p-car-form input[type=file]{height:auto;min-height:56px;padding:8px 14px;font-size:.9375rem;line-height:1.4;cursor:pointer}
.p-car-form input[type=file]::file-selector-button{margin-right:12px;min-height:40px;padding:0 16px;border:1.5px solid var(--navy);border-radius:var(--r4);background:#fff;font:inherit;font-weight:600;color:var(--navy);cursor:pointer}
.p-car-form input[type=file]::file-selector-button:hover{background:var(--b50)}
.p-car-q{padding:var(--s3);background:#fff;border:1px solid var(--line);border-radius:var(--r3)}
.p-car-q+.p-car-q{margin-top:var(--s2)}
.p-car-q label{font-size:1rem;line-height:1.5}
.p-car-count{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 12px;font-size:.8125rem;line-height:1.4;color:var(--mute)}
.p-car-count b{font-weight:700;color:var(--navy)}
.p-car-count .p-car-over{color:var(--bad);font-weight:600}
.p-car-count.is-over b{color:var(--bad)}
.p-car-gdpr{display:grid;gap:10px;padding:var(--s3);background:#fff;border:1px solid var(--line);border-radius:var(--r3);font-size:.8125rem;line-height:1.6;color:var(--soft)}
.p-car-gdpr strong{color:var(--navy);font-weight:700}
.p-car-gdpr a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:3px}
.p-car-gdpr a:hover{color:var(--bronze-t)}
.p-car-end{display:grid;gap:var(--s2)}
.p-car-end .f-check{margin-left:-10px}  /* the 44px hit area carries a 10px inset: align the drawn box with the field edge */
.p-car-submit{display:grid;gap:var(--s2);margin-top:var(--s1)}
@media (max-width:720px){
  .p-car-form{gap:var(--s4)}
  .p-car-group+.p-car-group{padding-top:var(--s4)}
  .p-car-card{padding:var(--s3) var(--s2)}
  .p-car-q,.p-car-q+.p-car-q{margin-top:0;padding:var(--s3) 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
  .p-car-q:first-of-type{padding-top:0;border-top:0}
  .p-car-q:last-of-type{padding-bottom:0}
  .p-car-gdpr{padding:var(--s2)}
}

/* ---------- motion: the header tags enter with the rest of the header (transform/opacity only) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .p-car-tags{animation:m-rise .6s var(--ease) .32s both}
}

/* the success note uses an h3 here (the page has no h3 above it to hang an h4 from) */
.p-car-card .form-ok h3{font-size:1.125rem;line-height:1.3;color:var(--navy)}
.p-car-card:has(.form-ok:not([hidden])) .p-car-reqnote{display:none}
/* running text keeps the kit's text-wrap:pretty; the form helpers below follow it */
.p-car-help,.p-car-q label,.p-car-mini li,.p-car-gdpr p,.p-car-reqnote{text-wrap:pretty}

/* server-side field errors (includes/careers-handler.php): the kit only shows .err on :user-invalid */
.p-car-form .err.is-on{display:block}
.p-car-card>.callout{margin-top:var(--s2)}