/**
 * BenjaBuilder — Portfolio, frontend.
 *
 * Bygget med CSS Grid + Flexbox og relative enheder (clamp/vw/%), så
 * layoutet flyder korrekt fra mobil til retina-desktop uden faste bredder.
 *
 * Breakpoints:
 *   <= 560px   mobil          -> 1 kolonne
 *   <= 980px   tablet         -> 2 kolonner
 *   >  980px   laptop/desktop -> --bb-pf-columns (standard 3)
 *
 * Font: Inter, selv-hostet (4 statiske vægte som woff2) i stedet for hentet
 * fra Google Fonts CDN — undgår at browseren sender besøgendes IP til en
 * ekstern tredjepart (GDPR) og sparer et ekstra DNS-opslag.
 */

@font-face {
	font-family: 'BB Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
	font-family: 'BB Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500.woff2') format('woff2');
}

@font-face {
	font-family: 'BB Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600.woff2') format('woff2');
}

@font-face {
	font-family: 'BB Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-700.woff2') format('woff2');
}

.bb-pf-wrap,
.bb-pf-grid,
.bb-pf-modal {
	--bb-pf-columns: 3;
	--bb-pf-gap: clamp(0.75rem, 2vw, 1.5rem);
	--bb-pf-radius: clamp(0.75rem, 1.6vw, 1.375rem);
	/* Hover-filteret over billedet: næsten sort, 78 % dækkende (var 62 %). */
	--bb-pf-overlay: rgba(6, 6, 8, 0.78);
	/* Popup: sort baggrund, hvid tekst. --bb-pf-modal-accent er farven på
	   link-knappen inde i popup'en — hvid med mørk tekst, så den stadig
	   skiller sig ud fra den sorte baggrund. */
	--bb-pf-modal-bg: #0c0c0e;
	--bb-pf-modal-fg: #ffffff;
	--bb-pf-modal-accent: #ffffff;
	--bb-pf-modal-accent-fg: #0c0c0e;
	--bb-pf-accent: #16181d;
	--bb-pf-ease: cubic-bezier(0.22, 0.75, 0.28, 1);
	--bb-pf-font: 'BB Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	/* Delt med .bb-pf-modal__dialog OG .bb-pf-modal__content, så de altid
	   passer sammen — se forklaringen ved .bb-pf-modal__content. */
	--bb-pf-modal-pad: clamp(1.25rem, 4vw, 3rem);
	font-family: var(--bb-pf-font);
}

/* ==================================================================
 * Grid
 * ================================================================== */

