/* Careers page (page-careers.php, template-parts/careers/*). */

/* Headline left, copy right (same as the Responsible AI and Security sections) */
.car-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:clamp(40px,5vw,72px);}
.car .cell .lede{font-size:15px;}
.car .num{color:var(--blue);}

/* Graphic spaces (medialake_careers_fig). Empty: the grid panel with its FIG label.
   With an image: the image covers the space. */
.cfig{
  position:relative;margin:0;overflow:hidden;aspect-ratio:var(--ar,4/3);
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/32px 32px;
  background-color:var(--bg);
}
.cfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;}
.cfig-label{position:absolute;left:16px;bottom:12px;z-index:1;padding:2px 6px;background:var(--bg);font-size:11px;letter-spacing:.06em;color:var(--muted);}
.cfig:has(img) .cfig-label{display:none;}
.cfig--fill{aspect-ratio:auto;flex:1;min-height:clamp(360px,40vw,560px);}

/* Mission: wide graphic between the headline and the cells */
.car-wide{border-top:1px solid var(--line);}

/* How we work: each cell has its graphic on top */
.car-card .cfig{margin-bottom:clamp(20px,2vw,28px);border:1px solid var(--line);}

/* Paying it forward / Open roles: text one side, tall graphic the other */
.car-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.car-split > .pad{border-right:1px solid var(--line);}
.car-split--rev > .pad{border-right:0;border-left:1px solid var(--line);}
.car-split .cfig--fill{min-height:100%;}
.car-lede{margin-top:clamp(18px,2vw,26px);}
.car-list{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0;border-top:1px solid var(--line);}
.car-list li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line);}
.car-list .num{font-size:13px;padding-top:4px;}
.car-list .lede{font-size:15px;margin-top:6px;}
.car-roles{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(48px,8vw,120px);}
.car-roles .btns{margin-top:clamp(28px,3vw,40px);}

/* Hero: split down the middle like the sections below, so the graphics alternate right / left / right */
.car-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}

/* Hero graphic fills the right-hand panel */
.phero-side .cfig--fill{background-color:transparent;}

@media (max-width:860px){
  .car-head,.car-split,.car-hero{grid-template-columns:1fr;}
  .car-split > .pad,.car-split--rev > .pad{border:0;border-bottom:1px solid var(--line);}
  .car-split--rev > .cfig{order:2;}
  .cfig--fill{min-height:300px;}
}