/*
 * WBI Video Gallery
 *
 * Deliberately restrained. This gallery sits inside an established brand, so
 * it inherits Divi's typefaces and body color rather than introducing its own.
 * Everything tunable is a custom property — override these in Divi > Theme
 * Options > Custom CSS to match the practice palette without touching this file.
 *
 *   .wbi-gallery { --wbi-accent: #8c7a5e; --wbi-radius: 0; }
 */

.wbi-gallery,
.wbi-single-player {
	--wbi-accent: #1a1a1a;
	--wbi-rule: rgba(0, 0, 0, 0.12);
	--wbi-muted: rgba(0, 0, 0, 0.55);
	--wbi-radius: 2px;
	--wbi-gap: 32px;
	--wbi-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------------------------------------------------------------- filters */

.wbi-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	align-items: baseline;
	margin: 0 0 calc(var(--wbi-gap) * 0.9);
	padding: 0 0 16px;
	border-bottom: 1px solid var(--wbi-rule);
}

.wbi-filter {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.82em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wbi-muted);
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--wbi-ease), border-color 0.2s var(--wbi-ease);
}

.wbi-filter:hover,
.wbi-filter:focus-visible {
	color: var(--wbi-accent);
}

.wbi-filter.is-active {
	color: var(--wbi-accent);
	border-bottom-color: var(--wbi-accent);
}

.wbi-count {
	font-size: 0.75em;
	opacity: 0.5;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ grid */

.wbi-grid {
	display: grid;
	gap: var(--wbi-gap);
	grid-template-columns: repeat(var(--wbi-cols, 3), minmax(0, 1fr));
}

.wbi-gallery[data-columns="2"] .wbi-grid { --wbi-cols: 2; }
.wbi-gallery[data-columns="3"] .wbi-grid { --wbi-cols: 3; }
.wbi-gallery[data-columns="4"] .wbi-grid { --wbi-cols: 4; }

@media (max-width: 980px) {
	.wbi-gallery[data-columns="4"] .wbi-grid { --wbi-cols: 3; }
}

@media (max-width: 780px) {
	.wbi-grid { --wbi-cols: 2 !important; }
	.wbi-gallery, .wbi-single-player { --wbi-gap: 22px; }
}

@media (max-width: 500px) {
	.wbi-grid { --wbi-cols: 1 !important; }
}

.wbi-card[hidden] {
	display: none;
}

/* ------------------------------------------------------- thumbnail facade */

.wbi-thumb {
	position: relative;
	overflow: hidden;
	border-radius: var(--wbi-radius);
	background: #eceae7;
	/* Own the aspect ratio here, not only on the button inside. If the button
	   is ever removed or replaced, the wrapper keeps its height instead of
	   collapsing to zero and taking the card's image area with it. */
	aspect-ratio: 16 / 9;
}

.wbi-play {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	aspect-ratio: 16 / 9;
}

.wbi-play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--wbi-ease), opacity 0.3s var(--wbi-ease);
}

.wbi-play:hover img {
	transform: scale(1.03);
}

/*
 * The signature detail: a hairline ring rather than YouTube's red lozenge.
 * It reads as editorial rather than as a pasted-in third-party widget, which
 * is the whole point of not using the stock embed.
 */
.wbi-play-mark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 58px;
	height: 58px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(2px);
	transition: background 0.3s var(--wbi-ease), border-color 0.3s var(--wbi-ease), transform 0.3s var(--wbi-ease);
}

.wbi-play-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}

.wbi-play:hover .wbi-play-mark,
.wbi-play:focus-visible .wbi-play-mark {
	background: rgba(0, 0, 0, 0.42);
	border-color: #fff;
	transform: translate(-50%, -50%) scale(1.06);
}

.wbi-play:focus-visible {
	outline: 2px solid var(--wbi-accent);
	outline-offset: 3px;
}

.wbi-runtime {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 3px 7px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

/* The injected player replaces the facade in place. */
.wbi-thumb iframe,
.wbi-single-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------------------ meta */

.wbi-meta {
	padding-top: 14px;
}

.wbi-eyebrow {
	margin: 0 0 5px;
	font-size: 0.72em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wbi-muted);
}

.wbi-title {
	margin: 0;
	font-size: 1.02em;
	line-height: 1.35;
	font-weight: 500;
}

.wbi-title a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--wbi-ease);
}

.wbi-title a:hover {
	border-bottom-color: currentColor;
}

/* --------------------------------------------------------- single player */

.wbi-single-player {
	position: relative;
	margin: 0 0 32px;
	overflow: hidden;
	border-radius: var(--wbi-radius);
	background: #000;
	aspect-ratio: 16 / 9;
}

.wbi-single-player .wbi-play {
	height: 100%;
}

.wbi-play--large .wbi-play-mark {
	width: 84px;
	height: 84px;
}

.wbi-play--large .wbi-play-mark::after {
	border-width: 12px 0 12px 19px;
}

.wbi-procedure-link {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--wbi-rule);
	font-size: 0.92em;
	letter-spacing: 0.04em;
}

