/* ADdes gallery: only what site.css does not already give (.gallery-grid, .tile, .dropzone, .lightbox, .lb-btn,
   .chip, .btn, .note). Calm as everywhere: nothing here moves by itself except the empty frames' glow, which
   only breathes (opacity at the shared 6.5 a minute, never position); every fade is 0.45 s or slower. */

/* ---------- filters ---------- */
.g-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; margin: 0 0 clamp(22px, 3vw, 34px); }
.g-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.g-label { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.g-group .controls { margin-top: 0; gap: 8px; }
.g-clear { color: var(--text); }

/* ---------- the grid ---------- */
.js .g-pictures .wrap { min-height: 21rem; }      /* reserve the empty state's room so nothing jumps when the list arrives */
.g-grid { list-style: none; margin: 0; padding: 0; }
/* a wall of four or more is columns; one, two or three pictures are laid out as a row so the wall never looks half built */
.g-grid[data-n="1"] { columns: 1; max-width: min(100%, 760px); margin-inline: auto; }
.g-grid[data-n="2"], .g-grid[data-n="3"] { columns: auto; display: grid; gap: 16px; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-grid[data-n="2"] { max-width: 960px; margin-inline: auto; }
.g-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-grid[data-n="2"] .gitem, .g-grid[data-n="3"] .gitem { margin: 0; }
/* three across needs the room; narrower, two columns that pack (a tall picture beside two short ones), then one */
@media (max-width: 900px) {
  .g-grid[data-n="3"] { display: block; columns: 2 220px; column-gap: 16px; }
  .g-grid[data-n="3"] .gitem { margin: 0 0 16px; }
}
@media (max-width: 600px) {
  .g-grid[data-n="2"] { grid-template-columns: minmax(0, 1fr); }
  .g-grid[data-n="3"] { columns: 1; }
}
.gitem { position: relative; break-inside: avoid; margin: 0 0 16px; }
.gitem .tile { margin: 0; }
/* a picture arrives by fading in once it has decoded, so a tile is never a half-painted stripe */
.g-grid .tile img { opacity: 0; background: #0d0f12; }
.g-grid .tile img.loaded { opacity: 1; }
.g-mine .tile img { transition-duration: 0.5s; }
/* the pictures added here are a small tray under the drop zone, not a wall: tiles stay tile-sized however few there are */
.g-mine { columns: 3 190px; }
.g-mine[data-n] { columns: auto; display: grid; max-width: none; margin: 0; gap: 16px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 280px)); justify-content: start; }
.g-mine[data-n] .gitem { margin: 0; }
.tile .badge { z-index: 1; }
/* site.css rounds every focus ring to 6px; these keep their own shape when the ring is drawn */
.g-grid .tile:focus-visible { border-radius: 14px; }
.chip:focus-visible, .btn:focus-visible, .g-remove:focus-visible { border-radius: 999px; }
.lb-btn:focus-visible { border-radius: 50%; }
.tile.broken { min-height: 120px; }
.tile.broken::after { content: "This picture could not be loaded"; position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; color: var(--faint); font-size: 0.85rem; }
/* no hover on a touch screen, so the title stays under the picture */
@media (hover: none) { .g-grid .tile .cap { opacity: 1; } }

.g-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px 0; }
.g-bar .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.9rem; }
.g-remove {
  flex: none; cursor: pointer; padding: 8px 14px; border-radius: 999px;
  font: 400 0.72rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  background: transparent; border: 1px solid var(--line-strong);
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease), background 0.5s var(--ease);
}
.g-remove:hover { border-color: var(--pink); color: #fff; background: rgba(241, 169, 214, 0.12); }

.g-nomatch { text-align: center; padding: 2rem 0; }

/* ---------- the empty state: a hallway of frames, waiting ---------- */
.g-empty {
  display: grid; justify-items: center; text-align: center; gap: 0.6rem;
  padding: clamp(36px, 6vw, 76px) clamp(18px, 4vw, 48px);
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px);
  background: radial-gradient(ellipse at 50% 38%, rgba(185, 168, 244, 0.07), rgba(185, 168, 244, 0) 62%), rgba(255, 255, 255, 0.02);
}
.g-frames { width: min(300px, 78%); height: auto; margin-bottom: 0.6rem; opacity: calc(0.84 + 0.16 * var(--breath)); filter: drop-shadow(0 0 14px rgba(185, 168, 244, 0.3)); }
.g-frames rect { fill: none; stroke: url(#g-frames-glow); stroke-width: 1.3; }
.g-empty-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; color: #f2f5f7; }
.g-empty .muted { max-width: 46ch; margin: 0 0 0.6rem; }
.g-empty .btn-row { justify-content: center; }

/* ---------- add yours ---------- */
.g-drop { margin-top: 2.2rem; }
.g-drop .btn { margin-top: 4px; }
.g-msg { min-height: 1.7em; margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 0.95rem; }
.g-mine-wrap { margin-top: 1.4rem; }
.g-sub { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; font-family: var(--sans); font-weight: 400; color: var(--faint); margin: 0 0 1rem; }

/* ---------- share yours ---------- */
.g-steps { list-style: none; counter-reset: step; margin: 0 auto; padding: 0; max-width: 820px; display: grid; gap: clamp(22px, 3.4vw, 36px); }
.g-steps > li { counter-increment: step; position: relative; padding-left: 66px; min-width: 0; }
.g-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(127, 230, 210, 0.05);
  font-family: var(--serif); font-size: 1.45rem; color: var(--teal);
}
.g-steps h3 { font-size: clamp(1.3rem, 1.6vw + 0.7rem, 1.6rem); margin: 0.2em 0 0.35em; }
.g-steps p { color: #c3ccd4; }
.g-code { margin: 0.9rem 0 1.1rem; min-width: 0; }
.g-code pre {
  margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-sunk);
  overflow-x: auto; color: #d7dde3; font: 0.88rem/1.65 ui-monospace, "Cascadia Code", Consolas, monospace; tab-size: 2;
}
.g-code pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.g-cmd pre { white-space: pre-wrap; overflow-wrap: anywhere; }      /* a command is read whole, even on a phone */
.g-cmd .nb { white-space: nowrap; }                                  /* ...and wraps between its words, never inside one */
.g-copy { margin-top: 12px; padding: 10px 20px; font-size: 0.76rem; }
@media (max-width: 520px) { .g-steps > li { padding-left: 0; padding-top: 56px; } }

/* ---------- the lightbox ---------- */
/* one definite column and row, so the picture is sized by the screen and never by its own pixels */
.lightbox {
  padding: 68px clamp(12px, 8vw, 96px) 22px; touch-action: none;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  --lb-maxh: max(180px, min(68vh, calc(100vh - 300px)));
}
.lightbox .lb-fig {
  /* the picture is added by gallery.js as the first child; the crossfade is a fade of the whole figure */
  width: min(100%, 1500px); max-width: none; max-height: 100%; overflow-y: auto; overflow-x: hidden;
  touch-action: pan-y; transition: opacity 0.45s var(--ease);
}
/* the box is fixed by the picture's own proportions (--ar, --w from gallery.js), so the swap from the thumbnail
   to the original does not change its size by a single pixel */
.lightbox .lb-fig img {
  width: min(100%, calc(var(--lb-maxh) * var(--ar, 1.5)), var(--w, 100%)); height: auto; aspect-ratio: var(--ar, 1.5);
  max-width: none; max-height: none; object-fit: contain; background: #0d0f12;
}
.lb-fig.swapping { opacity: 0; }
.lightbox figcaption { display: grid; gap: 8px; justify-items: center; padding: 4px 4px 8px; max-width: 70ch; }
.lightbox figcaption b { margin: 0; line-height: 1.15; }
.lb-caption { color: #c3ccd4; font-size: 0.96rem; line-height: 1.6; }
.lb-caption:empty { display: none; }
.lb-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.lb-meta:empty { display: none; }
.lb-meta li { padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.82rem; color: var(--text); }
.lb-meta .k { margin-right: 0.55em; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.lb-note { padding: 4px 12px; border-radius: 999px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(243, 200, 131, 0.4); }
.lb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.lb-actions .btn { padding: 11px 20px; font-size: 0.76rem; }
.lightbox .lb-prev, .lightbox .lb-next { margin-top: -24px; display: grid; place-items: center; padding: 0; }
.lightbox .lb-close { display: grid; place-items: center; padding: 0; }
@media (max-width: 600px) {
  .lightbox { padding: 64px 12px 84px; }
  .lightbox { --lb-maxh: max(160px, min(68vh, calc(100vh - 330px))); }
  .lightbox .lb-prev, .lightbox .lb-next { margin-top: 0; }
}

/* held still (Space, the button, or reduced motion): every fade is all but instant, nothing eases */
html.is-still .g-grid .tile img, html.is-still .lightbox .lb-fig, html.is-still .g-remove { transition-duration: 0.01s; }
html.is-still .lightbox.open { animation-duration: 0.01s; }
@media (prefers-reduced-motion: reduce) {
  .g-grid .tile img, .lightbox .lb-fig, .g-remove { transition-duration: 0.01s; }
  .lightbox.open { animation-duration: 0.01s; }
}