/* Company page CSS — per-company differences are data-driven from
   inc/company.php:
   - hero scrim variants   → --cp-scrim custom property (inline on .cp-hero)
   - hero object-position  → inline style on the hero <img>
   - house-look grades     → .cp-grade-cgp / .cp-grade-lisca on .editorial
     (Hidrotehnik and TNM pages carry no grade block) */

/* ---- company hero (full-bleed, centered — Oniverse brand-page style) ---- */
.cp-hero{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(440px,64vh,760px);padding:104px 0;color:#fff;
  overflow:hidden;text-align:center}
.cp-hero .bg{position:absolute;inset:0;z-index:0;
  background:linear-gradient(115deg,#11151b 0%,#1c2530 50%,#243446 100%)}
.cp-hero.has-photo .bg{background:#0d1116}
.cp-hero.has-photo .bg .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cp-hero.has-photo .bg .glow{display:none}
/* photo-less fallback shows just the gradient + .glow (stripes retired
   site-wide — see .sub-hero .bg::after in subpage.css); ::after stays for
   the has-photo scrim below */
.cp-hero .bg::after{content:"";position:absolute;inset:0;background:none}
.cp-hero.has-photo .bg::after{
  background:var(--cp-scrim,linear-gradient(180deg,rgba(8,11,16,.52) 0%,rgba(8,11,16,.4) 45%,rgba(8,11,16,.74) 100%))}
.cp-hero .bg .glow{position:absolute;left:50%;top:38%;width:80vw;height:80vw;max-width:900px;max-height:900px;
  transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(15,91,161,.32),transparent 62%);z-index:0}
.cp-back{position:absolute;top:clamp(98px,13vh,128px);left:var(--pad);z-index:3;
  display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;color:rgba(255,255,255,.78)}
.cp-back svg{width:16px;height:16px}
.cp-back:hover{color:#fff}
.cp-hero .inner{position:relative;z-index:2;max-width:880px;margin:0 auto;padding:0 var(--pad)}
.cp-hero h1{font-size:clamp(32px,4vw,52px) /* type pass 2 */;letter-spacing:-.028em;line-height:1.04;margin:0}

/* ---- centered facts strip ---- */
.cp-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(30px,5vw,76px);
  max-width:var(--maxw);margin:clamp(52px,8vh,92px) auto 0;padding:0 var(--pad)}
.cp-meta .m{text-align:center}
.cp-meta dt{font-family:"Roboto Mono",monospace;font-size:15px; /* mono labels 11 -> 14 -> 15 */letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey-mut);margin-bottom:9px}
.cp-meta dd{margin:0;font-size:clamp(19px,1.6vw,23px) /* type pass 2 */;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
/* Small screens: as a wrapping flex row the layout depended on text width —
   CGP/TNM ("Novo mesto") broke to 2+1 while Lisca/Hidrotehnik stayed on one
   line. Deterministic 2+1 for all four: STEBER + USTANOVLJENO side by side,
   SEDEZ centered below. */
@media(max-width:700px){
  .cp-meta{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;justify-items:center}
  .cp-meta .m:nth-child(3){grid-column:1 / -1}
}

/* ---- official-site CTA link ---- */
.cp-act-cta{margin-top:26px}
.cp-act-cta:hover svg{transform:translateX(4px)}
.cp-act-cta svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}

/* ---- intro + first image dark band ---- */
.cp-intro-band{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--ink);
  padding:clamp(72px,10vh,120px) 0 clamp(64px,9vh,110px)}
.cp-intro-band .ed-figure{margin:clamp(64px,9vh,110px) auto 0}
.editorial > .cp-act{margin-top:clamp(84px,12vh,148px)}
.editorial > .cp-act + .ed-figure{margin-bottom:0}
.cp-intro-band .ed-lede{color:rgba(255,255,255,.86)}
.cp-intro-band .cp-meta dt{color:var(--blue)}
.cp-intro-band .cp-meta dd{color:#fff}
.editorial{padding-top:0;padding-bottom:0}

/* ---- house-look grades: CGP — cool, restrained hero vibe ---- */
.editorial.cp-grade-cgp .ed-figure .fill img{
  filter:saturate(.78) contrast(1.05) brightness(.97);   /* shared base */
}
/* cooler/high-key already — light touch */
.editorial.cp-grade-cgp .ed-figure .fill img[src*="cgp-fig1"]{filter:saturate(.78) contrast(1.06) brightness(.96)}
.editorial.cp-grade-cgp .ed-figure .fill img[src*="cgp-quarry"]{filter:saturate(.8) contrast(1.05) brightness(.97)}
/* golden-hour + deep blue sky: desaturate harder + cool the warmth back to neutral */
.editorial.cp-grade-cgp .ed-figure .fill img[src*="cgp-factory"]{filter:saturate(.9) contrast(1.03) brightness(1) hue-rotate(-3deg)}

/* ---- house-look grades: Lisca — gentler base, skin tones present ---- */
.editorial.cp-grade-lisca .ed-figure .fill img{
  filter:saturate(.82) contrast(1.04) brightness(.98);
}
/* saturated violet store display: pull hardest to tame the purple */
.editorial.cp-grade-lisca .ed-figure .fill img[src*="lisca-fig1"]{filter:saturate(.68) contrast(1.05) brightness(.99)}
/* design desk + hands: already muted, keep skin natural — light touch */
.editorial.cp-grade-lisca .ed-figure .fill img[src*="lisca-fig2a"]{filter:saturate(.85) contrast(1.04) brightness(.99)}
.editorial.cp-grade-lisca .ed-figure .fill img[src*="lisca-fig2b"]{filter:saturate(.85) contrast(1.03) brightness(.99)}

/* ---- split figure: two photos side by side ---- */
.ed-figure.split .pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px);max-width:var(--maxw);margin:0 auto}
.ed-figure.split .frame{aspect-ratio:3/4}
@media(max-width:700px){.ed-figure.split .pair{grid-template-columns:1fr}.ed-figure.split .frame{aspect-ratio:3/2}}

/* ---- other group companies ---- */
.cp-others-head{text-align:center;margin-top:clamp(80px,12vh,150px)}
.cp-others-head h2{font-size:clamp(32px,3.8vw,50px) /* type pass 2 */;letter-spacing:-.025em;margin:0 auto;max-width:18ch}
.cp-others-band{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  margin-top:0;padding:clamp(84px,12vh,148px) 0 clamp(80px,11vh,140px)}
.cp-others-band .cp-others-head{margin-top:0}

/* Mono labels 12px on phone/tablet, 14px desktop. */
@media (max-width: 920px) {
  .cp-meta dt { font-size: 13px; }
}

/* ---- hero brand mark ---- */
/* The white mark IS the page title (it sits inside the h1, carrying the
   company name as alt text); per-logo optical height rides in --cph (inline,
   from perspektiva_company_logo()). No entrance of its own — the h1 rise-in
   from main.css moves the whole lockup. Marks that don't spell the name
   (tnm) get the full name written underneath in .cp-logo-name. */
.cp-hero .cp-logo{display:block;width:auto;height:var(--cph,44px);margin:0 auto;
  filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.35))}
@media(max-width:920px){.cp-hero .cp-logo{height:calc(var(--cph,44px) * .8)}}
.cp-hero .cp-logo-name{display:block;margin-top:clamp(14px,2.2vh,22px);
  font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:.01em;line-height:1.2;
  color:rgba(255,255,255,.88)}