/* ORIVON Collective — neutral loading placeholders (no names, titles or images). Created by CollectiveShared.loadingHTML() for the gallery,
   the directory, a profile and a photograph, so the page keeps about the height it will have and the footer does not jump when data arrives.
   They use their own class names (never the real card classes) so nothing mistakes a placeholder for content. */
.orv-skel {
  background: linear-gradient(90deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.075) 50%, rgba(255,255,255,.035) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-md, 12px);
  animation: orv-skel-shimmer 1.6s ease-in-out infinite;
}
.orv-skel-line { height: .85rem; margin: .55rem 0; border-radius: 999px; background: rgba(255,255,255,.06); width: 100%; }
.orv-skel-short { width: 55%; }
.orv-skel-title { height: 1.6rem; width: 70%; margin: 1rem 0 .8rem; }
.orv-skel-stack { flex: 1 1 auto; min-width: 0; padding-top: .4rem; }

/* Reserve the room from the very first paint: before the script runs the content area is empty, so without this the footer sits high in the window
   and jumps down the moment the placeholder (and later the data) arrives. */
[data-orv-gallery-slot], [data-orv-directory-slot], [data-orv-profile-slot], [data-orv-photo-slot] { min-height: 70vh; }

/* gallery / profile portfolio: same grid and card proportions as the real cards (4:3 image + two text lines) */
.orv-skel-card { border: 1px solid var(--line); border-radius: var(--radius-md, 12px); overflow: hidden; background: var(--glass-bg); display: flex; flex-direction: column; pointer-events: none; }
.orv-skel-media { aspect-ratio: 4 / 3; border-radius: 0; }
.orv-skel-card-body { padding: 1rem 1.1rem 1.2rem; }
/* directory */
.orv-skel-card-center { align-items: center; padding: 1.5rem 1rem; gap: .35rem; }
.orv-skel-avatar-sm { width: 72px; height: 72px; border-radius: 50%; margin-bottom: .5rem; }
.orv-skel-card-center .orv-skel-line { width: 70%; }
.orv-skel-card-center .orv-skel-short { width: 45%; }
/* profile header */
.orv-skel-profile { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 2.5rem; padding: 2.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); background: var(--glass-bg); }
.orv-skel-avatar { width: 120px; height: 120px; border-radius: 50%; flex: none; }
.orv-skel-section-head { margin: 0 0 1.2rem; }
/* photograph: two columns on wide screens, one on phones (like .orv-photo-layout) */
.orv-skel-photo-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.orv-skel-photo { width: 100%; height: min(70vh, 560px); }
@media (max-width: 900px) { .orv-skel-photo-layout { grid-template-columns: 1fr; } }

/* The skeleton itself says "loading": keep the spinner row for screen readers only (it is the role="status" message). */
.orv-loading:has(+ .orv-skeleton) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; padding: 0; margin: 0; }
@keyframes orv-skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .orv-skel { animation: none; } }