/* The random preview uses the existing gallery, type and colour tokens. */
.ra-intro { padding-bottom: 32px; }
.ra-intro .gl-filters { margin-top: 24px; }
.ra-status { min-height: 1.5em; margin: 16px 0 0; color: var(--muted); font-size: .875rem; }
.ra-browse { padding-top: 0; }
.ra-card { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); gap: 32px;
  border: 1px solid var(--border); border-radius: var(--radius-card); padding: 32px; background: var(--paper); }
.ra-card[hidden], .ra-empty[hidden], .ra-links a[hidden] { display: none; }
.ra-picture { display: flex; align-items: center; justify-content: center; align-self: start; min-width: 0;
  aspect-ratio: 1; background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.ra-picture img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ra-picture video, .ra-picture audio { display: block; width: 100%; max-height: 100%; }
.ra-picture:has(audio) { aspect-ratio: auto; min-height: 104px; padding: 16px; }
.ra-picture p { padding: 24px; }
.ra-detail { min-width: 0; }
.ra-detail h2 { margin: 8px 0 16px; }
.ra-detail > p { max-width: 40rem; }
.ra-facts { margin: 24px 0; display: grid; gap: 12px; }
.ra-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.ra-facts dt { color: var(--muted); }
.ra-facts dd { margin: 0; overflow-wrap: anywhere; }
.ra-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.ra-links a { display: inline-flex; align-items: center; min-height: 48px; }
.ra-access { font-size: .875rem; color: var(--muted); margin: 16px 0; }
.ra-provenance { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 8px; }
.ra-provenance summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; }
.ra-provenance p, .ra-provenance code { overflow-wrap: anywhere; }
.ra-empty { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--paper); padding: 32px; }
.ra-empty h2 { margin-top: 0; }
@media (max-width: 860px) {
  .ra-card { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .ra-picture { width: 100%; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .ra-intro { padding-bottom: 24px; }
  .ra-card, .ra-empty { padding: 16px; }
  .ra-facts > div { grid-template-columns: 1fr; gap: 4px; }
}