/* ============================================================================
   Under the Greek Sun — φωτογραφία σε πλήρη οθόνη
   TSK Digital Studio, 2 Σεπτεμβρίου 2026
   ========================================================================== */

/* Ο δείκτης μεγέθυνσης και το σημάδι στη γωνία: ο επισκέπτης πρέπει να
   ΒΛΕΠΕΙ ότι υπάρχει κάτι να πατήσει, όχι να το μαντεύει. */
.gal.ugs-zoomable { position: relative; }
.gal.ugs-zoomable img.main { cursor: zoom-in; }

.ugs-zoom-hint {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 50, 63, .62); color: #F6F7F0;
  border: 1px solid rgba(246, 247, 240, .28); border-radius: 8px;
  cursor: zoom-in; backdrop-filter: blur(3px);
  transition: background .16s ease, transform .16s ease;
}
.ugs-zoom-hint svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ugs-zoom-hint:hover { background: rgba(22, 50, 63, .86); transform: scale(1.06); }
.ugs-zoom-hint:focus-visible,
.gal.ugs-zoomable img.main:focus-visible { outline: 2px solid #C88A3D; outline-offset: 3px; }

/* Όσο είναι ανοιχτή η πλήρης οθόνη, η σελίδα από κάτω δεν κυλάει. */
html.ugs-lb-on, html.ugs-lb-on body { overflow: hidden; }

.ugs-lb {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9, 22, 28, .94);
  animation: ugs-lb-in .18s ease-out;
}
.ugs-lb[hidden] { display: none !important; }
@keyframes ugs-lb-in { from { opacity: 0 } to { opacity: 1 } }

.ugs-lb-stage {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 56px 68px;
}
.ugs-lb-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 3px; box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}

/* Τα χειριστήρια δανείζονται το χρυσό της μάρκας μόνο στο hover — σε μαύρο
   φόντο, μια φωτογραφία σπιτιού δεν πρέπει να ανταγωνίζεται τίποτα. */
.ugs-lb-x, .ugs-lb-nav {
  position: absolute; padding: 0; cursor: pointer;
  background: rgba(246, 247, 240, .10); color: #F6F7F0;
  border: 1px solid rgba(246, 247, 240, .22); border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif; line-height: 1;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.ugs-lb-x:hover, .ugs-lb-nav:hover { background: rgba(200, 138, 61, .92); border-color: #C88A3D; color: #16323F; }
.ugs-lb-x:focus-visible, .ugs-lb-nav:focus-visible { outline: 2px solid #C88A3D; outline-offset: 3px; }

.ugs-lb-x { top: 16px; right: 18px; width: 42px; height: 42px; font-size: 27px; }
.ugs-lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; }
.ugs-lb-prev { left: 18px; }
.ugs-lb-next { right: 18px; }

.ugs-lb-count {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(246, 247, 240, .82);
  font: 500 12.5px/1 "Source Sans 3", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .06em;
  background: rgba(9, 22, 28, .6); padding: 7px 14px; border-radius: 20px;
  font-variant-numeric: tabular-nums;
}

/* Στο κινητό τα βελάκια κατεβαίνουν χαμηλά: στη μέση της οθόνης θα ήταν
   πάνω στη φωτογραφία, και το σύρσιμο δουλεύει έτσι κι αλλιώς. */
@media (max-width: 640px) {
  .ugs-lb-stage { padding: 52px 12px 92px; }
  .ugs-lb-nav { top: auto; bottom: 18px; transform: none; width: 44px; height: 44px; }
  .ugs-lb-prev { left: 22px; }
  .ugs-lb-next { right: 22px; }
  .ugs-lb-count { bottom: 30px; }
  .ugs-zoom-hint { width: 34px; height: 34px; top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ugs-lb { animation: none; }
  .ugs-zoom-hint, .ugs-lb-x, .ugs-lb-nav { transition: none; }
  .ugs-zoom-hint:hover { transform: none; }
}