.bb-pf-grid {
	display: grid;
	grid-template-columns: repeat(var(--bb-pf-columns), minmax(0, 1fr));
	gap: var(--bb-pf-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 980px) {
	.bb-pf-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.bb-pf-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bb-pf-card {
	margin: 0;
	padding: 0;
	min-width: 0;
}

/*
 * Skjulte kort ("Se mere" har ikke folded dem ud endnu). !important fordi
 * temaer ofte sætter "article { display: block }" og dermed ville vinde
 * over browserens indbyggede [hidden]-regel.
 */
.bb-pf-card[hidden],
.bb-pf-more-wrap[hidden] {
	display: none !important;
}

/* Nyligt foldede kort toner blidt ind. "backwards" (ikke "both") så der
   ikke hænger en transform på kortet bagefter, når animationen er slut. */
.bb-pf-card.is-revealed {
	animation: bb-pf-reveal 0.5s var(--bb-pf-ease) backwards;
}

@keyframes bb-pf-reveal {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==================================================================
 * "Se mere" — ren tekstknap under grid'et
 * ================================================================== */

.bb-pf-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.bb-pf-more {
	--bb-pf-more-color: #8197ac;
	/* Lysere nuance af --bb-pf-more-color (blandet ~35% mod hvid) — samme
	   princip andre steder i pluginet bruger til en hover-tilstand, uden at
	   skulle definere en helt ny, urelateret farve. */
	--bb-pf-more-hover: rgba(173, 187, 201, 0.89);

	position: relative;
	-webkit-appearance: none;
	appearance: none;
	/* Ekstra luft forneden — det er her lydbølgen tegnes ved hover. */
	padding: 0.5rem 0.25rem 1.6rem;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--bb-pf-more-color);
	font-family: var(--bb-pf-font);
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.25s ease;
}

.bb-pf-more:hover {
	background: none;
	color: var(--bb-pf-more-hover);
}

/*
 * Lydbølgen under teksten — en audio-waveform som i Pro Tools/en WAV-fil:
 * 30 afrundede lodrette streger af forskellig højde, spejlet omkring en
 * midterlinje. Billedet (en SVG, 90 × 16) bruges som MASKE, så
 * background-color: currentColor lader bølgen følge tekstfarven — også når
 * den skifter ved hover.
 *
 * Bølgen er ÉN hel figur, ikke et gentaget mønster: den er spejlvendt
 * (sidste streg = første, næstsidste = anden osv.), så slutningen altid
 * matcher starten, og mask-size: 100% 100% strækker den over præcis
 * tekstens bredde. Den bliver dermed aldrig klippet midt i en streg — det
 * skete med det tidligere gentagne mønster, når tekstens bredde ikke
 * gik op i mønsterets. (SVG'en har preserveAspectRatio='none', ellers
 * ville browseren beholde forholdet og efterlade tomrum i siderne.)
 *
 * Skjult som standard (clip-path klipper hele bølgen væk fra højre) og
 * "tegnes" fra venstre mod højre, når clip-path'en åbnes ved hover.
 */
.bb-pf-more::after {
	content: '';
	position: absolute;
	left: 0.25rem;
	right: 0.25rem;
	bottom: 0.2rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 16' preserveAspectRatio='none'%3E%3Cpath d='M1.5 7.5V8.5M4.5 6.5V9.5M7.5 5V11M10.5 6V10M13.5 3.5V12.5M16.5 2V14M19.5 4.5V11.5M22.5 7V9M25.5 5.5V10.5M28.5 2.5V13.5M31.5 4V12M34.5 6V10M37.5 4.5V11.5M40.5 2.5V13.5M43.5 1.5V14.5M46.5 1.5V14.5M49.5 2.5V13.5M52.5 4.5V11.5M55.5 6V10M58.5 4V12M61.5 2.5V13.5M64.5 5.5V10.5M67.5 7V9M70.5 4.5V11.5M73.5 2V14M76.5 3.5V12.5M79.5 6V10M82.5 5V11M85.5 6.5V9.5M88.5 7.5V8.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 16' preserveAspectRatio='none'%3E%3Cpath d='M1.5 7.5V8.5M4.5 6.5V9.5M7.5 5V11M10.5 6V10M13.5 3.5V12.5M16.5 2V14M19.5 4.5V11.5M22.5 7V9M25.5 5.5V10.5M28.5 2.5V13.5M31.5 4V12M34.5 6V10M37.5 4.5V11.5M40.5 2.5V13.5M43.5 1.5V14.5M46.5 1.5V14.5M49.5 2.5V13.5M52.5 4.5V11.5M55.5 6V10M58.5 4V12M61.5 2.5V13.5M64.5 5.5V10.5M67.5 7V9M70.5 4.5V11.5M73.5 2V14M76.5 3.5V12.5M79.5 6V10M82.5 5V11M85.5 6.5V9.5M88.5 7.5V8.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center;
	mask-position: center;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.8s var(--bb-pf-ease);
	pointer-events: none;
}

.bb-pf-more:hover::after {
	clip-path: inset(0 0 0 0);
}

/* Tastaturbrugere får en almindelig fokusring i stedet (bølgen er kun til hover). */
.bb-pf-more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 4px;
}

/* Klikflade — nulstiller browserens knap-styling. */
.bb-pf-card__trigger {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--bb-pf-radius);
}

.bb-pf-card__trigger--static {
	cursor: default;
}

.bb-pf-card__trigger:focus-visible {
	outline: 2px solid var(--bb-pf-accent);
	outline-offset: 3px;
}

/* Kvadratisk billedflade med blødt rundede hjørner. */
.bb-pf-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--bb-pf-radius);
	/* Transparent i stedet for en pladsholderfarve — ellers kan den lyse
	   farve skinne igennem i selve afrundingen pga. subpixel-afrunding
	   i browserens clip, og ligne en hvid kant om billedet. */
	background: transparent;
	isolation: isolate;
}

/*
 * Selektoren er bevidst skrevet med to niveauer (.bb-pf-card__media img)
 * OVENI klasse-selektoren, og suppleret med !important: mange temaer sætter
 * regler som ".entry-content img { height: auto; max-width: 100%; }", som
 * har højere specificitet end en enkelt klasse og ellers ville overskrive
 * vores height/object-fit og få billedet til ikke at fylde den kvadratiske
 * boks (kun bredden ville følge, højden ville følge billedets eget forhold).
 */
.bb-pf-card__media img,
.bb-pf-card__image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	/* Ekstra sikkerhed mod en synlig kant i hjørnerne: runder billedet
	   selv, oveni at den omsluttende boks allerede klipper med overflow. */
	border-radius: inherit;
	transform: scale(1);
	transition: transform 0.55s var(--bb-pf-ease);
}

.bb-pf-card__trigger:hover .bb-pf-card__image,
.bb-pf-card__trigger:focus-visible .bb-pf-card__image {
	transform: scale(1.05);
}

/* Hover-overlay ---------------------------------------------------- */

.bb-pf-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	padding: clamp(0.75rem, 3%, 1.75rem);
	text-align: center;
	background: var(--bb-pf-overlay);
	color: #fff;
	opacity: 0;
	transition: opacity 0.35s var(--bb-pf-ease);
}

.bb-pf-card__trigger:hover .bb-pf-card__overlay,
.bb-pf-card__trigger:focus-visible .bb-pf-card__overlay {
	opacity: 1;
}

.bb-pf-card__hover,
.bb-pf-card__subtitle,
.bb-pf-card__subtitle-italic {
	display: block;
	max-width: 100%;
	transform: translateY(8px);
	transition: transform 0.35s var(--bb-pf-ease);
}

