/* Page 02 · /rezultati — introduction, 12-photo results gallery, note, lightbox.
   Loaded only on the Rezultati page; tokens, navbar and footer come from home.css. */

.rg-page { background: var(--surface-page); padding: var(--section-y-desktop) 0; }
.rg-intro { max-width: 820px; margin: 0 auto; text-align: center; }
.rg-intro .ds-lead { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* Gallery: 4 × 3 on desktop, square frames, 24px gaps, 16px corners */
.rg-grid {
  list-style: none; margin: var(--space-64) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.rg-grid > sc-if { display: contents; }
.rg-item { min-width: 0; }
.rg-photo {
  display: block; width: 100%; aspect-ratio: 1 / 1; margin: 0; padding: 0; border: 0;
  border-radius: 16px; overflow: hidden; background: var(--sage);
}
/* Real photos are shown whole (before/after stacks are never cropped) */
.rg-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
button.rg-photo { cursor: zoom-in; }
button.rg-photo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.rg-photo--empty {
  display: grid; place-items: center; border: 1px dashed var(--control-border);
  font-size: var(--fs-support); line-height: 1.4; color: var(--text-body);
}

.rg-note {
  max-width: 62ch; margin: var(--space-48) auto 0; text-align: center;
  font-size: var(--fs-support); line-height: var(--lh-body); color: var(--text-body);
}

/* Lightbox (opens once real photographs are added) */
.rg-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--space-24); background: rgba(36, 40, 36, 0.82); }
.rg-lightbox__dialog { position: relative; display: grid; justify-items: center; gap: var(--space-12); max-width: min(1100px, 100%); }
.rg-lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 16px; background: var(--white); }
.rg-lightbox__count { margin: 0; font-size: var(--fs-support); color: var(--white); font-variant-numeric: tabular-nums; }
.rg-lightbox__btn { position: absolute; background: var(--white); border-color: transparent; color: var(--charcoal); }
.rg-lightbox__btn:disabled { opacity: 0.35; cursor: default; }
.rg-lightbox__close { top: -56px; right: 0; }
.rg-lightbox__prev { left: -64px; top: 50%; transform: translateY(-50%); }
.rg-lightbox__next { right: -64px; top: 50%; transform: translateY(-50%); }

/* Tablet 768–1199: 2 per row */
@media (max-width: 1199px) {
  .rg-page { padding: var(--section-y-tablet) 0; }
  .rg-grid { margin-top: var(--space-48); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .rg-note { margin-top: var(--space-40); }
  .rg-lightbox__prev { left: var(--space-8); }
  .rg-lightbox__next { right: var(--space-8); }
}

/* Mobile <768: 1 per row, full content width, real photos keep their own proportions */
@media (max-width: 767px) {
  .rg-page { padding: var(--section-y-mobile) 0; }
  .rg-grid { margin-top: var(--space-40); grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  button.rg-photo { aspect-ratio: auto; height: auto; cursor: pointer; }
  button.rg-photo img { height: auto; }
  .rg-note { margin-top: var(--space-32); }
  .rg-lightbox { padding: var(--space-12); }
  .rg-lightbox__img { max-height: calc(100vh - 160px); }
  .rg-lightbox__close { top: -52px; }
  .rg-lightbox__prev, .rg-lightbox__next { top: auto; bottom: -56px; transform: none; }
  .rg-lightbox__prev { left: 0; }
  .rg-lightbox__next { right: 0; }
}