/* ============================================================
   PHOTOS GALLERY — collage grid + lightbox
   Ported from the live site's photos-box.css / styles.css.
   Mechanism: js/photos.js chunks placeholder divs into blocks
   of 8; each block size (1–8) has a hand-designed collage
   pattern. Tile aspect ratios use the padding-top percentage
   trick — the tiles are empty background-image divs, so the
   padding IS the box.
   ============================================================ */
:root {
  --photos-grid-gap: 8px;
  --photos-anim-duration: 250ms;
}

.ph-box-1, .ph-box-2, .ph-box-3, .ph-box-4,
.ph-box-5, .ph-box-6, .ph-box-7, .ph-box-8 {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: 1fr;
  grid-gap: var(--photos-grid-gap);
  margin: 0 0 var(--photos-grid-gap);
}
.ph-box-1 > *, .ph-box-2 > *, .ph-box-3 > *, .ph-box-4 > *,
.ph-box-5 > *, .ph-box-6 > *, .ph-box-7 > *, .ph-box-8 > * {
  width: 100%;
  padding: 100% 0 0;
  position: relative;
}

/* mobile: single column of squares */
.ph-box-1 { grid-template-rows: 1fr; }
.ph-box-2 { grid-template-rows: 1fr 1fr; }
.ph-box-3 { grid-template-rows: 1fr 1fr 1fr; }
.ph-box-4 { grid-template-rows: repeat(4, 1fr); }
.ph-box-5 { grid-template-rows: repeat(5, 1fr); }
.ph-box-6 { grid-template-rows: repeat(6, 1fr); }
.ph-box-7 { grid-template-rows: repeat(7, 1fr); }
.ph-box-8 { grid-template-rows: repeat(8, 1fr); }

