/* Cinematisk Cases — forslag B. Alt er afgrænset til .cine-cases, så temaet ikke rammes. */

.cine-cases {
	--cine-ink: #141413;
	--cine-muted: #86847b;
	--cine-card: #e3e2dd;
	--cine-pill: #161615;
	--cine-pill-ink: #f1f0ec;
	--cine-pill-muted: #a3a198;
	--cine-gap-x: 16px;
	--cine-gap-y: 38px;
	position: relative;
	color: var(--cine-ink);
	font-family: inherit;
}

.cine-cases *,
.cine-cases *::before,
.cine-cases *::after {
	box-sizing: border-box;
}

.cine-cases [hidden] {
	display: none !important;
}

.cine-cases img,
.cine-cases video {
	display: block;
	max-width: none;
}

.cine-cases a {
	color: inherit;
	text-decoration: none;
}

.cine-cases a:focus-visible,
.cine-cases button:focus-visible {
	outline: 2px solid var(--cine-ink);
	outline-offset: 3px;
}

/* ---------- Ramme om billede og film ---------- */

.cine-cases .cine-cases__frame {
	position: absolute;
	inset: 0;
	display: block;
	transform: translateZ(0) scale(1);
	transform-origin: 50% 50%;
	backface-visibility: hidden;
}

.cine-cases .cine-cases__frame .cine-cases__img,
.cine-cases .cine-cases__frame .cine-cases__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cine-cases .cine-cases__video {
	opacity: 0;
}

.cine-cases .cine-cases__video.is-poster,
.cine-cases .is-playing .cine-cases__video {
	opacity: 1;
}

/* ---------- Udvalgt case ---------- */

.cine-cases__hero {
	position: relative;
	display: block;
	aspect-ratio: 2.39 / 1;
	overflow: hidden;
	border-radius: 6px;
	background: var(--cine-card);
	isolation: isolate;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.cine-cases .cine-cases__hero {
	color: #fff;
}

.cine-cases__hero-media {
	position: absolute;
	inset: 0;
}

.cine-cases__hero-media .cine-cases__img,
.cine-cases__hero-media .cine-cases__video {
	object-position: center 45%;
}

.cine-cases__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 9, 0.62), rgba(10, 10, 9, 0) 55%);
	pointer-events: none;
}

.cine-cases__ratio {
	position: absolute;
	z-index: 1;
	top: 16px;
	right: 18px;
	font-size: 10px;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
}

.cine-cases__hero-cap {
	position: absolute;
	z-index: 1;
	left: 26px;
	right: 26px;
	bottom: 24px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
}

.cine-cases__eyebrow {
	display: block;
	margin-bottom: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.85;
}

.cine-cases__hero-title {
	display: block;
	font-size: clamp(30px, 5.4vw, 78px);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.9;
	text-wrap: balance;
}

.cine-cases__go {
	flex: none;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--cine-pill-ink);
	color: var(--cine-ink);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---------- Filter ---------- */

.cine-cases__bar {
	position: sticky;
	top: var(--cine-sticky-top, 16px);
	z-index: 20;
	display: flex;
	justify-content: center;
	padding: 30px 0 22px;
	pointer-events: none;
}

.cine-cases:not(.is-ready) .cine-cases__bar {
	display: none;
}

.cine-cases__seg {
	display: flex;
	align-items: center;
	gap: 2px;
	max-width: 100%;
	padding: 4px;
	overflow-x: auto;
	border-radius: 999px;
	background: var(--cine-pill);
	box-shadow: 0 10px 30px rgba(20, 20, 19, 0.2);
	pointer-events: auto;
	scrollbar-width: none;
}

.cine-cases__seg::-webkit-scrollbar {
	display: none;
}

/* Temaer som Hello Elementor styler knapper globalt; nulstil det hele her. */
.cine-cases button.cine-cases__btn,
.cine-cases button.cine-cases__btn:hover,
.cine-cases button.cine-cases__btn:focus {
	appearance: none;
	flex: none;
	margin: 0;
	padding: 9px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--cine-pill-muted);
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.cine-cases button.cine-cases__btn:hover {
	color: var(--cine-pill-ink);
}

