/**
 * lvl-blocks-shared: pieces several blocks share. Depends on the theme's
 * 'lvl-components' (buttons, eyebrows, tags, section/container, benefit lists).
 * Tokens only (theme/assets/css/tokens.css).
 *
 *   [data-lvl-reveal]   scroll reveal (AOS fade-up replacement), driven by reveal.js
 *   .lvl-quote-card     client quote card (Oxygen .card-clientvoice)
 *   .lvl-reel           teaser loop + full-screen play (lvl_blocks_reel, reel.js)
 *   .lvl-carousel       scroll-snap slider (carousel.js)
 *   .lvl-icon           inline icon defaults
 */

/* ---------- Icons ---------- */
/* :where(): defaults only. Any single class that sizes an icon (theme footer signet,
   block icons) wins, whichever order the stylesheets print in (Yoast schema code of
   levels-content-api renders blocks in wp_head on posts, which moves block styles
   after the theme CSS there). */
:where(.lvl-icon) {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

/* ---------- Reveal (AOS fade-up: 100px, 1s, ease-in-out-quad) ---------- */
/* Hidden only when JS runs (html.lvl-js, set in the theme head) and motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
	.lvl-js [data-lvl-reveal] {
		opacity: 0;
		transform: translate3d(0, var(--lvl-reveal-distance), 0);
		transition-duration: var(--lvl-duration-reveal);
		transition-property: opacity, transform;
		transition-timing-function: var(--lvl-ease-reveal);
	}

	.lvl-js [data-lvl-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Quote card ---------- */
.lvl-quote-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding-block: 1.25rem;
}

.lvl-quote-card__photo {
	width: 12.5rem;  /* 200px */
	height: 12.5rem;
	margin-bottom: var(--lvl-space-l);
	overflow: hidden;
	border-radius: var(--lvl-radius-round);
}

.lvl-quote-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lvl-quote-card__quote {
	margin: 0 0 var(--lvl-space-40);
	font-family: var(--lvl-font-light);
	font-size: var(--lvl-fs-h3);
	line-height: 1.2;
	text-align: center;
}

.lvl-quote-card__quote p {
	margin: 0;
}

.lvl-quote-card__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.lvl-quote-card__role {
	padding-bottom: 1.5625rem; /* 25px, .subheadline */
	font-size: var(--lvl-fs-xs);
}

@media (max-width: 991px) {
	.lvl-quote-card__quote {
		font-size: 1.8rem;
	}
}

@media (max-width: 767px) {
	.lvl-quote-card__quote {
		font-size: 1.6rem; /* .h3-style */
	}
}

@media (max-width: 479px) {
	.lvl-quote-card__quote {
		font-size: 1.4rem;
	}
}

/* ---------- Reel (lvl_blocks_reel) ---------- */
.lvl-reel {
	position: relative;
	overflow: hidden;
	border-radius: var(--lvl-radius-label);
}

.lvl-reel__teaser {
	display: block;
	width: 100%;
	height: auto;
}

.lvl-reel__full {
	display: none;
	width: 100%;
	height: auto;
}

.lvl-reel__full:fullscreen,
.lvl-reel.is-playing .lvl-reel__full {
	display: block;
}

.lvl-reel.is-playing .lvl-reel__teaser,
.lvl-reel.is-playing .lvl-reel__play {
	display: none;
}

.lvl-reel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	padding: 0;
	border: 2px solid var(--lvl-color-glass-border);
	border-radius: var(--lvl-radius-round);
	background: var(--lvl-color-glass);
	color: var(--lvl-color-white);
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: background-color 0.2s;
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
}

.lvl-reel__play:hover {
	background: var(--lvl-color-glass-hover);
}

/* Oracle (universal.css): the play button shows on hover of the video only. Keyboard
   focus and touch screens (no hover) always show it. */
