/* Fotolaag (drop-in; docs/modules/PHOTOS.md). partials/photo zet een picture met class photo om de img. Die picture
   doet zelf niet mee aan de layout, zodat de regels die al op de img stonden (maat, object-fit, radius) blijven werken
   en een img die in een vaste box met object-fit: cover stond geen nieuwe CSS nodig heeft. Alleen tokens. */
.photo { display: contents; }
/* De source in die picture is voor de browser een gewoon element: in een grid of flex zou hij een eigen cel innemen
   en de img een plek opschuiven (staaltjes in menu, filters, chips en rijen). Hij tekent niets, dus hij doet niet mee
   aan de layout; de bronkeuze van de browser verandert hier niet door. */
.photo > source { display: none; }

/* Houder van een foto met label: het label staat rechtsonder in het beeld. */
.photo-host { position: relative; }

/* Label "Sfeerbeeld" (photos.label): leesbaar op elk beeld, met een link naar de fotoverantwoording. */
.photo-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: var(--dh-z-raised);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--dh-r-pill);
  background: color-mix(in srgb, var(--dh-veen-950) 74%, transparent);
  color: var(--dh-mist-50);
  font-size: var(--dh-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
a.photo-label:hover { background: var(--dh-veen-950); color: var(--dh-mist-50); text-decoration: underline; text-underline-offset: 2px; }
a.photo-label:focus-visible { outline: none; box-shadow: var(--dh-focus-ring); }

/* Mediahouder zonder foto en zonder terugval: een rustig vlak in plaats van een gat. */
.photo-empty {
  background-color: var(--dh-surface-sunken);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--dh-mist-50) 10%, transparent), transparent 60%);
}

/* Fotoverantwoording (content/credits): per groep een tabel, één regel per foto. Elke regel heeft het anker van
   Photos::anchor() als id; het label "Sfeerbeeld" springt ernaartoe en de regel licht dan op. */
.photo-credits { display: grid; gap: var(--dh-space-7); min-width: 0; }
.photo-credits__intro { max-width: 72ch; color: var(--dh-text-2); line-height: var(--dh-lh-relaxed); }
.photo-credits__group { display: grid; gap: var(--dh-space-3); min-width: 0; }
.photo-credits__title { font-size: var(--dh-fs-lg); }
.photo-credits__table { width: 100%; border-collapse: collapse; font-size: var(--dh-fs-sm); line-height: 1.5; }
.photo-credits__table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--dh-line-strong);
  color: var(--dh-text-muted);
  font-size: var(--dh-fs-xs);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.photo-credits__table td { padding: 12px; border-bottom: 1px solid var(--dh-line); color: var(--dh-text-2); vertical-align: top; }
.photo-credits__table a { color: var(--dh-accent-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.photo-credits__row { scroll-margin-top: calc(var(--dh-header-offset, 72px) + 24px); }
.photo-credits__row:target td { background: var(--dh-accent-wash); }
.photo-credits__thumb { display: block; width: 64px; height: 64px; border-radius: var(--dh-r-sm); background: var(--dh-surface-sunken); object-fit: cover; }
.photo-credits__shows { min-width: 16ch; color: var(--dh-text); }
/* Volledige vermelding bij een licentie met verplichte naamsvermelding. */
.photo-credits__full { margin-top: 6px; color: var(--dh-text-muted); font-size: var(--dh-fs-xs); }

/* Smal scherm: geen tabel maar per foto een blok, met de kolomkop (data-label op de td) voor elke waarde. */
@media (max-width: 719.98px) {
  .photo-credits__table, .photo-credits__table tbody, .photo-credits__table td { display: block; }
  .photo-credits__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .photo-credits__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding-block: 14px; border-bottom: 1px solid var(--dh-line); }
  .photo-credits__table td { padding: 0; border: 0; grid-column: 2; }
  .photo-credits__table td:first-child { grid-column: 1; grid-row: 1 / span 6; }
  .photo-credits__table td[data-label]::before { content: attr(data-label) ": "; color: var(--dh-text-muted); font-size: var(--dh-fs-xs); font-weight: 600; }
  .photo-credits__row:target { background: var(--dh-accent-wash); }
  .photo-credits__row:target td { background: none; }
}

@media print {
  a.photo-label { text-decoration: none; }
}