/* Albumblok op de gastsite: uploaden, raster per collectie, lightbox */
.album { padding: 100px 24px 20px; }
.album-inner { max-width: 880px; margin: 0 auto; }
.album-intro { text-align: center; font-size: 15px; font-weight: 300; color: #6e5570; margin: 0 0 28px; }
.album-upload { text-align: center; margin-bottom: 44px; }
.album-upload select { font: inherit; padding: 8px 10px; border: 1px solid #e0b8d2; border-radius: 6px; margin: 0 0 10px; background: #fff; }
.album-uitleg { font-size: 15px; color: #6e5570; margin: 0 0 16px; }
.album-knop { display: inline-block; cursor: pointer; }
.album-dicht { color: #6e5570; font-style: italic; }
.album-voortgang { list-style: none; padding: 0; margin: 18px auto 0; max-width: 520px; text-align: left; }
.album-voortgang li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-size: 14px; padding: 8px 0; border-bottom: 1px solid #f1e3ec; }
.album-voortgang .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-voortgang .balk { grid-column: 1 / -1; height: 4px; background: #f1e3ec; border-radius: 2px; overflow: hidden; }
.album-voortgang .balk span { display: block; height: 100%; background: #a4548c; transition: width .2s; }
.album-voortgang .klaar { color: #55704f; }
.album-voortgang .fout { color: #b3261e; }
.album-voortgang button { font: inherit; font-size: 13px; background: none; border: 0; color: #a4548c; text-decoration: underline; cursor: pointer; padding: 0; justify-self: start; }
.album-voortgang .album-wis { border-bottom: 0; }
.album-film { margin: 0 0 32px; }
.album-film-titel { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(22px, 2.8vw, 28px); color: #3d2340; margin: 0 0 10px; }
/* de breedte volgt de hoogte (hooguit 80% van het scherm), zodat een film nooit hoger wordt dan het scherm */
.album-film video { display: block; width: min(100%, calc(80vh * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: 4px; }
.album-film video[data-formaat="staand"] { width: min(100%, calc(80vh * 9 / 16)); aspect-ratio: 9 / 16; }
.album-film-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.album-collectie { margin: 0 0 48px; }
.album-collectie-titel { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); color: #3d2340; margin: 0 0 6px; }
.album-noot { font-size: 14px; color: #6e5570; margin: 0 0 12px; }
.album-zips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.album-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.album-tegel { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: #f6eef3; border-radius: 4px; overflow: hidden; cursor: pointer; }
.album-tegel:disabled { cursor: default; }
.album-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-tegel-leeg { display: grid; place-items: center; height: 100%; color: #a4548c; font-size: 22px; }
.album-tegel-video { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(61, 35, 64, .75); color: #fff; font-size: 11px; }
.album-tegel-status { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; background: rgba(61, 35, 64, .8); color: #fff; font-size: 12px; text-align: left; }
.album-leeg { grid-column: 1 / -1; color: #6e5570; font-style: italic; }
.album-meer { display: block; margin: 14px auto 0; }
.album-privacy { text-align: center; font-size: 13px; color: #8a7590; margin: 10px 0 0; }

.album-lightbox { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: 1fr auto; background: rgba(20, 10, 22, .94); }
.album-lightbox[hidden] { display: none; }
.lb-media { display: grid; place-items: center; min-height: 0; padding: 48px 56px 0; }
.lb-media img, .lb-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-sluit, .lb-vorige, .lb-volgende { position: absolute; padding: 8px 14px; border: 0; background: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.lb-sluit { top: 4px; right: 6px; }
.lb-vorige { left: 0; top: 50%; transform: translateY(-50%); }
.lb-volgende { right: 0; top: 50%; transform: translateY(-50%); }
.lb-balk { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); color: #fff; font-size: 14px; }
.lb-balk button { margin-left: 6px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 20px; background: none; color: #fff; font: inherit; cursor: pointer; }

@media (max-width: 600px) {
  .album-raster { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .lb-media { padding: 40px 0 0; }
  .lb-vorige, .lb-volgende { display: none; }
}