#photos-main { max-width: 1200px; margin-inline: auto; padding: 2rem; }
#photos-album-nav { display:flex; flex-wrap:wrap; gap:1rem; margin-block:1rem 2rem; }
.photos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:1rem; }
.photos-grid figure { margin:0; }
.photos-grid button { display:block; padding:0; width:100%; cursor:pointer; border:0; background:transparent; }
.photos-grid img { display:block; width:100%; height:220px; object-fit:cover; border-radius:8px; }
.photos-grid figcaption { padding-block:.5rem; }
#photos-lightbox { max-width:95vw; max-height:95vh; padding:1rem; }
#photos-lightbox::backdrop { background:rgb(0 0 0 / .85); }
#photos-full { display:block; max-width:90vw; max-height:75vh; object-fit:contain; margin:auto; }
.photos-lightbox-controls { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1rem; }
.photos-grid button:focus-visible { outline:3px solid currentColor; outline-offset:4px; }

.photos-album { margin-block: 1rem; border: 1px solid var(--club-line); border-radius: .6rem; background: var(--club-surface); }
.photos-album > summary { display: flex; align-items: center; gap: 1rem; padding: 1rem; cursor: pointer; list-style: none; }
.photos-album > summary::-webkit-details-marker { display: none; }
.photos-album > summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; }
.photos-album[open] > summary::after { content: "−"; }
.photos-album > summary img { width: 96px; height: 72px; object-fit: cover; border-radius: .35rem; flex-shrink: 0; }
.photos-album > summary h2 { margin: 0 0 .25rem; font-size: 1.2rem; overflow-wrap: anywhere; }
.photos-album > summary > div { min-width: 0; }
.photos-album-body { padding: 0 1rem 1rem; }
.photos-more { margin-block: 1rem; padding: .7rem 1rem; min-height: 44px; border: 1px solid var(--club-teal); border-radius: .4rem; background: var(--club-surface); color: var(--club-teal); font: inherit; cursor: pointer; }
.photos-more[hidden] { display: none; }
@media (max-width: 500px) {
  #photos-main { padding: 1rem; }
  .photos-album > summary { gap: .7rem; padding: .8rem; }
  .photos-album > summary img { width: 72px; height: 54px; }
}

.clubhouse .photos-album-actions { display: flex; flex-wrap: wrap; gap: .6rem; text-align: left; margin: 0 0 1rem; }
.clubhouse .photos-edit-actions[hidden] { display: none; }
.clubhouse .photos-album-actions .event-edit-link { min-height: 44px; padding: .5rem .8rem; box-sizing: border-box; }