/* --- Media Icon Styling --- */

/* Hides the close icon in media */
.media__icon--close {
  display: none;
}

/* Hover effect for remote video bundle */
.media--bundle--remote-video:hover {
  cursor: pointer;
}

/* Display and color styling for media icons in remote videos */
.media--bundle--remote-video .media__icon {
  opacity: 1 !important;
  visibility: visible !important;
  color: white;
}

/* Icon background and position adjustments */
.media--bundle--remote-video .media__icon::before,
.media--bundle--remote-video .media__icon::after {
  background: none;
  top: 0;
}

/* Play icon styling within remote video */
.media--bundle--remote-video .media__icon::before {
  font-family: 'Font Awesome 5 Brands';
  content: '\f167'; /* YouTube play icon */
  color: #ff0000;
  font-weight: 900;
  font-size: 70px;
}

/* --- Play Icon Border Styling --- */

.media__icon--play {
  border-color: #ff6d2c;
}

.media__icon--play::before {
  border-left-color: #ff6d2c;
}

/* --- Download Box Styling --- */

.download-box .field--name-field-media-document a::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f019'; /* Download icon */
  font-weight: 900;
  font-size: 2rem;
  color: #be830f;
  padding-right: 10px;
}

.download-box .field--name-field-media-document a {
  font-weight: 600;
}

/* --- Media Caption and Description Styling --- */

span.media-description,
.blazy__caption {
  color: #666;
  font-size: 0.95rem;
  box-sizing: border-box;
  padding: 10px 0;
  word-wrap: break-word;
}

/* --- Video Embed Container Styling --- */

/* Responsive 16:9 aspect ratio for video embeds */
.field--name-field-media-oembed-video,
.video-iframe-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

.field--name-field-media-oembed-video iframe,
.video-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* For custom oEmbed Formatter (background video) */
.remote-video--custom-oembed--container .field--name-field-media-oembed-video iframe {
	top: 0;
}
.remote-video--custom-oembed--container .field--name-field-image-cover {
	display: none;
}

@keyframes fadeIn {
  from { opacity: 0; z-index:-1;}
  to   { opacity: 1; z-index:0;}
}
@keyframes fadeOut {
  from { z-index: 0; visibility: visible;}
  to   { z-index: -1; visibility: hidden;}
}

@media (max-width: 767px) {
	.remote-video--custom-oembed--container {
    padding-bottom: 0;
    overflow: hidden;
    aspect-ratio: 9 / 5;
	}
	.remote-video--custom-oembed--container .field--name-field-media-oembed-video {
		position: absolute;
		width: 100%;
		height: 54.4vw;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: black;
	}
	.remote-video--custom-oembed--container .custom-oembed-player-wrapper {
		position: relative;
		width: auto;
		min-width: 100%;
		height: 100%;
		padding: 0;
		padding-bottom: 56% !important;
	}
	.remote-video--custom-oembed--container .custom-oembed-player-wrapper iframe {
		position: absolute;
	  width: 100%;
	  height: auto;
	  min-height: 56vw;
	  min-width: 129vw;
	  top: 50% !important;
	  left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
	}
}

@media (min-width: 768px) {
  .remote-video--custom-oembed--container .field--name-field-media-oembed-video {
		height:30vw !important;
	}
	
	.remote-video--custom-oembed--container .field--name-field-media-oembed-video iframe {
  	top: -17%;
	}
	.remote-video--custom-oembed--container .custom-oembed-player-wrapper {
		position: relative; 
		width: 100%; 
		padding-bottom: 52%; 
		height: 0; 
		overflow: hidden;
	}
	.layout-bg-bg-container .field--name-field-media-oembed-video iframe {
		top: -17%;
	}
	.layout-bg-bg-container .remote-video--custom-oembed--container,
	.layout-bg-bg-container .field--name-field-media-oembed-video {
		height: 30vw !important;
	}
}

@media (min-width: 992px) {
  .remote-video--custom-oembed--container .field--name-field-image-cover {
		display: block;
		position: absolute;
		z-index: 0;
		width: 100%;
		height: auto;
	}
	.remote-video--custom-oembed--container iframe {
		opacity: 0;
		animation: fadeIn 6s ease-in forwards;
	}
}

@media (prefers-reduced-motion: reduce) {
  .custom-oembed-player-wrapper iframe {
    /* display: none; */
		visibility: hidden;
  }
}