.bb-pf-card__trigger:hover .bb-pf-card__hover,
.bb-pf-card__trigger:hover .bb-pf-card__subtitle,
.bb-pf-card__trigger:hover .bb-pf-card__subtitle-italic,
.bb-pf-card__trigger:focus-visible .bb-pf-card__hover,
.bb-pf-card__trigger:focus-visible .bb-pf-card__subtitle,
.bb-pf-card__trigger:focus-visible .bb-pf-card__subtitle-italic {
	transform: translateY(0);
}

.bb-pf-card__hover {
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
}

.bb-pf-card__subtitle {
	font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
	opacity: 0.85;
	line-height: 1.4;
}

/* Flere ting adskilt med komma i undertitlen står under hinanden i hover. */
.bb-pf-card__subtitle-line {
	display: block;
}

/* Kursiv undertitel: kursiv, 2 px mindre end titlen (hover-teksten,
   .bb-pf-card__hover) og i fuld tekstfarve (ikke dæmpet som undertitlen). */
.bb-pf-card__subtitle-italic {
	font-size: calc(clamp(1.125rem, 2vw, 1.5rem) - 2px);
	font-style: italic;
	opacity: 1;
	line-height: 1.4;
	/* Tættere på titlen (negativ margen æder af rækkens 0.35em-mellemrum) og
	   mere luft ned til undertitlen (positiv margen lægger sig oveni). Netto
	   ca. 2 px over og ca. 17 px under ved normal skriftstørrelse. */
	margin-top: -0.2rem;
	margin-bottom: 0.7rem;
}

/*
 * Touch-enheder har ingen hover-tilstand. Vis derfor en dæmpet overlay
 * permanent, så teksten stadig kan læses på mobil og tablet.
 */
@media (hover: none) {
	.bb-pf-card__overlay {
		opacity: 1;
		background: linear-gradient(to top, rgba(17, 17, 19, 0.75) 0%, rgba(17, 17, 19, 0) 62%);
		justify-content: flex-end;
	}

	.bb-pf-card__hover,
	.bb-pf-card__subtitle {
		transform: none;
	}
}

/* ==================================================================
 * Popup / lightbox
 * ================================================================== */

body.bb-pf-modal-open {
	overflow: hidden;
}

.bb-pf-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 4vw, 3rem);
	box-sizing: border-box;
}

.bb-pf-modal[hidden] {
	display: none;
}

.bb-pf-modal *,
.bb-pf-modal *::before,
.bb-pf-modal *::after {
	box-sizing: border-box;
}

/*
 * Mørk baggrund der fader ind. Sløringen (backdrop-filter) er BEVIDST sat
 * som en fast værdi og animeres IKKE — at animere selve blur-radius er en
 * af de tungeste ting man kan bede en browser om, fordi den skal
 * genberegne den slørede baggrund forfra i hvert eneste frame ved en
 * skiftende radius. Kombineret med boksens transform/opacity-animation
 * samtidig gav det hak. Kun opacity animeres her (billigt for browseren,
 * kører på GPU'ens compositor) — sløringen popper simpelthen ind/ud
 * sammen med opaciteten, hvilket ikke er til at se i praksis fordi det
 * sker bag den samtidige, langsommere fade.
 */
.bb-pf-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 12, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.38s ease;
	will-change: opacity;
	cursor: pointer;
}

.bb-pf-modal.is-open .bb-pf-modal__backdrop {
	opacity: 1;
	transition-duration: 0.6s;
}

/*
 * Boksens transform sættes normalt af JS (frontend.js): ved åbning
 * regner den ud hvor det klikkede billede sad og hvor stort det var, og
 * lader boksen bogstaveligt vokse ud fra dét punkt til sin fulde,
 * centrerede størrelse ("FLIP"-teknik) — den langsomme, "eksklusive"
 * entré nedenfor (0.7s, expo-out: hurtig start, meget blød opbremsning,
 * ingen overshoot) er hvad JS'ens transition rent faktisk animerer med.
 *
 * transform/opacity herunder fungerer som: (a) fallback hvis JS af en
 * eller anden grund ikke kan måle det klikkede element (fx slået fra af
 * prefers-reduced-motion), og (b) hvad boksen altid animerer TIL ved
 * LUKNING — der "reverse-FLIP'er" vi bevidst ikke tilbage til billedet,
 * men lader den bare fade+skalere blidt ned midt på skærmen, hurtigere
 * end den åbnede (0.32s). Asymmetrien er bevidst: varigheden defineres i
 * .is-open ved ÅBNING (mere specifik regel vinder), og falder tilbage til
 * basis-reglens hurtigere varighed ved LUKNING (når .is-open fjernes).
 *
 * Scrollet ligger IKKE på denne boks, men på .bb-pf-modal__content
 * indeni — browsere clipper aldrig en scrollbar efter border-radius,
 * så en scrollbar direkte på dette element ville skære lige igennem
 * det afrundede hjørne. Ved at scrolle i et indre element i stedet,
 * lander scrollbaren inde i paddingen, væk fra hjørnerne, og denne
 * boks kan bruge et almindeligt overflow:hidden til at klippe pænt.
 */
