/* Scoped additions. The existing site owns the grid, cards, type and spacing. */
.album-card { cursor: pointer; }
.album-card:focus-visible, .album-dialog button:focus-visible, .album-button:focus-visible {
  outline: 3px solid #e60000; outline-offset: 5px;
}
.album-card .event-title-overlay, .album-card .video-title-overlay {
  overflow-wrap: anywhere; text-align: left;
}
.album-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.album-card.video-item .album-card-title { -webkit-line-clamp: 2; }
.album-play {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  color: #fff; font-size: 42px; text-shadow: 0 2px 12px #0008; pointer-events: none;
}
.album-status { display: flex; gap: 16px; align-items: center; padding: 24px 0; font-size: 16px; }
.album-status[hidden] { display: none; }
.album-button { color: inherit; border: 1px solid #aaa; background: transparent; padding: 8px 18px; border-radius: 6px; font: inherit; cursor: pointer; }
.album-button:disabled { opacity: .5; cursor: wait; }
.album-dialog {
  position: fixed; inset: 0; margin: 0; box-sizing: border-box; width: 100vw; max-width: none;
  height: 100dvh; max-height: none; padding: 0; border: 0; color: #fff; background: rgba(0,0,0,.94);
}
.album-dialog[open] { display: flex; flex-direction: column; }
.album-dialog::backdrop { background: rgba(0,0,0,.92); }
.album-dialog-title { flex: 0 0 auto; margin: 0; padding: 22px 68px 16px; text-align: center; font-size: 19px; line-height: 1.5; overflow-wrap: anywhere; }
.album-close { position: absolute; top: 8px; right: 16px; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.album-dialog-content { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 8px 24px 28px; }
.album-message { text-align: center; }
.album-photo-grid { align-self: flex-start; display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 12px; width: 100%; }
.album-photo { padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #222; }
.album-photo img { display: block; width: 100%; height: 150px; object-fit: cover; }
.album-player { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; }
.album-lightbox { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 10px; }
.album-lightbox img { width: auto; height: auto; min-width: 0; max-width: calc(100% - 108px); max-height: 100%; object-fit: contain; border-radius: 6px; }
.album-nav { flex: 0 0 44px; padding: 10px 0; border: 0; background: none; color: #fff; font-size: 32px; cursor: pointer; }
@media (max-width: 768px) {
  .album-card.video-item .video-title-overlay { font-size: 11px; line-height: 1.35; padding: 20px 7px 7px; }
  .album-card .album-play { font-size: 24px; top: 35%; }
  .album-dialog-title { padding: 16px 54px 12px; font-size: 17px; }
  .album-dialog-content { padding: 8px 12px 20px; }
  .album-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .album-lightbox { gap: 4px; }
  .album-nav { flex-basis: 32px; font-size: 24px; }
  .album-lightbox img { max-width: calc(100% - 72px); }
}