/*
 * BP GreenGarden — galleriet "før og efter" (TRIN 9).
 *
 * Farverne hentes fra temaets theme.json-palet, men hver variabel har en
 * reserveværdi, så galleriet stadig ser rigtigt ud, hvis temaet skiftes ud.
 * Det er hele pointen med at lægge galleriet i et plugin.
 */
.bpg-galleri {
	--bpg-g-dark: var(--wp--preset--color--moerkegroen, #051d17);
	--bpg-g-cream: var(--wp--preset--color--flode, #f8f4d4);
	--bpg-g-orange: var(--wp--preset--color--orange, #e66708);
	--bpg-g-card: #fefcf2;

	display: grid;
	grid-template-columns: 1fr;
	/* Grid-standarden er `stretch`: uden dette bliver hvert kort trukket op
	   i højden, så det matcher det højeste kort i samme række — et kort med
	   kort tekst fik dermed en masse tomt rum forneden, bare fordi
	   nabokortet i rækken havde en længere beskrivelse. Hvert kort skal
	   have sin egen, naturlige højde uafhængigt af naboen (29-07-2026,
	   Eriks anmodning). */
	align-items: start;
	gap: clamp(1.75rem, 4vw, 2.75rem);
	margin-top: 2.5rem;
}

/* To store kort pr. række i stedet for tre mindre — større billeder og
   luft til den mere skrivende tekst. Under 700px (samme brydningspunkt som
   billedernes `sizes`-attribut) beholdes ét kort pr. række, som i forvejen
   virker godt på mobil. */
@media (min-width: 700px) {
	.bpg-galleri {
		grid-template-columns: repeat(2, 1fr);
	}
}

.bpg-projekt {
	background: var(--bpg-g-card);
	border: 1px solid rgba(5, 29, 23, 0.12);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Før og efter står altid side om side — sammenligningen er hele pointen,
   så de deles ikke op i to rækker på mobil. Grid-standarden `stretch`
   bruges bevidst: er før/efter-teksten forskelligt lange, skal det være
   INFO-TEKSTENS baggrund, der fylder ud til bunds (samme cremefarve som
   resten af kortet) — IKKE gittergabets mørke baggrund, som ellers ville
   skinne igennem som en synlig, skæv stribe under det korteste billede. */
.bpg-projekt-billeder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: rgba(5, 29, 23, 0.12);
}

/* Baggrunden matcher kortet (ikke gittergabets mørke farve): mangler et
   billede sin info-tekst helt, er der intet flex-barn til at fylde den
   strækkede plads ud, og UDEN denne baggrund ville gittergabet skinne
   igennem præcis som beskrevet ovenfor — blot for et andet billede. */
.bpg-projekt-billede {
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--bpg-g-card);
}

/* Selve billedfladen (foto/pladsholder + "Før"/"Efter"-badge) holder ALTID
   4:3 (flex: 0 0 auto), uanset at figuren som helhed strækkes af grid'et.
   Info-teksten står UDENFOR denne boks og er den del, der vokser. */
.bpg-projekt-billede-flade {
	flex: 0 0 auto;
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bpg-g-card);
}

.bpg-lightbox-link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.bpg-lightbox-link:focus-visible {
	outline: 3px solid var(--bpg-g-orange);
	outline-offset: -3px;
}

.bpg-projekt-billede img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Kort info-tekst om netop dette billede, under billedfladen. Sat op i
   størrelse sammen med resten af kortet — mange af Bojans besøgende er
   ældre og skal kunne læse den uden at anstrenge sig (samme princip som
   lightbox-modalen). */
.bpg-projekt-billedinfo {
	flex: 1 1 auto;
	margin: 0;
	padding: 0.6rem 0.75rem;
	font-size: 1.125rem;
	line-height: 1.55;
	color: rgba(5, 29, 23, 0.82);
	background: var(--bpg-g-card);
}

.bpg-projekt-etiket {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-start: 0.6rem;
	background: var(--bpg-g-dark);
	color: var(--bpg-g-cream);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
}

/* Stiplet felt, når et projekt endnu mangler sit før- eller efter-billede.
   Samme visuelle sprog som sitets øvrige pladsholdere. */
.bpg-projekt-mangler {
	position: absolute;
	inset: 0.5rem;
	border: 2px dashed rgba(5, 29, 23, 0.25);
	border-radius: 8px;
	display: grid;
	place-items: center;
	text-align: center;
	color: rgba(5, 29, 23, 0.5);
	font-size: 1.0625rem;
	font-weight: 600;
}

.bpg-projekt-tekst {
	padding: 1.5rem 1.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	flex: 1;
}

.bpg-projekt-titel {
	margin: 0;
	font-size: 1.875rem;
	line-height: 1.25;
	color: var(--bpg-g-dark);
}

.bpg-projekt-beskrivelse {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.6;
}

.bpg-projekt-fakta {
	margin: 0.15rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 0.75rem;
}

.bpg-projekt-bydel {
	font-size: 1.125rem;
	font-weight: 600;
	color: rgba(5, 29, 23, 0.8);
}

/* Mørkegrøn tekst på orange måler 5,28:1 (AA). Fløde/hvid tekst på orange
   dumper kontrastkravet og må ikke bruges — se designnoterne. */
.bpg-projekt-pris {
	margin-inline-start: auto;
	background: var(--bpg-g-orange);
	color: var(--bpg-g-dark);
	font-weight: 700;
	font-size: 1.125rem;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	white-space: nowrap;
}

.bpg-galleri-mere {
	margin-top: 2rem;
	text-align: center;
}

.bpg-galleri-tom {
	margin-top: 1.5rem;
	color: rgba(5, 29, 23, 0.6);
	font-style: italic;
}

/* Under ~360px bliver to billeder ved siden af hinanden for smalle til at
   sige noget. Der lægges de over hinanden, med "Før" øverst. */
@media (max-width: 360px) {
	.bpg-projekt-billeder {
		grid-template-columns: 1fr;
	}
}

/* =============================================================
   LIGHTBOX — billedet i fuld størrelse (assets/lightbox.js)
   ============================================================= */

/* Blokerer baggrundens scroll, mens modalen er åben. */
html.bpg-lightbox-aaben {
	overflow: hidden;
}

.bpg-lightbox {
	--bpg-lb-dark: var(--wp--preset--color--moerkegroen, #051d17);
	--bpg-lb-cream: var(--wp--preset--color--flode, #f8f4d4);

	position: fixed;
	inset: 0;
	z-index: 10000;
}

.bpg-lightbox[hidden] {
	display: none;
}

.bpg-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 29, 23, 0.92);
}

.bpg-lightbox-dialog {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 5vw, 3rem);
}