@media (hover: hover) {
	.lvl-reel__play {
		opacity: 0;
		transition: opacity 0.15s ease-in-out, background-color 0.2s;
	}

	.lvl-reel:hover .lvl-reel__play,
	.lvl-reel__play:focus-visible {
		opacity: 1;
	}
}

.lvl-reel__play:focus-visible {
	outline: 2px solid var(--lvl-color-white);
	outline-offset: 2px;
}

.lvl-reel__play-icon {
	width: 2.5rem;
	height: 2.5rem;
}

/* ---------- Carousel (carousel.js) ---------- */
/* Markup:
   <div class="lvl-carousel" data-lvl-carousel>
     <div class="lvl-carousel__track" data-lvl-carousel-track tabindex="0" role="group" aria-label="…">
       <div class="lvl-carousel__slide">…</div> …
     </div>
     <button data-lvl-carousel-prev>…</button> <button data-lvl-carousel-next>…</button>
   </div>
   Slides per view and gap per breakpoint via custom properties on .lvl-carousel
   (Swiper config of the oracle, e.g. 1.2/40px → 2.2/60px ≥ 992 → 2.3/100px ≥ 1200). */
.lvl-carousel {
	--lvl-carousel-per-view: 1.2;
	--lvl-carousel-gap: 2.5rem;
	position: relative;
}

.lvl-carousel__track {
	display: flex;
	gap: var(--lvl-carousel-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.lvl-carousel__track::-webkit-scrollbar {
	display: none;
}

.lvl-carousel__slide {
	flex: 0 0 calc((100% - (var(--lvl-carousel-per-view) - 1) * var(--lvl-carousel-gap)) / var(--lvl-carousel-per-view));
	min-width: 0;
	scroll-snap-align: start;
}

.lvl-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.4375rem;
	height: 3.4375rem;
	padding: 0;
	border: 1px solid var(--lvl-color-violet); /* live .swiper__btn since 2026: violet ring + icon (RESULT open decision 1) */
	border-radius: var(--lvl-radius-round);
	background: none;
	color: var(--lvl-color-violet);
	cursor: pointer;
}

.lvl-carousel__button:not(:disabled):hover {
	border-color: var(--lvl-color-violet);
	color: var(--lvl-color-violet);
}

.lvl-carousel__button:disabled {
	cursor: default;
	opacity: 0.35;
}

.lvl-carousel__button .lvl-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.lvl-carousel__button--prev .lvl-icon {
	transform: rotate(90deg);
}

.lvl-carousel__button--next .lvl-icon {
	transform: rotate(-90deg);
}

@media (prefers-reduced-motion: no-preference) {
	.lvl-carousel__track {
		scroll-behavior: smooth;
	}
}

/* ---------- Loop video (lvl_blocks_loop_video, video.js) ---------- */
/* The pause button stays invisible until the video is hovered or the button has
   keyboard focus; a paused video keeps it visible. */
.lvl-media-video {
	position: relative;
	line-height: 0;
}

.lvl-media-video__media {
	display: block;
	width: 100%;
	height: auto;
}

.lvl-media-video__toggle {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--lvl-color-glass-border);
	border-radius: var(--lvl-radius-round);
	background: var(--lvl-color-glass);
	color: var(--lvl-color-white);
	cursor: pointer;
	opacity: 0;
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
}

.lvl-media-video:hover .lvl-media-video__toggle,
.lvl-media-video.is-paused .lvl-media-video__toggle,
.lvl-media-video__toggle:focus-visible {
	opacity: 1;
}

.lvl-media-video__toggle:focus-visible {
	outline: 2px solid var(--lvl-color-white);
	outline-offset: 2px;
}

.lvl-media-video__icon {
	width: 1rem;
	height: 1rem;
}

.lvl-media-video__icon--play,
.lvl-media-video.is-paused .lvl-media-video__icon--pause {
	display: none;
}

.lvl-media-video.is-paused .lvl-media-video__icon--play {
	display: inline-block;
}