/* ============================================================================
   CAREERS — visual system.

   Quiet on purpose. The Erasmus section earns its one loud blue stage because it
   is arguing a case about EU programmes; a recruitment page is read by someone
   deciding whether to spend three months of their life here, and what they need
   is legibility and an obvious answer to "is this paid". So: the site's cream
   ground, one accent, one panel colour, no hero image, no gradient.

   The brand red is spent on exactly two things — the pay note's left rule and
   the link/CTA colour. --cr-red-ink is its AA-safe sibling for the one surface
   that carries white text: white on #E52E51 is 4.34:1 and fails AA at small
   sizes, the same finding partners.css and erasmus.css both record.

   SCOPING — READ BEFORE ADDING A RULE.
   cr_shell() puts `mil-cr-index` / `mil-cr-role` on the BODY, alongside the
   shared `mil-cr`. A component rule named after either would style the whole
   document — the exact bug that painted 105 invisible elements on /pl/dotacje.
   So EVERY rule here is scoped under `.mil-cr-page`, the wrapper <div> both
   templates open, which the body can never match.
   scripts/tests/test_css_body_class_collisions.py pins it.

   No position:fixed in this file. site.css parks .mil-transition-frame at
   filter:blur(0), which makes it the containing block for fixed descendants,
   so a fixed child would anchor to the frame rather than the viewport.
   ========================================================================== */

.mil-cr-page{
  --cr-navy:#1E1E32;
  --cr-red:#E52E51;
  --cr-red-ink:#D82549;
  --cr-line:#D8D8D8;
  --cr-line-soft:#E6E6E4;
  --cr-mute:#7A7A7A;
  --cr-ink:#3A3A4A;
  --cr-ground:#ECECEA;
  --cr-r:18px;
  --cr-dsp:var(--font-secondary),Impact,"Arial Narrow",sans-serif;
  --cr-txt:var(--font-primary),Arial,sans-serif;
  --cr-h1:clamp(34px,5.2vw,62px);
  --cr-h2:clamp(24px,2.8vw,34px);
  --cr-h3:clamp(18px,1.8vw,22px);
  --cr-lead:clamp(17px,1.4vw,20px);
  --cr-body:clamp(16px,1.05vw,17px);
  color:var(--cr-ink);
  font-family:var(--cr-txt);
}

/* --- sections ------------------------------------------------------------ */
.mil-cr-page .mil-cr-head{padding:clamp(48px,6vw,96px) 0 clamp(24px,3vw,40px)}
.mil-cr-page .mil-cr-sec{padding:clamp(32px,4vw,64px) 0}
.mil-cr-page .mil-cr-sec--tight{padding:clamp(16px,2vw,28px) 0}
.mil-cr-page .mil-cr-band{background:#fff}

.mil-cr-page .mil-cr-eyebrow{
  font:600 11px/1.3 var(--cr-txt);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cr-mute);margin:0 0 14px
}
.mil-cr-page .mil-cr-h1{
  font:400 var(--cr-h1)/1.02 var(--cr-dsp);text-transform:uppercase;
  color:var(--cr-navy);margin:0 0 18px;text-wrap:balance
}
.mil-cr-page .mil-cr-h2{
  font:400 var(--cr-h2)/1.1 var(--cr-dsp);text-transform:uppercase;
  color:var(--cr-navy);margin:0 0 14px;text-wrap:balance
}
.mil-cr-page .mil-cr-h3{font:600 var(--cr-h3)/1.25 var(--cr-txt);color:var(--cr-navy);margin:0 0 12px}
.mil-cr-page .mil-cr-lead{font-size:var(--cr-lead);line-height:1.6;max-width:62ch;margin:0 0 24px}
.mil-cr-page p{font-size:var(--cr-body);line-height:1.7;margin:0 0 1.1em}
.mil-cr-page p:last-child{margin-bottom:0}
.mil-cr-page .mil-cr-two p,.mil-cr-page .mil-cr-three p,
.mil-cr-page .mil-cr-note p,.mil-cr-page .mil-cr-apply p{max-width:62ch}

/* --- the pay note -------------------------------------------------------- *
 * The one element on the page that is allowed to shout, and it shouts with a
 * rule and a weight rather than a colour fill: a red box reads as an error
 * message, and this is not an error, it is the most important fact. */
.mil-cr-page .mil-cr-pay{
  border-left:3px solid var(--cr-red);padding:2px 0 2px 18px;
  max-width:70ch;font-weight:500;color:var(--cr-navy);margin:0
}

