/* ============================================================
   Public photo gallery — on top of fotos/app.css (same hero,
   palette, cards and big buttons), only what the gallery adds.
   ============================================================ */

/* the gallery itself wants room on a desktop; the gate and the
   "closed" note keep the narrow column of the upload page */
.wrap.g-wide { max-width:1120px; }

/* code gate */
.gate { display:flex; flex-direction:column; gap:.7rem; margin-top:1.1rem; }
.gate-input { width:100%; font:inherit; font-size:1.3rem; letter-spacing:.12em; text-align:center; padding:.75rem .9rem;
  border:1.5px solid var(--sand); border-radius:14px; background:#fff; color:var(--ink); }
.gate-input:focus { outline:2px solid var(--marigold); border-color:var(--marigold); }
.gate-msg { margin:0; min-height:1.2em; font-size:.88rem; color:var(--crit); }
.shake { animation:shake .38s; }
@keyframes shake { 20%,60% { transform:translateX(-7px); } 40%,80% { transform:translateX(7px); } }

/* header + controls */
.g-head { text-align:center; margin:.4rem 0 1rem; }
.g-title { font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,6vw,2.6rem); color:var(--plum); margin:0; line-height:1.1; }
.g-count { margin:.25rem 0 0; color:var(--muted); font-size:.9rem; }
.g-bar { position:sticky; top:0; z-index:5; margin:0 -1rem 1rem; padding:.6rem 1rem .5rem;
  background:rgba(243,233,218,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.g-switch { display:flex; width:max-content; margin:0 auto .6rem; border:1px solid var(--sand); border-radius:999px; overflow:hidden; background:#fff; }
.g-switch button { font:inherit; font-size:.85rem; font-weight:500; border:0; background:transparent; color:var(--plum); padding:.45rem 1.1rem; cursor:pointer; }
.g-switch button.on { background:var(--plum); color:#fff; }
/* one row that scrolls sideways on a phone, wraps on a desktop */
.g-chips { display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:.1rem; }
.g-chips::-webkit-scrollbar { display:none; }
/* fade the right edge so a phone shows there is more to swipe to */
@media (max-width:759px){ .g-chips { -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent); padding-right:2.5rem; } }
@media (min-width:760px){ .g-chips { flex-wrap:wrap; justify-content:center; overflow:visible; } }
.g-chip { flex:none; display:inline-flex; align-items:center; gap:.45rem; max-width:260px; font:inherit; font-size:.82rem; cursor:pointer;
  color:var(--plum); background:#fff; border:1px solid var(--sand); border-radius:999px; padding:.38rem .5rem .38rem .8rem; }
.g-chip-l { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-chip-n { flex:none; font-size:.72rem; font-weight:500; color:var(--muted); background:var(--limestone); border-radius:999px; padding:.05rem .45rem; }
.g-chip.on { background:var(--plum); border-color:var(--plum); color:#fff; }
.g-chip.on .g-chip-n { background:rgba(255,255,255,.2); color:#fff; }

/* sections + grid */
.g-sec { text-align:center; margin:1.8rem auto .8rem; max-width:640px; }
.g-sec .eyebrow { margin-bottom:.3rem; }
.g-sec-t { font-family:var(--serif); font-weight:600; font-size:clamp(1.35rem,4.6vw,1.8rem); line-height:1.2; color:var(--plum); margin:0; text-wrap:balance; }
.g-sec-n { margin:.2rem 0 0; font-size:.8rem; color:var(--muted); }
.g-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
@media (min-width:640px){ .g-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; } }
.g-tile { position:relative; display:block; padding:0; border:0; aspect-ratio:1; overflow:hidden; cursor:zoom-in;
  background:var(--sand); border-radius:6px; -webkit-tap-highlight-color:transparent; }
@media (min-width:640px){ .g-tile { border-radius:10px; } }
.g-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.g-tile:hover img { transform:scale(1.04); }
.g-badge { position:absolute; left:6px; top:6px; font-size:.68rem; font-weight:500; color:#fff;
  background:rgba(74,7,87,.82); border-radius:999px; padding:.1rem .45rem; }
.g-upload { max-width:360px; margin:0 auto; text-decoration:none; }
.g-foot { margin-top:2rem; }

/* full-screen viewer */
body.v-open { overflow:hidden; }
.v-back { position:fixed; inset:0; z-index:50; background:rgba(18,3,22,.97); display:grid;
  grid-template-columns:auto 1fr auto; grid-template-rows:1fr auto; }
.v-stage { grid-column:2; grid-row:1; min-height:0; display:grid; place-items:center; padding:3rem .5rem .5rem; touch-action:pan-y; }
.v-img { max-width:100%; max-height:calc(100vh - 9.5rem); max-height:calc(100dvh - 9.5rem); object-fit:contain; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.v-nav { grid-row:1; align-self:center; background:transparent; border:0; color:#fff; font-size:3rem; line-height:1; cursor:pointer; padding:.5rem 1rem; opacity:.75; }
.v-nav:hover { opacity:1; }
.v-prev { grid-column:1; } .v-next { grid-column:3; }
.v-x { position:absolute; top:.35rem; right:.6rem; z-index:1; background:transparent; border:0; color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; padding:.3rem .5rem; opacity:.85; }
.v-bar { grid-column:1 / -1; grid-row:2; display:flex; align-items:center; gap:1rem; padding:.8rem 1.2rem calc(1rem + env(safe-area-inset-bottom)); color:#f6e7d8; }
.v-text { flex:1; min-width:0; }
.v-eyebrow { margin:0; font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--marigold); }
.v-title { margin:.1rem 0 0; font-family:var(--serif); font-weight:600; font-size:1.25rem; line-height:1.2; color:#fff; }
.v-meta { margin:.2rem 0 0; font-size:.78rem; opacity:.75; }
.v-btn { flex:none; font-size:.85rem; font-weight:500; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:.5rem .95rem; }
.v-btn:hover { background:rgba(255,255,255,.12); }
@media (max-width:640px){
  .v-nav { display:none; }
  .v-stage { grid-column:1 / -1; }
  .v-bar { flex-direction:column; align-items:stretch; gap:.6rem; }
  .v-btn { text-align:center; }
}