.bb-pf-modal__dialog {
	position: relative;
	width: min(1100px, 100%);
	max-height: min(90vh, 100%);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--bb-pf-modal-bg);
	color: var(--bb-pf-modal-fg);
	border-radius: clamp(0.875rem, 2vw, 1.5rem);
	padding: var(--bb-pf-modal-pad);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: scale(0.9) translateY(22px);
	transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0, 1, 1);
	will-change: opacity, transform;
}

.bb-pf-modal.is-open .bb-pf-modal__dialog {
	opacity: 1;
	transform: scale(1) translateY(0);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * Popup-baggrund: item'ets eget billede (::before) med et farvet filter
 * ovenpå (::after). Begge er rene lag bag indholdet — se z-index på
 * .bb-pf-modal__content og .bb-pf-modal__close. De klippes automatisk til
 * dialogens runde hjørner af dens overflow: hidden + border-radius.
 *
 * Variablerne sættes pr. item af frontend.js (applyBackdrop) ud fra
 * data-bb-*-attributterne på det klikkede kort:
 *   --bb-pf-bg-image         url("...") til item'ets billede
 *   --bb-pf-overlay-color    filterets farve
 *   --bb-pf-overlay-opacity  filterets dækning, 0-1
 * Uden dem (popup'en lukket/tom) er billedet "none" og filteret helt
 * gennemsigtigt, så intet skinner igennem.
 */
.bb-pf-modal__dialog::before,
.bb-pf-modal__dialog::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.bb-pf-modal__dialog::before {
	background: var(--bb-pf-bg-image, none) center / cover no-repeat;
	/* Toner ind når billedet er hentet — .has-bg sættes af frontend.js. */
	opacity: 0;
	transition: opacity 0.6s ease;
}

.bb-pf-modal__dialog.has-bg::before {
	opacity: 1;
}

.bb-pf-modal__dialog::after {
	background: var(--bb-pf-overlay-color, #000);
	opacity: var(--bb-pf-overlay-opacity, 0);
}

/*
 * Lys filterflade (fx lysegrå/blågrå i høj dækning): hvid tekst ville være
 * næsten ulæselig, så teksten, link-knappen, luk-knappen og scrollbaren
 * skifter til mørke. Hvornår dette gælder afgøres i PHP (overlay_tone() i
 * BenjaBuilder_Helpers) og sættes som data-bb-tone på dialogen.
 */
.bb-pf-modal__dialog[data-bb-tone="light"] {
	--bb-pf-modal-fg: #000000;
	--bb-pf-modal-accent: #0c0c0e;
	--bb-pf-modal-accent-fg: #ffffff;
}

.bb-pf-modal__dialog[data-bb-tone="light"] .bb-pf-modal__close {
	background: rgba(0, 0, 0, 0.1);
}

.bb-pf-modal__dialog[data-bb-tone="light"] .bb-pf-modal__close:hover,
.bb-pf-modal__dialog[data-bb-tone="light"] .bb-pf-modal__close:focus-visible {
	background: rgba(0, 0, 0, 0.18);
}

.bb-pf-modal__dialog[data-bb-tone="light"] .bb-pf-modal__content {
	scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.bb-pf-modal__dialog[data-bb-tone="light"] .bb-pf-modal__content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.3);
}

.bb-pf-modal__dialog[data-bb-tone="light"] .bb-pf-modal__content::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.45);
}

.bb-pf-modal__close {
	position: absolute;
	top: clamp(0.5rem, 1.5vw, 1rem);
	right: clamp(0.5rem, 1.5vw, 1rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--bb-pf-modal-fg);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bb-pf-modal__close:hover,
.bb-pf-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	transform: rotate(90deg);
}

.bb-pf-modal__content {
	/* Over baggrunds-/filterlagene (dialogens ::before/::after, z-index 0). */
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2.5vw, 2rem);
	/* Fylder den plads .bb-pf-modal__dialog (flex column) har tilbage,
	   så DEN her boks er den der scroller — ikke den udenom. */
	flex: 1 1 auto;
	/*
	 * Selve indholdet glider blødt ind LIDT efter boksen (via
	 * transition-delay i .is-open nedenfor) — en let choreograferet
	 * reveal i stedet for at alt popper frem på én gang. Samme
	 * asymmetri-princip som dialogen: hurtig, delay-fri exit ved lukning.
	 */
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.28s ease, transform 0.28s ease;
	/* Selve scroll-området — se forklaringen ved .bb-pf-modal__dialog. */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	/* Nødvendigt for at et flex-barn overhovedet kan blive kortere end
	   sit indhold og dermed scrolle, i stedet for at skubbe forælderen. */
	min-height: 0;
	/*
	 * Den negative margin trækker denne boks HELT ud til dialogens egen
	 * kant (annullerer dialogens padding) — det er det der holder
	 * SCROLLBAREN inde ved den sande kant, væk fra det afrundede hjørne.
	 * padding-right lægger derefter praktisk talt hele paddingen ind
	 * igen (+2px), så SELVE TEKSTEN lander lige så langt fra kanten som i
	 * venstre side — scrollbarens egen position (flugter altid med
	 * boksens kant, uanset padding-right) rykker sig ikke af dette, så
	 * den forbliver stadig tættere på kanten end luk-krydset (mindst
	 * 0,5rem = 8px), og kan derfor aldrig ende under det.
	 */
	padding-right: calc(var(--bb-pf-modal-pad) + 2px);
	margin-right: calc(-1 * var(--bb-pf-modal-pad));

	/* Scrollbar i temaets farver i stedet for browserens standard. */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.bb-pf-modal.is-open .bb-pf-modal__content {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: 0.15s;
}

