/* =============================================================================
   MONVIQ — cases.css  ·  P5 Case Studies (lista) + P6 Case Study (pojedinačna)
   Sve vrednosti preko var(--mv-*) iz tokens.css. Prefiks klasa: .mv-cs-*
   ========================================================================== */

/* =============================================================================
   A · LISTA  (/case-studies)
   ========================================================================== */

/* ---------- 01 · Portal hero (dark) ---------- */
.mv-cs-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--mv-grad-hero);
  color:var(--mv-on-dark);
  padding:calc(var(--mv-header-h) + clamp(52px,6.4vw,98px)) 0 clamp(58px,7vw,98px)}
.mv-cs-hero__in{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--mv-gap-col);align-items:end}
.mv-cs-hero__in>*{min-width:0}
.mv-cs-hero h1{margin-top:var(--mv-sp-e3);max-width:13ch}
.mv-cs-hero__sub{margin-top:var(--mv-sp-e4);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);max-width:var(--mv-measure-lead)}

/* filter panel — funkcionalni element hero-a */
.mv-cs-portal{margin-top:clamp(42px,5vw,72px);border:1px solid var(--mv-line-dark);
  background:rgba(237,239,242,.03);padding:clamp(20px,2.4vw,30px)}
.mv-cs-portal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mv-sp-4);
  margin-top:var(--mv-sp-5)}
.mv-cs-portal .mv-field{margin-bottom:0}
/* tokens.css: .mv-dark .mv-select koristi `background` skraćenicu i time resetuje
   size/position/repeat strelice — vracamo ih ovde, bez diranja tokens.css */
.mv-cs-portal .mv-select{background-repeat:no-repeat;background-size:6px 6px,6px 6px;
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%}
.mv-cs-portal .mv-field label{margin-bottom:var(--mv-sp-2)}
.mv-cs-portal__foot{display:flex;align-items:center;justify-content:space-between;
  gap:var(--mv-sp-4);flex-wrap:wrap;margin-top:var(--mv-sp-5);padding-top:var(--mv-sp-4);
  border-top:1px solid var(--mv-line-dark)}
.mv-cs-tally{display:flex;align-items:baseline;gap:var(--mv-sp-3)}
.mv-cs-tally b{font-family:var(--mv-font-display);font-weight:var(--mv-fw-bold);line-height:1;
  font-size:var(--mv-fs-h2-xs);letter-spacing:var(--mv-ls-tight);color:var(--mv-accent);
  font-variant-numeric:tabular-nums}
.mv-cs-tally span{font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);
  letter-spacing:var(--mv-ls-micro);text-transform:uppercase;color:var(--mv-on-dark-soft)}

/* ---------- 03 · Lista studija (dark-2) ---------- */
.mv-cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.8vw,48px);margin-top:clamp(46px,6vw,82px)}
.mv-cs-grid>*{min-width:0}
.mv-cs-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mv-cs-card{display:flex;flex-direction:column;transition:none}
.mv-cs-card.is-flip{transition:transform var(--mv-dur-base) var(--mv-ease)}
.mv-cs-card.is-off{display:none}
.mv-cs-card .mv-card__media{margin-top:var(--mv-sp-4)}
.mv-cs-card .mv-card__text{max-width:44ch}
.mv-cs-card__res{display:flex;align-items:baseline;gap:var(--mv-sp-3);flex-wrap:wrap;
  margin-top:auto;padding-top:var(--mv-sp-4);border-top:1px solid var(--mv-line-dark)}
.mv-light .mv-cs-card__res{border-top-color:var(--mv-line-light)}
.mv-cs-card__res i{font-style:normal;font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);
  letter-spacing:var(--mv-ls-micro);text-transform:uppercase;color:var(--mv-on-dark-soft)}
.mv-light .mv-cs-card__res i{color:var(--mv-on-light-mut)}
.mv-cs-card__res b{font-family:var(--mv-font-display);font-weight:var(--mv-fw-bold);
  font-size:var(--mv-fs-label-lg);letter-spacing:var(--mv-ls-tight);color:var(--mv-accent);
  font-variant-numeric:tabular-nums}
.mv-light .mv-cs-card__res b{color:var(--mv-accent-deep)}
.mv-cs-card__go{margin-top:var(--mv-sp-4);font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);
  letter-spacing:var(--mv-ls-micro);text-transform:uppercase;color:var(--mv-on-dark-soft);
  transition:color var(--mv-dur-base)}
.mv-light .mv-cs-card__go{color:var(--mv-on-light-mut)}
.mv-cs-card:hover .mv-cs-card__go{color:var(--mv-accent)}
.mv-light .mv-cs-card:hover .mv-cs-card__go{color:var(--mv-accent-deep)}

