/* Holy Gospels Video App Compatibility Styles
 *
 * Fix broken video thumbnails and ensure responsive, consistent display
 * across video grids, single videos, and embeds (YouTube/Vimeo/self-hosted).
 */

/* General reset for media blocks */
.entry-content img,
.entry-content video,
.entry-content iframe {
  max-width: 100%;
  height: auto;
}

/* Thumbnails inside links should not stretch oddly */
.entry-content a img {
  display: inline-block;
}

/* Avoid changing the app's layout or visuals: no grid overrides, no borders */

/* Ensure thumbnail wrappers maintain aspect ratio */
.video-thumb, .hg-video-thumb, .video-thumbnail, .hg-video-thumbnail,
.video-card .thumbnail, .hg-video-card .thumbnail {
  position: relative;
  width: 100%;
  /* 16:9 ratio via padding-top trick */
  padding-top: 56.25%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Make images fill the wrapper and preserve cover */
.video-thumb img,
.hg-video-thumb img,
.video-thumbnail img,
.hg-video-thumbnail img,
.video-card .thumbnail img,
.hg-video-card .thumbnail img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* If thumbnails come as <img width height>, guard against distortion */
.video-thumb img[width], .video-thumb img[height],
.video-thumbnail img[width], .video-thumbnail img[height] {
  height: 100% !important;
}

/* Fallback when thumbnails are background-image inline: ensure container renders */
/* no-op visual fallback; preserve app styles */

/* Responsive oEmbeds - support classic iframe embeds */
.responsive-embed, .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.responsive-embed::before, .wp-block-embed__wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

.responsive-embed iframe,
.wp-block-embed__wrapper iframe,
.embed-responsive iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Gutenberg core embed block sometimes wraps iframes differently */
/* Respect app-defined sizing; only ensure width 100% */
.wp-block-embed.is-type-video iframe { width: 100%; }

/* Do not touch margins to preserve app spacing */

/* Titles and meta */
/* No typography overrides */

/* No hover effect overrides */

/* In case plugin outputs a data-thumb attribute and no <img> */
/* We convert it via JS (optional) but at least show placeholder */
/* Keep neutral; background will be set dynamically if provided */