/* ============================================================================
   Almanac — video-moment card (.almanac-vm)
   A guide step that is best shown in motion links to the exact second of the
   source video. Before play the card shows an image the site is licensed to
   use (the game's own official art), a timestamp chip and the moment's label;
   a click swaps the poster for the embedded player seeked to that second
   (video-moment.js). Without JS the poster is a plain link to the timestamp.
   Tokens only; light + dark safe. Radius tokens follow the theme (square).
   ============================================================================ */

.almanac-vm { margin: 1.75rem 0; }

.almanac-vm__poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--almanac-bg-paper);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  color: #fff;
  text-decoration: none;
}
.almanac-vm__poster:focus-visible {
  outline: 3px solid var(--almanac-yellow);
  outline-offset: 2px;
}
.almanac-vm__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--almanac-duration-lg) var(--almanac-ease);
}
.almanac-vm__poster:hover img { transform: scale(1.03); }

.almanac-vm__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
}

.almanac-vm__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: var(--almanac-yellow);
  color: var(--almanac-on-yellow);
  border-radius: 50%;
  box-shadow: var(--almanac-shadow-card);
  transition: transform var(--almanac-duration) var(--almanac-ease);
}
.almanac-vm__play svg { width: 28px; height: 28px; margin-left: 4px; }
.almanac-vm__poster:hover .almanac-vm__play { transform: translate(-50%, -50%) scale(1.08); }

.almanac-vm__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  font-family: var(--almanac-font-sans);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.almanac-vm__time {
  flex: 0 0 auto;
  font-family: var(--almanac-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  background: var(--almanac-yellow);
  color: var(--almanac-on-yellow);
  border-radius: var(--almanac-radius-pill);
  text-shadow: none;
}
.almanac-vm__label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

/* the embedded player that replaces the poster on click */
.almanac-vm__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  background: #000;
}

@media (max-width: 600px) {
  .almanac-vm__play { width: 52px; height: 52px; }
  .almanac-vm__play svg { width: 22px; height: 22px; }
  .almanac-vm__label { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .almanac-vm__poster img, .almanac-vm__play { transition: none; }
  .almanac-vm__poster:hover img { transform: none; }
}