/*! South Loop Digital — Verticals v1.0.0 */

/* ---------- Theme tokens ---------- */
.sldv-rail, .sldv-page, .sldv-w, .sldv-viewer {
	--sldv-bg: #071e2b;
	--sldv-panel: #0c2b3b;
	--sldv-line: #1f4a5e;
	--sldv-ink: #e4eef1;
	--sldv-mist: #9db5be;
	--sldv-accent: #3cc6d3;
	--sldv-accent-2: #1f8a92;
	--sldv-cta: #f2a541;
	--sldv-cta-ink: #071e2b;
	--sldv-grad: linear-gradient(135deg, #3cc6d3, #1f8a92);
	--sldv-display: var(--display, inherit);
	--sldv-r: 10px;
}
.sldv-w[data-theme="xblu"], .sldv-viewer[data-theme="xblu"] {
	--sldv-bg: #070e1c;
	--sldv-panel: #0e1a30;
	--sldv-line: #1d2c48;
	--sldv-ink: #e8eefa;
	--sldv-mist: #93a3c4;
	--sldv-accent: #56c9f4;
	--sldv-accent-2: #5bf0d5;
	--sldv-cta: #56c9f4;
	--sldv-cta-ink: #04101f;
	--sldv-grad: linear-gradient(90deg, #56c9f4, #5bf0d5);
	--sldv-display: Poppins, "Open Sans", system-ui, sans-serif;
	--sldv-r: 14px;
}

/* ---------- Cards ---------- */
.sldv-card { margin: 0; scroll-snap-align: start; min-width: 0; }
.sldv-card__link {
	display: block;
	color: var(--sldv-ink);
	text-decoration: none;
	outline: none;
}
.sldv-card__media {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	border-radius: var(--sldv-r);
	overflow: hidden;
	background: var(--sldv-panel);
	box-shadow: 0 0 0 1px var(--sldv-line);
	transform: translateZ(0);
	transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.sldv-card__media img,
.sldv-card__preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	display: block;
}
.sldv-card__media img { transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
.sldv-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
	pointer-events: none;
}
.sldv-card__preview {
	/* Vimeo background embeds are 16:9 boxes; scale so the 9:16 film fills the card. */
	width: 316%;
	left: -108%;
	opacity: 0;
	transition: opacity .35s;
	pointer-events: none;
	z-index: 1;
}
.sldv-card__preview.on { opacity: 1; }
.sldv-card__time {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	font: 600 12px/1 system-ui, sans-serif;
	letter-spacing: .02em;
	padding: 5px 7px;
	border-radius: 999px;
	color: #fff;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(6px);
}
.sldv-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border-radius: 50%;
	background: rgba(7, 20, 30, .45);
	box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75);
	backdrop-filter: blur(4px);
	transition: transform .3s, opacity .3s, background .3s;
}
.sldv-card__play::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 17px;
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #fff;
}
.sldv-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 10px;
	font-family: var(--sldv-display);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.15;
	letter-spacing: .01em;
}
.sldv-card__meta {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--sldv-mist);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.sldv-card__link:hover .sldv-card__media,
.sldv-card__link:focus-visible .sldv-card__media {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1.5px var(--sldv-accent), 0 18px 40px -18px rgba(0,0,0,.8);
}
.sldv-card__link:hover img { transform: scale(1.04); }
.sldv-card__link:hover .sldv-card__play { transform: scale(1.08); background: var(--sldv-accent); box-shadow: none; }
.sldv-card__link:hover .sldv-card__preview.on ~ .sldv-card__play { opacity: 0; }
.sldv-card__link:focus-visible .sldv-card__title { color: var(--sldv-accent); }

/* ---------- SLD home rail (sits inside the theme's .rail) ---------- */
.sldv-rail .rail__track.sldv-track { grid-auto-columns: clamp(150px, 17vw, 210px); }
.sldv-rail .rail__title::after {
	content: "9:16";
	display: inline-block;
	vertical-align: middle;
	margin-left: 12px;
	padding: 4px 7px 3px;
	border: 1px solid var(--sldv-cta);
	border-radius: 4px;
	color: var(--sldv-cta);
	font: 600 12px/1 var(--body, system-ui);
	letter-spacing: .08em;
	transform: translateY(-3px);
}

