/* ============================================================
   BIRO 404 — R12 /izrada-sajtova/ cinematic hero (isolated)
   Copy sits LEFT over a near-black zone; the storefront→website
   motif lives RIGHT. Two variants on [data-iz-mode] / .iz-hero--a|b:
     B (default): pre-blended 1600x900 extended-canvas video.
                  Baked left feather → works even without the CSS scrim.
     A         : original 960x960 square, aligned right, CSS scrim
                  builds the left copy zone (no re-render).
   Autoplay muted, plays once, holds the "found" frame. Reduced-motion
   / no-JS collapse to the FINAL poster (website-in-window payoff) with
   copy + CTA fully available. Reuses graphite+amber tokens. Never the
   homepage hero, never the R10 gp-hero.
   ============================================================ */

.iz-hero{position:relative;background:var(--bg);isolation:isolate}
.iz-stage{position:relative;overflow:hidden;background:var(--bg);
  height:clamp(560px, calc(100svh - var(--nav-h)), 920px)}

/* ---------- media ---------- */
.iz-media{position:absolute;inset:0}
.iz-poster,.iz-poster-final,.iz-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
.iz-poster{z-index:0}
.iz-poster-final{z-index:0;opacity:0}          /* revealed only in static / no-js */
.iz-video{z-index:1;opacity:0;transition:opacity .7s var(--ease)}
.iz-hero.is-ready .iz-video{opacity:1}

/* Variant A: square source needs to sit to the right so copy zone stays clean */
.iz-hero--a .iz-video,
.iz-hero--a .iz-poster,
.iz-hero--a .iz-poster-final{object-position:82% center}

/* reduced-motion / no-JS: drop the video, show the payoff poster under the copy */
.iz-hero.is-static .iz-video,html.no-js .iz-video{display:none!important}
.iz-hero.is-static .iz-poster-final,html.no-js .iz-poster-final{opacity:1}
.iz-hero.is-static .iz-poster,html.no-js .iz-poster{opacity:0}

/* ---------- left scrim → copy-safe near-black zone ---------- */
.iz-scrim{position:absolute;inset:0;z-index:2;pointer-events:none}
/* B already has a baked feather; keep the scrim gentle so the motif breathes */
.iz-hero--b .iz-scrim{background:
  linear-gradient(90deg, rgba(16,19,24,.92) 0%, rgba(16,19,24,.62) 30%, rgba(16,19,24,.10) 52%, rgba(16,19,24,0) 72%),
  linear-gradient(180deg, rgba(16,19,24,.34) 0%, rgba(16,19,24,0) 22%, rgba(16,19,24,0) 58%, rgba(16,19,24,.52) 100%)}
/* A is a raw square → needs a stronger, wider left wash to hold text */
.iz-hero--a .iz-scrim{background:
  linear-gradient(90deg, rgba(16,19,24,.97) 0%, rgba(16,19,24,.9) 28%, rgba(16,19,24,.58) 46%, rgba(16,19,24,.12) 66%, rgba(16,19,24,.3) 100%),
  linear-gradient(180deg, rgba(16,19,24,.48) 0%, rgba(16,19,24,0) 24%, rgba(16,19,24,0) 56%, rgba(16,19,24,.6) 100%)}

/* ---------- copy overlay ---------- */
.iz-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center}
.iz-copy{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.iz-inner{max-width:35rem}
.iz-crumb{font-family:var(--font-mono);font-size:.74rem;color:var(--text-2);margin-bottom:1.05rem}
.iz-crumb a{color:var(--text-2)}.iz-crumb a:hover{color:var(--accent)}
.iz-crumb span{margin:0 .45rem;color:var(--line-2)}
.iz-kicker{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.iz-title{font-family:var(--font-display);text-transform:uppercase;font-weight:400;line-height:.94;
  font-size:clamp(2.5rem,6.2vw,4.9rem);letter-spacing:.01em;color:var(--text);
  text-shadow:0 2px 48px rgba(0,0,0,.6)}
.iz-title .am{color:var(--accent)}
.iz-sub{color:var(--silver);font-size:clamp(1rem,1.45vw,1.18rem);line-height:1.62;margin-top:1.15rem;
  max-width:33rem;text-shadow:0 1px 24px rgba(0,0,0,.6)}
.iz-cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:1.8rem}
.iz-meta{margin-top:1.4rem;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.02em;color:var(--text-2)}
.iz-meta b{color:var(--text);font-weight:500}
.iz-meta .sep{color:var(--line-2);margin:0 .55rem}

/* ---------- bottom hairline progress (autoplay story) ---------- */
.iz-progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:5;background:rgba(233,238,247,.07)}
.iz-progress>span{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));box-shadow:0 0 12px rgba(247,168,27,.55)}
.iz-hero.is-static .iz-progress{display:none}

