/* ===========================
   Photos.css – Grid + Lightbox
   =========================== */

/* Theme tokens (tweak freely) */
:root {
  --container-max: 1200px;
  --gap: 1rem;
  --radius: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 10px 25px rgba(0,0,0,0.25);
  --overlay-bg: rgba(0,0,0,0.78);
  --text-muted: #666;
  --text-invert: #fff;
  --btn-bg: rgba(255,255,255,0.15);
  --btn-bg-hover: rgba(255,255,255,0.25);
  --focus: 0 0 0 3px rgba(59,130,246,0.6);

  /* Hover lift */
  --hover-scale: 1.015;
  --hover-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

/* Basic container (optional, matches your HTML) */
.container {
  margin: 0 auto;
  padding: var(--gap);
}

/* --------------- Grid --------------- */

/* A 3+ column masonry made of real columns (JS creates .photo-col cols) */
.photo-grid {
  display: flex;                 /* real columns next to each other */
  gap: 1vh;
  padding: 12px;
  box-sizing: border-box;
}
.photo-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1vh;                      /* vertical gap between items in a column */
}

/* Individual item (tile) */
.photo-item {
  display: block;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;               /* looks clickable */
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  will-change: transform;
  position: relative;            /* allows safe z-index on hover */
}
.photo-item img {
  display: block;
  width: 100%;
  height: auto;                  /* natural aspect */
  vertical-align: middle;
}

/* Hover lift + subtle pop (also for keyboard focus on elements inside) */
.photo-item:hover,
.photo-item:focus-within {
  transform: scale(var(--hover-scale));
  box-shadow: var(--hover-shadow);
  z-index: 2;                    /* sits above neighbors while lifted */
}
.photo-item:hover img,
.photo-item:focus-within img {
  filter: saturate(1.02) contrast(1.02);
}

/* --------------- Lightbox / Preview --------------- */

.hidden { display: none !important; }

.photo-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.photo-preview-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(2px);
}
.photo-preview-content {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 80px 1fr 80px; /* space for nav buttons left/right */
  grid-template-rows: 1fr auto;         /* image + caption */
  align-items: center;
  justify-items: center;
  padding: 24px;
  gap: 0;
}

/* Top-right actions (Info + Close) */
.preview-top-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
/* Shared button look */
.preview-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--text-invert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
  line-height: 1;
}
.preview-btn:active        { transform: scale(0.98); }
.preview-btn:focus-visible { outline: none; box-shadow: var(--focus); }

/* Info icon uses the PNG sprite, no text */
.preview-info-btn {
  font-size: 0;         /* hide any text */
  color: transparent;
  background-image: url('/images/info-light.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px; /* tweak if needed */
}
/* Close button shows × but stays perfectly centered */
.preview-close {
  position: relative;           /* for ::before */
  font-size: 0;                 /* hide the real text node */
}

/* Draw the glyph via pseudo to avoid baseline issues */
.preview-close::before {
  content: "\00d7";             /* × */
  display: block;
  font-size: 22px;              /* match your visual size */
  font-weight: 700;
  line-height: 1;
  /* center inside the flex button perfectly */
  position: absolute;
  inset: 0;                     /* fill the button */
  display: grid;
  place-items: center;          /* centers both axes */
  transform: translateY(-1.5px);/* tiny optical nudge upward (tweak 0–1px) */
}

/* The big image */
.preview-image {
  max-width: min(92vw, var(--container-max));
  max-height: 90vh;
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: #111; /* prevents flash on slow loads */
}

/* Caption row */
.preview-caption {
  grid-column: 2 / 3;
  margin-top: 12px;
  color: var(--text-invert);
  text-align: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
}
.preview-title   { font-size: 1rem; font-weight: 500; }
.preview-counter { font-size: 0.9rem; opacity: 0.85; }

/* Prev/Next nav buttons */
.preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--text-invert);
  cursor: pointer;
  font-size: 28px;
  line-height: 56px;
  text-align: center;
  user-select: none;
  transition: background 160ms ease, transform 160ms ease;
}
.preview-nav:hover         { background: var(--btn-bg-hover); }
.preview-nav:focus-visible { outline: none; box-shadow: var(--focus); }
.preview-nav:active        { transform: scale(0.98); }
.preview-nav.prev { left: 24px; }
.preview-nav.next { right: 24px; }

