/**
 * EN-HSlider - shared front-end styles.
 * Copyright (C) 2026 E-NINA d.o.o. All rights reserved. https://www.e-nina.si
 *
 * Scoped under .hero-slider so it is safe to load on a normal site page
 * (menu item, content-plugin tag, module, WordPress shortcode/widget/block).
 * This file intentionally does NOT touch `body` - that would leak into the
 * host page/theme. The Joomla "raw" full-page layout (used for the admin
 * preview iframe) applies its own dark background via an inline <style>.
 *
 * v1.1.0 changes:
 * - Every image/text transition class now lives on the individual .slide
 *   element (rendered server-side per slide) instead of the .hero-slider
 *   root, so each slide can use its own transition. A slide that doesn't
 *   specify one falls back to the slider's global transition - resolved
 *   server-side, so the class is always present and correct on first paint.
 * - Fixed: every text-transition "revealed" rule used to be written
 *   `.active.txt-X [data-split] span {...}` - a compound selector that
 *   requires .active and .txt-X on the SAME element. .active is set on
 *   .slide by the JS; .txt-X was previously set on the outer wrapper - two
 *   different elements - so the rule could never match and slide text
 *   never became visible. Rewritten as `.slide.txt-X.active [data-split]
 *   span {...}`, which is both correct and now naturally per-slide.
 * - Fixed: the "grayscale" image transition's active rule targeted
 *   `.slide.active` instead of `.slide.active .bg-img`, so the filter was
 *   set on the wrong element and the image never returned to color.
 * - Fixed: nav arrows were never hidden for control types that shouldn't
 *   show them (dots/thumbs/numbers/progress on their own), so switching
 *   control type looked like it did nothing.
 *
 * v1.2.0 changes:
 * - Per-ROW text transitions: each text row (overline/title/subtitle/
 *   bottom text) now carries its own txt-X class directly (rendered
 *   server-side per row, not per slide), so every row within one slide can
 *   animate differently. Rules moved from `.slide.txt-X [data-split] span`
 *   (ancestor class on .slide) to `.txt-X[data-split] span` (class on the
 *   row element itself, which already carries [data-split]); the "revealed"
 *   state now only needs `.slide.active` as an ancestor, which is naturally
 *   true regardless of nesting.
 * - Full width now genuinely breaks the slider out to the true viewport
 *   width (edge-to-edge) via an inline style (width:100vw + negative
 *   margin trick) rather than just `width:100%` of whatever container
 *   happens to wrap it. Boxed width can now be either "match container"
 *   (no extra styling - the old width:100% behaviour) or a custom pixel
 *   width. See EnhsliderHelper::layoutCss() / Enh_Render::layout_css().
 *
 * v1.4.4 changes:
 * - `.slide-content` no longer hardcodes `width:60%` + `left:0` (always
 *   pinned to the left) - it now spans the full slide (`inset:0`) and
 *   positions `.content-inner` within it via `justify-content`, driven by a
 *   `--content-justify` custom property the render layer sets from the new
 *   `contentAlign` setting (left/center/right). `.content-inner`'s own
 *   width is now the (also new) `contentWidth` setting, via
 *   `--content-width`, instead of a fixed `max-width:640px`; `min(...,100%)`
 *   keeps it from overflowing narrow slides regardless of that setting.
 * - Text rows can now define an EXIT animation (separate from their
 *   entrance `txt-X` transition) that plays before the slider swaps to the
 *   next slide, instead of the previous slide's text simply vanishing the
 *   instant the next one appears. A row with a non-"none" exit gets a
 *   `txt-exit-X` class; enhslider.js adds `.leaving` to the outgoing
 *   `.slide` (and `.txt-exiting` to that row) for the duration of the exit,
 *   which is what the `.slide.leaving .txt-exit-X.txt-exiting` rules below
 *   key off. These rules only set the target transform/opacity/filter - the
 *   actual `transition` (duration, per-word/char stagger delay) is still
 *   the inline one enhslider.js's splitText() already put on each `span`,
 *   so an exit reuses the same pacing its entrance uses.
 */
