/* peertube-plugin-zkm-meta styles
 * Uses PeerTube CSS custom properties (--mainColor, --mainBackgroundColor, …)
 * so it adapts to the instance theme. */

/* ---- Watch page metadata block ---- */
.zkm-meta-block {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--greyBackgroundColor, rgba(0, 0, 0, 0.04));
}
.zkm-meta-heading {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.zkm-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0;
}
.zkm-meta-label {
  min-width: 9rem;
  font-weight: 600;
}
.zkm-meta-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.zkm-meta-tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--mainColorLightest, rgba(0, 0, 0, 0.08));
  color: var(--mainColor, inherit);
  text-decoration: none;
  font-size: 0.9rem;
}
.zkm-meta-tag:hover { text-decoration: underline; }

/* ---- Speaker chip with inline portrait avatar (watch page) ----
 * Each speaker that has an uploaded portrait renders as a small round avatar
 * followed by the name link. Multiple speakers wrap onto new lines. */
.zkm-speaker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.zkm-speaker-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  flex: 0 0 auto;
  background: var(--greyBackgroundColor, rgba(0, 0, 0, 0.08));
}

/* ---- Browse page ---- */
.zkm-browse-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}
.zkm-browse-inner h1 { margin-bottom: 0.25rem; }
.zkm-intro { opacity: 0.7; margin-bottom: 1.5rem; }
.zkm-facet { margin-bottom: 2rem; }
.zkm-facet h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  border-bottom: 1px solid var(--greyForegroundColor, rgba(0, 0, 0, 0.1));
  padding-bottom: 0.35rem;
  margin-bottom: 0.75rem;
}
.zkm-facet-values { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.zkm-facet-value {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--mainColorLightest, rgba(0, 0, 0, 0.06));
  color: var(--mainForegroundColor, inherit);
  text-decoration: none;
}
.zkm-facet-value:hover { background: var(--mainHoverColor, rgba(0, 0, 0, 0.12)); }
.zkm-count {
  font-size: 0.75rem;
  opacity: 0.6;
  background: var(--mainBackgroundColor, #fff);
  border-radius: 999px;
  padding: 0 0.4rem;
}

/* ---- Result grid ---- */
.zkm-breadcrumb { margin-bottom: 1rem; }
.zkm-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.zkm-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--mainForegroundColor, inherit);
}
.zkm-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: var(--greyBackgroundColor, rgba(0, 0, 0, 0.08));
}
.zkm-card-thumb--empty { display: block; }
.zkm-card-title { margin-top: 0.4rem; font-weight: 600; }
.zkm-empty, .zkm-error { opacity: 0.7; font-style: italic; }
.zkm-error { color: var(--red, #c0392b); }

/* ---- Facet tiles (image grid on the browse / single-facet pages) ---- */
/* Reuses .zkm-card / .zkm-card-grid. The title row carries the value name plus
 * the per-value video count pill. */
.zkm-facet-card .zkm-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.zkm-facet-card .zkm-count {
  flex: 0 0 auto;
  border: 1px solid var(--greyForegroundColor, rgba(0, 0, 0, 0.12));
}
.zkm-facet-card:hover .zkm-card-thumb { filter: brightness(1.06); }

/* ============================================================================
 * Schnellzugriff sidebar — custom ZKM glyph icons
 * ----------------------------------------------------------------------------
 * MenuLink.icon only accepts PeerTube's built-in GlobalIconName enum, so we keep
 * a built-in placeholder icon on each link and HIDE it, then paint our own glyph
 * via the link's iconClass using `mask-image` + `background-color: currentColor`
 * so the glyph follows the active theme text colour (light / dark / monochrome).
 * Inline data-URI SVGs avoid staticDirs registration. Single-stroke, ~24px,
 * icon-only (no tile, no label), derived from the channel-avatar shapes.
 *
 * PeerTube renders `iconClass` directly ON the <my-global-icon> element (verified
 * in the live DOM: <my-global-icon class="zkm-ic zkm-ic-…">), with the built-in
 * placeholder <svg> as its child. So .zkm-ic IS that element: we paint the glyph
 * as a mask on it (currentColor background) and HIDE the inner built-in svg. */
.zkm-ic {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* Collapse the built-in placeholder svg living inside our glyph element. */
.zkm-ic > svg { display: none !important; }

/* frame (exhibitions + by-exhibition) */
.zkm-ic-exhibitions, .zkm-ic-exhibition {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1'/%3E%3Crect x='7' y='8' width='10' height='8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1'/%3E%3Crect x='7' y='8' width='10' height='8'/%3E%3C/svg%3E");
}
/* speech bubble (talks) */
.zkm-ic-talks {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12H8l-4 4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12H8l-4 4z'/%3E%3C/svg%3E");
}
/* music note (music) */
.zkm-ic-music {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='15' r='3'/%3E%3Cpath d='M9 18V5l11-2v12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='15' r='3'/%3E%3Cpath d='M9 18V5l11-2v12'/%3E%3C/svg%3E");
}
/* star (festivals) */
.zkm-ic-festivals {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 18.8 6.2 21.9l1.1-6.5L2.6 10.8l6.5-.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 18.8 6.2 21.9l1.1-6.5L2.6 10.8l6.5-.9z'/%3E%3C/svg%3E");
}
/* share network (social) */
.zkm-ic-social {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 10.5l6.8-4M8.6 13.5l6.8 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 10.5l6.8-4M8.6 13.5l6.8 4'/%3E%3C/svg%3E");
}
/* person (by person) */
.zkm-ic-person {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 21v-1a7 7 0 0 1 14 0v1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 21v-1a7 7 0 0 1 14 0v1'/%3E%3C/svg%3E");
}
/* compass (discover / entdecken) */
.zkm-ic-discover {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E");
}
/* calendar (by year) */
.zkm-ic-year {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

/* ---- Portrait crop (uploaded person photos) ----
 * Person tiles use a square cover crop so a head-and-shoulders portrait reads as
 * a person, not a 16:9 video still. Applied on top of .zkm-card-thumb. */
.zkm-card-thumb--portrait {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 30%;
}

/* ---- People management page (admin) ---- */
.zkm-admin-link { margin-top: 0.75rem; }
.zkm-admin-link a { color: var(--mainColor, #f2690d); font-weight: 600; }
.zkm-people-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.zkm-people-row {
  display: flex;
  gap: 0.9rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--greyBackgroundColor, rgba(0, 0, 0, 0.04));
  align-items: flex-start;
}
.zkm-people-img {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.zkm-people-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 8px;
  background: var(--greyBackgroundColor, rgba(0, 0, 0, 0.08));
  display: block;
}
.zkm-people-state {
  font-size: 0.7rem;
  opacity: 0.6;
  text-align: center;
}
.zkm-people-main { flex: 1 1 auto; min-width: 0; }
.zkm-people-name { font-weight: 600; margin-bottom: 0.5rem; }
.zkm-people-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.zkm-people-file {
  display: inline-flex;
  cursor: pointer;
}
.zkm-people-file input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
}
.zkm-people-file span,
.zkm-people-remove {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--mainColor, #f2690d);
  background: var(--mainColor, #f2690d);
  color: var(--mainBackgroundColor, #fff);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.zkm-people-remove {
  background: transparent;
  color: var(--mainColor, #f2690d);
}
.zkm-people-file span:hover,
.zkm-people-remove:hover { opacity: 0.85; }
.zkm-people-status { font-size: 0.85rem; opacity: 0.85; }
.zkm-people-status.zkm-ok { color: var(--green, #2ecc71); opacity: 1; }
.zkm-people-status.zkm-error { color: var(--red, #c0392b); opacity: 1; }

/* ---- Admin / backfill ---- */
.zkm-admin {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--greyForegroundColor, rgba(0, 0, 0, 0.1));
}
.zkm-reindex-btn {
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--mainColor, #f2690d);
  background: var(--mainColor, #f2690d);
  color: var(--mainBackgroundColor, #fff);
  cursor: pointer;
  font-weight: 600;
}
.zkm-reindex-btn:hover { opacity: 0.9; }
.zkm-reindex-status { margin-left: 0.75rem; opacity: 0.8; }
.zkm-admin-hint { margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.6; }

/* ============================================================================
 * Entdecken / Discover landing page
 * ========================================================================== */
.zkm-entdecken-section { margin-bottom: 2.5rem; }
.zkm-entdecken-section h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
  border-bottom: 1px solid var(--greyForegroundColor, rgba(0, 0, 0, 0.1));
  padding-bottom: 0.35rem;
  margin-bottom: 1rem;
}
.zkm-section-all {
  margin-left: auto;
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--mainColor, #f2690d);
  text-decoration: none;
}
.zkm-section-all:hover { text-decoration: underline; }

/* Channel grid: avatar cards */
.zkm-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.zkm-channel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 0.5rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--mainForegroundColor, inherit);
  background: var(--greyBackgroundColor, rgba(0, 0, 0, 0.04));
  transition: background 0.15s ease;
}
.zkm-channel-card:hover { background: var(--mainHoverColor, rgba(0, 0, 0, 0.1)); }
.zkm-channel-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mainBackgroundColor, #fff);
  flex: 0 0 auto;
}
.zkm-channel-avatar--glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mainColor, #f2690d);
}
.zkm-channel-avatar--glyph .zkm-ic { width: 40px; height: 40px; }
.zkm-channel-name {
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* Person portrait row reuses .zkm-card-grid; keep tiles a touch smaller. */
.zkm-people-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* press channel (newspaper) — added for the ZKM | Presse sidebar link */
.zkm-ic-press {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='1'/%3E%3Cline x1='7' y1='9' x2='17' y2='9'/%3E%3Crect x='7' y='12' width='4' height='4'/%3E%3Cline x1='13' y1='13' x2='17' y2='13'/%3E%3Cline x1='13' y1='16' x2='17' y2='16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='1'/%3E%3Cline x1='7' y1='9' x2='17' y2='9'/%3E%3Crect x='7' y='12' width='4' height='4'/%3E%3Cline x1='13' y1='13' x2='17' y2='13'/%3E%3Cline x1='13' y1='16' x2='17' y2='16'/%3E%3C/svg%3E");
}

/* paper-flip hover-scrub thumbnails (scrub-client-plugin.js) */
a.video-thumbnail { position: relative; }
.zkm-scrub-layer {
  position: absolute; inset: 0; z-index: 2;
  background-repeat: no-repeat; background-position: 0 0;
  border-radius: inherit; opacity: 0; pointer-events: none;
  transition: opacity .12s;
}
.zkm-scrub-layer.active { opacity: 1; }
/* Suppress PeerTube's centred play-overlay the instant a scrub-enabled card is
 * hovered — gated on :hover, NOT on .active. PeerTube fades the play triangle in
 * on CSS :hover immediately, but our scrub layer only activates after the async
 * storyboard fetch; gating on .active let the triangle flash over the flip on the
 * first (uncached) hover. :has(.zkm-scrub-layer) keeps it scoped to cards we own.
 * Corner badges (duration/label, z-index 10) stay. */
a.video-thumbnail:has(.zkm-scrub-layer):hover .play-overlay { opacity: 0 !important; }