/* =============================================================================
   ODZVONILO — media components for Tekstovi (video + image).
   Evidence aesthetic: aged, captioned, credited, square corners, no shadow.
   Reads tokens from colors_and_type.css; theme-aware. Load after kit.css.
   ========================================================================== */

/* ---- shared figure scaffold (reuses .oz-figcap from kit.css where present) ---- */
.ozm-fig{margin:0;}
.ozm-cap{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font:400 11px/1.45 var(--font-data);
  color:var(--muted);padding:7px 0 0;}
.ozm-cap .cap{flex:1;min-width:160px;}
.ozm-cap .cred{color:var(--faint);}
.ozm-cap .cred::before{content:"IZVOR · ";}
/* Inside an article body, image captions are editorial prose (full sentences), not terse archive
   metadata — render them as a proper figure caption: serif, caption and credit each on their own line. */
.oz-articlebody .ozm-cap{display:block;font:italic 400 13.5px/1.55 var(--font-body);color:var(--muted);
  padding:9px 0 0;border-top:1px solid var(--rule);margin-top:9px;}
.oz-articlebody .ozm-cap .cap{display:block;flex:none;min-width:0;}
.oz-articlebody .ozm-cap .cred{display:block;margin-top:4px;font:400 10.5px/1.4 var(--font-data);
  font-style:normal;letter-spacing:.02em;color:var(--faint);}

/* =============================================================================
   VIDEO PLAYER
   ========================================================================== */