/* ≥576px: collage patterns, one per block size */
@media (min-width: 576px) {
  .ph-box-1 { grid-template-rows: 1fr; grid-template-columns: 1fr; }
  .ph-box-1 > *:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 2; padding-top: 50%; }

  .ph-box-2 { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
  .ph-box-2 > *:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 2; padding-top: 100%; }
  .ph-box-2 > *:nth-child(2) { grid-row: 1 / 2; grid-column: 2 / 3; padding-top: 100%; }

  .ph-box-3 { grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; }
  .ph-box-3 > *:nth-child(1) { grid-row: 1 / 3; grid-column: 1 / 2; padding-top: 100%; }
  .ph-box-3 > *:nth-child(2) { grid-row: 1 / 2; grid-column: 2 / 3; padding-top: 50%; }
  .ph-box-3 > *:nth-child(3) { grid-row: 2 / 3; grid-column: 2 / 3; padding-top: 50%; }

  .ph-box-4 { grid-template-rows: 1fr 1fr; grid-template-columns: 2fr 1fr 1fr; }
  .ph-box-4 > *:nth-child(1) { grid-row: 1 / 3; grid-column: 1 / 2; padding-top: 100%; }
  .ph-box-4 > *:nth-child(2) { grid-row: 1 / 2; grid-column: 2 / 3; padding-top: 100%; }
  .ph-box-4 > *:nth-child(3) { grid-row: 1 / 2; grid-column: 3 / 4; padding-top: 100%; }
  .ph-box-4 > *:nth-child(4) { grid-row: 2 / 3; grid-column: 2 / 4; padding-top: 50%; }

  .ph-box-5 { grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 2fr 1fr 1fr; }
  .ph-box-5 > *:nth-child(1) { grid-row: 1 / 3; grid-column: 1 / 2; padding-top: 100%; }
  .ph-box-5 > *:nth-child(2) { grid-row: 1 / 2; grid-column: 2 / 3; padding-top: 100%; }
  .ph-box-5 > *:nth-child(3) { grid-row: 1 / 2; grid-column: 3 / 4; padding-top: 100%; }
  .ph-box-5 > *:nth-child(4) { grid-row: 3 / 4; grid-column: 1 / 2; padding-top: 50%; }
  .ph-box-5 > *:nth-child(5) { grid-row: 2 / 4; grid-column: 2 / 4; padding-top: 100%; }

  .ph-box-6 { grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 2fr 1fr 1fr; }
  .ph-box-6 > *:nth-child(1) { grid-row: 1 / 3; grid-column: 1 / 2; padding-top: 100%; }
  .ph-box-6 > *:nth-child(2) { grid-row: 1 / 2; grid-column: 2 / 4; padding-top: 50%; }
  .ph-box-6 > *:nth-child(3) { grid-row: 2 / 3; grid-column: 2 / 3; padding-top: 100%; }
  .ph-box-6 > *:nth-child(4) { grid-row: 2 / 3; grid-column: 3 / 4; padding-top: 100%; }
  .ph-box-6 > *:nth-child(5) { grid-row: 3 / 4; grid-column: 1 / 2; padding-top: 50%; }
  .ph-box-6 > *:nth-child(6) { grid-row: 3 / 4; grid-column: 2 / 4; padding-top: 50%; }

  .ph-box-7 { grid-template-rows: repeat(4, 1fr); grid-template-columns: 2fr 1fr 1fr; }
  .ph-box-7 > *:nth-child(1) { grid-row: 1 / 3; grid-column: 1 / 2; padding-top: 100%; }
  .ph-box-7 > *:nth-child(2) { grid-row: 1 / 2; grid-column: 2 / 4; padding-top: 50%; }
  .ph-box-7 > *:nth-child(3) { grid-row: 2 / 3; grid-column: 2 / 3; padding-top: 100%; }
  .ph-box-7 > *:nth-child(4) { grid-row: 2 / 3; grid-column: 3 / 4; padding-top: 100%; }
  .ph-box-7 > *:nth-child(5) { grid-row: 3 / 4; grid-column: 1 / 2; padding-top: 50%; }
  .ph-box-7 > *:nth-child(6) { grid-row: 4 / 5; grid-column: 1 / 2; padding-top: 50%; }
  .ph-box-7 > *:nth-child(7) { grid-row: 3 / 5; grid-column: 2 / 4; padding-top: 100%; }

  .ph-box-8 { grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr); }
  .ph-box-8 > *:nth-child(1) { grid-row: 1 / 3; grid-column: 1 / 3; padding-top: 100%; }
  .ph-box-8 > *:nth-child(2) { grid-row: 1 / 2; grid-column: 3 / 5; padding-top: 50%; }
  .ph-box-8 > *:nth-child(3) { grid-row: 2 / 3; grid-column: 3 / 4; padding-top: 100%; }
  .ph-box-8 > *:nth-child(4) { grid-row: 2 / 3; grid-column: 4 / 5; padding-top: 100%; }
  .ph-box-8 > *:nth-child(5) { grid-row: 3 / 4; grid-column: 1 / 3; padding-top: 50%; }
  .ph-box-8 > *:nth-child(6) { grid-row: 4 / 5; grid-column: 1 / 2; padding-top: 100%; }
  .ph-box-8 > *:nth-child(7) { grid-row: 4 / 5; grid-column: 2 / 3; padding-top: 100%; }
  .ph-box-8 > *:nth-child(8) { grid-row: 3 / 5; grid-column: 3 / 5; padding-top: 100%; }

  .ph-box-1 > *, .ph-box-2 > *, .ph-box-3 > *, .ph-box-4 > *,
  .ph-box-5 > *, .ph-box-6 > *, .ph-box-7 > *, .ph-box-8 > * { cursor: pointer; }
}

/* tile entrance once its image has loaded */
.ph-scale-in {
  transform-origin: center;
  animation: phScaleIn var(--photos-anim-duration) ease-out forwards;
}
@keyframes phScaleIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* optional caption (only rendered when data-title/description set) */
.ph-tile-caption {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: auto;
  padding: 8px;
  background: linear-gradient(to top, var(--jg-dark), rgba(var(--jg-dark-rgb), 0.8), transparent);
}
.ph-tile-title, .ph-tile-desc { color: var(--jg-light); padding: 0; margin: 4px 0; }
.ph-tile-title { font-weight: 700; }
.ph-tile-desc { font-size: 13px; }

/* ---------- fullscreen lightbox ---------- */
#phLightbox {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(var(--jg-dark-rgb), 0.88);
  z-index: 50;
}
#phLightboxImg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: auto; height: auto;
}
#phLightboxClose {
  position: absolute;
  top: 12px; right: 12px;
  background: transparent;
  color: #fff;
  font-size: 48px;
  line-height: 1;
  margin: 0; padding: 0;
  border: 0; outline: 0;
  cursor: pointer;
}
.ph-chev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  background: transparent;
  border: 0;
  color: var(--jg-light);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.ph-chev:hover { filter: brightness(0.8); }
.ph-chev--left { left: 5vw; }
.ph-chev--right { right: 5vw; }