:root{
  --transition-duration: 1200ms;
  --ease: cubic-bezier(.77,0,.175,1);
}
.hero-slider{position:relative;width:100%;height:100vh;overflow:hidden;isolation:isolate;box-sizing:border-box}
.hero-slider *{box-sizing:border-box}
.slides-wrapper{position:relative;width:100%;height:100%;perspective:1200px}
.slide{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:1;margin:0;padding:0;will-change:transform,opacity;transition:opacity var(--transition-duration) var(--ease),transform var(--transition-duration) var(--ease)}
.slide.active{opacity:1;pointer-events:auto;z-index:3}
.slide-bg{position:absolute;inset:0;overflow:hidden;background:#111}
.slide-bg .bg-img{position:absolute;inset:0;width:100%;height:120%;object-fit:cover;top:-10%;will-change:transform}
.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.05) 100%)}

.slide-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:var(--content-justify,flex-start);padding:0 7vw;z-index:5;transform:rotate(var(--angle,0deg));transform-origin:left center}
.content-inner{max-width:min(var(--content-width,640px),100%);overflow-wrap:break-word;word-break:break-word;text-align:var(--content-align,left)}
.nadnaslov{display:block;font-family:Manrope,sans-serif;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:#fff;margin-bottom:18px;opacity:.9;max-width:100%}
.naslov{font-family:'Instrument Serif',serif;font-size:68px;line-height:.95;color:#fff;font-weight:400;margin-bottom:18px;max-width:100%}
.podnaslov{font-size:18px;line-height:1.6;color:#e8e8e8;margin-bottom:32px;max-width:520px}
.text-link{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.4);transition:.3s}
.bottom-text{margin-top:14px;font-size:13px;opacity:.85}

.cta-custom{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--btn-bg,#fff);color:var(--btn-color,#111);
  border:var(--btn-border,none);border-radius:var(--btn-radius,100px);
  padding:var(--btn-padding,14px 28px);font-size:var(--btn-fontSize,14px);
  font-family:Manrope,sans-serif;font-weight:600;
  box-shadow:var(--btn-shadow,0 4px 15px rgba(0,0,0,.1));text-decoration:none;transition:all .3s ease;
  cursor:pointer;margin-top:24px;
}
.cta-custom:hover{background:var(--btn-hoverBg,#f0f0f0);color:var(--btn-hoverColor,#000);transform:translateY(-2px)}
.buttons-hidden .cta-custom{display:none !important}
.bg-img{object-fit:var(--img-fit,cover) !important;object-position:var(--img-pos,center center) !important;transform:scale(var(--img-zoom,1.08)) !important}
.overlay{opacity:var(--overlay-opacity,.45)}

.slide .bg-img{transition:transform var(--transition-duration) var(--ease),filter var(--transition-duration) var(--ease),clip-path var(--transition-duration) var(--ease),opacity var(--transition-duration) var(--ease)}

/* ---- Per-slide IMAGE transitions: each rule is self-contained on .slide,
   no ancestor class required, so every slide can carry its own. ---- */
.slide.t-fade{opacity:0}.slide.t-fade.active{opacity:1}
.slide.t-slide-left{transform:translateX(100%)}.slide.t-slide-left.active{transform:translateX(0)}
.slide.t-slide-right{transform:translateX(-100%)}.slide.t-slide-right.active{transform:translateX(0)}
.slide.t-slide-up .bg-img{transform:translateY(100%)}.slide.t-slide-up.active .bg-img{transform:translateY(0)}
.slide.t-slide-down .bg-img{transform:translateY(-100%)}.slide.t-slide-down.active .bg-img{transform:translateY(0)}
.slide.t-zoom-in .bg-img{transform:scale(1.4)}.slide.t-zoom-in.active .bg-img{transform:scale(1)}
.slide.t-zoom-out .bg-img{transform:scale(0.8)}.slide.t-zoom-out.active .bg-img{transform:scale(1)}
.slide.t-ken-burns .bg-img{transform:scale(1) translate(0,0)}.slide.t-ken-burns.active .bg-img{animation:enhKenBurns 8s forwards}
@keyframes enhKenBurns{to{transform:scale(1.15) translate(-2%,-1%)}}
.slide.t-blur-in .bg-img{filter:blur(25px) brightness(0.6)}.slide.t-blur-in.active .bg-img{filter:blur(0) brightness(1)}
.slide.t-grayscale .bg-img{filter:grayscale(1) contrast(1.2)}.slide.t-grayscale.active .bg-img{filter:grayscale(0) contrast(1)}
.slide.t-circle-reveal .bg-img{clip-path:circle(0% at 70% 50%)}.slide.t-circle-reveal.active .bg-img{clip-path:circle(150% at 70% 50%)}
.slide.t-diagonal-clip .bg-img{clip-path:polygon(0 0,0 0,0 100%,0 100%)}.slide.t-diagonal-clip.active .bg-img{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.slide.t-rotate-scale .bg-img{transform:rotate(8deg) scale(1.3)}.slide.t-rotate-scale.active .bg-img{transform:rotate(0) scale(1)}
.slide.t-depth-parallax{transform:translateZ(-200px) scale(1.2)}.slide.t-depth-parallax.active{transform:translateZ(0) scale(1)}
.slide.t-split .bg-img{clip-path:inset(0 100% 0 0)}.slide.t-split.active .bg-img{clip-path:inset(0 0 0 0)}
.slide.t-cube{transform:rotateY(90deg);transform-origin:left}.slide.t-cube.active{transform:rotateY(0)}
.slide.t-flip{transform:rotateX(90deg)}.slide.t-flip.active{transform:rotateX(0)}
.slide.t-shutter .bg-img{clip-path:inset(0 0 100% 0)}.slide.t-shutter.active .bg-img{clip-path:inset(0 0 0 0)}

/* ---- Per-ROW TEXT transitions: the txt-X class now lives directly on the
   row element itself (same element as [data-split]), so each text row can
   animate independently. Only the "revealed" state needs an ancestor
   (.slide.active); the base/hidden pose is gated purely by the row's own
   class. ---- */
[data-split]{display:block;overflow:hidden}
[data-split] span{display:inline-block;will-change:transform,opacity}
.txt-fade[data-split] span{opacity:0;transform:translateY(0)}.slide.active .txt-fade[data-split] span{opacity:1}
.txt-slide-up[data-split] span{transform:translateY(110%)}.slide.active .txt-slide-up[data-split] span{transform:translateY(0)}
.txt-slide-down[data-split] span{transform:translateY(-110%)}.slide.active .txt-slide-down[data-split] span{transform:translateY(0)}
.txt-slide-left[data-split] span{transform:translateX(100%)}.slide.active .txt-slide-left[data-split] span{transform:translateX(0)}
.txt-slide-right[data-split] span{transform:translateX(-100%)}.slide.active .txt-slide-right[data-split] span{transform:translateX(0)}
.txt-blur-in[data-split] span{filter:blur(10px);opacity:0}.slide.active .txt-blur-in[data-split] span{filter:blur(0);opacity:1}
.txt-scale-up[data-split] span{transform:scale(0.7);opacity:0}.slide.active .txt-scale-up[data-split] span{transform:scale(1);opacity:1}
.txt-rotate-in[data-split] span{transform:rotate(10deg) translateY(50%);opacity:0}.slide.active .txt-rotate-in[data-split] span{transform:rotate(0) translateY(0);opacity:1}
.txt-clip-reveal[data-split]{clip-path:inset(0 100% 0 0)}.slide.active .txt-clip-reveal[data-split]{clip-path:inset(0 0 0 0)}
.txt-elastic[data-split] span{transform:translateY(100%);opacity:0}.slide.active .txt-elastic[data-split] span{opacity:1;animation:enhElastic .8s var(--ease) forwards}
@keyframes enhElastic{0%{transform:translateY(100%)}60%{transform:translateY(-10%)}100%{transform:translateY(0)}}
.txt-blur-up[data-split] span{transform:translateY(30px);filter:blur(8px);opacity:0}.slide.active .txt-blur-up[data-split] span{transform:translateY(0);filter:blur(0);opacity:1}
.txt-mask-line[data-split]{transform:translateY(100%)}.slide.active .txt-mask-line[data-split]{transform:translateY(0)}
.txt-skew-in[data-split] span{transform:skewX(-20deg) translateX(50px);opacity:0}.slide.active .txt-skew-in[data-split] span{transform:skewX(0) translateX(0);opacity:1}
.txt-pop[data-split] span{transform:scale(0);opacity:0}.slide.active .txt-pop[data-split] span{transform:scale(1);opacity:1}
.txt-perspective[data-split] span{transform:rotateX(-90deg);transform-origin:bottom;opacity:0}.slide.active .txt-perspective[data-split] span{transform:rotateX(0);opacity:1}
.txt-word-stagger[data-split] span{opacity:0;transform:translateY(40px)}.slide.active .txt-word-stagger[data-split] span{opacity:1;transform:translateY(0)}
.txt-char-reveal[data-split] span{opacity:0}.slide.active .txt-char-reveal[data-split] span{opacity:1}
.txt-typewriter[data-split]{white-space:nowrap;overflow:hidden;border-right:2px solid #fff;width:0}
.slide.active .txt-typewriter[data-split]{animation:enhTypewriter 2s steps(40) forwards}
@keyframes enhTypewriter{from{width:0}to{width:100%}}

/* ---- Per-ROW text EXIT animations: independent of (and optional
   alongside) the entrance txt-X transition above. A row only gets a
   txt-exit-X class when an exit style other than "none" is set; enhslider.js
   adds .leaving to the outgoing .slide and .txt-exiting to that row for the
   duration of the exit, which is what these rules key off - they only set
   the target pose. More class selectors here than the "revealed" rules
   above (.slide.active .txt-X...) gives these enough specificity to win
   regardless of source order, since both .active and .leaving are present
   on the outgoing slide at the same time.
   v1.4.5 fix: the exit's *transition timing* is forced below to a plain,
   undelayed `var(--transition-duration)` via !important - it deliberately
   does NOT reuse the inline transition splitText() put on each span for the
   entrance (that inline transition can carry a per-word/char stagger offset
   AND the row's own entrance "start delay", which could be up to 3000ms).
   enhslider.js only waits `this.duration` (== --transition-duration) before
   finalising the slide swap; reusing the entrance's inline timing meant an
   exit could still be sitting at its entrance delay when the swap was
   forced through, so it either started late and got cut off mid-fade or,
   with a longer entrance delay/stagger, never visibly played at all. ---- */
.slide.leaving .txt-exiting[data-split] span{transition:transform var(--transition-duration,1200ms) var(--ease),opacity var(--transition-duration,1200ms) var(--ease),filter var(--transition-duration,1200ms) var(--ease) !important}
.slide.leaving .txt-exit-fade.txt-exiting[data-split] span{opacity:0}
.slide.leaving .txt-exit-slide-up.txt-exiting[data-split] span{transform:translateY(-110%);opacity:0}
.slide.leaving .txt-exit-slide-down.txt-exiting[data-split] span{transform:translateY(110%);opacity:0}
.slide.leaving .txt-exit-slide-left.txt-exiting[data-split] span{transform:translateX(-110%);opacity:0}
.slide.leaving .txt-exit-slide-right.txt-exiting[data-split] span{transform:translateX(110%);opacity:0}
.slide.leaving .txt-exit-scale-down.txt-exiting[data-split] span{transform:scale(.6);opacity:0}
.slide.leaving .txt-exit-blur-out.txt-exiting[data-split] span{filter:blur(10px);opacity:0}

.controls{position:absolute;z-index:10;display:flex;align-items:center;gap:16px}
.controls.bottom-center{bottom:40px;left:50%;transform:translateX(-50%)}
.controls.bottom-left{bottom:40px;left:7vw}
.controls.bottom-right{bottom:40px;right:7vw}
.controls.top-center{top:40px;left:50%;transform:translateX(-50%)}
.controls.top-right{top:40px;right:7vw}
.controls.center-sides{top:50%;left:0;right:0;justify-content:space-between;padding:0 24px;transform:translateY(-50%);bottom:auto}
.dots{display:flex;gap:10px}
.dots button{width:10px;height:10px;border-radius:50%;border:1px solid #fff;background:transparent;transition:.3s;padding:0;cursor:pointer}
.dots button.active{background:#fff;transform:scale(1.4)}
.thumbs{display:flex;gap:8px}
.thumbs img{width:48px;height:32px;object-fit:cover;border-radius:4px;opacity:.5;cursor:pointer;border:2px solid transparent}
.thumbs img.active{opacity:1;border-color:#fff}
.progress-bar{width:120px;height:2px;background:rgba(255,255,255,.3);overflow:hidden}
.progress-bar span{display:block;height:100%;width:0%;background:#fff;transition:width linear}
.numbers{display:flex;gap:12px;color:#fff;font-family:Manrope}
.numbers button{opacity:.5;background:none;border:none;color:#fff;font-size:14px;cursor:pointer;padding:0}.numbers button.active{opacity:1;font-weight:700}
.nav-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.2);color:#fff;font-size:22px;cursor:pointer;backdrop-filter:blur(8px);transition:.3s}
.nav-arrow:hover{background:#fff;color:#000}
.slide-counter{position:absolute;top:40px;right:7vw;color:#fff;font-family:Manrope;font-size:12px;letter-spacing:.2em;z-index:10;opacity:.7}

@media(max-width:900px){
  .hero-slider .slide-content{padding:0 6vw}
  .hero-slider .naslov{font-size:42px}
  .hero-slider .podnaslov{font-size:16px}
  .hero-slider .controls.bottom-center{bottom:20px}
}
@media(max-width:600px){
  .hero-slider .naslov{font-size:32px}
  .hero-slider .slide-content{align-items:flex-end;padding-bottom:100px}
}

/* Control-type visibility. Every type hides the elements it doesn't use,
   AND (fixed) nav arrows are now hidden unless the type actually includes
   them - previously arrows showed for every type, which made switching
   control type look like it had no effect. */
.controls .nav-arrow{display:none}
.controls.type-arrows .nav-arrow,
.controls.type-dots-arrows .nav-arrow,
.controls.type-thumbs-arrows .nav-arrow{display:inline-flex;align-items:center;justify-content:center}

.controls.type-dots .thumbs,.controls.type-dots .numbers,.controls.type-dots .progress-bar{display:none}
.controls.type-thumbs .dots,.controls.type-thumbs .numbers,.controls.type-thumbs .progress-bar{display:none}
.controls.type-numbers .dots,.controls.type-numbers .thumbs,.controls.type-numbers .progress-bar{display:none}
.controls.type-progress .dots,.controls.type-progress .thumbs,.controls.type-progress .numbers{display:none}
.controls.type-progress .progress-bar{width:200px}
.controls.type-arrows .dots,.controls.type-arrows .thumbs,.controls.type-arrows .numbers,.controls.type-arrows .progress-bar{display:none}
.controls.type-dots-arrows .thumbs,.controls.type-dots-arrows .numbers,.controls.type-dots-arrows .progress-bar{display:none}
.controls.type-thumbs-arrows .dots,.controls.type-thumbs-arrows .numbers,.controls.type-thumbs-arrows .progress-bar{display:none}
.controls.type-dots-thumbs .numbers,.controls.type-dots-thumbs .progress-bar{display:none}

.txt-icon{display:inline-block;vertical-align:middle}
.txt-icon.lucide-icon{width:1.1em;height:1.1em;stroke-width:2;stroke:currentColor}
/* Font Awesome / Material Icons / Boxicons are font-glyph icons, not SVGs -
   sized via font-size rather than width/height like the Lucide SVGs above. */
.txt-icon:not(.lucide-icon){font-size:1.3em;line-height:1}
.txt-icon.icon-top{display:block;margin:0 auto 8px auto}
.txt-icon.lucide-icon.icon-top{width:1.6em;height:1.6em}
.txt-icon:not(.lucide-icon).icon-top{font-size:1.8em}
.txt-icon.icon-left{margin-right:10px}
.txt-icon.icon-right{margin-left:10px}
/* Icons reveal alongside their row regardless of icon library or which of
   the 18 text transitions the row uses - a small independent fade/scale-in
   tied to the same .slide.active state everything else reveals on. */
.txt-icon{opacity:0;transform:scale(.55);transition:opacity var(--transition-duration,600ms) var(--ease),transform var(--transition-duration,600ms) var(--ease);transition-delay:.05s}
.slide.active .txt-icon{opacity:1;transform:scale(1)}
.btn-icon{width:16px;height:16px;display:inline-block;vertical-align:middle;stroke:currentColor}
.btn-icon:not(.lucide-icon){font-size:16px;line-height:1;width:auto;height:auto}
.nadnaslov .lucide-icon{width:14px;height:14px}
.nadnaslov .txt-icon:not(.lucide-icon){font-size:1em}
.naslov .lucide-icon{width:0.8em;height:0.8em}