/* =============================================================================
   MONVIQ — STRANA: Service subpage (jedan šablon ×5)  ·  /public/css/mv/service.css
   Hero Tip C „Overlapping Stack" · WOW: sticky pillar switcher + kontra-parallaks broja
   Sve vrednosti preko var(--mv-*) iz tokens.css. Prefiks: .mv-sub-*
   ========================================================================== */

/* -----------------------------------------------------------------------------
   WOW 1 · Sticky pillar switcher (leva ivica, samo ≥1200px gde ima mesta u padu)
   -------------------------------------------------------------------------- */
.mv-sub-switch{display:none}

@media(min-width:1200px){
  /* tamna pilula — čitljiv i preko svetlih sekcija, bez obzira gde se strana zaustavi */
  .mv-sub-switch{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:60;
    display:flex;flex-direction:column;gap:var(--mv-sp-2);padding:var(--mv-sp-5) 0;width:58px;
    background:rgba(7,10,17,.72);backdrop-filter:blur(10px);
    border:1px solid var(--mv-line-gold);border-radius:var(--mv-r1)}
  .mv-sub-switch__line{position:absolute;left:23px;top:var(--mv-sp-5);bottom:var(--mv-sp-5);width:1px;
    background:var(--mv-line-gold)}
  .mv-sub-switch__i{position:relative;display:flex;align-items:center;height:34px;
    padding-left:32px;color:var(--mv-on-dark-faint);
    transition:color var(--mv-dur-base) var(--mv-ease)}
  .mv-sub-switch__i::before{content:"";position:absolute;left:19px;top:calc(50% - 3.5px);
    width:7px;height:7px;border-radius:var(--mv-r-circle);background:var(--mv-surface);
    border:1px solid var(--mv-line-dark-strong);
    transition:background var(--mv-dur-fast) var(--mv-ease),border-color var(--mv-dur-fast),
               box-shadow var(--mv-dur-fast),transform var(--mv-dur-fast) var(--mv-ease)}
  .mv-sub-switch__n{font-family:var(--mv-font-body);font-size:var(--mv-fs-micro);
    font-weight:var(--mv-fw-semi);letter-spacing:var(--mv-ls-micro)}
  /* naziv stuba — flyout desno, samo na hover/fokus, ne pomera layout */
  .mv-sub-switch__t{position:absolute;left:56px;top:50%;transform:translate(-8px,-50%);
    white-space:nowrap;pointer-events:none;opacity:0;
    padding:9px 15px;background:rgba(7,10,17,.94);border:1px solid var(--mv-line-gold);
    border-radius:var(--mv-r1);color:var(--mv-on-dark);
    font-family:var(--mv-font-body);font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);
    letter-spacing:var(--mv-ls-micro);text-transform:uppercase;
    box-shadow:var(--mv-shadow-header);
    transition:opacity var(--mv-dur-fast) var(--mv-ease),transform var(--mv-dur-fast) var(--mv-ease)}
  .mv-sub-switch__i:hover,.mv-sub-switch__i:focus-visible{color:var(--mv-on-dark);outline:none}
  .mv-sub-switch__i:hover .mv-sub-switch__t,
  .mv-sub-switch__i:focus-visible .mv-sub-switch__t{opacity:1;transform:translate(0,-50%)}
  .mv-sub-switch__i:hover::before{background:var(--mv-accent-hover);border-color:var(--mv-accent-hover)}
  .mv-sub-switch__i:focus-visible::before{box-shadow:0 0 0 var(--mv-focus-w) var(--mv-accent)}
  /* aktivni stub — zlatna tačka + podvučen broj */
  .mv-sub-switch__i.is-active{color:var(--mv-accent)}
  .mv-sub-switch__i.is-active::before{background:var(--mv-accent);border-color:var(--mv-accent);
    transform:scale(1.28);box-shadow:0 0 22px 5px rgba(212,175,55,.24)}
  .mv-sub-switch__i.is-active .mv-sub-switch__n{position:relative}
  .mv-sub-switch__i.is-active .mv-sub-switch__n::after{content:"";position:absolute;
    left:0;right:0;bottom:-5px;height:1px;background:var(--mv-accent)}
}

/* -----------------------------------------------------------------------------
   01 · HERO — Overlapping Stack (zlatna ploča + broj prelaze ivicu hero-a)
   -------------------------------------------------------------------------- */
