/**
 * Hero video: responsive behaviour at 991.98px and below.
 *
 * WHY THIS FILE EXISTS
 * Legacy CSS hid the hero video on tablet/mobile and swapped in a still image.
 * Those rules are stored in the DATABASE, not in the theme, in two places:
 *
 *   1. wp_options.sccss_settings          (Simple Custom CSS -> <style id="sccss">)
 *        @media (max-width:767px)                              video.ninec_video_banner_tag{display:none}
 *        @media (min-width:768px) and (max-width:991px)         video.ninec_video_banner_tag{display:none}
 *        ...both inside large minifier-merged selector lists.
 *   2. wp_posts ID 11033                  (Customizer -> Additional CSS)
 *        @media (max-width:767px)   .ninec_video_banner_tag{display:none!important}
 *        @media (max-width:767px)   .ninec_banner_mobile_image{display:block!important;height:100%!important}
 *        @media (max-width:767px)   img.ninec_banner_mobile_image{height:80vh!important}
 *        @media (max-width:767px)   .ninec_video_banner_wrapper{min-height:500px!important;height:80vh!important}
 *
 * The client now wants the video to play on desktop + tablet + mobile, showing the
 * full 16:9 frame with no cropping. Rather than editing those DB blobs (which do
 * not travel with a code deploy), this stylesheet overrides them.
 *
 * HOW THE OVERRIDE WINS
 * Enqueued stylesheets print BEFORE inline <style> blocks, so equal-specificity
 * !important rules would lose on source order. Every selector below is therefore
 * scoped one level deeper (specificity 0,2,x) so it beats the 0,1,x originals on
 * specificity, independent of order.
 *
 * WHY IMAGE HEROES ARE SAFE
 * .ninec_video_banner_wrapper is emitted only by video heroes. Image banners use
 * .ninec_image_banner_wrapper and activity image heroes use
 * .ninec_activity_simple_header, neither of which contains a <video> or a
 * .ninec_banner_mobile_image. Nothing here can reach them.
 *
 * Applies to every video hero via shared classes: homepage, /aurora/,
 * Observatory (page-hillclimb.php) and the ACF activity heroes
 * (Treetop, Zip Line) rendered by inc/activity-video-hero.php.
 */

@media only screen and (max-width: 991.98px) {

	/* 1. Show the video again.
	   Overrides the sccss and Customizer display:none rules above. */
	.ninec_video_banner_wrapper video.ninec_video_banner_tag {
		display: block !important;
		width: 100% !important;
		/* height:auto + width:100% makes the element exactly as tall as the
		   source's own ratio, i.e. a true 16:9 box for these 1280x720 files.
		   min-height is zeroed so the legacy min-height:100% cannot stretch it. */
		height: auto !important;
		min-height: 0 !important;
		/* The container below is 16:9 and the source is 16:9, so "cover" has
		   nothing to crop - no need for "contain" and no letterboxing. */
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: center center;
		object-position: center center;
	}

	/* 2. Retire the tablet/mobile still image.
	   The video's own poster= attribute covers the pre-playback frame and the
	   cannot-play fallback, so this duplicate <img> is no longer needed. */
	.ninec_video_banner_wrapper img.ninec_banner_mobile_image {
		display: none !important;
	}

	/* 3. Let the hero box follow the video's ratio instead of the old
	   80vh / min-height:500px mobile hero, which cropped the frame.
	   Scoped via .ninec_fullwidth (always an ancestor: the banner module and both
	   activity templates wrap the hero in it) to clear specificity 0,1,0. */
	.ninec_fullwidth .ninec_video_banner_wrapper {
		aspect-ratio: 16 / 9;
		height: auto !important;
		min-height: 0 !important;
	}

	/* The inner div is auto-height and simply passes the video's height through;
	   pinned explicitly so no legacy height:100% can collapse it. */
	.ninec_video_banner_wrapper .ninec_video_banner {
		height: auto !important;
		min-height: 0 !important;
	}
}

/* The overlaid caption was sized for the old 80vh mobile hero. A 16:9 hero is
   much shorter (390px wide -> 219px tall), so the same card would cover most of
   the frame. Tighten it just enough that the video stays visible - same design,
   same content, no clipping. Scoped to video heroes so image heroes and the
   desktop caption are untouched. */
@media only screen and (max-width: 767px) {

	.ninec_video_banner_wrapper .ninec_image_banner_caption {
		bottom: 8px !important;
		padding: 10px 12px !important;
	}

	.ninec_video_banner_wrapper .ninec_image_banner_caption h1 {
		font-size: 1.15rem !important;
		line-height: 1.15 !important;
		margin-bottom: 4px !important;
	}

	/* Sub-heading: the banner module emits h4 (with editor markup often nested
	   inside), the activity heroes emit none. */
	.ninec_video_banner_wrapper .ninec_image_banner_caption h4,
	.ninec_video_banner_wrapper .ninec_image_banner_caption h4 h2,
	.ninec_video_banner_wrapper .ninec_image_banner_caption h4 p {
		font-size: 0.78rem !important;
		line-height: 1.3 !important;
		margin: 0 !important;
	}
}