/* ---------- /verticals/ page grid ---------- */
.sldv-page {
	margin: 8px 0 48px;
	/* Break out of the theme's narrow reading column to the full site width. */
	width: min(calc(var(--wrap, 1360px) - 2 * var(--gut, 24px)), calc(100vw - 2 * var(--gut, 24px)));
	max-width: none;
}
.sldv-page__lede { color: var(--sldv-mist); margin: 0 0 18px; }
.sldv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 28px 18px;
}
.sldv-playall, .sldv-w__play {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 26px;
	padding: 12px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--sldv-cta);
	color: var(--sldv-cta-ink);
	font: 700 15px/1 var(--body, system-ui);
	letter-spacing: .02em;
	cursor: pointer;
	transition: transform .2s, filter .2s;
}
.sldv-playall:hover, .sldv-w__play:hover { transform: translateY(-1px); filter: brightness(1.08); }
.sldv-empty { color: var(--sldv-mist); }

/* ---------- Embed widget (xblu.com) ---------- */
.sldv-w { color: var(--sldv-ink); margin-top: 28px; text-align: left; }
.sldv-w__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(150px, 18vw, 220px);
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 2px;
	padding: 6px 2px 14px;
	scrollbar-width: thin;
	scrollbar-color: var(--sldv-line) transparent;
	outline: none;
}
.sldv-w__track::-webkit-scrollbar { height: 6px; }
.sldv-w__track::-webkit-scrollbar-thumb { background: var(--sldv-line); border-radius: 6px; }
.sldv-w .sldv-card__title { font-size: 15px; font-weight: 600; }
.sldv-w .sldv-card__media { box-shadow: 0 0 0 1px rgba(86, 201, 244, .18); }
.sldv-w__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
}
.sldv-w__bar .sldv-w__play { margin: 0; background: var(--sldv-grad); }
.sldv-w__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--sldv-line);
	background: transparent;
	color: var(--sldv-ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}
.sldv-w__btn:hover { border-color: var(--sldv-accent); color: var(--sldv-accent); }
.sldv-w__more {
	margin-left: auto;
	color: var(--sldv-mist) !important;
	font-size: 14px;
	text-decoration: none !important;
}
.sldv-w__more:hover { color: var(--sldv-accent) !important; }
@media (max-width: 640px) {
	.sldv-w__btn { display: none; }
	.sldv-w__more { margin-left: 0; width: 100%; }
}

/* ---------- Full-screen viewer ---------- */
html.sldv-lock, html.sldv-lock body { overflow: hidden !important; }

.sldv-viewer {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sldv-ink);
	opacity: 0;
	transition: opacity .25s;
	overscroll-behavior: contain;
	-webkit-tap-highlight-color: transparent;
}
.sldv-viewer[hidden] { display: none; }
.sldv-viewer.is-open { opacity: 1; }
.sldv-viewer__bg {
	position: absolute;
	inset: -40px;
	background: var(--sldv-bg) center / cover no-repeat;
	filter: blur(38px) saturate(1.2) brightness(.42);
	transition: background-image .4s;
}
.sldv-viewer__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(0,0,0,.1), rgba(0,0,0,.55));
}

.sldv-stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 32px;
	max-height: 100%;
	pointer-events: none;
}
.sldv-stage > * { pointer-events: auto; }

.sldv-frame {
	position: relative;
	height: min(90vh, 960px);
	height: min(90dvh, 960px);
	aspect-ratio: 9 / 16;
	border-radius: 16px;
	overflow: hidden;
	background: #000 center / cover no-repeat;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
	transform: scale(.96);
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.sldv-viewer.is-open .sldv-frame { transform: none; }
.sldv-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
}
.sldv-frame iframe.out-up { animation: sldv-out-up .4s forwards cubic-bezier(.4,0,.2,1); }
.sldv-frame iframe.out-down { animation: sldv-out-down .4s forwards cubic-bezier(.4,0,.2,1); }
.sldv-frame iframe.in-up { animation: sldv-in-up .4s both cubic-bezier(.2,.8,.2,1); }
.sldv-frame iframe.in-down { animation: sldv-in-down .4s both cubic-bezier(.2,.8,.2,1); }
@keyframes sldv-out-up { to { transform: translateY(-100%); opacity: .4; } }
@keyframes sldv-out-down { to { transform: translateY(100%); opacity: .4; } }
@keyframes sldv-in-up { from { transform: translateY(100%); } }
@keyframes sldv-in-down { from { transform: translateY(-100%); } }
.sldv-frame.bump-up { animation: sldv-bump-up .35s; }
.sldv-frame.bump-down { animation: sldv-bump-down .35s; }
@keyframes sldv-bump-up { 40% { transform: translateY(-14px); } }
@keyframes sldv-bump-down { 40% { transform: translateY(14px); } }

.sldv-spin {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,.25);
	border-top-color: var(--sldv-accent);
	opacity: 0;
	transition: opacity .2s;
	animation: sldv-spin .8s linear infinite;
	z-index: 1;
}
.sldv-frame.is-loading .sldv-spin { opacity: 1; }
@keyframes sldv-spin { to { transform: rotate(360deg); } }