.bb-pf-modal__content::-webkit-scrollbar {
	width: 8px;
}

.bb-pf-modal__content::-webkit-scrollbar-track {
	background: transparent;
}

.bb-pf-modal__content::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 999px;
}

.bb-pf-modal__content::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.45);
}

/* ==================================================================
 * Content Builder-layout i popup'en (12-kolonne grid)
 * ================================================================== */

.bb-pf-row {
	/*
	 * Rækken er en flex-række der ombrydes (ikke et fast 12-kolonne-gitter):
	 * hver blok får præcis sin andel af bredden, og blokke der ikke kan være
	 * på samme linje ryger ned på næste. Det betyder, at en blok kan justeres
	 * (venstre/midt/højre) via auto-margener UANSET hvad der står ved siden
	 * af eller på linjerne over/under — hvilket et gitter med auto-placering
	 * ikke kan.
	 */
	--bb-pf-row-gap: clamp(1rem, 2.5vw, 2rem);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bb-pf-row-gap);
	align-items: flex-start;
}

/* n/12 af rækkens bredde inkl. mellemrummene mellem kolonnerne. */
.bb-pf-col {
	flex: 0 0 calc(var(--bb-span, 12) / 12 * (100% + var(--bb-pf-row-gap)) - var(--bb-pf-row-gap));
	max-width: 100%;
	min-width: 0;
}

/*
 * Tablet/lille laptop: smalle kolonner får mere plads,
 * brede kolonner lægger sig i fuld bredde.
 */
@media (max-width: 980px) {
	.bb-pf-col[data-span="3"],
	.bb-pf-col[data-span="4"] {
		flex-basis: calc(6 / 12 * (100% + var(--bb-pf-row-gap)) - var(--bb-pf-row-gap));
	}

	.bb-pf-col[data-span="8"],
	.bb-pf-col[data-span="9"] {
		flex-basis: 100%;
	}
}

/* Mobil: alt stables lodret. [data-span] gør reglen kraftig nok til at slå
   tablet-reglen for 1/4- og 1/3-blokke ovenfor. */
@media (max-width: 640px) {
	.bb-pf-col,
	.bb-pf-col[data-span] {
		flex-basis: 100%;
	}
}

/* Blokke ------------------------------------------------------------ */

.bb-pf-title {
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	line-height: 1.15;
	font-weight: 700;
	color: inherit;
}

.bb-pf-subtitle {
	margin: 0;
	font-size: clamp(1rem, 1.8vw, 1.1875rem);
	line-height: 1.4;
	opacity: 0.7;
}

.bb-pf-subtitle-italic {
	margin: 0;
	/* 2 px mindre end undertitlen (.bb-pf-subtitle), kursiv, fuld tekstfarve. */
	font-size: calc(clamp(1rem, 1.8vw, 1.1875rem) - 2px);
	font-style: italic;
	line-height: 1.4;
	opacity: 1;
}

.bb-pf-text {
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	line-height: 1.65;
}

.bb-pf-text > :first-child {
	margin-top: 0;
}

.bb-pf-text > :last-child {
	margin-bottom: 0;
}

.bb-pf-button-wrap {
	margin: 1.25em 0 0;
}

.bb-pf-button {
	display: inline-block;
	padding: 0.75em 1.6em;
	border-radius: 999px;
	background: var(--bb-pf-modal-accent);
	color: var(--bb-pf-modal-accent-fg);
	font-size: clamp(0.875rem, 1.3vw, 1rem);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bb-pf-button:hover,
.bb-pf-button:focus-visible {
	opacity: 0.85;
	transform: translateY(-1px);
	color: var(--bb-pf-modal-accent-fg);
}

/*
 * Links: tekstknapper og ikoner fra "Link / ikon"-blokken. Én blok = ét eller
 * flere links i en flex-række; rækken står til venstre, midt eller højre efter
 * blokkens justering i Content Builderen (.bb-pf-col[data-align], nederst i
 * filen).
 */
.bb-pf-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem 0.75rem;
	margin: 0;
}

/*
 * Ikon-link. Farven (--bb-pf-icon-color) og hover-farven (--bb-pf-icon-hover)
 * sættes pr. link som inline style fra backend; uden dem følger ikonet
 * popup'ens tekstfarve, og hover dæmper det blot. Selve klikfladen er min.
 * 44 px (en finger), også selvom ikonet er mindre.
 */
.bb-pf-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--bb-pf-icon-color, currentColor);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.bb-pf-icon {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
}