/* Modalen viser kun selve billedet (29-07-2026: teksten under billedet
   fjernet på Eriks anmodning) — kortet sizer sig derfor efter billedrammen
   i stedet for at have en fast højde. */
.bpg-lightbox-kort {
	position: relative;
	margin: 0;
	width: min(95vw, 760px);
	max-height: 90vh;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Rammen har samme 4:3-format som Bojans egne fotos (2048×1536 fra
   telefonen). Med en fast højde i vh i stedet ville billedet blive
   "letterboxet" med store sorte bånd over og under på mobil — her fylder
   det i stedet rammen helt ud, og bliver dermed så stort som muligt.
   Et enkelt portrætfoto vil få smalle bånd i siderne; det er den rigtige
   afvejning, når langt de fleste billeder er liggende. */
.bpg-lightbox-billede-ramme {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--bpg-lb-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.bpg-lightbox-billede {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Store, tydelige knapper — ikke sitets sædvanlige 44px-minimum, men et
   godt stykke over, så de er lette at se og ramme for en ældre målgruppe. */
.bpg-lightbox-luk,
.bpg-lightbox-forrige,
.bpg-lightbox-naeste {
	position: absolute;
	background: rgba(5, 29, 23, 0.82);
	color: var(--bpg-lb-cream);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	display: grid;
	place-items: center;
	line-height: 1;
}

.bpg-lightbox-luk:hover,
.bpg-lightbox-forrige:hover,
.bpg-lightbox-naeste:hover {
	background: var(--wp--preset--color--orange, #e66708);
	color: var(--bpg-lb-dark);
}

.bpg-lightbox-luk:focus-visible,
.bpg-lightbox-forrige:focus-visible,
.bpg-lightbox-naeste:focus-visible {
	outline: 3px solid var(--wp--preset--color--orange, #e66708);
	outline-offset: 2px;
}

.bpg-lightbox-luk {
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	width: 56px;
	height: 56px;
	font-size: 2.25rem;
}

/* Placeret inde i billedrammen — lodret centreret på billedet, så de
   aldrig lægger sig hen over brødteksten nedenunder. */
.bpg-lightbox-forrige,
.bpg-lightbox-naeste {
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
	font-size: 2.5rem;
}

.bpg-lightbox-forrige {
	left: 0.75rem;
}

.bpg-lightbox-naeste {
	right: 0.75rem;
}

/* Under 480px er der ikke plads til 60px-knapper ved siden af et 95vw-bredt
   kort uden at overlappe — men de holdes markant over sitets 44px-minimum. */
@media (max-width: 480px) {
	.bpg-lightbox-luk {
		width: 48px;
		height: 48px;
		font-size: 2rem;
	}

	.bpg-lightbox-forrige,
	.bpg-lightbox-naeste {
		width: 50px;
		height: 50px;
		font-size: 2rem;
	}
}