/* HF Videoer 1.3.1 */
.hfv,
.hfv-dialog,
.hfv-enkelt {
	--hfv-bla: #4d6a78;
	--hfv-bla-mork: #3b5360;
	--hfv-kant: #e1e6e9;
	--hfv-tekst: #1f2a30;
	--hfv-graa: #56646c;
}
.hfv {
	margin: 0 0 40px;
}

/* Filterknapper */
.hfv-filtre {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
}
.hfv .hfv-filter {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 0;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid var(--hfv-kant);
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	color: var(--hfv-tekst);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.hfv .hfv-filter span {
	font-weight: 500;
	opacity: .6;
}
.hfv .hfv-filter:hover {
	border-color: var(--hfv-bla);
	background: #fff;
	color: var(--hfv-tekst);
}
.hfv .hfv-filter.is-active,
.hfv .hfv-filter.is-active:hover {
	border-color: var(--hfv-bla);
	background: var(--hfv-bla);
	color: #fff;
}
.hfv .hfv-filter.is-active span {
	opacity: .8;
}

/* Grupper og kort */
.hfv-gruppe {
	margin: 0 0 44px;
}
.hfv-gruppe[hidden] {
	display: none;
}
.hfv .hfv-gruppe-titel {
	margin: 0 0 18px;
	font-size: 24px;
	line-height: 1.25;
}
.hfv .hfv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hfv .hfv-kort {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--hfv-kant);
	border-radius: 10px;
	background: #fff;
	transition: box-shadow .2s;
}
.hfv .hfv-kort:hover {
	box-shadow: 0 8px 24px rgba(31, 42, 48, .08);
}
.hfv .hfv-kort.is-markeret {
	box-shadow: 0 0 0 3px var(--hfv-bla);
}
.hfv .hfv-kort::before {
	display: none;
}
.hfv-play {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #0d1418;
	color: inherit;
	text-decoration: none;
}
.hfv-play img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.hfv-play:hover img {
	transform: scale(1.03);
}
.hfv-tid {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 13px 8px 11px;
	border-radius: 999px;
	background: rgba(77, 106, 120, .95);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	transition: background-color .2s;
}
.hfv-tid::before {
	content: "";
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
}
.hfv-play:hover .hfv-tid {
	background: var(--hfv-bla-mork);
}
.hfv-tekst {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
}
.hfv .hfv-titel {
	margin: 0;
	font-size: 17px;
	line-height: 1.3;
}
.hfv .hfv-tekst p {
	margin: 0;
	color: var(--hfv-graa);
	font-size: 14px;
	line-height: 1.5;
}
.hfv .hfv-link {
	margin-top: auto;
	padding-top: 4px;
	color: var(--hfv-bla);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.hfv .hfv-link:hover {
	color: var(--hfv-bla-mork);
	text-decoration: underline;
}
.hfv .hfv-filter:focus-visible,
.hfv-play:focus-visible,
.hfv .hfv-link:focus-visible,
.hfv-dialog .hfv-link:focus-visible,
.hfv-luk:focus-visible {
	outline: 3px solid var(--hfv-bla);
	outline-offset: 2px;
}

/* Afspilleren */
.hfv-dialog {
	width: min(1100px, 94vw);
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: #fff;
}
.hfv-dialog::backdrop {
	background: rgba(9, 14, 17, .88);
}
.hfv-dialog-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 10px;
}
.hfv-dialog .hfv-dialog-titel {
	margin: 0;
	color: #fff;
	font-size: 18px;
	line-height: 1.3;
}
.hfv-dialog .hfv-luk {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 42px;
	height: 42px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	box-shadow: none;
	color: #fff;
	font-size: 26px;
	line-height: 42px;
	text-align: center;
	cursor: pointer;
}
.hfv-dialog .hfv-luk:hover {
	background: rgba(255, 255, 255, .28);
	color: #fff;
}
.hfv-dialog video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	background: #000;
}
.hfv-dialog-bund {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}
.hfv-dialog .hfv-link {
	color: #fff;
}
.hfv-dialog .hfv-link:hover {
	color: #fff;
}

/* Bannerfilmen i Woodmarts sidetitel – lavt og bredt banner (Kenni 05-10-2026: "fedt som small", men brug hele bredden).
   Tre klasser, så reglen vinder over Woodmarts title-size-padding. */