.bb-pf-icon-link:hover,
.bb-pf-icon-link:focus-visible {
	color: var(--bb-pf-icon-hover, var(--bb-pf-icon-color, currentColor));
	opacity: 1;
	transform: translateY(-1px);
}

/* Uden egen hover-farve dæmpes ikonet i stedet. */
.bb-pf-icon-link:not([style*="--bb-pf-icon-hover"]):hover {
	opacity: 0.7;
}

/* Video: 16:9 uanset skærmstørrelse. */
.bb-pf-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: clamp(0.5rem, 1.2vw, 0.875rem);
	background: #000;
}

.bb-pf-embed iframe,
.bb-pf-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: contain;
}

/* Spotify: fast højde bestemt af embed-typen (track/album/playlist). */
.bb-pf-spotify {
	width: 100%;
}

.bb-pf-spotify iframe {
	display: block;
	width: 100%;
	height: var(--bb-spotify-height, 352px);
	max-height: 60vh;
	border: 0;
	border-radius: 12px;
}

/* ==================================================================
 * Tilgængelighed
 * ================================================================== */

/* Respektér brugere der har slået animationer fra i deres OS. */
@media (prefers-reduced-motion: reduce) {
	.bb-pf-card__image,
	.bb-pf-card__overlay,
	.bb-pf-card__hover,
	.bb-pf-card__subtitle,
	.bb-pf-modal__backdrop,
	.bb-pf-modal__dialog,
	.bb-pf-modal__content,
	.bb-pf-modal__close,
	.bb-pf-button,
	.bb-pf-more,
	.bb-pf-more::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.bb-pf-card.is-revealed {
		animation: none;
	}

	.bb-pf-modal__dialog,
	.bb-pf-modal__content {
		transform: none;
	}

	.bb-pf-modal__dialog::before {
		transition-duration: 0.01ms !important;
	}

	.bb-pf-card__trigger:hover .bb-pf-card__image {
		transform: none;
	}
}

/* Fallback hvis temaet ikke selv definerer .screen-reader-text. */
.bb-pf-card__trigger .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================
 * Responsiv + touch (gennemgang)
 *
 * Samlet blok for hele filen, så den kan findes (og fjernes) ét sted.
 *  - dvh: 90vh er for højt på mobil, mens browserens adresselinje er
 *    synlig (100vh = skærmen UDEN linjen). dvh følger den synlige højde.
 *  - safe-area: holder popup'en fri af iPhone-notch og hjemme-streg.
 *  - touch-action: pan-y på scroll-området giver ren lodret fingerscroll;
 *    none på baggrunden stopper at siden bagved trækkes med.
 *  - touch-action: manipulation fjerner dobbelttryk-zoom-forsinkelsen.
 *  - pointer: coarse = fingre — større trykflader (min. ca. 44 px).
 *  - liggende telefon (lav skærmhøjde): mindre luft, så der er plads.
 * ================================================================== */

.bb-pf-modal {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@supports (padding: max(0px)) {
	.bb-pf-modal {
		padding-top: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-top));
		padding-right: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-right));
		padding-bottom: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-bottom));
		padding-left: max(clamp(0.75rem, 4vw, 3rem), env(safe-area-inset-left));
	}
}

@supports (height: 100dvh) {
	.bb-pf-modal__dialog {
		max-height: min(90dvh, 100%);
	}
}

.bb-pf-modal__backdrop {
	touch-action: none;
}

.bb-pf-modal__content {
	touch-action: pan-y;
	overflow-wrap: anywhere;
}

.bb-pf-card__trigger,
.bb-pf-more,
.bb-pf-modal__close,
.bb-pf-button {
	touch-action: manipulation;
}

@media (pointer: coarse) {
	.bb-pf-modal__close {
		width: 2.75rem;
		height: 2.75rem;
	}
}

@media (max-height: 520px) {
	.bb-pf-modal {
		padding: 0.5rem;
	}

	@supports (padding: max(0px)) {
		.bb-pf-modal {
			padding-top: max(0.5rem, env(safe-area-inset-top));
			padding-right: max(0.5rem, env(safe-area-inset-right));
			padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
			padding-left: max(0.5rem, env(safe-area-inset-left));
		}
	}

	.bb-pf-modal__dialog {
		max-height: 100%;
	}
}

/* Beskrivelsesteksten kommer fra en rich-text-editor: billeder, iframes og
   tabeller må aldrig være bredere end popup'en (ellers vandret scroll på
   mobil). Brede tabeller scroller vandret i sig selv. */
.bb-pf-text img,
.bb-pf-text iframe,
.bb-pf-text video {
	max-width: 100%;
	height: auto;
}

.bb-pf-text table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * Justering pr. blok (data-align på kolonnen, valgt i Content Builderen).
 * Tekst følger text-align; link-grupper/-knapper har egne regler, der
 * overstyrer et enkelt links egen placering, når blokken er sat til midt/højre.
 */
.bb-pf-col[data-align="center"] {
	text-align: center;
}

.bb-pf-col[data-align="right"] {
	text-align: right;
}

.bb-pf-col[data-align="center"] .bb-pf-links {
	justify-content: center;
}

