/*
 * OnlyCat in action (template-examples.php): the dark clip feature, its
 * controls, the secondary button and the film dialog. Intro, narrative, CTA,
 * links and buttons are page.css's. Scoped under body.onlycat-examples.
 * Ported from the September 2026 concept.
 */

body.onlycat-examples .onlycat-examples__feature {
	padding-block: 0 85px;
}

body.onlycat-examples .onlycat-examples__carousel {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: stretch;
	background: var(--oc-night);
	color: var(--oc-white);
	border-radius: var(--oc-radius);
	overflow: hidden;
}

body.onlycat-examples .onlycat-examples__video {
	position: relative;
	display: flex;
	align-items: center;
	background: #080f14;
	min-width: 0;
}

body.onlycat-examples .onlycat-examples__video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #080f14;
}

body.onlycat-examples .onlycat-examples__error {
	position: absolute;
	inset: auto 16px 16px;
	padding: 16px;
	margin: 0;
	background: var(--oc-night);
	font-size: 14px;
	line-height: 1.5;
	border-radius: var(--oc-radius);
}

body.onlycat-examples .onlycat-examples__error[hidden] {
	display: none;
}

body.onlycat-examples .onlycat-examples__error a {
	color: #54bafa;
	text-decoration: underline;
}

body.onlycat-examples .onlycat-examples__story {
	padding: 42px 40px;
	min-width: 0;
}

body.onlycat-examples .onlycat-examples__caption {
	min-height: 235px;
}

body.onlycat-examples .onlycat-examples__caption .onlycat-page__eyebrow {
	color: #54bafa;
}

body.onlycat-examples .onlycat-examples__caption h2 {
	font-family: var(--oc-sans);
	font-size: 43px;
	line-height: 1.1;
	font-weight: 550;
	letter-spacing: -0.035em;
	margin: 0 0 25px;
	color: var(--oc-white);
}

body.onlycat-examples .onlycat-examples__caption p:not(.onlycat-page__eyebrow) {
	font-size: 16px;
	line-height: 1.6;
	color: #c3cdd3;
	margin: 0;
}

body.onlycat-examples .onlycat-examples__controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
}

body.onlycat-examples .onlycat-examples__controls[hidden] {
	display: none;
}

body.onlycat-examples .onlycat-examples__controls button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.31);
	border-radius: var(--oc-radius);
	color: var(--oc-white);
	background: transparent;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

body.onlycat-examples .onlycat-examples__controls button:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #54bafa;
}

body.onlycat-examples .onlycat-examples__controls button:focus-visible {
	outline: 3px solid #52bdf7;
	outline-offset: 3px;
}

body.onlycat-examples .onlycat-examples__toggle {
	width: auto !important;
	padding: 0 13px !important;
	margin-left: auto;
}

body.onlycat-examples .onlycat-examples__toggle .onlycat-icon--play,
body.onlycat-examples .onlycat-examples__carousel--playing .onlycat-examples__toggle .onlycat-icon--pause {
	display: none;
}

body.onlycat-examples .onlycat-examples__carousel--playing .onlycat-examples__toggle .onlycat-icon--play {
	display: none;
}

body.onlycat-examples .onlycat-examples__carousel:not(.onlycat-examples__carousel--playing) .onlycat-examples__toggle .onlycat-icon--play {
	display: block;
}

body.onlycat-examples .onlycat-examples__carousel--playing .onlycat-examples__toggle .onlycat-icon--pause {
	display: block;
}

body.onlycat-examples .onlycat-examples__count {
	font-size: 12px;
	color: #c3cdd3;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

body.onlycat-examples .onlycat-examples__source {
	font-size: 11px;
	line-height: 1.6;
	margin: 23px 0 0;
	color: #aebcc5;
}

body.onlycat-examples .onlycat-examples__note {
	display: block;
	margin-top: 4px;
}

body.onlycat-examples .onlycat-examples__list {
	margin: 30px 0 0;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--oc-ink-soft);
}

/* ---- What happens next: the secondary button ----------------------------- */

body.onlycat-examples .onlycat-examples__next-section h3 {
	font-family: var(--oc-sans);
	font-size: 25px;
	font-weight: 550;
	letter-spacing: -0.03em;
	margin: 0 0 16px;
	color: var(--oc-ink);
}

body.onlycat-examples .site-main .onlycat-button--secondary {
	background: transparent;
	color: var(--oc-blue) !important;
	border-color: #97bbd1;
}

body.onlycat-examples .site-main .onlycat-button--secondary:hover {
	background: var(--oc-blue-tint);
	border-color: var(--oc-blue);
}

/* ---- The product film dialog ------------------------------------------- */

body.onlycat-examples .onlycat-examples__dialog {
	border: 0;
	border-radius: var(--oc-radius);
	padding: 0;
	background: var(--oc-paper);
	color: var(--oc-ink);
	font-family: var(--oc-sans);
	width: min(980px, calc(100% - 40px));
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	box-shadow: 0 30px 100px rgba(0, 0, 0, 0.25);
}

body.onlycat-examples .onlycat-examples__dialog::backdrop {
	background: rgba(7, 20, 27, 0.78);
}

body.onlycat-examples .onlycat-examples__dialog-header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 26px;
	border-bottom: 1px solid var(--oc-line);
	background: var(--oc-paper);
}

body.onlycat-examples .onlycat-examples__dialog-header h2 {
	font-size: 23px;
	letter-spacing: -0.025em;
	line-height: 1.3;
	margin: 0;
}

body.onlycat-examples .onlycat-examples__dialog-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--oc-ink);
	cursor: pointer;
}

body.onlycat-examples .onlycat-examples__film-body {
	padding: 24px;
}

body.onlycat-examples .onlycat-examples__film-body video {
	display: block;
	max-height: 65dvh;
	width: 100%;
	background: var(--oc-ink);
}

body.onlycat-examples .onlycat-examples__film-body > p {
	font-size: 12px;
	margin: 16px 0 5px;
	color: var(--oc-ink-soft);
}

@media (max-width: 1000px) {
	body.onlycat-examples .onlycat-examples__carousel {
		grid-template-columns: 1fr 1fr;
	}

	body.onlycat-examples .onlycat-examples__story {
		padding: 30px 24px;
	}

	body.onlycat-examples .onlycat-examples__caption h2 {
		font-size: 35px;
	}
}

@media (max-width: 760px) {
	body.onlycat-examples .onlycat-examples__feature {
		padding-bottom: 55px;
	}

	body.onlycat-examples .onlycat-examples__carousel {
		grid-template-columns: 1fr;
	}

	body.onlycat-examples .onlycat-examples__caption {
		min-height: 195px;
	}

	body.onlycat-examples .onlycat-examples__controls {
		margin-top: 16px;
	}

	body.onlycat-examples .onlycat-examples__dialog {
		width: calc(100% - 20px);
		max-height: calc(100dvh - 24px);
	}

	body.onlycat-examples .onlycat-examples__dialog-header {
		padding: 12px 17px;
		gap: 10px;
	}

	body.onlycat-examples .onlycat-examples__dialog-header h2 {
		font-size: 20px;
	}

	body.onlycat-examples .onlycat-examples__film-body {
		padding: 14px;
	}
}