.ozm-video{position:relative;background:#000;border:1px solid var(--rule);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);}
.ozm-video.is-doc{border:2px solid var(--ink);}
.ozm-video:hover{border-color:var(--ink);box-shadow:0 4px 18px rgba(10,8,6,.28);}
.ozm-video video,.ozm-video .ozm-vstage{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0a0806;cursor:pointer;}
/* placeholder stage (no real file) */
.ozm-vstage{display:flex;align-items:center;justify-content:center;color:#766d5b;cursor:pointer;
  background-image:repeating-linear-gradient(135deg,#0a0806,#0a0806 13px,#100d09 13px,#100d09 14px);}

/* centered play/pause on the stage (clean, no scrim) */
.ozm-vcenter{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;flex:none;border:2px solid #e8dec9;background:rgba(20,17,13,.5);
  color:#e8dec9;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:opacity var(--fast) var(--ease),background var(--fast) var(--ease);}
.ozm-vcenter:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.ozm-video.is-playing .ozm-vcenter{opacity:0;}
.ozm-video.is-playing:hover .ozm-vcenter{opacity:1;}
.ozm-video--sm .ozm-vcenter{width:44px;height:44px;font-size:18px;}

/* control bar — controls row only (seek is overlaid on the video) */
.ozm-vbar{background:var(--surface);border-top:1px solid var(--rule);padding:9px 11px;}
.ozm-vrow{display:flex;align-items:center;gap:6px;}
.ozm-vleft,.ozm-vright{display:flex;align-items:center;gap:6px;}
.ozm-vright{margin-left:auto;}
.ozm-vbtn{background:none;border:none;color:var(--ink);cursor:pointer;font-size:19px;display:inline-flex;
  align-items:center;justify-content:center;width:30px;height:30px;flex:none;}
.ozm-vbtn:hover{color:var(--accent);}
.ozm-vtime{font:700 11px/1 var(--font-data);color:var(--muted);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums;margin-left:2px;}
/* seek — overlaid flush on the bottom edge of the video, full content width */
.ozm-vseek{position:absolute;left:0;right:0;bottom:0;height:5px;cursor:pointer;z-index:6;}
.ozm-vseek .trk{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(232,222,201,.28);}
.ozm-vseek .fill{position:absolute;left:0;bottom:0;height:5px;background:var(--accent);z-index:1;}
.ozm-vseek .pin{position:absolute;bottom:2.5px;transform:translate(-50%,50%);width:12px;height:12px;
  background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 1px rgba(10,8,6,.4);z-index:2;}
/* chapter highlight markers — subtle dots in the track, brighten on hover */
.ozm-vseek .mark{position:absolute;bottom:0;width:9px;height:5px;transform:translateX(-50%);z-index:3;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:height var(--fast) var(--ease);}
.ozm-vseek .mark::before{content:"";width:2px;height:2px;background:rgba(232,222,201,.55);transition:all var(--fast) var(--ease);}
.ozm-video:hover .ozm-vseek .mark::before{width:2px;height:3px;background:rgba(232,222,201,.8);}
.ozm-vseek .mark:hover{height:8px;}
.ozm-vseek .mark:hover::before{width:3px;height:8px;background:var(--accent);}
/* scene preview popover on chapter hover */
.ozm-chprev{position:absolute;bottom:18px;left:50%;transform:translateX(-50%) translateY(4px);
  width:128px;background:var(--surface);border:1px solid var(--ink);padding:5px;z-index:8;
  opacity:0;pointer-events:none;transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);}
.mark--l .ozm-chprev{left:0;transform:translateX(-7px) translateY(4px);}
.mark--r .ozm-chprev{left:auto;right:0;transform:translateX(7px) translateY(4px);}
.ozm-vseek .mark:hover .ozm-chprev{opacity:1;transform:translateX(-50%) translateY(0);}
.ozm-vseek .mark--l:hover .ozm-chprev{transform:translateX(-7px) translateY(0);}
.ozm-vseek .mark--r:hover .ozm-chprev{transform:translateX(7px) translateY(0);}
.ozm-chprev .thumb{display:flex;align-items:center;justify-content:center;height:64px;color:#766d5b;font-size:22px;
  background-image:repeating-linear-gradient(135deg,#0a0806,#0a0806 9px,#100d09 9px,#100d09 10px);}
.ozm-chprev .meta{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:5px 2px 1px;
  font:700 10px/1.2 var(--font-data);color:var(--muted);}
.ozm-chprev .meta b{font:700 10px/1.2 var(--font-data);color:var(--ink);text-transform:uppercase;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* theater mode — wider stage */
.ozm-fig--theater{max-width:none;}
.ozm-video.is-theater video,.ozm-video.is-theater .ozm-vstage{aspect-ratio:21/9;}
.ozm-vbtn.is-on{color:var(--accent);}
.ozm-video:hover .ozm-vseek{height:8px;}
.ozm-video:hover .ozm-vseek .trk,.ozm-video:hover .ozm-vseek .fill{height:7px;}
/* volume — collapses to icon, expands slider on hover (YouTube behaviour) */
.ozm-vvolwrap{display:flex;align-items:center;}
.ozm-vvol{width:0;height:16px;position:relative;cursor:pointer;display:flex;align-items:center;overflow:hidden;
  transition:width var(--med) var(--ease),margin var(--med) var(--ease);}
.ozm-vvolwrap:hover .ozm-vvol,.ozm-vvol:hover{width:62px;margin:0 6px 0 2px;}
.ozm-vvol .trk{height:4px;width:100%;background:var(--chip);border:1px solid var(--rule);}
.ozm-vvol .fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:4px;background:var(--ink2);}
.ozm-vvol .pin{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;background:var(--ink2);border:1px solid var(--bg);}
.ozm-vspeed{font:700 11px/1 var(--font-data);color:var(--muted);background:none;border:1px solid var(--rule);
  padding:6px 7px;cursor:pointer;flex:none;}
.ozm-vspeed:hover{border-color:var(--ink);color:var(--ink);}
.ozm-vcc{font:700 9px/1 var(--font-data);letter-spacing:.04em;border:1px solid var(--rule);color:var(--muted);
  padding:5px 6px;cursor:pointer;flex:none;}
.ozm-vcc.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.ozm-video:fullscreen{border:none;}
.ozm-video:fullscreen video,.ozm-video:fullscreen .ozm-vstage{height:100vh;aspect-ratio:auto;}

/* transcript / caption strip */
.ozm-vtrans{border:1px solid var(--rule);border-top:none;background:var(--bg);padding:10px 12px;
  font:400 13px/1.6 var(--font-body);color:var(--ink2);max-width:none;}
.ozm-vtrans .tl{display:flex;gap:10px;padding:3px 0;}
.ozm-vtrans .tl time{font:700 10px/1.5 var(--font-data);color:var(--accent);flex:none;min-width:42px;}
.ozm-vtrans .tl .tlts{font:700 10px/1.5 var(--font-data);color:var(--accent);flex:none;min-width:42px;text-align:left;
  background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;}
.ozm-vtrans .tl .tlts:hover{text-decoration-color:var(--accent);}
.ozm-vtrans .tl.is-active{color:var(--ink);}

/* compact / inline video variant */
.ozm-video--sm .ozm-vbig .disc{width:46px;height:46px;font-size:20px;}

/* =============================================================================
   IMAGE — effect variants
   ========================================================================== */
.ozm-img{position:relative;display:block;width:100%;border:1px solid var(--rule);background:var(--chip);overflow:hidden;}
.ozm-img.is-doc{border:2px solid var(--ink);}
.ozm-img img,.ozm-img .ph{display:block;width:100%;height:100%;object-fit:cover;}
.ozm-img .ph{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;color:var(--faint);
  background-image:repeating-linear-gradient(135deg,transparent,transparent 11px,color-mix(in srgb,var(--rule) 55%,transparent) 11px,color-mix(in srgb,var(--rule) 55%,transparent) 12px);}
.ozm-img .ph i{font-size:32px;}

/* effects (applied to img/ph) */
.fx-archive img,.fx-archive .ph{filter:grayscale(.35) sepia(.12) contrast(.96);}
.fx-bw img,.fx-bw .ph{filter:grayscale(1) contrast(1.05);}
.fx-duotone img{filter:grayscale(1) contrast(1.1);}
.fx-duotone::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;
  background:linear-gradient(135deg,var(--accent),transparent 70%);opacity:.5;pointer-events:none;}
.fx-faded img,.fx-faded .ph{filter:grayscale(.5) sepia(.2) brightness(1.04) contrast(.9);opacity:.92;}
.fx-sepia img,.fx-sepia .ph{filter:sepia(.6) contrast(.95) brightness(1.02);}
.fx-contrast img,.fx-contrast .ph{filter:grayscale(1) contrast(1.4) brightness(.95);}
.fx-blueprint img{filter:grayscale(1) brightness(.7) contrast(1.2);}
.fx-blueprint::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;background:var(--link);opacity:.55;pointer-events:none;}
.fx-blueprint .ph{filter:none;}
.fx-halftone img,.fx-halftone .ph{filter:grayscale(1) contrast(1.3);}
.fx-halftone::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background-image:radial-gradient(var(--ink) 28%,transparent 30%);background-size:5px 5px;}
.fx-none img,.fx-none .ph{filter:none;}

/* redacted overlay bars (evidence withheld) */
.ozm-redbar{position:absolute;background:var(--redact);border:1px solid var(--muted);}

/* blur-to-reveal (sensitive) */
.ozm-img.is-blurred img{filter:blur(16px) grayscale(.4);}
.ozm-reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:rgba(10,8,6,.5);color:#e8dec9;cursor:pointer;text-align:center;padding:16px;}
.ozm-reveal i{font-size:26px;color:#d4564a;}
.ozm-reveal .t{font:700 11px/1.4 var(--font-data);letter-spacing:.04em;}
.ozm-reveal .s{font:400 11px/1.5 var(--font-body);color:#9a9486;max-width:34ch;}
.ozm-img.is-revealed .ozm-reveal{display:none;}
.ozm-img.is-revealed img{filter:grayscale(.35) sepia(.12);}

/* zoom-on-hover (document scan) */
.ozm-img--zoom img{transition:transform var(--med) var(--ease);cursor:zoom-in;}
.ozm-img--zoom:hover img{transform:scale(1.06);}

/* corner classification stamp for images */
.ozm-istamp{position:absolute;top:10px;left:10px;font-family:var(--font-display);font-size:10px;color:#e8dec9;
  border:2px solid #e8dec9;padding:3px 7px;letter-spacing:.05em;transform:rotate(-4deg);background:rgba(10,8,6,.45);}

/* comparison slider (before/after) */
.ozm-cmp{position:relative;user-select:none;overflow:hidden;border:1px solid var(--rule);}
.ozm-cmp .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ozm-cmp .top{clip-path:inset(0 50% 0 0);}
.ozm-cmp .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;}
.ozm-cmp .handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;background:var(--accent);border:2px solid var(--bg);}
.ozm-cmp .lbl{position:absolute;bottom:8px;font:700 9px/1 var(--font-data);letter-spacing:.06em;text-transform:uppercase;
  color:#e8dec9;background:rgba(10,8,6,.6);padding:4px 7px;}
.ozm-cmp .lbl.l{left:8px;}.ozm-cmp .lbl.r{right:8px;}

/* caption overlaid on the image (gradient strip) */
.ozm-img--capover{position:relative;}
.ozm-overcap{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 9px;
  background:linear-gradient(transparent,rgba(10,8,6,.82));
  font:400 11px/1.4 var(--font-data);color:#e8dec9;}
.ozm-overcap b{display:block;font:700 11px/1.3 var(--font-data);color:#fff;margin-bottom:2px;}

/* print / archival frame (mat border + bottom label plate) */
.ozm-print{background:var(--surface);border:1px solid var(--rule);padding:9px 9px 0;}
.ozm-print .ozm-img{border:1px solid var(--rule);}
.ozm-print .plate{font:400 9px/1.5 var(--font-data);color:var(--muted);padding:8px 2px;display:flex;justify-content:space-between;gap:10px;}
.ozm-print .plate b{font:700 9px/1.5 var(--font-data);color:var(--ink);text-transform:uppercase;letter-spacing:.06em;}

/* fully withheld cover (entire image protected) */
.ozm-img.is-withheld img,.ozm-img.is-withheld .ph{filter:blur(22px) grayscale(1) brightness(.7);}
.ozm-withheld{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  color:#e8dec9;text-align:center;padding:14px;}
.ozm-withheld i{font-size:24px;color:var(--accent);}
.ozm-withheld .t{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;border:2px solid var(--accent);color:var(--accent);padding:4px 9px;transform:rotate(-4deg);}
.ozm-withheld .s{font:400 10px/1.4 var(--font-data);color:#9a9486;max-width:30ch;}

/* image grid / gallery */
.ozm-grid{display:grid;gap:8px;}
.ozm-grid--2{grid-template-columns:1fr 1fr;}
.ozm-grid--3{grid-template-columns:repeat(3,1fr);}
.ozm-grid .ozm-img .ph{aspect-ratio:1;}

/* Audio player (article audio block) — wide, styled, with a Web Audio visualizer. Global (here, not a
   scoped component <style>) so it always loads and the canvas can never overflow its column. */
.ozm-audiofig{margin:0;}
.ozm-audio{display:flex;align-items:center;gap:16px;width:100%;max-width:100%;box-sizing:border-box;
  border:1px solid var(--rule);background:var(--surface);padding:16px 18px;overflow:hidden;}
.ozm-audio--empty{color:var(--muted);font:400 13px/1.4 var(--font-data);gap:8px;}
.ozm-audio-btn{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);
  background:var(--ink);color:var(--surface);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .1s ease;padding:0;}
.ozm-audio-btn:hover{transform:scale(1.06);}
.ozm-audio-ic{width:24px;height:24px;display:block;fill:currentColor;}
.ozm-audio-ic[hidden]{display:none;} /* show only the play OR pause icon, never both */
.ozm-audio-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px;}
.ozm-audio-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.ozm-audio-title{font:700 12px/1.2 var(--font-data);letter-spacing:.04em;color:var(--ink);
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.ozm-audio-time{font:400 12px/1 var(--font-data);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;flex:none;}
.ozm-audio-wave{display:block;width:100%;max-width:100%;height:52px;cursor:pointer;}
.ozm-audio-native{width:100%;max-width:100%;margin-top:4px;}
@media (max-width:520px){
  .ozm-audio{gap:12px;padding:12px 14px;}
  .ozm-audio-btn{width:44px;height:44px;}.ozm-audio-ic{width:20px;height:20px;}
  .ozm-audio-wave{height:42px;}
}