/* ============================================================
   SHARED PAGE COMPONENTS — Careers · Newsroom · Blog
   Loaded in addition to main.css on those three routes only.
   Every rule is built from the existing token scale, color
   system, and component idioms (bordered hairline grids, mono
   labels, display headings, hover bg-shift). No new colors,
   fonts, gradients, or spacing primitives are introduced —
   these are new *content types* (job posts, articles) that had
   no existing component, styled to be indistinguishable from
   the approved design language. Prefixes: .role- / .post- / .news-.
   ============================================================ */

/* ---- CAREERS: open-roles register (mirrors the products dossier row idiom) ---- */
.role-list{border:1px solid var(--border-hairline);
  background:linear-gradient(180deg,rgba(22,26,32,.28),rgba(12,14,18,.16));}
.role{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  column-gap:var(--sp-4);align-items:center;padding:var(--sp-4) var(--sp-4);
  border-bottom:1px solid var(--border-hairline);transition:background-color var(--dur-hover) ease;}
.role:last-child{border-bottom:none;}
.role:hover,.role:focus-visible{background-color:rgba(61,106,255,.04);}
.role::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent-signal);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out);}
.role:hover::before,.role:focus-visible::before{transform:scaleY(1);}
.role-idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--text-faint);
  font-variant-numeric:tabular-nums;transition:color var(--dur-hover) ease;align-self:start;padding-top:2px;}
.role:hover .role-idx{color:var(--accent-signal);}
.role-body{min-width:0;}
.role-body h3{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,1.7vw,22px);
  letter-spacing:-0.01em;color:var(--text-primary);margin:0 0 8px;}
.role-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}
.role-meta span{display:inline-flex;align-items:center;gap:8px;}
.role-meta span::before{content:"";width:4px;height:4px;background:var(--border-mid);flex:none;}
.role-meta span:first-child::before{display:none;}
.role-apply{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-signal);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;opacity:.7;
  transition:opacity var(--dur-hover) ease;align-self:start;padding-top:3px;}
.role:hover .role-apply,.role:focus-visible .role-apply{opacity:1;}
.role-apply .a{transition:transform var(--dur-hover) ease;}
.role:hover .role-apply .a{transform:translateX(4px);}

/* ---- BLOG: featured lead + post-card grid (mirrors the capability/clipping idiom) ---- */
.post-lead{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-6);
  align-items:center;border:1px solid var(--border-hairline);
  background:linear-gradient(180deg,rgba(18,29,56,.4),rgba(10,17,36,.22));padding:var(--sp-5);margin-bottom:var(--sp-3);}
.post-lead-body{min-width:0;}
.post-lead .post-cat{margin-bottom:var(--sp-3);}
.post-lead h3{font-family:var(--font-display);font-weight:600;text-transform:none;letter-spacing:-0.015em;
  font-size:clamp(26px,2.8vw,38px);line-height:1.1;color:var(--text-primary);margin:0 0 var(--sp-3);text-wrap:balance;}
.post-lead p{font-size:15.5px;line-height:1.7;color:var(--text-secondary);margin:0 0 var(--sp-4);max-width:60ch;}
.post-visual{position:relative;aspect-ratio:4/3;border:1px solid var(--border-mid);overflow:hidden;
  background:linear-gradient(135deg,#0C142A,#0A1428);}
.post-visual::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--border-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--border-hairline) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 40%,#000,transparent 74%);
  mask-image:radial-gradient(ellipse 70% 70% at 60% 40%,#000,transparent 74%);}
.post-visual .post-visual-tag{position:absolute;left:16px;bottom:14px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);}

.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1px;
  background:var(--border-hairline);border:1px solid var(--border-hairline);}
.post-card{background:var(--surface-primary);padding:var(--sp-4) var(--sp-4) var(--sp-3);display:flex;
  flex-direction:column;gap:var(--sp-2);min-height:230px;transition:background-color var(--dur-hover) ease;}
.post-card:hover,.post-card:focus-visible{background-color:var(--surface-secondary);}
.post-cat{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-signal);}
.post-card h3{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.28;letter-spacing:-0.01em;
  color:var(--text-primary);margin:0;}
.post-card .excerpt{font-size:14px;line-height:1.65;color:var(--text-secondary);margin:0;}
.post-meta{margin-top:auto;padding-top:var(--sp-2);display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-faint);text-transform:uppercase;}
.post-card:hover .post-meta .read{color:var(--accent-signal);}

/* ---- NEWSROOM: featured coverage quote (mirrors .clipping excerpt idiom, scaled up) ---- */
.news-feature{border:1px solid var(--border-hairline);border-left:2px solid var(--accent-alert);
  padding:var(--sp-5);background:rgba(16,19,24,.32);}
.news-feature .src{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-signal);display:block;margin-bottom:var(--sp-3);}
.news-feature blockquote{margin:0;font-family:var(--font-serif);font-style:italic;font-size:clamp(20px,2.2vw,28px);
  line-height:1.4;color:var(--text-primary);max-width:32ch;}
.news-feature cite{display:block;margin-top:var(--sp-3);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.06em;color:var(--text-faint);font-style:normal;text-transform:uppercase;}

/* ---- Blog article body (reuses company-body prose; only the header meta is new) ---- */
.article-meta{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:var(--sp-3);font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}
.article-meta b{color:var(--accent-signal);font-weight:500;}
.article-body{max-width:760px;}
.article-body h2{font-size:clamp(22px,2.2vw,30px);margin:var(--sp-6) 0 var(--sp-3);}
.article-body h3{font-size:19px;margin:var(--sp-5) 0 var(--sp-2);color:var(--text-primary);}
.article-body p{margin:0 0 var(--sp-3);}
.article-body ul{display:flex;flex-direction:column;gap:10px;margin:0 0 var(--sp-4);}
.article-body li{font-size:15.5px;line-height:1.7;color:var(--text-secondary);padding-left:22px;position:relative;max-width:var(--measure-prose);}
.article-body li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:1px;background:var(--accent-signal);}