.mv-sub-hero{--mv-sub-pb:clamp(56px,7vw,96px);
  --mv-sub-over:clamp(104px,13vw,184px);
  position:relative;z-index:3;background:var(--mv-grad-hero);color:var(--mv-on-dark);
  padding:calc(var(--mv-header-h) + clamp(56px,7vw,104px)) 0 var(--mv-sub-pb);
  overflow:visible}
.mv-sub-hero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--mv-gap-col);
  align-items:end}
.mv-sub-hero__in>*{min-width:0}
.mv-sub-hero__txt{position:relative;z-index:3;padding-bottom:var(--mv-sp-2)}
/* dvoklasni selektori — .mv-body h1/p{margin:0} je specifičniji od jedne klase */
.mv-sub-hero .mv-sub-hero__h1{font-size:var(--mv-fs-h1);line-height:var(--mv-lh-h1);
  letter-spacing:var(--mv-ls-h1);max-width:13ch;margin-top:var(--mv-sp-e3)}
.mv-sub-hero .mv-sub-hero__sub{margin-top:var(--mv-sp-e4);max-width:var(--mv-measure-lead);
  padding-left:var(--mv-sp-e2);border-left:1px solid var(--mv-line-gold-strong);
  font-size:var(--mv-fs-hero-sub);line-height:var(--mv-lh-lead);color:var(--mv-on-dark-mut)}
.mv-sub-hero__btns{margin-top:var(--mv-sp-e5)}

/* stack — ploča + broj, preklapaju donju ivicu hero-a */
.mv-sub-stack{position:relative;justify-self:end;width:100%;max-width:430px;
  margin-bottom:calc(-1 * var(--mv-sub-over))}

/* WOW 2 · ogroman broj stuba, konturni, kontra-parallaks (JS: --mv-par, max 80px) */
.mv-sub-stack__num{position:absolute;right:88%;bottom:-24%;z-index:1;pointer-events:none;
  font-family:var(--mv-font-display);font-weight:var(--mv-fw-black);
  font-size:clamp(150px,19vw,300px);line-height:.78;letter-spacing:var(--mv-ls-h1);
  color:transparent;-webkit-text-stroke:1.5px rgba(212,175,55,.55);
  transform:translateY(var(--mv-par,0px));will-change:transform}

/* zlatna ploča */
.mv-sub-plate{position:relative;z-index:2;background:linear-gradient(158deg,
    var(--mv-gold-light) 0%,var(--mv-gold) 46%,var(--mv-gold-mid) 100%);
  color:var(--mv-on-accent);border-radius:var(--mv-r4);
  padding:clamp(26px,3vw,40px) clamp(24px,2.6vw,38px) clamp(28px,3.2vw,42px);
  box-shadow:0 24px 54px rgba(4,6,11,.32)}
.mv-sub-plate::after{content:"";position:absolute;inset:9px;pointer-events:none;
  border:1px solid rgba(11,15,23,.16)}
.mv-sub-plate__ic{display:block;color:var(--mv-on-accent)}
.mv-sub-plate__ic svg{width:38px;height:38px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mv-sub-plate__meta{display:block;margin-top:clamp(26px,3vw,42px);
  font-family:var(--mv-font-body);font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);
  letter-spacing:var(--mv-ls-eyebrow);text-transform:uppercase;color:rgba(11,15,23,.62)}
.mv-sub-plate__t{display:block;margin-top:var(--mv-sp-3);font-family:var(--mv-font-display);
  font-weight:var(--mv-fw-bold);font-size:var(--mv-fs-title-md);line-height:var(--mv-lh-h3);
  letter-spacing:var(--mv-ls-tight);max-width:14ch}

/* -----------------------------------------------------------------------------
   02 · THE CHALLENGE (light) — sedi ispod preklopa
   -------------------------------------------------------------------------- */
/* position:static — nepozicionirana sekcija se garantovano crta ISPOD preklopa iz hero-a
   (globalno pravilo .mv-body section{position:relative} bi je podiglo u isti sloj) */
.mv-sub-chal{position:static;
  padding:calc(var(--mv-section-y) + clamp(24px,3vw,52px)) 0 var(--mv-section-y-end)}
.mv-sub-chal h2{max-width:16ch}
.mv-sub-chal .mv-sub-chal__p{margin-top:var(--mv-sp-e3);font-size:var(--mv-fs-prose);
  line-height:var(--mv-lh-prose);color:var(--mv-on-light-mut);max-width:var(--mv-measure)}

/* -----------------------------------------------------------------------------
   04 · WHAT YOU GET — naslov iznad trija
   -------------------------------------------------------------------------- */