.hfv-banner-side .wd-page-title.hfv-banner,
.wd-page-title.hfv-banner.hfv-haand {
	padding-top: 16px;
	padding-bottom: 16px;
}
.hfv-banner .wd-page-title-bg {
	overflow: hidden;
}
.hfv-banner-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hfv-banner .wd-page-title-bg::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(90deg, rgba(24, 35, 41, .82) 0%, rgba(24, 35, 41, .55) 45%, rgba(24, 35, 41, .25) 100%);
}
.hfv-banner h1 {
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.hfv-banner {
	--hfv-lime: #a8c256;
}
.hfv-banner-video {
	transition: opacity 1.6s ease;
}
.hfv-banner-video.hfv-skjult {
	opacity: 0;
}

/* Håndtegnet intro – erstatter Woodmarts titel (H1 og brødkrummer bevares for skærmlæsere og Google) */
.hfv-banner-side .wd-page-title .container > * {
	opacity: 0;
	animation: hfv-vis 0s linear 2.5s forwards; /* sikkerhedsnet, hvis introen ikke kan køre */
}
@keyframes hfv-vis {
	to {
		opacity: 1;
	}
}
.wd-page-title.hfv-haand .container > * {
	opacity: 1;
	animation: none;
}
.wd-page-title.hfv-haand .container > :not(.hfv-intro-wrap) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* Woodmarts titel-container er en flex-kolonne med align-items: start. Uden fuld bredde krymper introen
   til browserens standard (300 px) – fejlen Kenni så på staging 05-10-2026. */
.hfv-intro-wrap {
	position: relative;
	z-index: 2;
	align-self: stretch;
	width: 100%;
}
.hfv-intro {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.hfv-intro .hfv-streg {
	fill: none;
	stroke: rgba(255, 255, 255, .92);
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hfv-intro .hfv-streg.lime {
	stroke: var(--hfv-lime);
}
.hfv-intro .hfv-streg.svag {
	stroke: rgba(255, 255, 255, .45);
}
.hfv-intro .hfv-tekst.hvid {
	fill: #fff;
}
.hfv-intro .hfv-tekst.lys {
	fill: rgba(255, 255, 255, .9);
}
.hfv-intro .hfv-tekst.lime {
	fill: var(--hfv-lime);
}
.hfv-intro .hfv-titelgruppe {
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35));
}
.hfv-intro .hfv-skitse {
	transition: opacity 1.2s ease .3s;
}
.hfv-afslor .hfv-intro .hfv-skitse {
	opacity: 0;
}
.hfv-intro .hfv-pen {
	transition: opacity .5s ease;
}

/* Skitsen bliver til virkelighed: filmen afsløres med en lys wipe fra venstre */
.hfv-haand .hfv-banner-video {
	transition: none;
	-webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
	mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
	-webkit-mask-size: 260% 100%;
	mask-size: 260% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
}
.hfv-haand .hfv-banner-video.hfv-skjult {
	opacity: 0;
}
.hfv-afslor .hfv-banner-video {
	animation: hfv-wipe 1.8s ease-in-out forwards;
}
.hfv-afslor-slut .hfv-banner-video {
	-webkit-mask-image: none;
	mask-image: none;
	animation: none;
}
@keyframes hfv-wipe {
	to {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}
.hfv-glod {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -30%;
	z-index: 1;
	width: 30%;
	background: linear-gradient(90deg, transparent, rgba(168, 194, 86, .3) 50%, transparent);
	opacity: 0;
	pointer-events: none;
}
.hfv-afslor .hfv-glod {
	animation: hfv-glod 1.8s ease-in-out forwards;
}
@keyframes hfv-glod {
	0% {
		left: -30%;
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

/* banner="3d" (data-banner-3d): skitsen bliver til hegnet i 3D foran en blå scene i filmenes stil */
.hfv-scene {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
		radial-gradient(120% 140% at 72% 30%, #5d7d8b 0%, #4d6a78 48%, #3b5460 100%);
	opacity: 0;
	transition: opacity 1.6s ease;
}
.hfv-afslor .hfv-scene {
	opacity: 1;
}
.hfv-3d-banner .wd-page-title-bg::after {
	background: linear-gradient(90deg, rgba(24, 35, 41, .72) 0%, rgba(24, 35, 41, .38) 30%, rgba(24, 35, 41, 0) 52%);
}
.hfv-3d-banner .hfv-intro .hfv-skitse {
	transition: opacity 1.4s ease .5s;
}

/* Én film, fx på en produktside */
.hfv-enkelt {
	margin: 0 0 24px;
}
.hfv-enkelt video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	background: #000;
}
.hfv-enkelt figcaption {
	margin-top: 8px;
	color: var(--hfv-graa);
	font-size: 14px;
}

.hfv-mangler {
	margin: 0 0 20px;
	padding: 10px 14px;
	border: 1px solid #f0c27b;
	border-radius: 6px;
	background: #fff4e5;
	font-size: 14px;
}

@media (max-width: 767px) {
	.hfv-banner-side .wd-page-title.hfv-banner,
	.wd-page-title.hfv-banner.hfv-haand {
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.hfv-intro {
		max-width: 480px;
	}
}

@media (max-width: 600px) {
	.hfv .hfv-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.hfv .hfv-gruppe-titel {
		font-size: 21px;
	}
	.hfv-filtre {
		flex-wrap: nowrap;
		margin: 0 -15px 24px;
		padding: 0 15px 4px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.hfv-filtre::-webkit-scrollbar {
		display: none;
	}
	.hfv .hfv-filter {
		flex: none;
	}
	.hfv-dialog {
		width: 100vw;
	}
	.hfv-dialog video {
		border-radius: 0;
	}
	.hfv-dialog-top,
	.hfv-dialog-bund {
		padding: 0 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hfv-play img,
	.hfv-tid,
	.hfv .hfv-kort {
		transition: none;
	}
	.hfv-play:hover img {
		transform: none;
	}
}

/* 1.5.0: produktsider – knappen under kortbeskrivelsen og fanen Montagefilm ([hf_produktfilm]) */
.hfv-knap-wrap {
	margin: 14px 0 0;
}
.hfv-knap-wrap a.hfv-knap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid #4d6a78;
	border-radius: 999px;
	background: #fff;
	color: #4d6a78;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}
.hfv-knap-wrap a.hfv-knap:hover,
.hfv-knap-wrap a.hfv-knap:focus-visible {
	background: #4d6a78;
	color: #fff;
}
.hfv-knap-wrap a.hfv-knap:focus-visible {
	outline: 2px solid #4d6a78;
	outline-offset: 2px;
}
.hfv-knap-wrap a.hfv-knap svg {
	flex: none;
}
.hfv-knap-wrap .hfv-knap-tid {
	font-weight: 500;
	opacity: .75;
}
.hfv.hfv-produkt {
	margin: 0;
}
.hfv-produkt .hfv-produkt-intro {
	margin: 0 0 20px;
	color: var(--hfv-graa);
}
.hfv-produkt .hfv-produkt-alle {
	margin: 24px 0 0;
}