/* A floating title preview expands over its shelf without moving nearby cards. */
.hover-preview.tile-preview {
  position: fixed;
  z-index: 45;
  display: flex;
  flex-direction: column;
  background: #141719;
  color: #f6f7f7;
  border: 1px solid #ffffff1c;
  border-radius: 16px;
  box-shadow: 0 18px 65px #000b, 0 3px 12px #0007;
  overflow: hidden;
  animation: none;
  transform: none;
  transform-origin: center top;
  clip-path: inset(0 0 0 0 round 16px);
  opacity: 1;
  transition: transform 300ms cubic-bezier(.2,.75,.2,1), clip-path 300ms cubic-bezier(.2,.75,.2,1), opacity 200ms ease;
}
.hover-preview.tile-preview.entering { transform: var(--preview-origin-transform, scale(.9)); clip-path: var(--preview-origin-clip, inset(0)); opacity: .75; }
.hover-preview.tile-preview.leaving { transform: var(--preview-origin-transform, scale(.94)); clip-path: var(--preview-origin-clip, inset(0)); opacity: 0; transition-duration: 210ms; }
.tile-preview .preview-media {
  flex: 0 0 auto;
  height: var(--preview-media-height);
  width: 100%;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  background: #090a0b;
}
.tile-preview .preview-media::after {
  content: '';
  position: absolute;
  inset: 65% 0 0;
  background: linear-gradient(transparent, #141719);
  pointer-events: none;
  z-index: 1;
}
.tile-preview .preview-media :is(img, video, iframe) { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.tile-preview .preview-youtube { position: absolute; inset: 0; pointer-events: none; transition: opacity 200ms ease; }
.tile-preview .preview-youtube iframe { pointer-events: none; }
.tile-preview .preview-open { border-radius: 15px 15px 0 0; }
.tile-preview .preview-info {
  padding: 17px 20px 20px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms ease 65ms, transform 260ms cubic-bezier(.2,.75,.2,1) 65ms;
}
.tile-preview.entering .preview-info, .tile-preview.leaving .preview-info { opacity: 0; transform: translateY(8px); transition-delay: 0ms; }
.tile-preview h3 {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  font: 650 22px/1.17 var(--font);
  letter-spacing: -.45px;
  text-wrap: balance;
}
.tile-preview .preview-info > .preview-speaker { margin: 7px 0 0; color: #bbc3c0; font-size: 12px; line-height: 1.4; }
.tile-preview .actions { margin: 17px 0 14px; display: flex; align-items: center; gap: 9px; flex-wrap: nowrap; }
.tile-preview .preview-watch {
  min-height: 42px;
  min-width: 155px;
  padding: 10px 21px;
  border-radius: 999px;
  background: #f5f5f7;
  color: #111315;
  font: 650 14px/1.4 var(--font);
  gap: 8px;
}
.tile-preview .preview-watch svg { width: 18px; height: 18px; }
.tile-preview .circle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  flex: 0 0 40px;
  border: 1px solid var(--glass-edge, #ffffff29);
  border-radius: 50%;
  background: var(--glass-fill, #ffffff17);
  -webkit-backdrop-filter: var(--glass-blur, blur(18px));
  backdrop-filter: var(--glass-blur, blur(18px));
  box-shadow: var(--glass-shadow, inset 0 1px 1px #ffffff1f);
}
.tile-preview .circle:hover { background: #ffffff24; }
.tile-preview .circle svg { width: 19px; height: 19px; }
.tile-preview .detail-arrow { margin-left: auto; }
.tile-preview .meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; color: #d0d5d3; font-size: 12px; line-height: 1.5; }
.tile-preview .preview-info > .preview-description { margin: 10px 0 0; color: #b5bdb9; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (hover: none), (pointer: coarse), (max-width: 700px) { .hover-preview.tile-preview { display: none; } }
@media (prefers-reduced-motion: reduce) { .hover-preview.tile-preview, .hover-preview.tile-preview.entering, .tile-preview .preview-info, .tile-preview.entering .preview-info { transition: none; transform: none; clip-path: none; opacity: 1; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .tile-preview .circle { background: #303638; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (forced-colors: active) { .hover-preview.tile-preview, .tile-preview .circle, .tile-preview .preview-watch { background: Canvas; color: CanvasText; border: 1px solid ButtonText; box-shadow: none; } }