.mv-light .mv-sub-get__h2{margin-top:var(--mv-sp-e5);max-width:16ch}

/* -----------------------------------------------------------------------------
   05 · METHOD TIE-IN (dark, uska traka) — šest faza, aktivne zlatne
   -------------------------------------------------------------------------- */
.mv-sub-method{padding:var(--mv-section-snug) 0 var(--mv-section-snug-end)}
.mv-sub-method__in{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--mv-gap-col);
  align-items:end;margin-top:var(--mv-sp-e4)}
.mv-sub-method__in>*{min-width:0}
.mv-sub-ph{list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--mv-sp-4)}
.mv-sub-ph__s{position:relative;padding:var(--mv-sp-4) var(--mv-sp-3) var(--mv-sp-2) 0;
  border-top:1px solid var(--mv-line-dark);color:var(--mv-on-dark-faint)}
.mv-sub-ph__s.is-on{border-top-color:var(--mv-accent);color:var(--mv-on-dark)}
.mv-sub-ph__s.is-on::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;
  background:var(--mv-accent)}
.mv-sub-ph__n{display:block;font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);
  letter-spacing:var(--mv-ls-micro);color:inherit;opacity:.8}
.mv-sub-ph__s.is-on .mv-sub-ph__n{color:var(--mv-accent);opacity:1}
.mv-sub-ph__t{display:block;margin-top:var(--mv-sp-2);font-family:var(--mv-font-display);
  font-weight:var(--mv-fw-bold);font-size:var(--mv-fs-label-lg);text-transform:uppercase;
  letter-spacing:.01em}

/* -----------------------------------------------------------------------------
   06 · RELATED SERVICES (light) — tri kartice ka drugim stubovima
   -------------------------------------------------------------------------- */
.mv-sub-rel{margin-top:clamp(46px,6vw,80px);column-gap:clamp(24px,3vw,54px)}
.mv-sub-rel .mv-card{padding:var(--mv-sp-e3) 0 var(--mv-sp-7)}
.mv-sub-rel__ic{display:block;margin-bottom:var(--mv-sp-5);color:var(--mv-accent-deep)}
.mv-sub-rel__ic svg{width:30px;height:30px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mv-sub-rel .mv-card__title{margin-top:var(--mv-sp-2)}
.mv-sub-rel .mv-card__text{max-width:38ch}
.mv-sub-rel__go{position:absolute;right:2px;bottom:var(--mv-sp-4);font-size:17px;
  color:rgba(138,107,24,.55);transition:transform var(--mv-dur-nav) var(--mv-ease)}
.mv-sub-rel .mv-card:hover .mv-sub-rel__go{transform:translate(4px,-4px);color:var(--mv-accent-deep)}

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:1180px){
  .mv-sub-ph{grid-template-columns:repeat(3,1fr);row-gap:var(--mv-sp-6)}
}
@media(max-width:1000px){
  .mv-sub-hero{--mv-sub-over:clamp(72px,10vw,110px)}
  .mv-sub-hero__in,.mv-sub-method__in{grid-template-columns:1fr;gap:var(--mv-sp-e5);
    align-items:start}
  .mv-sub-stack{justify-self:start;max-width:400px;margin-top:var(--mv-sp-4)}
  .mv-sub-stack__num{right:auto;left:74%;bottom:-18%;font-size:clamp(130px,20vw,200px)}
  .mv-sub-method__in{gap:var(--mv-sp-e3)}
}
@media(max-width:760px){
  .mv-sub-hero{--mv-sub-pb:clamp(40px,8vw,64px);--mv-sub-over:clamp(52px,9vw,80px);
    padding-top:calc(var(--mv-header-h-solid) + clamp(40px,9vw,72px))}
  .mv-sub-hero__h1{max-width:none}
  .mv-sub-stack{max-width:100%}
  .mv-sub-plate{max-width:272px;margin-left:auto}
  .mv-sub-stack__num{left:0;bottom:-6%;font-size:clamp(96px,26vw,140px);
    -webkit-text-stroke-width:1.2px}
  .mv-sub-plate__t{max-width:none}
  .mv-sub-ph{grid-template-columns:1fr 1fr;gap:var(--mv-sp-5)}
  .mv-sub-rel{row-gap:0}
}

@media(prefers-reduced-motion:reduce){
  .mv-sub-stack__num{transform:none}
}

/* „What you receive" nosi dve kartice (Deliverables + Outcome) — trio grid na dve kolone. */
.mv-sub-get .mv-trio{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.mv-sub-get .mv-trio{grid-template-columns:1fr}}