/* =========================================================
   LANO YOUTUBE FACADE — SINGLE SOURCE OF TRUTH
   File: Kapee Child Theme / style.css

   Responsibilities:
   - WPBakery horizontal video: 16:9
   - WPBakery portrait video: 9:16
   - Lano short-video component: 9:16
   - WP Rocket .rll-youtube-player facade
   - YouTube thumbnail sizing
   - Play-button overlay
   - Iframe sizing after click

   The Authority Article Framework must not duplicate these rules.
========================================================= */

/* ---------------------------------------------------------
   1. SHARED VIDEO CONTAINERS
--------------------------------------------------------- */

.wpb_video_widget .wpb_video_wrapper,
.lano-video-short,
.lano-video-portrait,
.lano-guide-video-short {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #111;
}

/*
 * WPBakery and some responsive-video helpers create aspect ratio
 * through pseudo-elements. Disable them here so each container has
 * one ratio source only.
 */
.wpb_video_widget .wpb_video_wrapper::before,
.wpb_video_widget .wpb_video_wrapper::after,
.lano-video-short::before,
.lano-video-short::after,
.lano-video-portrait::before,
.lano-video-portrait::after,
.lano-guide-video-short::before,
.lano-guide-video-short::after {
	display: none !important;
	content: none !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------
   2. HORIZONTAL VIDEO — 16:9
--------------------------------------------------------- */

.wpb_video_widget.vc_video-aspect-ratio-169
.wpb_video_wrapper {
	aspect-ratio: 16 / 9 !important;
}

/* ---------------------------------------------------------
   3. PORTRAIT VIDEO / YOUTUBE SHORT — 9:16
--------------------------------------------------------- */

.wpb_video_widget.vc_video-aspect-ratio-34
.wpb_video_wrapper,
.wpb_video_widget.vc_video-aspect-ratio-916
.wpb_video_wrapper,
.lano-video-short,
.lano-video-portrait,
.lano-guide-video-short {
	width: min(100%, 380px) !important;
	max-width: 380px !important;
	aspect-ratio: 9 / 16 !important;
	margin-right: auto !important;
	margin-left: auto !important;
	border-radius: 17px;
}

/*
 * Support both real DOM structures:
 *
 * A. WPBakery:
 *    .wpb_video_wrapper > .rll-youtube-player
 *
 * B. Lano component:
 *    .lano-guide-video-short > .rll-youtube-player
 *
 * Do not require an extra .wpb_video_wrapper inside Lano components.
 */

/* ---------------------------------------------------------
   4. WP ROCKET FACADE
--------------------------------------------------------- */

.wpb_video_widget .wpb_video_wrapper > .rll-youtube-player,
.lano-video-short > .rll-youtube-player,
.lano-video-portrait > .rll-youtube-player,
.lano-guide-video-short > .rll-youtube-player,
.lano-video-short .wpb_video_wrapper > .rll-youtube-player,
.lano-video-portrait .wpb_video_wrapper > .rll-youtube-player,
.lano-guide-video-short .wpb_video_wrapper > .rll-youtube-player {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	padding-bottom: 0 !important;
	overflow: hidden !important;
	background: #111;
}

/* Intermediate DIV generated by WP Rocket */
.wpb_video_widget .rll-youtube-player > div,
.lano-video-short .rll-youtube-player > div,
.lano-video-portrait .rll-youtube-player > div,
.lano-guide-video-short .rll-youtube-player > div {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* ---------------------------------------------------------
   5. YOUTUBE THUMBNAIL
--------------------------------------------------------- */

.wpb_video_widget .rll-youtube-player img,
.lano-video-short .rll-youtube-player img,
.lano-video-portrait .rll-youtube-player img,
.lano-guide-video-short .rll-youtube-player img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-position: center center !important;
	transform: none !important;
}

/* Horizontal video */
.wpb_video_widget.vc_video-aspect-ratio-169
.rll-youtube-player img {
	object-fit: cover !important;
}

/*
 * Portrait video / Shorts.
 * YouTube hqdefault.jpg is often 4:3 with the vertical frame centered.
 * Cropping the sides restores a usable 9:16 preview.
 */
.wpb_video_widget.vc_video-aspect-ratio-34
.rll-youtube-player img,
.wpb_video_widget.vc_video-aspect-ratio-916
.rll-youtube-player img,
.lano-video-short .rll-youtube-player img,
.lano-video-portrait .rll-youtube-player img,
.lano-guide-video-short .rll-youtube-player img {
	object-fit: cover !important;
	object-position: center center !important;
}

/* ---------------------------------------------------------
   6. IFRAME AFTER USER CLICKS PLAY
--------------------------------------------------------- */

.wpb_video_widget .wpb_video_wrapper > iframe,
.wpb_video_widget .rll-youtube-player iframe,
.lano-video-short > iframe,
.lano-video-portrait > iframe,
.lano-guide-video-short > iframe,
.lano-video-short .wpb_video_wrapper iframe,
.lano-video-portrait .wpb_video_wrapper iframe,
.lano-guide-video-short .wpb_video_wrapper iframe {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Responsive-video helper, if it still exists in old article HTML */
.lano-video-short .fluid-width-video-wrapper,
.lano-video-portrait .fluid-width-video-wrapper,
.lano-guide-video-short .fluid-width-video-wrapper {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------
   7. PLAY BUTTON
--------------------------------------------------------- */

.wpb_video_widget .rll-youtube-player .play,
.lano-video-short .rll-youtube-player .play,
.lano-video-portrait .rll-youtube-player .play,
.lano-guide-video-short .rll-youtube-player .play {
	position: absolute !important;
	inset: 0 !important;
	z-index: 3 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-position: center center !important;
	cursor: pointer;
}

/* ---------------------------------------------------------
   8. MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {
	.wpb_video_widget.vc_video-aspect-ratio-34
	.wpb_video_wrapper,
	.wpb_video_widget.vc_video-aspect-ratio-916
	.wpb_video_wrapper,
	.lano-video-short,
	.lano-video-portrait,
	.lano-guide-video-short {
		width: min(100%, 320px) !important;
		max-width: 320px !important;
	}
}