.wbi-empty {
	padding: 28px 0;
	color: var(--wbi-muted);
	font-style: italic;
}

/* ---------------------------------------------------------- a11y / motion */

@media (prefers-reduced-motion: reduce) {
	.wbi-play img,
	.wbi-play-mark,
	.wbi-filter,
	.wbi-title a {
		transition: none;
	}
	.wbi-play:hover img {
		transform: none;
	}
}

/* =================================================================
 * Shelves — one horizontal row per playlist
 * ============================================================== */

.wbi-shelves {
	--wbi-accent: #1a1a1a;
	--wbi-rule: rgba(0, 0, 0, 0.12);
	--wbi-muted: rgba(0, 0, 0, 0.55);
	--wbi-radius: 2px;
	--wbi-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	/* Cards per viewport width. Change these to show more or fewer. */
	--wbi-shelf-cols: 4;
	--wbi-shelf-gap: 20px;
}

.wbi-shelf {
	margin: 0 0 56px;
}

.wbi-shelf:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ header */

.wbi-shelf-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wbi-rule);
}

.wbi-shelf-title {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wbi-shelf-title a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--wbi-ease);
}

.wbi-shelf-title a:hover {
	border-bottom-color: currentColor;
}

.wbi-shelf-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.wbi-shelf-all {
	font-size: 0.74em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wbi-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s var(--wbi-ease);
}

.wbi-shelf-all:hover {
	color: var(--wbi-accent);
}

.wbi-shelf-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--wbi-rule);
	border-radius: 50%;
	background: none;
	color: var(--wbi-accent);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s var(--wbi-ease), opacity 0.2s var(--wbi-ease), background 0.2s var(--wbi-ease);
}

.wbi-shelf-arrow span {
	/* Optical centring — the chevron glyph sits low in its box. */
	margin-top: -2px;
}

.wbi-shelf-arrow:hover:not(:disabled) {
	border-color: var(--wbi-accent);
	background: rgba(0, 0, 0, 0.04);
}

.wbi-shelf-arrow:disabled {
	opacity: 0.28;
	cursor: default;
}

.wbi-shelf-arrow:focus-visible {
	outline: 2px solid var(--wbi-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- track */

/*
 * Native scroll container. Trackpad, touch swipe, and keyboard arrows all
 * work before any JS loads — the buttons are an enhancement, not the
 * mechanism. scroll-snap gives the tidy card-aligned stops you get from a
 * carousel library without shipping one.
 */
.wbi-shelf-track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: var(--wbi-shelf-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* legacy Edge */
	padding-bottom: 4px;
}

.wbi-shelf-track::-webkit-scrollbar {
	display: none;
}

.wbi-shelf-track:focus-visible {
	outline: 2px solid var(--wbi-accent);
	outline-offset: 4px;
}

.wbi-shelf-track > .wbi-card {
	/* Fallback first: if the custom properties are ever missing or stripped
	   by an optimizer, cards still sit in a row at a sane width rather than
	   collapsing to full-width blocks. */
	flex: 0 0 23%;
	flex: 0 0 calc(
		(100% - (var(--wbi-shelf-cols) - 1) * var(--wbi-shelf-gap)) / var(--wbi-shelf-cols)
	);
	width: auto;
	scroll-snap-align: start;
	min-width: 0;
}

/* ------------------------------------------------------- responsive */

@media (max-width: 1100px) {
	.wbi-shelves { --wbi-shelf-cols: 3; }
}

@media (max-width: 800px) {
	.wbi-shelves { --wbi-shelf-cols: 2; }
	.wbi-shelf { margin-bottom: 40px; }
}

@media (max-width: 540px) {
	/*
	 * A fractional column on mobile: the next card peeks in at the edge,
	 * which is what signals "this scrolls" on touch. Full-width cards read
	 * as a static list and nobody swipes them.
	 */
	.wbi-shelves { --wbi-shelf-cols: 1.35; --wbi-shelf-gap: 14px; }
	.wbi-shelf-title { font-size: 0.92em; }
	.wbi-shelf-all { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wbi-shelf-track {
		scroll-behavior: auto;
	}
}

/* =================================================================
 * Lightbox player
 * ============================================================== */

body.wbi-modal-open {
	overflow: hidden;
}

.wbi-modal {
	position: fixed;
	inset: 0;
	/* Above Divi's fixed header and any sticky CTA bars. */
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 4vw;
	background: rgba(0, 0, 0, 0.9);
	opacity: 0;
	transition: opacity 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wbi-modal.is-open {
	opacity: 1;
}

.wbi-modal[hidden] {
	display: none;
}

.wbi-modal-inner {
	position: relative;
	width: min(1180px, 100%);
}

.wbi-modal-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.wbi-modal-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.wbi-modal-close {
	position: absolute;
	top: -46px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: none;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.wbi-modal-close:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.wbi-modal-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 700px) {
	.wbi-modal {
		padding: 0 12px;
	}
	.wbi-modal-close {
		top: -42px;
		right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wbi-modal {
		transition: none;
	}
}