/* ============ RESPONSIVE ============ */
@media (max-width:1023px){
  .post-lead{grid-template-columns:1fr;gap:var(--sp-4);}
  .post-visual{aspect-ratio:16/9;order:-1;}
}
@media (max-width:767px){
  .role{grid-template-columns:1fr;gap:var(--sp-2);row-gap:var(--sp-1);padding:var(--sp-3);}
  .role-idx{padding-top:0;}
  .role-apply{padding-top:0;}
  .post-lead{padding:var(--sp-4) var(--sp-3);}
  .news-feature{padding:var(--sp-4) var(--sp-3);}
}

/* ---- Newsroom clippings reveal: the shared .clipping cards default to opacity:0
   and are normally un-hidden by ".media-row.in-view .clipping" (a homepage-only
   container). On the standalone newsroom the grid carries .reveal directly, so
   mirror that un-hide here. No visual change to the cards themselves. */
.clippings.in-view .clipping{opacity:1;transform:translateY(0);}
.clippings.in-view .clipping:nth-child(2){transition-delay:.06s;}
.clippings.in-view .clipping:nth-child(3){transition-delay:.12s;}
.clippings.in-view .clipping:nth-child(4){transition-delay:.18s;}
.clippings.in-view .clipping:nth-child(5){transition-delay:.24s;}
.clippings.in-view .clipping:nth-child(6){transition-delay:.30s;}
.no-js .clippings .clipping{opacity:1!important;transform:none!important;}

/* ============================================================
   NEWSROOM (/news/) — editorial recomposition. Scoped .news-*
   classes, purely additive. Reuses tokens, the .post-cat / .excerpt /
   .post-meta type idioms, the .btn buttons, the shared .lets-talk CTA
   and the legacy .site-footer. Image slots use the site's navy-grid
   "cover visual" idiom as tasteful placeholders — drop a real photo in
   via <img> (object-fit:cover fills the frame). No frozen component
   is restyled; only page composition/spacing/hierarchy changes here.
   ============================================================ */
.news-lead{padding:100px 0 0;}                       /* tight under the fixed 68px nav */

.news-hero{position:relative;}
.news-hero__media{position:relative;aspect-ratio:16/9;min-height:340px;border-radius:14px;overflow:hidden;
  border:1px solid var(--border-mid);background:linear-gradient(135deg,#0C142A,#0A1428);}
.news-hero__media::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--border-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--border-hairline) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 70% 32%,#000,transparent 76%);
  mask-image:radial-gradient(ellipse 80% 80% at 70% 32%,#000,transparent 76%);}
/* Cover image. object-fit:cover fills the 16:9 frame when a real photo is supplied;
   the current cut-out asset is composited to the right over the grid field. */
.news-hero__img{position:absolute;right:1%;bottom:-2%;height:104%;width:auto;max-width:62%;object-fit:contain;
  filter:drop-shadow(-16px 26px 44px rgba(0,0,0,.55));pointer-events:none;}
.news-hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right, rgba(6,10,22,.9) 0%, rgba(6,10,22,.55) 34%, rgba(6,10,22,.12) 60%, transparent 78%);}
.news-hero__overlay{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(22px,3.4vw,52px);max-width:720px;}
.news-hero__title{font-family:var(--font-display);font-weight:700;color:#fff;
  font-size:clamp(30px,4.6vw,60px);line-height:1.02;letter-spacing:-0.03em;margin:var(--sp-2) 0 var(--sp-4);text-wrap:balance;}

/* Article grid — 3 equal columns, generous gutters, equal heights */
.news-grid-sec{padding:var(--sp-8) 0 var(--sp-7);}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);}
.news-card{display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  border:1px solid var(--border-hairline);background:var(--surface-primary);
  transition:background-color var(--dur-hover) ease,border-color var(--dur-hover) ease;}
.news-card:hover,.news-card:focus-visible{background-color:var(--surface-secondary);border-color:var(--border-mid);}
.news-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--border-hairline);
  background:linear-gradient(135deg,#0C142A,#0A1428);}
.news-card__media::before{content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background-image:linear-gradient(var(--border-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--border-hairline) 1px,transparent 1px);
  background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse 72% 72% at 62% 40%,#000,transparent 74%);
  mask-image:radial-gradient(ellipse 72% 72% at 62% 40%,#000,transparent 74%);}
.news-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.news-card__body{display:flex;flex-direction:column;gap:var(--sp-2);flex:1 1 auto;padding:var(--sp-4);}
.news-card__body h3{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.28;letter-spacing:-0.01em;
  color:var(--text-primary);margin:0;}
.news-card__body .excerpt{font-size:14px;line-height:1.65;color:var(--text-secondary);margin:0;}
.news-card:hover .post-meta .read{color:var(--accent-signal);}

@media (max-width:1023px){
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .news-grid{grid-template-columns:1fr;}
  .news-hero__media{aspect-ratio:auto;min-height:430px;}
  .news-hero__img{right:-4%;top:5%;bottom:auto;height:auto;width:auto;max-width:76%;max-height:50%;}
  .news-hero__scrim{background:linear-gradient(to top, rgba(6,10,22,.95) 0%, rgba(6,10,22,.6) 44%, rgba(6,10,22,.15) 74%, transparent 90%);}
}