/* C01 reading links and an on-demand video; no media download on page load. */
.guides-with-video { padding-block: 64px; }
.guides-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 56px;
}
.guides-copy { min-width: 0; }
.guides-copy h2 { margin-bottom: 28px; }
.guides-with-video .guide-list a {
  grid-template-columns: 1fr;
  gap: 8px;
  padding-block: 22px;
}
.guides-with-video .guide-list strong { font-size: 22px; }
.guides-with-video .guide-list a:hover strong,
.guides-with-video .guide-list a:focus-visible strong {
  color: var(--gold-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.guide-video {
  position: relative;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--charcoal);
}
.guide-video-launch,
.guide-video video { display: block; width: 100%; height: 100%; }
.guide-video-launch { position: relative; color: var(--white); }
.guide-video-launch img { width: 100%; height: 100%; object-fit: cover; }
.guide-video-play {
  position: absolute;
  inset: auto 24px 24px auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 4px;
  background: var(--charcoal);
  color: var(--white);
  font-size: 15px;
  line-height: 1.5;
  transition: background .2s ease-out;
}
.guide-video-play svg { width: 16px; height: 16px; flex: none; }
.guide-video-launch:hover .guide-video-play,
.guide-video-launch:focus-visible .guide-video-play { background: var(--gold-text); }
.guide-video-launch:focus-visible,
.guide-video video:focus-visible { outline: 2px solid var(--white); outline-offset: -6px; }
.guide-video video { object-fit: contain; }
.guide-video-status {
  position: absolute;
  inset: 16px 16px auto;
  padding: 10px 14px;
  background: var(--charcoal);
  color: var(--white);
  font-size: 14px;
  line-height: 1.5;
}
.guide-video-status:empty { display: none; }
.guide-video-status a { display: inline-block; padding-block: 6px; color: var(--white); }
@media (max-width: 1000px) {
  .guides-layout { gap: 32px; }
}
@media (max-width: 900px) {
  .guides-with-video { padding-block: 48px; }
  .guides-layout { grid-template-columns: minmax(0, 1fr); }
  .guides-copy h2 { margin-bottom: 24px; }
}
@media (max-width: 767px) {
  .guides-with-video .guide-list strong { font-size: 21px; }
  .guide-video-play { inset: auto 16px 16px auto; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-video-play { transition: none; }
}