.sldv-info {
	width: 290px;
	padding-bottom: 6px;
}
.sldv-count {
	display: inline-block;
	font: 600 12px/1 system-ui, sans-serif;
	letter-spacing: .14em;
	color: var(--sldv-accent);
	margin-bottom: 12px;
}
.sldv-title {
	margin: 0 0 8px;
	font-family: var(--sldv-display);
	font-size: 30px;
	line-height: 1.05;
	font-weight: 700;
	color: var(--sldv-ink);
	text-wrap: balance;
}
.sldv-meta {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--sldv-mist);
}
.sldv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sldv-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 15px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.22);
	background: rgba(0,0,0,.25);
	color: var(--sldv-ink) !important;
	font: 600 14px/1 system-ui, sans-serif;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
	backdrop-filter: blur(8px);
}
.sldv-btn:hover { border-color: var(--sldv-accent); color: var(--sldv-accent) !important; }
.sldv-btn--cta {
	background: var(--sldv-cta);
	border-color: transparent;
	color: var(--sldv-cta-ink) !important;
}
.sldv-viewer[data-theme="xblu"] .sldv-btn--cta { background: var(--sldv-grad); }
.sldv-btn--cta:hover { filter: brightness(1.08); color: var(--sldv-cta-ink) !important; border-color: transparent; }
.sldv-hint { margin: 22px 0 0; font-size: 12.5px; color: var(--sldv-mist); opacity: .8; }

.sldv-x {
	position: absolute;
	top: 18px;
	right: 20px;
	z-index: 3;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: rgba(0,0,0,.35);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(8px);
}
.sldv-x:hover { background: rgba(0,0,0,.6); }

.sldv-nav {
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 2;
}
.sldv-nav button {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.25);
	background: rgba(0,0,0,.3);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: border-color .2s, background .2s, opacity .2s;
}
.sldv-nav .sldv-up { padding-top: 10px; }
.sldv-nav .sldv-down { padding-bottom: 10px; }
.sldv-nav button:hover:not(:disabled) { border-color: var(--sldv-accent); background: rgba(0,0,0,.5); }
.sldv-nav button:disabled { opacity: .25; cursor: default; }

.sldv-dots {
	position: absolute;
	left: 26px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
	max-height: 70vh;
	overflow: hidden;
}
.sldv-dots i {
	display: block;
	width: 4px;
	height: 14px;
	border-radius: 4px;
	background: rgba(255,255,255,.22);
	transition: height .3s, background .3s;
}
.sldv-dots i.on { height: 34px; background: var(--sldv-accent); }

.sldv-x:focus-visible, .sldv-nav button:focus-visible, .sldv-btn:focus-visible {
	outline: 2px solid var(--sldv-accent);
	outline-offset: 3px;
}

/* Phones: the film takes the screen. Vimeo puts its muted-autoplay
   "Unmute" badge at the top centre and its control bar at the bottom, so
   the details sit just above the control bar and the close button takes
   the top-left corner, leaving both of Vimeo's areas clear. */
@media (max-width: 760px) {
	.sldv-stage { display: block; width: 100%; height: 100%; }
	.sldv-frame {
		width: 100%;
		height: 100%;
		max-width: none;
		aspect-ratio: auto;
		border-radius: 0;
		box-shadow: none;
		transform: none;
	}
	/* This band is also a swipe area, since the video itself swallows touches. */
	.sldv-info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(58px + env(safe-area-inset-bottom));
		width: auto;
		padding: 48px 76px 10px 18px;
		background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6) 55%, rgba(0,0,0,0));
	}
	.sldv-title { font-size: 22px; }
	.sldv-meta { margin-bottom: 12px; font-size: 13px; }
	.sldv-count, .sldv-hint, .sldv-more, .sldv-dots { display: none; }
	.sldv-btn { padding: 9px 13px; font-size: 13px; }
	.sldv-nav { right: 12px; top: 42%; bottom: auto; transform: translateY(-50%); }
	.sldv-nav button { width: 46px; height: 46px; }
	.sldv-x { top: calc(12px + env(safe-area-inset-top)); left: 12px; right: auto; }
}

/* Short, wide screens (landscape laptops) */
@media (min-width: 761px) and (max-height: 640px) {
	.sldv-title { font-size: 24px; }
	.sldv-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sldv-viewer, .sldv-frame, .sldv-card__media, .sldv-card__media img { transition: none !important; }
	.sldv-frame iframe { animation: none !important; }
}