/* ============================================================
   Rotary MHC — stilovi za CMS sadržaj
   Slider fotografija, povećani prikaz (lightbox) i prozor s tekstom.
   Koristi varijable iz style.css (--navy-800, --gold, ...).
   ============================================================ */

/* ---------- 1. SLIDER U KARTICI DOGAĐANJA ---------- */
.cms-slider{position:relative;background:#D8E1EE}

.cms-slides{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cms-slides::-webkit-scrollbar{display:none}

.cms-slide{flex:0 0 100%;scroll-snap-align:start}

.cms-slide-btn{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  aspect-ratio:16/10;overflow:hidden;
}
.cms-slide-btn img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.cms-slide-btn:hover img{transform:scale(1.03)}
.cms-slide-btn:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* strelice */
.cms-sl-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(8,42,85,.55);color:#fff;font-size:1.5rem;line-height:1;
  display:grid;place-items:center;transition:background .2s ease,opacity .2s ease;
}
.cms-sl-nav:hover:not(:disabled){background:rgba(8,42,85,.85)}
.cms-sl-nav:disabled{opacity:.3;cursor:default}
.cms-sl-prev{left:10px}
.cms-sl-next{right:10px}
.cms-sl-nav span{position:relative;top:-2px}

/* točkice */
.cms-dots{
  position:absolute;bottom:10px;left:0;right:0;
  display:flex;justify-content:center;gap:7px;pointer-events:none;
}
.cms-dot{
  pointer-events:auto;width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.55);cursor:pointer;transition:.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.cms-dot.is-on{background:var(--gold);width:22px;border-radius:5px}

.cms-sl-count{
  position:absolute;top:10px;right:10px;margin:0;
  background:rgba(8,42,85,.6);color:#fff;border-radius:20px;
  padding:3px 10px;font-size:.74rem;font-weight:700;letter-spacing:.02em;
}

/* link-gumb koji izgleda kao .card-link */
.cms-link{
  border:0;background:none;padding:0;cursor:pointer;font:inherit;
  margin-top:14px;
}

/* ---------- 2. OVERLAY (zajedničko) ---------- */
html.cms-noscroll{overflow:hidden}

.cms-ov{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}
.cms-ov[hidden]{display:none}

.cms-ov-backdrop{
  position:absolute;inset:0;background:rgba(6,24,48,.86);
  backdrop-filter:blur(3px);animation:cms-fade .18s ease
}

.cms-ov-box{
  position:relative;z-index:1;max-width:min(1100px,94vw);max-height:92vh;
  display:flex;flex-direction:column;animation:cms-pop .2s ease
}
.cms-ov-box:focus{outline:none}

.cms-ov-x{
  position:absolute;top:-46px;right:0;width:38px;height:38px;
  border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;
  font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center
}
.cms-ov-x:hover{background:rgba(255,255,255,.3)}
.cms-ov-x:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.cms-ov-content{overflow:auto;max-height:92vh}

@keyframes cms-fade{from{opacity:0}to{opacity:1}}
@keyframes cms-pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cms-ov-backdrop,.cms-ov-box{animation:none}
}

/* ---------- 3. POVEĆANI PRIKAZ FOTOGRAFIJE ---------- */
.cms-ov.is-photo .cms-ov-box{max-width:96vw}
.cms-ov.is-photo .cms-ov-content{overflow:visible;max-height:none}

.cms-lb{margin:0;text-align:center}
.cms-lb-img{
  display:block;margin:0 auto;
  max-width:min(1400px,92vw);max-height:82vh;width:auto;height:auto;
  object-fit:contain;border-radius:8px;background:#0b1f3d;
  box-shadow:0 24px 70px rgba(0,0,0,.5)
}
.cms-lb-cap{
  color:#DCE6F5;font-size:.9rem;margin-top:12px;
  max-width:70ch;margin-inline:auto;padding:0 10px
}

.cms-lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:2rem;line-height:1;
  display:grid;place-items:center
}
.cms-lb-nav:hover{background:rgba(255,255,255,.3)}
.cms-lb-nav:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cms-lb-prev{left:-64px}
.cms-lb-next{right:-64px}
.cms-lb-nav span{position:relative;top:-3px}

@media (max-width:900px){
  .cms-lb-prev{left:6px;background:rgba(8,42,85,.6)}
  .cms-lb-next{right:6px;background:rgba(8,42,85,.6)}
  .cms-lb-img{max-height:70vh}
}

/* ---------- 4. PROZOR S TEKSTOM ---------- */
.cms-ov.is-text .cms-ov-box{max-width:min(760px,94vw)}

.cms-ov.is-text .cms-ov-content{
  background:#fff;border-radius:16px;padding:clamp(24px,4vw,44px);
  box-shadow:0 30px 80px rgba(0,0,0,.4)
}
.cms-ov-title{
  font-family:var(--font-head,inherit);font-size:clamp(1.3rem,2.6vw,1.9rem);
  font-weight:800;color:var(--navy-800,#0A2F5F);margin:0 0 .7em;
  padding-bottom:.5em;border-bottom:3px solid var(--gold,#EFA424);
  display:inline-block
}
.cms-ov-text{color:var(--ink-soft,#4A5872);font-size:1.02rem;line-height:1.75}
.cms-ov-text p{margin:0 0 1.1em}
.cms-ov-text p:last-child{margin-bottom:0}

/* ---------- 5. IKONA U KUĆICI ---------- */
.card-ico-img{
  width:30px;height:30px;object-fit:contain;display:block
}