/* Subpage base styles — loaded on Strategija / Finance / Trajnost / Kariera
   and the utility pages (legal, 404), which layer their own sheets on top.
   The hero scrim varies per page and comes in via --sub-scrim (inline on the
   section, same mechanism as --cp-scrim on company pages); photo grades are
   scoped by a page class on .editorial. Editorial base layout lives in
   main.css. */

/* ---- Sub-hero ---- */
.sub-hero{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(440px,64vh,760px);padding:104px 0;color:#fff;overflow:hidden}
.sub-hero .bg{position:absolute;inset:0;z-index:0;
  background:linear-gradient(115deg,#11151b 0%,#1c2530 50%,#243446 100%)}
.sub-hero.has-photo .bg{background:#0d1116}
.sub-hero.has-photo .bg .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* photo-less bands (legal, 404): the same soft brand-blue glow the company
   heroes use as their no-photo fallback (.cp-hero .bg .glow in company.css),
   slightly dimmer for the shorter utility bands — one background language
   for every dark band, instead of the one-off stripe texture */
.sub-hero .bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle min(40vw,450px) at 50% 38%,rgba(15,91,161,.26),transparent 62%)}
.sub-hero.has-photo .bg::after{
  background:var(--sub-scrim,linear-gradient(180deg,rgba(8,11,16,.58) 0%,rgba(8,11,16,.46) 45%,rgba(8,11,16,.78) 100%))}
.sub-hero .inner{position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center}
.sub-hero h1{font-size:clamp(32px,4vw,52px) /* type pass 2 */;letter-spacing:-.028em;line-height:1.04;margin:0}
.sub-hero .lede{margin:26px auto 0;font-size:clamp(20px,1.7vw,25px) /* type pass 2 */;line-height:1.6;color:rgba(255,255,255,.82);max-width:56ch}

/* Back link over the hero (shared with company pages, which load their own
   copy — company.css is only enqueued on the company template). */
.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}

/* ---- Graded figure frames — cool, muted page tone ---- */
.editorial .ed-figure .frame.graded img{filter:saturate(.86) brightness(.98) contrast(1.03)}
.editorial .ed-figure .frame.graded::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,20,30,.11) 0%,rgba(14,20,30,.17) 100%)}

/* ---- Strategija ---- */
.editorial.sub-strategija .ed-sec .ed-body{max-width:480px}
.editorial.sub-strategija .ed-trio .col .k{text-transform:uppercase}
/* press-hall shot runs warm/bright — grade it toward the page's cooler, muted photos */
.editorial.sub-strategija .ed-figure .frame.graded img{filter:saturate(.7) brightness(.97) contrast(1.04)}
.editorial.sub-strategija .ed-figure .frame.graded::after{
  background:linear-gradient(180deg,rgba(14,20,30,.16) 0%,rgba(14,20,30,.24) 100%)}

/* ---- Finance ---- */
.editorial.sub-finance .ed-figure .frame.graded.g-bridge img{filter:saturate(1.05) brightness(.98) contrast(1.03)}

/* ---- Trajnost ---- */
.editorial.sub-trajnost .ed-trio .col .k,
.editorial.sub-trajnost .ed-trio .col .k span{color:var(--blue)}
.editorial.sub-trajnost .ed-trio .col .k{text-transform:uppercase}

/* ---- Hero entrance ---- */
/* headline rise-in on first paint — the same grammar (and timings) as the
   company pages' .cp-hero rule in main.css; subpages previously had no
   entrance at all. The whole .inner rises as one unit so pages with a kicker
   above the h1 (the 404's "Napaka 404") move as a single lockup rather than
   the eyebrow taking its own turn. body.loaded comes from main.js two frames
   after paint; the noscript fallback in header.php covers JS-off visitors. */
@media(prefers-reduced-motion:no-preference){
  .sub-hero .inner{opacity:0;transform:translateY(28px);
    transition:opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1)}
  body.loaded .sub-hero .inner{opacity:1;transform:none}
}

/* ---- Next chapter: closes each subpage and hands the reader on
   (Strategija → Finance → Trajnost → Kariera; Kariera ends the chain).
   Markup: perspektiva_subpage_next() in inc/subpages.php — a hairline
   separator, the .ed-more mono kicker, then a display-size link wearing
   the .cta verbs (blue underline sweep + arrow nudge) at title scale. */
.ed-next{max-width:var(--maxw);margin:clamp(72px,10vh,124px) auto 0;
  padding:0 var(--pad);text-align:center}
/* the hairline is a ::before so it spans the content box — the same edges
   as the .ed-figure photos, not the padded border box */
.ed-next::before{content:"";display:block;border-top:1px solid var(--line)}
/* kicker: the front page's statband-label voice (Roboto Mono, 16px — see
   the .statband .lbl overrides in wp.css) at medium weight, in the body grey */
.ed-next .k{font-family:"Roboto Mono",monospace;font-size:16px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-body);display:block;margin-top:clamp(40px,6vh,64px)}
@media(max-width:920px){.ed-next .k{font-size:13px}}
.ed-next .nx{position:relative;display:inline-flex;align-items:center;gap:.3em;margin-top:18px;
  font-size:clamp(27px,3.4vw,46px);font-weight:700;letter-spacing:-.025em;line-height:1.04;color:var(--ink);
  padding-bottom:.22em}
.ed-next .nx svg{width:.6em;height:.6em;color:var(--blue);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ed-next .nx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ed-next .nx:hover::after{transform:scaleX(1)}
.ed-next .nx:hover svg{transform:translateX(.18em)}