.bb-pf-col[data-align="right"] .bb-pf-links {
	justify-content: flex-end;
}

/*
 * Justering af SELVE blokken (ikke kun teksten i den): en blok der er smallere
 * end rækken (fx 2/3 bredde) rykkes til midten eller højre med auto-margener
 * i flex-rækken, så der opstår luft på den ene eller begge sider. Virker
 * uanset hvad der står ved siden af — står der flere blokke på samme linje,
 * fordeler auto-margenerne den resterende plads imellem dem. En blok i fuld
 * bredde har ingen plads at flytte sig i.
 */
.bb-pf-col[data-align="center"] {
	margin-left: auto;
	margin-right: auto;
}

.bb-pf-col[data-align="right"] {
	margin-left: auto;
}

/* ==================================================================
 * "Sound"-blokken: rock'n'roll-afspilleren (se assets/js/sound.js)
 * ================================================================== */

.bb-pf-sound {
	--bb-pf-sound-accent: #8197ac;
	--bb-pf-sound-hot: #ffffff;
	position: relative;
	width: 100%;
	padding: clamp(1rem, 2.6vw, 1.6rem);
	border-radius: clamp(0.875rem, 1.8vw, 1.35rem);
	border: 1px solid rgba(255, 255, 255, 0.09);
	color: #ffffff;
	font-family: var(--bb-pf-font);
	/* Mørk "scene" med et svagt lys oppefra i brandfarven og en tynd
	   metal-kant foroven. */
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(129, 151, 172, 0.26), transparent 55%),
		radial-gradient(90% 120% at 100% 100%, rgba(129, 151, 172, 0.12), transparent 60%),
		linear-gradient(165deg, #1a1a20 0%, #0b0b0e 100%);
	box-shadow:
		0 22px 56px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	overflow: hidden;
	transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Spiller: kanten og skyggen gløder i brandfarven. */
.bb-pf-sound.is-playing {
	border-color: rgba(129, 151, 172, 0.6);
	box-shadow:
		0 22px 60px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(129, 151, 172, 0.3),
		0 0 46px rgba(129, 151, 172, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Før JS har bygget afspilleren: skjul den rå sporliste. */
.bb-pf-sound:not(.is-ready) .bb-pf-sound__tracks {
	display: none;
}

.bb-pf-sound.is-error::after {
	content: '!';
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	font-weight: 700;
	color: #ff8585;
}

/* Øverst: equalizer-ikon + titel ------------------------------------- */

.bb-pf-sound__top {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: clamp(0.75rem, 2vw, 1.1rem);
}

.bb-pf-sound__eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	flex: 0 0 auto;
	width: 1.7rem;
	height: 1.5rem;
}

.bb-pf-sound__eq i {
	display: block;
	flex: 1 1 0;
	height: 22%;
	border-radius: 2px;
	background: var(--bb-pf-sound-accent);
	transform-origin: bottom;
}

.bb-pf-sound.is-playing .bb-pf-sound__eq i {
	background: var(--bb-pf-sound-hot);
	animation: bb-pf-eq 0.9s ease-in-out infinite alternate;
}

.bb-pf-sound.is-playing .bb-pf-sound__eq i:nth-child(1) {
	animation-duration: 0.7s;
}

.bb-pf-sound.is-playing .bb-pf-sound__eq i:nth-child(2) {
	animation-duration: 1.05s;
	animation-delay: -0.3s;
}

.bb-pf-sound.is-playing .bb-pf-sound__eq i:nth-child(3) {
	animation-duration: 0.85s;
	animation-delay: -0.55s;
}

.bb-pf-sound.is-playing .bb-pf-sound__eq i:nth-child(4) {
	animation-duration: 1.2s;
	animation-delay: -0.15s;
}

@keyframes bb-pf-eq {
	from {
		height: 22%;
	}

	to {
		height: 100%;
	}
}

.bb-pf-sound__heading {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	gap: 0.15rem;
}

.bb-pf-sound__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bb-pf-sound-accent);
}

