/*
 * ISC Video Story
 * LS Jordan Design. Defaults match the approved v5 home page video + story row.
 * Scoped under .isc-vs so theme and Site Kit styles cannot leak in.
 */

.isc-vs {
	--isc-vs-eyebrow: #3C6E73;
	--isc-vs-heading: #3d2144;
	--isc-vs-text: #6b5e72;
	--isc-vs-link: #3C6E73;
	--isc-vs-btn: #3d2144;
	--isc-vs-btn-hover: #28142e;
	--isc-vs-btn-text: #f9f3ec;
	--isc-vs-btn2: #3d2144;
	--isc-vs-frame: #3d2144;
	--isc-vs-play: #3C6E73;
	--isc-vs-play-icon: #ffffff;
	--isc-vs-play-size: 76px;
	--isc-vs-circle: #3C6E73;
	--isc-vs-circle-size: 280px;
	--isc-vs-circle-opacity: .14;
	--isc-vs-radius: 28px;
	--isc-vs-aspect: 16 / 9;
	--isc-vs-media: 52;
	--isc-vs-shade: .45;
	--isc-vs-justify: flex-start;
	--isc-vs-ease: cubic-bezier(.22, 1, .36, 1);
	box-sizing: border-box;
	padding: 32px 40px 64px;
	background: var(--isc-vs-section, transparent);
	font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}
.isc-vs *, .isc-vs *::before, .isc-vs *::after { box-sizing: border-box; }

.isc-vs .isc-vs__grid {
	display: grid;
	grid-template-columns: minmax(0, calc(var(--isc-vs-media) * 1%)) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	margin: 0 auto;
}
.isc-vs.isc-vs--media-right .isc-vs__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--isc-vs-media) * 1%));
}
.isc-vs.isc-vs--media-right .isc-vs__media { order: 2; }

/* ---------- Media ---------- */
.isc-vs .isc-vs__media { position: relative; min-width: 0; }
.isc-vs .isc-vs__circle {
	position: absolute; z-index: 0; pointer-events: none;
	width: var(--isc-vs-circle-size); height: var(--isc-vs-circle-size); border-radius: 50%;
	background: var(--isc-vs-circle); opacity: var(--isc-vs-circle-opacity);
}
.isc-vs .isc-vs__circle--tl { top: -30px; left: -24px; }
.isc-vs .isc-vs__circle--tr { top: -30px; right: -24px; }
.isc-vs .isc-vs__circle--bl { bottom: -30px; left: -24px; }
.isc-vs .isc-vs__circle--br { bottom: -30px; right: -24px; }
.isc-vs .isc-vs__circle.is-drift { animation: iscVsDrift 26s ease-in-out infinite alternate; }
@keyframes iscVsDrift { to { transform: translate3d(18px, 14px, 0) scale(1.06); } }

