/* Gallery: square tiles. State/seat band on top, name band on the bottom, photo fills the square. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
@media (max-width:420px){.grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.tile{aspect-ratio:1/1;max-width:100%;display:block;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--fg);overflow:hidden;position:relative;transition:transform .15s,box-shadow .15s}
@media (hover:hover){.tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,20,50,.18)}}
.tile:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent)}
.tile:active{transform:scale(.985)}
.hdr{position:absolute;top:0;left:0;right:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--band);color:var(--band-fg);padding:6px 10px;text-transform:uppercase;letter-spacing:.05em;line-height:1;min-width:0}
.hdr .st{font-weight:800;font-size:1.05rem;white-space:nowrap}
.hdr .seat{font-weight:500;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tile img,.tile .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%;display:block}
.nm-wrap{position:absolute;left:0;right:0;bottom:0;z-index:1;background:var(--card);padding:7px 10px 8px;border-top:3px solid var(--accent);display:flex;flex-direction:column;gap:3px;min-width:0}
.last{font-weight:800;font-size:clamp(1rem,1.9vw,1.25rem);line-height:1.05;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.last.long{white-space:normal;font-size:.95rem;overflow-wrap:anywhere}
.nm{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}
.nm.lead{color:var(--accent-text);font-weight:500}
.tile[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover,.tile:active{transform:none}}