/* Private client gallery. Loads after styles.css and only on gallery pages.
   House rule: zero em dashes and zero en dashes in this file, comments included. */

/* justified rows: every photo keeps its own shape, rows share one height,
   and the order reads left to right the way the night happened */
.ph-grid {
  --row: 260px;
  --gap: clamp(10px, 1.4vw, 18px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
}
.ph {
  flex-grow: calc(var(--ar) * 100);
  flex-basis: calc(var(--ar) * var(--row));
  /* a photo left alone in a row may grow, but never balloon; it sits centered instead */
  max-width: calc(var(--ar) * var(--row) * 1.8);
  min-width: 0;
  display: block; padding: 5px;
  background: var(--ink-0);
  border: 1px solid rgba(212,175,55,.24); border-radius: var(--r);
  transition: border-color .4s ease;
}
.ph img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: var(--ar); object-fit: cover;
  filter: saturate(.92); transition: filter .5s ease;
}
.ph:hover, .ph:focus-visible { border-color: var(--rule-strong); }
.ph:hover img, .ph:focus-visible img { filter: saturate(1); }
.ph:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ph-grid::after { content: ""; flex-grow: 1000000; }
.ph-credit { margin-top: var(--s5); }

/* coming soon blocks, shown until the edited photographs land */
.ph-soon {
  aspect-ratio: var(--ar);
  display: grid; place-items: center;
  background: var(--ink-2);
  border-style: dashed; border-color: rgba(212,175,55,.34);
}
.ph-soon .meta { color: var(--gold-deep); letter-spacing: .24em; text-align: center; }

/* viewer */
.lb {
  border: 0; padding: 0; margin: 0; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  background: rgba(10,10,11,.97); color: var(--text);
}
.lb::backdrop { background: rgba(10,10,11,.9); }
.lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lb-fig { margin: 0; position: relative; min-width: 0; min-height: 0; }
.lb-fig img {
  position: absolute; inset: 12px;
  width: calc(100% - 24px); height: calc(100% - 24px);
  max-width: none; max-height: none; object-fit: contain;
}
.lb-cap { display: none; }
.lb-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border-top: 1px solid var(--rule-faint);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.lb-count { font-size: var(--fs-meta); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); min-width: 7ch; text-align: center; }
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 16px;
  font-family: var(--font); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r);
  cursor: pointer; text-decoration: none;
}
.lb-btn:hover { color: var(--gold-light); border-color: var(--gold); background: var(--gold-wash); }
.lb-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lb-arrow { font-size: 20px; line-height: 1; }

@media (max-width: 900px) { .ph-grid { --row: 200px; } }
@media (max-width: 680px) { .ph-grid { --row: 170px; } .lb-bar { gap: 6px; } .lb-btn { padding: 0 12px; } }
@media (max-width: 430px) {
  .lb-bar {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 7px; padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .lb-bar [data-lb-prev] { grid-column: 1; grid-row: 1; }
  .lb-count { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
  .lb-bar [data-lb-next] { grid-column: 4; grid-row: 1; }
  .lb-bar #lbDown { grid-column: 1 / 3; grid-row: 2; }
  .lb-bar [data-lb-share] { grid-column: 3; grid-row: 2; }
  .lb-bar [data-lb-close] { grid-column: 4; grid-row: 2; }
  .lb-bar [data-lb-play] { display: none; }
  .lb-btn { min-width: 0; padding: 0 7px; font-size: 11px; letter-spacing: .08em; }
}