.isc-vs .isc-vs__frame {
	position: relative; z-index: 1; overflow: hidden;
	aspect-ratio: var(--isc-vs-aspect);
	border-radius: var(--isc-vs-radius);
	background: var(--isc-vs-frame);
	box-shadow: 0 18px 44px rgba(61, 33, 68, .18);
}
.isc-vs .isc-vs__iframe,
.isc-vs .isc-vs__video,
.isc-vs .isc-vs__img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.isc-vs .isc-vs__video, .isc-vs .isc-vs__img { object-fit: cover; }
.isc-vs .isc-vs__video { background: #000; }
.isc-vs .isc-vs__empty { position: absolute; inset: 0; display: grid; place-items: center; color: #f9f3ec; opacity: .75; font-size: 14px; border: 2px dashed rgba(249, 243, 236, .35); border-radius: inherit; }

/* Click-to-play cover (a real <button>) */
.isc-vs .isc-vs__cover {
	all: unset;
	position: absolute; inset: 0; cursor: pointer; display: block; overflow: hidden;
	border-radius: inherit;
}
.isc-vs .isc-vs__cover:focus-visible { outline: 3px solid var(--isc-vs-play); outline-offset: 3px; }
.isc-vs .isc-vs__poster {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	transition: transform 1.6s var(--isc-vs-ease);
}
.isc-vs .isc-vs__cover.has-zoom:is(:hover, :focus-visible) .isc-vs__poster { transform: scale(1.05); }
.isc-vs .isc-vs__shade {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20, 8, 22, calc(var(--isc-vs-shade) * 1.2)) 0%, rgba(20, 8, 22, calc(var(--isc-vs-shade) * .35)) 45%, rgba(20, 8, 22, var(--isc-vs-shade)) 100%);
}
.isc-vs .isc-vs__cover-title {
	position: absolute; left: 26px; right: 26px; top: 22px;
	color: #fff; font-family: "Bricolage Grotesque", "Public Sans", sans-serif; font-weight: 600;
	font-size: clamp(17px, 1.8vw, 22px); line-height: 1.25; text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
	white-space: normal; text-align: left;
}
.isc-vs .isc-vs__play {
	position: absolute; left: 50%; top: 50%;
	width: var(--isc-vs-play-size); height: var(--isc-vs-play-size); margin: calc(var(--isc-vs-play-size) / -2) 0 0 calc(var(--isc-vs-play-size) / -2);
	display: grid; place-items: center; border-radius: 50%;
	background: var(--isc-vs-play); color: var(--isc-vs-play-icon);
	box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .45);
	transition: transform .35s var(--isc-vs-ease), filter .25s ease;
}
.isc-vs .isc-vs__play svg { width: 42%; height: 42%; margin-left: 6%; }
.isc-vs .isc-vs__play::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--isc-vs-play) 55%, transparent);
	animation: iscVsRing 2.6s ease-out 1.5s infinite;
}
@keyframes iscVsRing { 70% { box-shadow: 0 0 0 18px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.isc-vs .isc-vs__cover:is(:hover, :focus-visible) .isc-vs__play { transform: scale(1.08); filter: brightness(1.05); }
.isc-vs .isc-vs__duration {
	position: absolute; right: 18px; bottom: 16px; padding: 5px 11px; border-radius: 999px;
	background: rgba(20, 8, 22, .7); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}

/* ---------- Content ---------- */
.isc-vs .isc-vs__content { min-width: 0; display: flex; justify-content: var(--isc-vs-justify); }
.isc-vs .isc-vs__content[style], .isc-vs .isc-vs__text { margin-inline: 0; }
.isc-vs .isc-vs__body { width: 100%; }
.isc-vs .isc-vs__text { max-width: 500px; }
.isc-vs .isc-vs__eyebrow {
	margin: 0; color: var(--isc-vs-eyebrow);
	font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5;
}
.isc-vs .isc-vs__heading {
	margin: 14px 0 0; padding: 0; color: var(--isc-vs-heading);
	font-family: "Bricolage Grotesque", "Public Sans", sans-serif; font-size: 36px; font-weight: 600;
	line-height: 1.14; letter-spacing: -.015em; text-transform: none; text-wrap: balance; overflow-wrap: break-word;
}
.isc-vs .isc-vs__text { margin: 16px 0 0; color: var(--isc-vs-text); font-size: 16px; line-height: 1.75; overflow-wrap: break-word; }
.isc-vs .isc-vs__text p { margin: 0 0 .9em; }
.isc-vs .isc-vs__text p:last-child { margin-bottom: 0; }
.isc-vs .isc-vs__text a { color: var(--isc-vs-link); text-decoration: underline; text-underline-offset: 3px; }
.isc-vs .isc-vs__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; justify-content: var(--isc-vs-justify); }
.isc-vs .isc-vs__btn {
	display: inline-flex; align-items: center; gap: .4em; margin: 0;
	white-space: normal; text-transform: none; letter-spacing: normal; text-decoration: none;
	background: var(--isc-vs-btn); color: var(--isc-vs-btn-text); border: 1.5px solid var(--isc-vs-btn);
	font-size: 15px; font-weight: 700; line-height: 1.25; padding: 14px 28px; border-radius: 999px;
	transition: background-color .25s ease, border-color .25s ease, transform .3s var(--isc-vs-ease);
}
.isc-vs .isc-vs__btn:is(:hover, :focus-visible) { background: var(--isc-vs-btn-hover); border-color: var(--isc-vs-btn-hover); color: var(--isc-vs-btn-text); transform: translateY(-2px); }
.isc-vs .isc-vs__btn:focus { color: var(--isc-vs-btn-text); }
.isc-vs .isc-vs__btn:focus-visible { outline: 3px solid var(--isc-vs-eyebrow); outline-offset: 3px; }
.isc-vs .isc-vs__arrow { display: inline-block; transition: transform .3s var(--isc-vs-ease); }
.isc-vs .isc-vs__btn:is(:hover, :focus-visible) .isc-vs__arrow { transform: translateX(4px); }
.isc-vs .isc-vs__btn--ghost { background: transparent; color: var(--isc-vs-btn2); border-color: var(--isc-vs-btn2); }
.isc-vs .isc-vs__btn--ghost:is(:hover, :focus-visible) { background: var(--isc-vs-btn2); border-color: var(--isc-vs-btn2); color: var(--isc-vs-btn-text); }
.isc-vs .isc-vs__btn--ghost:focus { color: var(--isc-vs-btn2); }

/* ---------- Fade in ---------- */
.isc-vs.isc-vs--enter.is-armed .isc-vs__media,
.isc-vs.isc-vs--enter.is-armed .isc-vs__content { opacity: 0; transform: translateY(18px); }
.isc-vs.isc-vs--enter.is-armed.is-in .isc-vs__media,
.isc-vs.isc-vs--enter.is-armed.is-in .isc-vs__content { opacity: 1; transform: none; transition: opacity .8s var(--isc-vs-ease), transform .8s var(--isc-vs-ease); }
.isc-vs.isc-vs--enter.is-armed.is-in .isc-vs__content { transition-delay: .12s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.isc-vs { padding: 32px 28px 56px; }
	.isc-vs .isc-vs__grid { gap: 40px; }
	.isc-vs .isc-vs__heading { font-size: 32px; }
}
@media (max-width: 767px) {
	.isc-vs { padding: 24px 18px 44px; }
	.isc-vs .isc-vs__grid { gap: 28px; }
	.isc-vs .isc-vs__heading { font-size: 28px; }
	.isc-vs .isc-vs__text { max-width: none; }
	.isc-vs .isc-vs__circle { --isc-vs-circle-size: 180px; }
	.isc-vs .isc-vs__cover-title { left: 18px; right: 18px; top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.isc-vs *, .isc-vs *::after { animation: none !important; transition: none !important; }
	.isc-vs.isc-vs--enter.is-armed .isc-vs__media, .isc-vs.isc-vs--enter.is-armed .isc-vs__content { opacity: 1; transform: none; }
}