/* prazno stanje — dizajnirano namerno, ne placeholder */
.mv-cs-empty{position:relative;overflow:hidden;margin-top:clamp(46px,6vw,82px);
  border:1px solid var(--mv-line-gold);background:var(--mv-grad-footer-cta);
  padding:clamp(44px,6vw,90px) clamp(24px,4vw,74px)}
.mv-cs-empty__ghost{position:absolute;right:2%;bottom:-.3em;margin:0;pointer-events:none;
  user-select:none;font-family:var(--mv-font-display);font-weight:var(--mv-fw-black);
  font-size:clamp(130px,21vw,320px);line-height:.8;letter-spacing:var(--mv-ls-h1);
  color:rgba(237,239,242,.045)}
.mv-cs-empty__in{position:relative;z-index:1;max-width:58ch}
.mv-cs-empty h3{margin-top:var(--mv-sp-e3);font-size:var(--mv-fs-h2-xs)}
.mv-cs-empty__p{margin-top:var(--mv-sp-e4);font-size:var(--mv-fs-lead);
  line-height:var(--mv-lh-lead);color:var(--mv-on-dark-mut)}
.mv-cs-empty .mv-btns{margin-top:var(--mv-sp-e5)}
.mv-cs-nomatch{display:none;margin-top:clamp(40px,5vw,66px);padding:var(--mv-sp-7) 0;
  border-top:1px solid var(--mv-line-dark);font-size:var(--mv-fs-lead);
  color:var(--mv-on-dark-mut)}
.mv-cs-nomatch.is-on{display:block}

@media(max-width:1000px){
  .mv-cs-hero__in{grid-template-columns:1fr;gap:var(--mv-sp-e3);align-items:start}
  .mv-cs-portal__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mv-cs-grid,.mv-cs-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .mv-cs-portal__grid{grid-template-columns:1fr}
  .mv-cs-grid,.mv-cs-grid--2{grid-template-columns:1fr}
  .mv-cs-portal__foot{align-items:flex-start}
}

/* =============================================================================
   B · POJEDINAČNA  (/case-studies/{slug})
   ========================================================================== */

/* ---------- 01 · Media mask hero (still) ---------- */
.mv-cs-shero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;
  background:var(--mv-primary-deep);color:var(--mv-on-dark);min-height:clamp(500px,64vh,760px);
  padding:calc(var(--mv-header-h) + clamp(60px,7vw,110px)) 0 clamp(48px,6vw,84px)}
.mv-cs-shero__bg{position:absolute;inset:0;z-index:0;margin:0}
.mv-cs-shero__bg img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.04)}
.mv-cs-shero__mask{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,17,.78) 0%,rgba(7,10,17,.6) 34%,rgba(7,10,17,.95) 100%)}
.mv-cs-shero__in{position:relative;z-index:2;width:100%}
.mv-cs-shero h1{margin-top:var(--mv-sp-e3);max-width:18ch;font-size:var(--mv-fs-h2-xl)}
.mv-cs-shero__sum{margin-top:var(--mv-sp-e4);max-width:var(--mv-measure-lead);
  font-size:var(--mv-fs-hero-sub);line-height:var(--mv-lh-lead);color:var(--mv-on-dark-mut)}
.mv-cs-meta{display:flex;flex-wrap:wrap;gap:var(--mv-sp-5) clamp(26px,3.4vw,58px);
  margin:clamp(30px,4vw,54px) 0 0;padding-top:var(--mv-sp-5);
  border-top:1px solid var(--mv-line-gold)}
.mv-cs-meta div{display:grid;gap:7px}
.mv-cs-meta dt{font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);
  letter-spacing:var(--mv-ls-micro);text-transform:uppercase;color:var(--mv-accent)}
.mv-cs-meta dd{margin:0;font-family:var(--mv-font-display);font-weight:var(--mv-fw-semi);
  font-size:var(--mv-fs-title-sm);letter-spacing:var(--mv-ls-tight);color:var(--mv-on-dark)}

/* ---------- reading spine (leva margina) ---------- */
.mv-cs-scope{position:relative}
.mv-cs-spine{display:none}
@media(min-width:1240px){
  .mv-cs-spine{display:block;position:absolute;left:calc(var(--mv-pad) * .5);top:0;bottom:0;
    width:1px;z-index:4;background:rgba(138,107,24,.28);pointer-events:none}
  .mv-cs-spine__fill{position:absolute;left:0;top:0;width:1px;height:0;
    background:linear-gradient(180deg,var(--mv-accent-deep),var(--mv-accent))}
  .mv-cs-spine__cap{position:sticky;top:46vh;display:flex;align-items:center;gap:14px;
    writing-mode:vertical-rl;white-space:nowrap;padding:10px 0 0 14px;
    font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);letter-spacing:var(--mv-ls-eyebrow);
    text-transform:uppercase;color:var(--mv-on-light-mut);
    transition:color var(--mv-dur-base) var(--mv-ease)}
  .mv-cs-spine__cap i{font-style:normal;color:var(--mv-accent-deep)}
  .mv-cs-spine.is-inv .mv-cs-spine__cap{color:var(--mv-on-dark-mut)}
  .mv-cs-spine.is-inv .mv-cs-spine__cap i{color:var(--mv-accent)}
}
@media(prefers-reduced-motion:reduce){.mv-cs-spine{display:none}}

