/* gallery.css — Coverflow with constant-size reflections (no pop) */

/* ---------- Tunables ---------- */
:root {
  --side-gap: 160px;
  --base-scale: 0.58;
  --scale-step: 0.12;
  --transition: 420ms cubic-bezier(.2,.8,.2,1);
  --max-width: 1200px;

  --thumb-radius: 16px;
  --shadow: 0 8px 18px rgba(0,0,0,.06);

  /* Reflection (constant geometry + opacity) */
  --refl-opac: 0.44;
  --refl-tilt: 24deg;
  --refl-persp: 600px;
  --refl-gap: -1px;                /* tighter gap */
  --refl-push: 14px;              /* closer to image */
  --refl-fade: 88%;               /* fade ends sooner */
  --refl-height: clamp(80px, 10vh, 110px);
}

/* ---------- Page base ---------- */
html, body { height: 100%; }
body {
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- Navbar ---------- */
.rd-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;

  /* Solid brand blue background */
  background: #0056b3;
  color: #ffffff;            /* ensure nav links stay readable */
  backdrop-filter: none;

  transition: background .25s ease, box-shadow .25s ease;
}
.rd-navbar.nav-solid {
  background: #0056b3;       /* stays the same blue after scroll */
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}


/* ---------- Container ---------- */
.gallery-wrap {
  position: relative;
  max-width: var(--max-width);
  margin: 6vh auto;
  padding: 0 48px;
}

/* ---------- Coverflow stage ---------- */
.coverflow {
  position: relative;
  height: clamp(260px, 55vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
  touch-action: pan-y;
  user-select: none;
  margin-inline: auto;
  overflow: visible;
}

/* ---------- Items ---------- */
.cf-item {
  position: absolute;
  width: clamp(200px, 36vw, 440px);
  max-height: 90%;
  overflow: visible;
  will-change: transform, filter, opacity;
  transition:
    transform var(--transition),
    opacity var(--transition),
    z-index var(--transition),
    filter var(--transition);
  cursor: pointer;
  filter: saturate(.9) contrast(.98);
}
.cf-item.is-center { filter: none; }

/* Reflection host */
.cf-item .reflect { position: relative; }

/* Photo wrapper: ONLY this scales + yaws */
.cf-item .reflect .photo {
  transform-origin: center bottom;
  transition: transform var(--transition);
  transform: rotateY(var(--yaw, 0deg)) scale(var(--item-scale, 1));
}
.cf-item .reflect .photo > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--thumb-radius);
  box-shadow: var(--shadow);
  background: #fff;
  position: relative;
  z-index: 2;
}

/* Turn off native WebKit reflection to avoid doubles */
.cf-item.webk-reflect img { -webkit-box-reflect: initial !important; }

/* ---------- Reflection (NO yaw; constant vertical) ---------- */
.ref-layer {
  position: absolute;
  top: calc(100% + var(--refl-gap));
  left: 0;
  width: 100%;
  height: var(--refl-height);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  transform-origin: top center;
  backface-visibility: hidden;

  transform:
    perspective(var(--refl-persp))
    rotateX(var(--refl-tilt))
    translateY(var(--refl-push));

  transition: opacity 220ms ease;
  will-change: opacity;
}
.ref-layer > .ref-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--thumb-radius);
  transform: scaleY(-1);
  opacity: var(--refl-opac);
  filter: blur(.35px);
  transition: opacity 220ms ease;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) var(--refl-fade));
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) var(--refl-fade));
}

/* ---------- Nav buttons (always on top) ---------- */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255,255,255,.95);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  z-index: 10000;
  pointer-events: auto;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.nav-btn:hover { box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.nav-btn:active { transform: translateY(-50%) scale(.96); }
.nav-prev { left: 12px; }
.nav-next { right: 12px; }
.nav-btn svg { width: 22px; height: 22px; }

/* ---------- Zoom overlay ---------- */
.zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.98);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}
.zoom-overlay.active { display: flex; }
.zoom-media {
  max-width: min(92vw, 1400px);
  max-height: 90vh;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  transition: transform var(--transition);
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) { :root { --side-gap: 140px; } }
@media (max-width: 768px) { :root { --side-gap: 120px; } }
@media (max-width: 576px) {
  :root {
    --side-gap: 110px;
    --scale-step: 0.13;
    --refl-height: clamp(56px, 12vh, 110px);
    --refl-push: 40px;  /* smaller push on phones */
    --refl-tilt: 26deg;
  }
  #coverflow { padding: 0 40px; }
  #coverflow .nav-prev { left: 8px; }
  #coverflow .nav-next { right: 8px; }
}

/* ---------- Section spacing ---------- */
#gallery { padding-bottom: clamp(100px, 12vw, 200px); }
section#gallery.section.novi-bg.novi-bg-img.section-md-2.bg-default {
  padding-bottom: 100px !important;
}

/* Trapezoid shape: tighter top, full width at bottom */
.ref-layer {
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
}

.ref-layer > .ref-img {
  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,1) var(--refl-fade)),
    rgba(0,0,0,0.6) 45%,
    rgba(0,0,0,0) 0%;
          mask-image: linear-gradient(to top,
    rgba(0,0,0,1) var(--refl-fade)),
    rgba(0,0,0,0.6) 45%,
    rgba(0,0,0,0) 0%;
}

/* Force a white fade over the reflection as a fallback/overlay */
.ref-layer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* top stays transparent, bottom goes to solid white */
  background: linear-gradient(to bottom,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,1) var(--refl-fade));
}

:root {
  --refl-gap: -10px;
  --refl-height: 38%;
  --refl-tilt: 24deg;
  --refl-persp: 600px;
}

/* Portrait (iPhone vertical) */
@media screen and (orientation: portrait) {
  :root {
    /* keep it touching */
    --refl-gap: -20px;

    /* portrait needs a shorter reflection to match your landscape look */
    --refl-height: clamp(50px, 8vh, 90px);

    /* slightly less tilt + deeper perspective prevents “stretchy” look */
    --refl-tilt: 22deg;
    --refl-persp: 700px;

    /* bring the reflection a bit closer so the seam matches landscape */
    --refl-push: 24px;

    /* end the fade sooner on tall screens */
    --refl-fade: 72%;
  }
}

/* Landscape (keep your current look) */
@media screen and (orientation: landscape) {
  :root {
    --refl-gap: -10px;              /* or -1px if you liked the tiny overlap */
    --refl-height: clamp(80px, 10vh, 110px);
    --refl-tilt: 24deg;
    --refl-persp: 600px;
    --refl-push: 14px;
    --refl-fade: 88%;
  }
}