/**
 * Instructional Video grid.
 *
 * Each video card holds an iframe at 16:9. Above 800px the videos lay
 * out in a two-column responsive grid; below that, they stack.
 * The YouTube player overlays the video title, so we don't add a
 * separate caption.
 */

.mh-video-grid .field__items,
.mh-video-grid > .field__item,
.field--name-field-item-instructional-video.mh-video-grid {
  margin-top: var(--mh-space-xs);
}

.mh-video-grid .field__items {
  display: grid;
  gap: var(--mh-space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .mh-video-grid .field__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mh-video-card {
  position: relative;
  border-radius: var(--mh-radius-md, 6px);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--mh-color-border);
  box-shadow: var(--mh-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.mh-video-card .youtube-container,
.mh-video-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  max-width: 100%;
  border: 0;
}

/* The youtube formatter wraps in a sized div; let it flow with the card. */
.mh-video-card .youtube-container {
  width: 100% !important;
  height: auto !important;
}