/* ---------- A/B switch (preview-only control) ---------- */
.iz-ab{position:absolute;left:clamp(1.15rem,4vw,2.4rem);bottom:1.4rem;z-index:6;
  display:inline-flex;align-items:center;gap:.1rem;padding:.3rem;border-radius:10px;
  background:rgba(12,15,19,.66);border:1px solid rgba(233,238,247,.12);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em}
.iz-ab-label{color:var(--text-2);text-transform:uppercase;padding:0 .5rem 0 .45rem}
.iz-ab a{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:1.7rem;
  padding:0 .55rem;border-radius:7px;color:var(--text-2);text-transform:uppercase;transition:background .2s,color .2s}
.iz-ab a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.iz-ab a[aria-current="true"]{background:var(--accent);color:var(--accent-deep);font-weight:700}

/* ============================================================
   MOBILE SPLIT (<=767px): opaque copy on top, video panel below.
   No H1/CTA over the moving motif. Leaves room for the fixed callbar.
   ============================================================ */
@media (max-width:767px){
  .iz-stage{height:100svh;min-height:0;display:flex;flex-direction:column;
    padding-bottom:var(--callbar-space)} /* R24C: bilo 58px */
  /* copy sizes to its content; the media band takes the rest so it stays tall
     enough for a portrait crop instead of a squashed landscape strip */
  .iz-overlay{position:relative;inset:auto;order:1;flex:0 0 auto;min-height:0;
    background:var(--bg);padding-top:1.1rem}
  .iz-inner{max-width:100%}
  .iz-crumb{margin-bottom:.8rem}
  .iz-kicker{margin-bottom:.7rem}
  .iz-title{font-size:clamp(2.05rem,9.2vw,3rem);line-height:.98}
  .iz-sub{max-width:100%;font-size:.98rem;line-height:1.55;margin-top:.75rem}
  .iz-cta{margin-top:1.15rem;gap:.7rem}
  .iz-cta .btn-lg{width:100%;justify-content:center}
  .iz-meta{margin-top:.9rem}
  .iz-media{position:relative;inset:auto;order:2;flex:1 1 auto;min-height:40svh;width:100%;
    overflow:hidden;border-top:1px solid var(--line)}
  /* B: pull the storefront into the middle-right of the band; the near-black
     left of the extended canvas stays visible for a natural blend */
  .iz-hero--b .iz-media .iz-video,
  .iz-hero--b .iz-media .iz-poster,
  .iz-hero--b .iz-media .iz-poster-final{object-position:88% center;transform:scale(1.08)}
  /* copy is above the media, so soften the wash: depth top/bottom + a light left veil */
  .iz-hero--b .iz-scrim,.iz-hero--a .iz-scrim{background:
    linear-gradient(180deg,var(--bg) 0%,rgba(16,19,24,0) 14%,rgba(16,19,24,0) 62%,rgba(16,19,24,.5) 100%),
    linear-gradient(90deg,rgba(16,19,24,.5) 0%,rgba(16,19,24,0) 32%)}
  .iz-hero--a .iz-video,.iz-hero--a .iz-poster,.iz-hero--a .iz-poster-final{object-position:72% center}
  .iz-ab{left:.7rem;bottom:.7rem}
  .iz-progress{z-index:6}
}
@media (max-width:400px){
  .iz-media{min-height:37svh}
  .iz-title{font-size:clamp(1.9rem,8.6vw,2.7rem)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .iz-video{display:none!important}
  .iz-progress{display:none}
}

/* ============================================================
   R12 /izrada-sajtova/ PAGE SECTIONS (isolated, preview page only)
   ============================================================ */

/* ---- two intro tracks (standard vs premium) ---- */
.track{position:relative}
.track .t-tag{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.track h3{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:1.5rem;color:var(--text);margin-bottom:.5rem}

/* ---- pricing tiers ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2vw,1.4rem)}
.tier{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:clamp(1.3rem,2.4vw,1.8rem)}
.tier--feat{border-color:rgba(247,168,27,.42);box-shadow:0 30px 70px -40px rgba(247,168,27,.35)}
.tier-badge{position:absolute;top:-.72rem;left:clamp(1.3rem,2.4vw,1.8rem);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--accent);padding:.28rem .6rem;border-radius:5px}
.tier-name{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.tier-price{font-family:var(--font-display);font-weight:400;line-height:1;color:var(--text);
  font-size:clamp(2.1rem,4vw,2.7rem);margin:.55rem 0 .2rem}
.tier-price small{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.02em;text-transform:uppercase;margin-left:.35rem;vertical-align:.35em}
.tier-desc{color:var(--silver);font-size:.96rem;line-height:1.6;margin-top:.75rem}
.tier-desc b{color:var(--text);font-weight:600}
.tier-note{margin-top:auto;padding-top:1rem;color:var(--muted);font-size:.82rem;line-height:1.5}
.tiers-foot{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.tiers-foot .fine{color:var(--muted);font-size:.84rem;line-height:1.5;max-width:34rem}
@media (max-width:820px){.tiers{grid-template-columns:1fr;gap:1.5rem}.tier-badge{left:1.3rem}}

/* ---- portfolio / work cards ---- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.work{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s}
.work:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.work-shot{position:relative;aspect-ratio:16/10;background:#0c0f13;overflow:hidden}
.work-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s var(--ease-out)}
.work:hover .work-shot img{transform:scale(1.04)}
.work-status{position:absolute;top:.7rem;left:.7rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.28rem .55rem;border-radius:5px;background:rgba(8,10,13,.8);color:var(--text);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.work-status .d{width:6px;height:6px;border-radius:50%}
.work-status--live .d{background:var(--ok);box-shadow:0 0 8px 1px rgba(95,208,139,.6)}
.work-status--preview .d{background:var(--accent);box-shadow:0 0 8px 1px rgba(247,168,27,.6)}
.work-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.work-cat{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.work-name{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:1.2rem;color:var(--text)}
.work-dom{margin-top:.5rem;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);
  font-size:.76rem;color:var(--text-2)}
.work:hover .work-dom{color:var(--accent)}
.work-dom svg{width:13px;height:13px}
@media (max-width:820px){.work-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.work-grid{grid-template-columns:1fr}}

/* ---- pilot block ---- */
.pilot{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(1.3rem,2.4vw,1.9rem)}
.pilot-ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:rgba(247,168,27,.12);color:var(--accent)}
.pilot-ic svg{width:24px;height:24px}
.pilot-tag{display:inline-block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-deep);background:var(--accent);padding:.24rem .55rem;border-radius:5px;margin-bottom:.6rem}
.pilot h3{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:1.35rem;color:var(--text);margin-bottom:.4rem}
.pilot p{color:var(--silver);line-height:1.6}
.pilot .c-link{margin-top:.8rem;display:inline-flex}
@media (max-width:560px){.pilot{grid-template-columns:1fr}}