.cine-cases button.cine-cases__btn[aria-pressed="true"] {
	background: var(--cine-pill-ink);
	color: var(--cine-ink);
}

.cine-cases button.cine-cases__btn:focus-visible {
	outline: 2px solid var(--cine-pill-ink);
	outline-offset: -2px;
}

.cine-cases__divider {
	flex: none;
	width: 1px;
	height: 18px;
	margin: 0 6px;
	background: #3a3935;
}

.cine-cases__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Gitter ---------- */

.cine-cases .cine-cases__grid {
	--cine-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--cine-cols), minmax(0, 1fr));
	grid-auto-flow: row dense;
	gap: var(--cine-gap-y) var(--cine-gap-x);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cine-cases:not(:has(.cine-cases__bar)) .cine-cases__grid {
	margin-top: 30px;
}

.cine-cases .cine-cases__item {
	display: flex;
	margin: 0;
	padding: 0;
}

.cine-cases__item.is-wide {
	grid-column: span 2;
}

.cine-cases__card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.cine-cases__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 4px;
	background: var(--cine-card);
	isolation: isolate;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.cine-cases__item.is-wide .cine-cases__media {
	flex: 1;
	aspect-ratio: auto;
	min-height: 220px;
}

.cine-cases__tag {
	position: absolute;
	z-index: 1;
	top: 12px;
	left: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(241, 240, 236, 0.92);
	color: var(--cine-ink);
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cine-cases__cap {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.cine-cases__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.cine-cases__meta {
	flex: none;
	color: var(--cine-muted);
	font-size: 12px;
	line-height: 1.3;
}

.cine-cases__empty {
	margin: 0;
	padding: 40px 0;
	color: var(--cine-muted);
	font-size: 15px;
	text-align: center;
}

.cine-cases-notice {
	padding: 16px;
	border: 1px dashed #d8d7d2;
	color: #86847b;
}

/* ---------- Bevægelse ----------
 * Siden har en global regel ".elementor * { transition: none !important }".
 * Reglerne her er mere specifikke, så kun case-oversigten får sine overgange tilbage.
 */

.cine-cases .cine-cases__frame {
	transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.cine-cases .cine-cases__video {
	transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cine-cases .cine-cases__go {
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.cine-cases button.cine-cases__btn {
	transition: background-color 250ms ease, color 250ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
	.cine-cases .cine-cases__card:hover .cine-cases__frame,
	.cine-cases .cine-cases__card:focus-visible .cine-cases__frame {
		transform: translateZ(0) scale(1.04);
	}

	.cine-cases .cine-cases__hero:hover .cine-cases__frame,
	.cine-cases .cine-cases__hero:focus-visible .cine-cases__frame {
		transform: translateZ(0) scale(1.02);
	}

	.cine-cases .cine-cases__hero:hover .cine-cases__go {
		transform: translateX(-4px);
	}
}

/* ---------- Skærmstørrelser ---------- */

@media (max-width: 1024px) {
	.cine-cases .cine-cases__grid {
		--cine-cols: 2;
	}
}

@media (max-width: 640px) {
	.cine-cases {
		--cine-gap-x: 10px;
		--cine-gap-y: 26px;
	}

	.cine-cases__hero {
		aspect-ratio: 4 / 5;
	}

	.cine-cases__ratio {
		display: none;
	}

	.cine-cases__go {
		display: none;
	}

	.cine-cases__hero-cap {
		left: 18px;
		right: 18px;
		bottom: 18px;
	}

	.cine-cases__cap {
		flex-direction: column;
		gap: 2px;
	}

	.cine-cases__title {
		font-size: 14px;
	}

	.cine-cases__bar {
		padding: 20px 0 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cine-cases.cine-cases .cine-cases__frame,
	.cine-cases.cine-cases .cine-cases__go {
		transform: none !important;
		transition: none !important;
	}
}