/* Galerija na stranici Stanovi; ne mijenja postojeću galeriju na Početnoj. */
.render-gallery {
  --render-width: clamp(300px, 36vw, 540px);
  --render-gap: clamp(12px, 1.4vw, 22px);
  padding-block: clamp(3rem, 5vw, 4rem);
  color: var(--paper);
  background: var(--forest);
}

.render-gallery__header {
  display: flex;
  margin-bottom: 2rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.render-gallery__header h2 { max-width: 22ch; color: var(--paper); }
.render-gallery__header .eyebrow { color: #e7cfad; }
.render-gallery__intro { margin-bottom: 0; color: #d2dbd5; }
.render-gallery__controls { display: flex; flex: 0 0 auto; gap: 0.5rem; }
.render-gallery__control {
  display: inline-flex;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--paper);
  background: transparent;
  line-height: 1;
  transition: color 180ms ease, background-color 180ms ease;
}
.render-gallery__control svg { display: block; width: 20px; height: 20px; }
.render-gallery__control:hover { color: var(--forest); background: var(--paper); }
.render-gallery__control--pause { min-width: 112px; padding-inline: 1.1rem; border-radius: 24px; font-size: 0.8rem; }

.render-gallery__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  /* Ručno pomicanje i automatska petlja koriste isti vodoravni prikaz. */
  scroll-behavior: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.render-gallery__viewport::-webkit-scrollbar { display: none; }
.render-gallery__viewport:focus-visible { outline-offset: -4px; }
.render-gallery__track { display: flex; width: max-content; }
.render-gallery__group {
  display: flex;
  padding-right: var(--render-gap);
  flex: 0 0 auto;
  gap: var(--render-gap);
}
.render-gallery__slide {
  display: block;
  position: relative;
  width: var(--render-width);
  height: clamp(220px, 26vw, 340px);
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: var(--radius-large);
  background: var(--sage);
  cursor: zoom-in;
}
.render-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.render-gallery__slide:focus-visible { outline-offset: -5px; }

/* Veliki prikaz uvijek prikazuje cijeli render, bez rezanja kadra. */
body.render-lightbox-open { overflow: hidden; }
.render-lightbox {
  width: min(1440px, 94vw);
  max-width: none;
  max-height: 94svh;
  margin: auto;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  color: var(--paper);
  background: #08140e;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
}
.render-lightbox::backdrop { background: rgba(8, 20, 14, 0.88); }
.render-lightbox__header { display: flex; margin-bottom: 0.75rem; align-items: center; justify-content: space-between; gap: 1rem; }
.render-lightbox__header h2 { margin: 0; color: var(--paper); font-size: clamp(1.1rem, 2vw, 1.5rem); }
.render-lightbox__image { width: 100%; height: min(72svh, 900px); object-fit: contain; }
.render-lightbox__footer { display: flex; margin-top: 0.75rem; align-items: center; justify-content: center; gap: 1.5rem; }
.render-lightbox__footer p { min-width: 3rem; margin: 0; color: var(--paper); font-size: 0.85rem; text-align: center; }
.render-lightbox .render-gallery__control { border-color: rgba(255, 255, 255, 0.4); color: var(--paper); }
.render-lightbox .render-gallery__control:hover { color: var(--forest); background: var(--paper); }

@media (max-width: 768px) {
  .render-gallery { --render-width: 82vw; }
  .render-gallery__header { align-items: flex-start; flex-direction: column; }
  .render-gallery__slide { height: clamp(180px, 54vw, 280px); }
  .render-lightbox { padding: 0.75rem; }
  .render-lightbox__image { height: 65svh; }
}

@media (prefers-reduced-motion: reduce) {
  .render-gallery__control { transition: none; }
}