/* ---------- 02 · Challenge (light, editorial) ---------- */
.mv-cs-body{margin-top:var(--mv-sp-e4);font-size:var(--mv-fs-prose);line-height:var(--mv-lh-prose);
  color:var(--mv-on-light-mut);max-width:min(var(--mv-measure),100%)}
/* .mv-body p{margin:0} iz tokens.css je specificniji od `.mv-cs-body>*+*` — otud .mv-body prefiks */
.mv-body .mv-cs-body>*+*{margin-top:var(--mv-sp-e3)}
.mv-cs-body h2,.mv-cs-body h3,.mv-cs-body h4{color:var(--mv-on-light);
  font-size:var(--mv-fs-title-md);line-height:var(--mv-lh-title);margin-top:var(--mv-sp-e4)}
.mv-cs-body ul,.mv-cs-body ol{margin:var(--mv-sp-e2) 0 0;padding-left:var(--mv-sp-5)}
.mv-cs-body li+li{margin-top:var(--mv-sp-2)}
.mv-cs-body strong,.mv-cs-body b{color:var(--mv-on-light);font-weight:var(--mv-fw-semi)}
.mv-cs-body a{color:var(--mv-accent-deep);text-decoration:underline;text-underline-offset:3px}
.mv-cs-body img{height:auto;display:block;margin-top:var(--mv-sp-5)}

/* ---------- 03 · What we did (light, drugi nivo podloge) ---------- */
.mv-cs-did{background:var(--mv-surface-light)}
.mv-cs-phases{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  margin-top:clamp(42px,5vw,72px);border-top:1px solid var(--mv-line-light)}
.mv-cs-phases__s{position:relative;padding:28px clamp(8px,1vw,18px) 0 0}
.mv-cs-phases__s::before{content:"";position:absolute;left:-7.5px;top:-7.5px;width:15px;height:15px;
  border-radius:var(--mv-r-circle);background:var(--mv-surface-light);
  border:1px solid var(--mv-line-light-strong);
  transition:background var(--mv-dur-fast) var(--mv-ease),border-color var(--mv-dur-fast)}
.mv-cs-phases__s.is-visible::before{background:var(--mv-accent-deep);
  border-color:var(--mv-accent-deep)}
.mv-cs-phases__n{font-style:normal;font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);
  letter-spacing:var(--mv-ls-micro);color:var(--mv-accent-deep)}
.mv-cs-phases__t{display:block;margin-top:10px;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;color:var(--mv-on-light)}

/* ---------- 04 · Result (dark, full-bleed, jedan broj) ---------- */
.mv-cs-result{position:relative;overflow:hidden;background:var(--mv-canvas);color:var(--mv-on-dark);
  padding:clamp(84px,11vw,150px) 0 clamp(76px,10vw,132px)}
.mv-cs-result__n{margin-top:clamp(30px,4vw,56px);font-family:var(--mv-font-display);
  font-weight:var(--mv-fw-bold);font-size:clamp(44px,8.4vw,132px);line-height:.94;
  letter-spacing:var(--mv-ls-h1);color:var(--mv-accent);font-variant-numeric:tabular-nums;
  max-width:16ch}
.mv-cs-result__line{display:block;height:2px;width:0;margin-top:clamp(26px,3vw,46px);
  background:var(--mv-grad-progress);transition:width var(--mv-dur-hero) var(--mv-ease)}
.mv-cs-result__line.is-on{width:min(560px,72%)}
.mv-cs-result__note{margin-top:var(--mv-sp-e3);font-size:var(--mv-fs-small);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mv-on-dark-soft);max-width:52ch}

/* ---------- 05 · Related (light) ---------- */
.mv-cs-back{margin-top:clamp(40px,5vw,62px)}

@media(max-width:1000px){
  .mv-cs-shero{min-height:0}
  .mv-cs-phases{grid-template-columns:repeat(3,1fr);row-gap:28px}
}
@media(max-width:760px){
  .mv-cs-meta{gap:var(--mv-sp-5) var(--mv-sp-7)}
  .mv-cs-phases{grid-template-columns:1fr;gap:0;padding-left:22px;border-top:0;
    border-left:1px solid var(--mv-line-light)}
  .mv-cs-phases__s{padding:0 0 26px}
  .mv-cs-phases__s::before{left:-29.5px;top:1px}
}