/* Both kids' galleries (ADR-0037, ADR-0054). Only what an admin published is
   ever listed, and only what this visitor's circle may see. */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-2) var(--space-4); }
.tags[hidden] { display: none; }
.tag {
  min-height: var(--tap); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  font: 700 var(--step-0) var(--font-ui); cursor: pointer; touch-action: manipulation;
}
.tag[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.photos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .photos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .photos { grid-template-columns: repeat(4, 1fr); } }
.photos button {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow); cursor: zoom-in; touch-action: manipulation;
}
.photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.empty { font-size: var(--step-1); }

/* Tapping a photo opens it as big as the screen allows. */
dialog {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0;
  border: 0; background: rgb(0 0 0 / .92);
}
dialog[open] { display: grid; grid-template-rows: auto 1fr; }
dialog::backdrop { background: rgb(0 0 0 / .6); }
dialog .close {
  justify-self: end; margin: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) 0 0;
}
dialog img {
  width: 100%; height: 100%; min-height: 0; object-fit: contain;
  padding: var(--space-3) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
}

/* A photo that is not for everyone says who it is for, in a corner. */
.photos li { position: relative; }
.aud {
  position: absolute; left: var(--space-2); bottom: var(--space-2); pointer-events: none;
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  font: 700 var(--step--1) var(--font-ui);
}
.who { color: var(--ink-soft); margin: 0 0 var(--space-3); }
.who:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.who .btn { flex: 0 0 auto; }          /* a real button, 48px tall, not a word to aim at */

/* A long title (Armenian "Իմ պատկերասրահը") drops under the Back button
   rather than breaking in the middle of a word. */
.room-top { flex-wrap: wrap; }
.room-top h1 { flex: 1 0 auto; max-width: 100%; }