/* Small screens: give more room to image & tighten actions */
@media (max-width: 640px) {
  .photo-preview-content {
    grid-template-columns: 48px 1fr 48px;
    padding: 16px;
  }
  .preview-nav { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
  .preview-top-actions { top: 12px; right: 12px; gap: 6px; }
  .preview-btn { width: 34px; height: 34px; }
  .preview-close { font-size: 20px; }
  .preview-info-btn { background-size: 18px 18px; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .photo-item {
    transition: box-shadow 1ms linear;  /* keep shadow change, skip scaling */
  }
  .photo-item:hover,
  .photo-item:focus-within {
    transform: none;
  }

  .preview-btn,
  .preview-nav {
    transition: none !important;
  }
}

/* --------------- Info card --------------- */

/* Make sure hidden state always wins */
.preview-info-card[hidden] { display: none !important; }

/* Info card panel */
.preview-info-card {
  position: absolute;
  top: 60px;                 /* below the buttons */
  right: 16px;
  min-width: 140px;
  max-width: 240px;
  max-height: 40vh;
  padding: 8px;
  border-radius: 10px;
  background: rgba(17,17,17,0.92);
  color: var(--text-invert);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: auto;
  z-index: 2;
}
/* Rows inside the info card */
.preview-info-card .info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 4px;
  align-items: baseline;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.preview-info-card .info-row:last-child { border-bottom: none; }
.preview-info-card .k { color: #cfd8dc; opacity: 0.85; font-size: 0.9rem; }
.preview-info-card .v { color: #ffffff; font-weight: 500; font-size: 0.85rem; text-align: right; }

@media (max-width: 640px) {
  .preview-info-card {
    top: 56px;
    right: 12px;
    min-width: 200px;
    max-width: 65vw;
    max-height: 45vh;
  }
}

/* --------------- Album header --------------- */

.album-header {
  padding: 12px 16px 0;
  text-align: center;                /* center everything */
}
.album-header h1 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 4.2vw, 3.6rem); /* bigger title */
  line-height: 1.2;
  font-weight: 700;
  text-decoration: underline;        /* underline the title */
  text-underline-offset: 6px;        /* nicer spacing from text */
  color: whitesmoke;
}
#album-description {
  color: whitesmoke;
  font-size: clamp(1rem, 1.3vw, 1.15rem);  /* bigger body text */
  line-height: 1.7;
  margin-bottom: 14px;
  max-width: 70ch;                   /* keep lines readable */
  margin-left: auto;                 /* center the block */
  margin-right: auto;
}

/* --------------- Utilities --------------- */

/* Make focus rings visible if users tab to buttons */
button { background: none; border: none; }
button:focus-visible { outline: none; box-shadow: var(--focus); }

/* Optional scrollbar styling (WebKit/Blink) */
.photo-preview-content::-webkit-scrollbar,
.photo-grid::-webkit-scrollbar { width: 10px; height: 10px; }
.photo-preview-content::-webkit-scrollbar-thumb,
.photo-grid::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 8px;
}

/* If you prefer NATURAL aspect ratios for thumbs:
   Comment out 'aspect-ratio' above and add this to prevent layout shift */
.photo-item img[data-natural="true"] {
  aspect-ratio: auto;
  object-fit: contain;
}

/* Optional: loading placeholder blur for lazy images */
.photo-item img[loading="lazy"] {
  filter: saturate(0.9) contrast(0.98);
}