/**
 * EquaRent Pro — shared front VIDEO styles (modal + carousel + mosaic + thumbnails).
 *
 * Every selector is scoped under .equarent-pro-video* so this sheet is self-contained and cannot
 * collide with the Free storefront or any other plugin. The modal is appended to <body> (outside the
 * .equarent-site wrapper), so it deliberately does NOT rely on the --equarent-* custom properties.
 *
 * Contract pieces implemented here:
 *   - .equarent-pro-video__thumb / __play : the video thumbnail trigger + play badge.
 *   - .equarent-pro-video__carousel        : slow right-to-left scrolling row (overflow only).
 *   - .equarent-pro-video__mosaic          : CSS grid of standard-size thumbnails.
 *   - .equarent-pro-video__modal           : the reusable sized video dialog.
 */

/* ---- Block title ----------------------------------------------------- */

/* The optional pro_video heading reuses .equarent-section__title for the charte typography; this
 * rule only guarantees clearance above the carousel/mosaic so the title never glues to the thumbs. */
.equarent-pro-video__title {
	margin: 0 0 16px;
}

/* ---- Thumbnail trigger ----------------------------------------------- */

.equarent-pro-video__thumb {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	height: 150px;
	flex: 0 0 auto;
	padding: 0;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	overflow: hidden;
	background-color: #0c1a2b;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .18 );
	transition: transform .18s ease, box-shadow .18s ease;
}

/* A video with a stored poster is emitted server-side as this element's background image. A posterless
 * video instead carries an inert <video class="equarent-pro-video__frame"> that the browser decodes and
 * seeks to ~1s to paint a real still (no canvas). Either way the dark background-color shows until the
 * frame paints, and the play badge below marks the tile as a video. */

/* The inert frame video: fills the thumb behind the veil + play glyph, and never captures clicks (so a
 * tap always reaches the button and opens the modal, never the inert element). */
.equarent-pro-video__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.equarent-pro-video__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, rgba( 0, 0, 0, .05 ), rgba( 0, 0, 0, .35 ) );
}

.equarent-pro-video__thumb:hover,
.equarent-pro-video__thumb:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .28 );
	outline: none;
}

.equarent-pro-video__thumb:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1981de;
}

/* A clear right-pointing triangle (▶, &#9654;) centred in a semi-transparent round badge, so the tile
 * reads as a video over either a real poster or the dark placeholder. The admin configurator paints an
 * equivalent inline-styled ▶ overlay (it cannot load this front sheet) to match. */
.equarent-pro-video__play {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .55 );
	color: #fff;
	font-size: 22px;
	line-height: 1;
	padding-left: 4px; /* optically centre the triangle glyph. */
	box-shadow: 0 2px 12px rgba( 0, 0, 0, .35 );
	transition: transform .18s ease, background .18s ease;
}

.equarent-pro-video__thumb:hover .equarent-pro-video__play,
.equarent-pro-video__thumb:focus-visible .equarent-pro-video__play {
	transform: scale( 1.08 );
	background: rgba( 0, 0, 0, .72 );
}

/* ---- Carousel : bounded scroll-snap row with discreet dots (recette #32) ----
   Replaces the former slow right-to-left auto-marquee + accelerate-on-hold buttons,
   which snapped back to the animation position on release. The overflow case is now
   a real horizontal scroller (.has-dots) with a dot strip rendered below the row
   (the dot styling is shared, in equarent-pro-front.css). */

.equarent-pro-video__carousel {
	position: relative;
	width: 100%;
	max-width: 100%;
}

.equarent-pro-video__carousel-track {
	display: flex;
	gap: 16px;
	width: max-content;
}

/* Centered + static when the thumbs fit (no overflow). */
.equarent-pro-video__carousel.is-centered .equarent-pro-video__carousel-track {
	width: auto;
	justify-content: center;
}

/* Overflow: a real horizontal scroll container driven by the Pro JS (continuous seamless loop, thumbs
   cloned once). NO scroll-snap — it would fight the rAF-driven continuous scroll and stutter. */
.equarent-pro-video__carousel.has-dots .equarent-pro-video__carousel-track {
	width: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox: hide the native bar; the dots are the affordance. */
	padding-bottom: 2px;
}
.equarent-pro-video__carousel.has-dots .equarent-pro-video__carousel-track::-webkit-scrollbar {
	display: none; /* WebKit: hide the native bar. */
}

/* ---- Mosaic : CSS grid of standard-size thumbnails ------------------- */

.equarent-pro-video__mosaic {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 16px;
	width: 100%;
}

.equarent-pro-video__mosaic .equarent-pro-video__thumb {
	width: 100%;
}

/* ---- Modal ----------------------------------------------------------- */

.equarent-pro-video__modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.equarent-pro-video__modal[hidden] {
	display: none;
}

.equarent-pro-video__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .9 );
}

.equarent-pro-video__dialog {
	position: relative;
	width: 100%;
	max-width: 720px; /* default (medium); overridden by the size modifiers below. */
	display: flex;
	flex-direction: column;
	align-items: center;
}

.equarent-pro-video__dialog--small  { max-width: 480px; }
.equarent-pro-video__dialog--medium { max-width: 720px; }
.equarent-pro-video__dialog--large  { max-width: 1080px; }

.equarent-pro-video__player {
	width: 100%;
	max-width: 100%;
	max-height: 86vh;
	display: block;
	border-radius: 8px;
	background: #000;
	box-shadow: 0 10px 50px rgba( 0, 0, 0, .5 );
}

.equarent-pro-video__close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .16 );
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease;
}

.equarent-pro-video__close:hover,
.equarent-pro-video__close:focus-visible {
	background: rgba( 255, 255, 255, .34 );
	outline: none;
}

.equarent-pro-video__close:focus-visible {
	box-shadow: 0 0 0 3px #1981de;
}

@media ( max-width: 560px ) {
	.equarent-pro-video__close {
		top: 8px;
		right: 8px;
	}
	.equarent-pro-video__thumb {
		width: 180px;
		height: 116px;
	}
}

/* Lock background scroll while the modal is open. */
.equarent-pro-video-open {
	overflow: hidden;
}