/* ============================================================
   Cho Cho Industry (CCI) — Careers page styles
   Loads AFTER css/styles.css and reuses its tokens/components:
   .wrap .section .eyebrow .center-head .btn .btn--primary .btn--outline .ic
   ============================================================ */

/* ============================================================
   BREADCRUMB — simple bar under the navbar
   (identical to css/news.css — same pixels/margins/padding)
   ============================================================ */
.crumbs{background:#fff}
.crumbs__inner{display:flex;align-items:center;gap:8px;height:48px;
  font-family:"DM Sans",sans-serif;font-size:14px;white-space:nowrap;overflow:hidden}
.crumbs a{color:var(--ink-soft);font-weight:500;flex:none;transition:.15s}
.crumbs a:hover{color:var(--cci-blue)}
.crumbs__sep{color:var(--silver);flex:none}
.crumbs__current{color:var(--cci-blue);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   HERO — career01.webp banner, framed inside the page margin,
   overlaid title + CTA (top-left) and value pills (bottom)
   ============================================================ */
.chero{padding:clamp(20px,3vw,40px) 0 clamp(24px,3vw,36px)}
.chero__frame{
  position:relative;overflow:hidden;border-radius:28px;
  min-height:clamp(460px,58vh,600px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,54px);
  box-shadow:var(--shadow);isolation:isolate;
}
.chero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;z-index:0}
.chero__bg.ph{background:linear-gradient(120deg,var(--cci-blue),var(--cci-blue-700))}
/* dark gradient — heaviest top-left where the title sits, clearing to the right */
.chero__tint{position:absolute;inset:0;z-index:1;background:
  linear-gradient(118deg,rgba(15,12,45,.82) 0%,rgba(15,12,45,.5) 40%,rgba(15,12,45,.12) 68%,rgba(15,12,45,0) 88%),
  linear-gradient(to top,rgba(15,12,45,.55) 0%,rgba(15,12,45,0) 42%)}

.chero__content{position:relative;z-index:2;max-width:640px}
.chero__eyebrow{display:inline-block;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:18px}
.chero__title{color:#fff;font-size:clamp(36px,4.6vw,58px);font-weight:700;
  line-height:1.1;margin:0 0 20px;max-width:16ch}
.chero__lead{color:rgba(255,255,255,.9);font-size:18px;max-width:520px;margin:0 0 30px}
.chero__cta{margin-top:2px}
.chero__cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   OUR PEOPLE — culture narrative (left) + prose & pull-quote (right)
   ============================================================ */
.people__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(32px,5vw,72px);
  align-items:start}
.people__intro .eyebrow{margin-bottom:12px}
.people__intro h2{margin-bottom:12px}
.people__sub{color:var(--ink-soft);font-size:16px;line-height:1.6;margin:0 0 24px;max-width:32ch}
/* 3 + 2 layout — three pillars on the first row, two on the second */
.people__pillars{display:grid;grid-template-columns:repeat(3,max-content);gap:10px;justify-content:start}
.ppill{font-family:"DM Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.02em;
  color:var(--cci-blue);background:var(--cci-blue-50);padding:9px 16px;border-radius:100px;
  text-align:center}
.people__body p{color:var(--ink-soft);font-size:16px;line-height:1.8;margin:0 0 20px}
.people__body p:last-child{margin-bottom:0}
.people__body strong{color:var(--ink);font-weight:600}
.people__body .people__lead{font-size:18px;color:var(--ink)}
.people__quote{margin:28px 0;padding:8px 0 8px 26px;border-left:4px solid var(--gold);
  font-family:"DM Sans",sans-serif;font-weight:600;font-style:italic;
  font-size:clamp(20px,2.2vw,26px);line-height:1.4;color:var(--cci-blue)}

/* ============================================================
   CURRENTLY OPEN POSITIONS — 2-col card grid, hover turns blue
   ============================================================ */
.positions{padding-top:clamp(40px,5vw,56px)}
.positions__head{margin-bottom:48px}
.positions__head .lead-center{margin-top:4px}

.jobs{display:grid;grid-template-columns:repeat(2,1fr)!important;gap:20px}

/* each job is a fully-clickable card — fixed min-height so every
   card in the grid stays the same size regardless of text length */
.job{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.4vw,32px);color:inherit;cursor:pointer;
  min-height:172px;box-sizing:border-box;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.job:hover{background:var(--cci-blue);border-color:var(--cci-blue);
  transform:translateY(-4px);box-shadow:var(--shadow)}
.job:focus-visible{outline:2px solid var(--cci-blue);outline-offset:3px}

.job__main{flex:1;min-width:0}
.job__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.job h3{font-size:20px;font-weight:700;color:var(--ink);transition:color .25s ease;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.job__type{font-family:"DM Sans",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:100px;
  background:var(--cci-blue-50);color:var(--cci-blue);flex:none;transition:.25s ease}
/* locked to a max of 2 lines — overflow is clipped with an ellipsis,
   and min-height reserves the space even for a 1-line description */
.job__desc{color:var(--ink-soft);font-size:16px;line-height:1.55;margin:0 0 16px;
  max-width:46ch;min-height:calc(1.55em * 2);transition:color .25s ease;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis}
.job__meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:"DM Sans",sans-serif;
  font-weight:500;font-size:14px;color:var(--ink-soft)}
.job__meta span{display:inline-flex;align-items:center;gap:7px;transition:color .25s ease}
.job__meta .ic{width:18px;height:18px;color:var(--cci-blue-500);transition:color .25s ease}

/* circular arrow button (right of each card) — fixed size, never shrinks */
.job__arrow{flex:none;width:46px;height:46px;min-width:46px;min-height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--cci-blue-50);color:var(--cci-blue);
  transition:background .25s ease,color .25s ease,transform .25s ease}
.job__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* --- hover state: whole card blue, text + icons flip to light --- */
.job:hover h3{color:#fff}
.job:hover .job__desc{color:rgba(255,255,255,.85)}
.job:hover .job__type{background:rgba(255,255,255,.16);color:#fff}
.job:hover .job__meta span{color:rgba(255,255,255,.8)}
.job:hover .job__meta .ic{color:var(--gold-soft)}
.job:hover .job__arrow{background:var(--cci-yellow);color:var(--cci-blue);transform:rotate(0) translate(2px,-2px)}

/* ============================================================
   RESPONSIVE — same breakpoints as styles.css
   ============================================================ */
@media (max-width:1100px){
  .jobs{grid-template-columns:1fr}
  .people__grid{grid-template-columns:1fr;gap:28px}
  .people__sub{max-width:none}
}
@media (max-width:720px){
  .chero{padding:16px 0 40px}
  .chero__frame{min-height:clamp(420px,70vh,520px);border-radius:20px;padding:26px 22px}
  .chero__lead{font-size:16px}
  .chero__cta{width:100%}
  .positions__head{margin-bottom:34px}
  .job{padding:22px 20px;gap:16px;min-height:0}
  .job__arrow{width:42px;height:42px;min-width:42px;min-height:42px}
  .people__body p,.people__body .people__lead{font-size:15px}
  .people__quote{font-size:19px;margin:22px 0}
}