/* Basic layout tweaks */
html, body { height: 100%; }
.viewer-container { position: relative; width: 100%; height: 80vh; background: #000; }
.viewer-container canvas { display:block; width:100% !important; height:100% !important; }
.thumb { width: 100%; aspect-ratio: 1.6; object-fit: cover; background: #f0f0f0; }
.album-card { transition: transform .1s ease; }
.album-card:hover { transform: translateY(-2px); }
.nowrap { white-space: nowrap; }
.break-word { word-break: break-word; }

/* Full-bleed width inside Bootstrap .container */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* Fit viewport height minus approx navbar + margins */
.viewer-fit { height: calc(100vh - 100px); }

/* iOS Safari fullscreen hint: expand when address bar collapses */
.viewer-fit:fullscreen, .viewer-fit:-webkit-full-screen { height: 100vh; }

@media (max-width: 576px) {
  .viewer-container { height: 70vh; }
  .viewer-fit { height: calc(100vh - 88px); }
}