.bb-pf-sound__title {
	font-size: clamp(1.05rem, 2.2vw, 1.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bb-pf-sound__count {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.55);
	font-variant-numeric: tabular-nums;
}

.bb-pf-sound__count[hidden] {
	display: none;
}

/* Lydbølgen ------------------------------------------------------------ */

.bb-pf-sound__wave {
	position: relative;
	height: clamp(88px, 16vw, 132px);
	cursor: pointer;
	border-radius: 0.5rem;
	/* Lodret scroll er stadig muligt; vandret træk spoler. */
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.bb-pf-sound__wave:focus-visible {
	box-shadow: 0 0 0 2px var(--bb-pf-sound-accent);
}

.bb-pf-sound__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Tynd lys streg ved musen: viser hvor man ville spole hen. */
.bb-pf-sound__ghost {
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.bb-pf-sound__wave:hover .bb-pf-sound__ghost {
	opacity: 1;
}

/* Kontroller ----------------------------------------------------------- */

.bb-pf-sound__bar {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.6vw, 0.9rem);
	margin-top: clamp(0.75rem, 2vw, 1.1rem);
	flex-wrap: wrap;
}

.bb-pf-sound__btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #ffffff;
	cursor: pointer;
	border-radius: 50%;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s var(--bb-pf-ease), background-color 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

.bb-pf-sound__btn[hidden] {
	display: none;
}

.bb-pf-sound__btn svg {
	display: block;
	width: 55%;
	height: 55%;
}

/* Den store play-knap: lys metal-cirkel med glød. */
.bb-pf-sound__btn--play {
	width: clamp(3.4rem, 8vw, 4.4rem);
	height: clamp(3.4rem, 8vw, 4.4rem);
	color: #0c0c0e;
	background: linear-gradient(150deg, #ffffff 0%, #c5d0dc 100%);
	box-shadow:
		0 8px 22px rgba(0, 0, 0, 0.45),
		0 0 0 4px rgba(129, 151, 172, 0.25),
		inset 0 -3px 6px rgba(0, 0, 0, 0.12);
}

.bb-pf-sound__btn--play svg {
	width: 46%;
	height: 46%;
	/* Play-trekanten ser først midtstillet ud, når den rykkes lidt til højre. */
	margin-left: 4%;
}

.bb-pf-sound.is-playing .bb-pf-sound__btn--play svg {
	margin-left: 0;
}

.bb-pf-sound__btn--play:hover,
.bb-pf-sound__btn--play:focus-visible {
	transform: scale(1.07);
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.5),
		0 0 0 5px rgba(129, 151, 172, 0.4),
		0 0 30px rgba(129, 151, 172, 0.5),
		inset 0 -3px 6px rgba(0, 0, 0, 0.12);
}

.bb-pf-sound.is-playing .bb-pf-sound__btn--play {
	animation: bb-pf-pulse 1.6s ease-in-out infinite;
}

@keyframes bb-pf-pulse {
	0%,
	100% {
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(129, 151, 172, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.12);
	}

	50% {
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 9px rgba(129, 151, 172, 0.12), 0 0 28px rgba(129, 151, 172, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.12);
	}
}

.bb-pf-sound__btn--side,
.bb-pf-sound__btn--mute {
	width: 2.75rem;
	height: 2.75rem;
	background: rgba(255, 255, 255, 0.07);
}

.bb-pf-sound__btn--side:hover,
.bb-pf-sound__btn--side:focus-visible,
.bb-pf-sound__btn--mute:hover,
.bb-pf-sound__btn--mute:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

.bb-pf-sound__btn:focus-visible {
	outline: 2px solid var(--bb-pf-sound-accent);
	outline-offset: 3px;
}

.bb-pf-sound__time {
	margin-left: 0.25rem;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.55);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bb-pf-sound__time b {
	color: #ffffff;
	font-weight: 700;
}

.bb-pf-sound__vol {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
}

.bb-pf-sound__range {
	-webkit-appearance: none;
	appearance: none;
	width: clamp(4.5rem, 14vw, 7rem);
	height: 1.5rem;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
}

.bb-pf-sound__range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.25);
}

.bb-pf-sound__range::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.25);
}

.bb-pf-sound__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 10px rgba(129, 151, 172, 0.8);
}

.bb-pf-sound__range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 10px rgba(129, 151, 172, 0.8);
}

.bb-pf-sound.is-muted .bb-pf-sound__btn--mute {
	opacity: 0.6;
}

/* Playliste (flere spor) ------------------------------------------------ */

.bb-pf-sound__list {
	list-style: none;
	margin: clamp(0.9rem, 2.2vw, 1.3rem) 0 0;
	padding: 0.5rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	max-height: 15rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.bb-pf-sound__list li {
	margin: 0;
	padding: 0;
}

.bb-pf-sound__pick {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	margin: 0;
	padding: 0.65rem 0.6rem;
	border: 0;
	border-radius: 0.6rem;
	background: none;
	color: rgba(255, 255, 255, 0.75);
	font: inherit;
	font-size: 0.9375rem;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bb-pf-sound__pick:hover,
.bb-pf-sound__pick:focus-visible {
	background: rgba(255, 255, 255, 0.07);
	color: #ffffff;
}

.bb-pf-sound__pick.is-active {
	background: rgba(129, 151, 172, 0.2);
	color: #ffffff;
}

.bb-pf-sound__pick-no {
	flex: 0 0 auto;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--bb-pf-sound-accent);
	font-variant-numeric: tabular-nums;
}

.bb-pf-sound__pick-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.bb-pf-sound__pick-time {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.5);
}

/* Smalle skærme: lydstyrken får sin egen linje. */
@media (max-width: 520px) {
	.bb-pf-sound__vol {
		margin-left: 0;
		width: 100%;
	}

	.bb-pf-sound__range {
		flex: 1 1 auto;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-pf-sound,
	.bb-pf-sound__btn,
	.bb-pf-sound__ghost {
		transition-duration: 0.01ms !important;
	}

	.bb-pf-sound.is-playing .bb-pf-sound__eq i,
	.bb-pf-sound.is-playing .bb-pf-sound__btn--play {
		animation: none;
	}

	.bb-pf-sound.is-playing .bb-pf-sound__eq i {
		height: 70%;
	}
}