/* --- the list of positions ---------------------------------------------- *
 * auto-fit with a 300px floor: five cards land 3+2 on a desktop and never
 * strand one card alone in a row of its own at tablet width. */
.mil-cr-page .mil-cr-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mil-cr-page .mil-cr-card{
  background:#fff;border:1px solid var(--cr-line-soft);border-radius:var(--cr-r);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:10px
}
.mil-cr-page .mil-cr-card-meta{
  font:600 11px/1.3 var(--cr-txt);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cr-mute);margin:0
}
.mil-cr-page .mil-cr-card-title{font:600 20px/1.3 var(--cr-txt);margin:0}
.mil-cr-page .mil-cr-card-title a{color:var(--cr-navy);text-decoration:none}
.mil-cr-page .mil-cr-card-title a:hover{color:var(--cr-red-ink)}
.mil-cr-page .mil-cr-card-sum{margin:0;flex:1}
/* margin-top:auto, so the link sits on the card's bottom edge whatever the
   summary's length — the row of cards then has its links on one line. */
.mil-cr-page .mil-cr-card-more{margin:auto 0 0;font-weight:600}
.mil-cr-page .mil-cr-card-more a,.mil-cr-page .mil-cr-link{color:var(--cr-red-ink);text-decoration:none}
.mil-cr-page .mil-cr-card-more a:hover,.mil-cr-page .mil-cr-link:hover{text-decoration:underline}
.mil-cr-page .mil-cr-empty{max-width:62ch;font-size:var(--cr-lead);line-height:1.6}

/* --- role page ---------------------------------------------------------- */
.mil-cr-page .mil-cr-back-wrap{padding-top:clamp(24px,3vw,40px)}
.mil-cr-page .mil-cr-back{
  font:600 12px/1 var(--cr-txt);letter-spacing:.08em;text-transform:uppercase;
  color:var(--cr-mute);text-decoration:none
}
.mil-cr-page .mil-cr-back:hover{color:var(--cr-red-ink)}
.mil-cr-page .mil-cr-about{font-size:var(--cr-lead);line-height:1.65;max-width:62ch;margin:0}

/* The facts strip. Label above value, the same stacked shape the offer pages'
   spec panel uses, and for the same reason: these values are sentences. */
.mil-cr-page .mil-cr-facts{
  display:grid;gap:0 32px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:0;background:#fff;border:1px solid var(--cr-line-soft);
  border-radius:var(--cr-r);padding:clamp(20px,2.2vw,28px)
}
.mil-cr-page .mil-cr-fact{padding:12px 0}
.mil-cr-page .mil-cr-fact dt{
  font:600 11px/1.3 var(--cr-txt);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cr-mute);margin:0 0 6px
}
.mil-cr-page .mil-cr-fact dd{margin:0;font-size:15px;line-height:1.6;color:var(--cr-navy)}

.mil-cr-page .mil-cr-three{display:grid;gap:clamp(28px,3vw,48px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.mil-cr-page .mil-cr-two{display:grid;gap:clamp(28px,3vw,48px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}

.mil-cr-page .mil-cr-ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mil-cr-page .mil-cr-ul li{
  position:relative;padding-left:22px;font-size:var(--cr-body);line-height:1.6
}
/* An en dash, not a tick. A tick means "you get this"; two of these three lists
   are requirements and a benefit mark on "discretion" would read as a promise. */
.mil-cr-page .mil-cr-ul li::before{
  content:"\2013";position:absolute;left:0;top:0;color:var(--cr-red);font-weight:700
}

.mil-cr-page .mil-cr-notes{
  border-left:3px solid var(--cr-line);padding-left:18px;color:var(--cr-ink);margin:0;max-width:62ch
}
.mil-cr-page .mil-cr-note,.mil-cr-page .mil-cr-apply{
  background:#fff;border:1px solid var(--cr-line-soft);border-radius:var(--cr-r);
  padding:clamp(24px,2.6vw,36px)
}
.mil-cr-page .mil-cr-actions{margin:20px 0 0}

/* The shared .mil-btn comes from site.css; only the fill is ours, and it takes
   the AA-safe red because it carries white text. */
.mil-cr-page .mil-cr-actions .mil-btn{background:var(--cr-red-ink);color:#fff;border-color:var(--cr-red-ink)}
.mil-cr-page .mil-cr-actions .mil-btn:hover{background:var(--cr-navy);border-color:var(--cr-navy);color:#fff}