/**
 * WP-ImmoMakler media preview tiles (click-to-open lightbox + consent overlay).
 *
 * Shared by Video_Lightbox_Renderer and Tour_Lightbox_Renderer — videos and
 * virtual tours are the same tile behind the same consent gate. The consent
 * overlay visuals follow the Google Maps consent box (.immomakler-map-consent)
 * so all blockers read as one system.
 */

.immomakler-media-tile {
	position: relative;
	overflow: hidden;
}

.immomakler-media-tile__trigger {
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/*
 * Absolutely positioned so the trigger's aspect-ratio alone defines the box.
 *
 * In normal flow a percentage block-size resolves against a parent whose own
 * height is indefinite (the trigger's height comes from its aspect-ratio), so
 * it falls back to auto: the image then lays out at its NATURAL ratio and
 * stretches the trigger past the aspect-ratio box, and object-fit never gets
 * anything to crop. Invisible for 16:9 sources like YouTube thumbnails, which
 * is why it only showed on virtual tours — Kuula returns a square preview, and
 * a 16:9 tile rendered 1:1.
 *
 * The selector is doubled up deliberately: themes and page builders ship an
 * `img { height: auto }` reset, and Elementor's `.elementor img` (0,1,1) beats
 * a single class, which would leave the thumbnail at its natural height and
 * spilling out of the tile. Two classes (0,2,0) outweigh those resets without
 * reaching for !important.
 *
 * `max-block-size` is the belt to that braces, and it is what makes the rule
 * safe against a theme we have not seen: those resets set `height` and
 * `max-width`, never `max-height`, so this clamp lands whatever the specificity
 * war does to `block-size`. It needs the absolute positioning to work — that is
 * what gives the image a containing block with a DEFINITE height to take 100%
 * of. Without the clamp, an image that wins on `height: auto` keeps its natural
 * height and anchors to the top of the tile: the visible symptom is a correctly
 * sized 16:9 tile showing a top-cropped, vertically off-centre image.
 */
.immomakler-media-tile .immomakler-media-tile__thumb {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-block-size: 100%;
	object-fit: cover;
}

.immomakler-media-tile__thumb--placeholder {
	background: linear-gradient(135deg, #3c4854, #181d22);
}

/* Play badge — centered via inset+margin auto so it stays put in RTL. */
.immomakler-media-tile__play {
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 50%;
	background-color: #000a;
	transition: background-color 0.2s ease;
}

.immomakler-media-tile__play::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 0;
	block-size: 0;
	border-block-start: 12px solid transparent;
	border-block-end: 12px solid transparent;
	border-inline-start: 20px solid #fff;

	/* Optical centering: nudge the triangle towards the visual middle. */
	transform: translateX(3px);
}

.immomakler-media-tile__trigger:hover .immomakler-media-tile__play,
.immomakler-media-tile__trigger:focus-visible .immomakler-media-tile__play {
	background-color: #000d;
}

/* Consent overlay — covers the whole tile until the service is accepted. */
.immomakler-media-tile__consent {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background-color: #0007;
	backdrop-filter: blur(5px);
}

.immomakler-media-tile__consent[hidden] {
	display: none;
}

.immomakler-media-tile__consent-text {
	margin: 0;
	max-inline-size: 80%;
	color: #fff !important;
	hyphens: none;
}

.immomakler-media-tile__consent-text a {
	color: #fff !important;
	text-decoration: underline;
}