/* ---- deeper explanations (details) ---- */
.expl{display:grid;gap:.7rem;max-width:52rem}
.expl details{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.expl summary{list-style:none;cursor:pointer;padding:1rem 1.15rem;display:flex;align-items:center;gap:.8rem;
  font-family:var(--font-body);font-weight:600;color:var(--text);font-size:1rem}
.expl summary::-webkit-details-marker{display:none}
.expl summary .chev{margin-left:auto;flex:none;width:18px;height:18px;color:var(--text-2);
  transition:transform .3s var(--ease)}
.expl details[open] summary .chev{transform:rotate(180deg)}
.expl summary:hover{color:var(--accent)}
.expl .expl-a{padding:0 1.15rem 1.1rem;color:var(--silver);line-height:1.65;max-width:46rem}
.expl .expl-a a{color:var(--accent)}
.expl .expl-a a:hover{text-decoration:underline}

/* ---- generic card link (matches site .c-link if present) ---- */
.iz-page .c-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;color:var(--accent)}
.iz-page .c-link svg{width:15px;height:15px;transition:transform .25s var(--ease-out)}
.iz-page .c-link:hover svg{transform:translateX(3px)}

/* preview ribbon (page is not live) */
.pv-ribbon{position:fixed;z-index:70;top:0;left:0;right:0;height:30px;display:flex;align-items:center;
  justify-content:center;gap:.6rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-deep);
  background:repeating-linear-gradient(135deg,#F7A81B,#F7A81B 14px,#e69a12 14px,#e69a12 28px)}
.pv-ribbon b{font-weight:700}
body.has-ribbon{padding-top:30px}
body.has-ribbon .site-header{top:30px}
@media (max-width:560px){.pv-ribbon{font-size:.62rem}}

/* R44A: interni projekat status na work-shot kartici */
.work-status--internal .d{background:#B9C3D4;box-shadow:0 0 8px 1px rgba(185,195,212,.5)}