/* ============================================================
   WYVERN FREIGHT — CAREERS (careers.html)
   Layout follows the DeCargo careers template (References/decargo-…/screenshots/decargo-careers.jpg):
   3-photo "Why join us" collage, "Open positions" heading with a rule and grey position cards. The scam warning is a
   compact notice like the live site and Unitrans. Reuses legal.css banner, about.css Learn more boxes, home tokens.
   ============================================================ */

/* ---------- Why Wyvern: 3-photo collage (one wide on top, two below) ---------- */
.cr-collage{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:12px}
.cr-collage img{display:block;width:100%;height:auto;object-fit:cover}
.cr-c1{grid-column:1 / -1;aspect-ratio:16/9}
.cr-c2{aspect-ratio:1;align-self:start}
.cr-c3{aspect-ratio:5/4;object-position:50% 20%}
/* Desktop: the collage takes the text column height (top = eyebrow, bottom = button), like the home/About photo */
@media (min-width:1025px){
  .dc-two:has(> .cr-collage){align-items:stretch}
  .dc-two:has(> .cr-collage) > .dc-copy{align-content:start}
  /* contain:size = the photos never set the height; the text column does */
  .cr-collage{contain:size;min-height:440px;grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}
  .cr-collage img{height:100%;aspect-ratio:auto}
  .cr-collage .cr-c2{height:82%}   /* the smaller bottom-left photo sits higher, as on the reference */
}

/* ---------- Open positions (DeCargo): heading with a rule, grey cards ---------- */
.cr-rule-h{display:flex;align-items:center;gap:28px;margin-bottom:36px}
.cr-rule-h::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.cr-jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cr-job{display:grid;align-content:start;gap:12px;padding:28px;background:var(--hover)}
.cr-job h3{margin:0;font-size:20px}
.cr-job p{margin:0;font-size:15px;color:var(--muted)}
.cr-job dl{margin:0;display:grid;gap:4px;font-size:15px}
.cr-job dl div{display:flex;gap:6px}
.cr-job dt{font-weight:500;color:var(--ink)}
.cr-job dd{margin:0;color:var(--muted)}
.cr-job .btn-p{justify-self:start;margin-top:6px}
.cr-job[hidden]{display:none}   /* careers.js pages the list */
.cr-job-empty{grid-column:1 / -1}
.cr-job-empty p{max-width:720px}

/* ---------- Recruitment notices (live /careers/): two equal cards, same heading size ---------- */
.cr-notice{background:var(--tint)}
.cr-notice-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:stretch}
.cr-card{display:grid;align-content:start;gap:16px;padding:40px;background:var(--canvas);border:1px solid var(--line-strong)}
.cr-card h2{margin:0}
.cr-card > p:not(.eyebrow){margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
/* text links only: a bare .cr-card a also hit the Report a scam button (dark text on red, 3.6:1) */
.cr-card p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.cr-card p a:hover{text-decoration-color:var(--ink)}
.cr-card-danger{background:linear-gradient(180deg,var(--canvas) 0%,var(--red-soft) 100%)}   /* faint red: a danger notice */
.cr-card .btn-p{justify-self:start;margin-top:4px}
.cr-rules{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cr-rules li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.cr-rules li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;background:var(--red);transform:rotate(45deg)}

@media (max-width:1024px){
  .cr-collage{max-width:620px}
  .cr-jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-notice-grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .cr-jobs{grid-template-columns:1fr}
  .cr-card{padding:28px 20px}
  .cr-rule-h{gap:16px}
}

/* Faint watermark icon in each notice card (solid sprite: shield = security, crossed box = not accepted) */
.cr-card{position:relative;overflow:hidden;isolation:isolate}
.cr-bg-ic{position:absolute;right:-28px;bottom:-28px;width:260px;height:260px;color:var(--ink);opacity:.05;z-index:-1;pointer-events:none}
.cr-card-danger .cr-bg-ic{color:var(--red);opacity:.08}
@media (max-width:767px){ .cr-bg-ic{width:180px;height:180px;right:-20px;bottom:-20px} }
/* Phones: the watermark sits lower and fainter so it never sits behind the closing sentence */
@media (max-width:767px){ .cr-bg-ic{width:150px;height:150px;right:-30px;bottom:-40px} .cr-card-danger .cr-bg-ic{opacity:.05} }

/* Draft role cards (layout review only): a small Draft tag, Apply switched off until each role has its official form */
.cr-draft{justify-self:start;margin:0;padding:4px 8px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line-strong)}
.cr-job .btn-p:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}