/* ============================================================
   Final Film — fotoalbum
   Justeret gitter + lightbox. Ingen afhængigheder.
   Alt er prefikset .fa- så intet kolliderer med .fp-, .svc-, .proc-
   eller Kadence.
   ============================================================ */

/* ---------- Gitteret ---------- */

.fa-gal{
	display: flex;
	flex-direction: column;
	gap: var(--fa-gap, 8px);
}

.fa-row{
	display: flex;
	gap: var(--fa-gap, 8px);
}

.fa-item{
	position: relative;
	display: block;
	flex: none;
	overflow: hidden;
	border-radius: 6px;
	background: #14161C;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: zoom-in;
	/* Bredde og højde sættes af album.js, når rækken er regnet ud */
}

.fa-item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.fa-item:hover img{ transform: scale(1.04); }
.fa-item:focus-visible{ outline: 2px solid #8D8DFF; outline-offset: 3px; }

/* Før JS har regnet rækkerne ud: et simpelt gitter, så der ikke
   er et tomt hul, hvis JS er langsom eller slået fra. */
.fa-gal:not([data-ready]){
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.fa-gal:not([data-ready]) .fa-row{ display: contents; }
.fa-gal:not([data-ready]) .fa-item{
	width: auto !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
}

/* ---------- Lightbox ---------- */

.fa-lb{
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	background: rgba(11,13,17,.96);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	/* Højden på top- og bundlinje tilsammen. Billedets max-height
	   måles mod vinduet, ikke mod forælderen — en kæde af auto-højder
	   gør at max-height i procent aldrig kan opløses. */
	--fa-chrome: 172px;
}
.fa-lb.is-open{
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.fa-lb-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	color: rgba(217,217,217,.75);
	font-family: "REM-Regular", Verdana, Arial, sans-serif;
	font-size: .82rem;
}
.fa-lb-title{ color: #fff; }
.fa-lb-count{ font-variant-numeric: tabular-nums; letter-spacing: .06em; }

.fa-lb-close{
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: background-color .2s ease;
	/* Nulstil Kadence's globale <button>-padding/font/box-shadow. */
	padding: 0 !important;
	margin: 0 !important;
	font: inherit;
	line-height: normal;
	box-shadow: none !important;
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
}
/* Kadence sætter en lilla baggrund på alle <button> i :hover/:focus/:active
   (via --global-palette-btn-bg-hover). Nulstil det helt — X-knappen skal
   være neutral, ikke lilla. */
.fa-lb-close:hover,
.fa-lb-close:focus,
.fa-lb-close:focus-visible,
.fa-lb-close:active{
	background: transparent !important;
	color: #fff !important;
	outline: none;
	border: 0;
	box-shadow: none !important;
}
.fa-lb-close svg{ width: 18px; height: 18px; display: block; }

.fa-lb-mid{ position: relative; min-height: 0; }

.fa-lb-stage{
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 0 12px;
}

.fa-lb-img{
	max-width: 100%;
	max-height: calc(100vh - var(--fa-chrome));
	max-height: calc(100dvh - var(--fa-chrome));
	object-fit: contain;
	border-radius: 4px;
	display: block;
	transition: opacity .18s ease;
	/* Swipe: billedet følger fingeren via transform. touch-action styres af JS. */
	touch-action: none !important;
	user-select: none;
	-webkit-user-select: none;
	will-change: transform;
	transform-origin: center center;
}
/* Når man swiper ned for at lukke: billedet fades/scaleres ned. */
.fa-lb.is-dismissing .fa-lb-stage{
	opacity: 0;
	transform: scale(.85);
	transition: opacity .28s ease, transform .28s ease;
}

@media (prefers-reduced-motion: reduce){
	.fa-lb.is-dismissing .fa-lb-stage{ transition: none; }
}

.fa-lb-nav{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255,255,255,.09);
	border: 0;
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color .2s ease;
	/* Kadence sætter padding/font/box-shadow på alle <button> — nulstil dét,
	   ellers bliver knappen 60px bred og pilen skubbes ud af centrum. */
	padding: 0 !important;
	margin: 0 !important;
	font: inherit;
	line-height: normal;
	box-shadow: none !important;
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
}
/* Skånsom hover-scaling, men NULSTIL Kadence's lilla :hover/:focus/:active-baggrund.
   Uden dét får pilen en lilla kant efter et klik (focus-tilstand), der bliver
   siddende når musen fjernes. */
.fa-lb-nav:hover{ background: rgba(255,255,255,.2); }
.fa-lb-nav:focus,
.fa-lb-nav:focus-visible,
.fa-lb-nav:active{
	background: rgba(255,255,255,.09) !important;
	color: #fff !important;
	box-shadow: none !important;
	outline: none;
}
.fa-lb-nav:focus-visible{ outline: 2px solid #8D8DFF; outline-offset: 2px; }
.fa-lb-nav svg{ width: 22px; height: 22px; display: block; }
.fa-lb-prev{ left: 14px; }
.fa-lb-next{ right: 14px; }

/* Ét billede i albummet: ingen grund til pile */
.fa-lb[data-single] .fa-lb-nav,
.fa-lb[data-single] .fa-lb-strip{ display: none; }

.fa-lb-strip{
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 12px 18px 16px;
	scrollbar-width: thin;
	/* Centrér miniature-striben horisontalt, så den ligger midt under billedet. */
	justify-content: center;
	align-items: center;
}
/* Når der er MANGE thumbnails (scrollbart), nulstil centreringen, så de kan
   scrolles fra kant til kant uden at første/sidste klippes af. album.js sætter
   .overflowing på striben, når dens indhold er bredere end den selv. */
.fa-lb-strip.overflowing{ justify-content: flex-start; }
.fa-lb-thumb{
	flex: none;
	width: 74px;
	height: 52px;
	border-radius: 4px;
	overflow: hidden;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	opacity: .4;
	background: #14161C;
	box-shadow: none !important;
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: opacity .2s ease, outline-color .2s ease;
}
.fa-lb-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-lb-thumb[aria-current="true"]{ opacity: 1; outline-color: #8D8DFF; }
.fa-lb-thumb:hover{ opacity: .85; }
.fa-lb-thumb:focus-visible{ outline-color: #8D8DFF; opacity: 1; }

/* Låser siden bag lightboxen */
body.fa-lb-open{ overflow: hidden; }

@media (max-width: 600px){
	.fa-lb{ --fa-chrome: 148px; }
	.fa-lb-nav{ display: none; }
	.fa-lb-top{ padding: 12px 14px; font-size: .78rem; }
	.fa-lb-strip{ padding: 8px 12px 12px; }
	.fa-lb-thumb{ width: 56px; height: 40px; }
}

/* ---------- Oversigtskort ([data-fa-card]) ----------
   På /produktioner/ er oversigtskortet ét coverbillede (produktionens
   featured image), ikke et gitter. album.js' layout() springer det over
   (data-fa-card), så albumets øvrige billeder forbliver i DOM'en kun til
   lightboxen. Coveret er et .fa-card-cover; albumets billeder er
   .fa-item, skjult her men brugt af lightboxen.

   VIKTIGT: da layout() aldrig kører (og aldrig sætter data-ready) på
   dette kort, ville .fa-gal:not([data-ready])-reglen ellers give
   display:grid + auto-fill-kolonner (random størrelser). Derfor skal
   [data-fa-card] eksplicit sætte display:block og nulstille grid-reglerne. */
.fa-gal[data-fa-card]{
	display: block !important;
	grid-template-columns: none !important;
	aspect-ratio: auto !important;
	/* KRITISK: gør kortet til positioneringskontekst for .fa-card-previews.
	   Uden dette refererer preview-lagets position:absolute;inset:0 til VIEWPORTEN
	   og dækker hele skærmen i stedet for at ligge inde i thumbnail-kortet. */
	position: relative;
}
.fa-gal[data-fa-card] .fa-row{ display: contents; }
.fa-gal[data-fa-card] .fa-item{ display: none !important; }
.fa-gal[data-fa-card] .fa-card-cover{
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	margin-bottom: 8px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	cursor: pointer;                 /* SAME cursor som videokortene — ikke zoom-in */
	background: #000;
	border: 0;
	padding: 0;
	/* Nulstil Kadence's globale <button>-padding/font/box-shadow. */
	margin: 0 0 8px 0 !important;
	font: inherit;
	line-height: normal;
	box-shadow: none !important;
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	/* Hover-effekt: coveret skalerer op (som videokortene). Preview-laget
	   skalerer med samme 1.07, så det dækker coveret fuldstændigt — ingen
	   mørk kant rundt om previewet. */
	transition: transform .55s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}
@media (hover: hover) and (pointer: fine) {
	.fa-gal[data-fa-card] .fa-card-cover:hover{
		transform: scale(1.07);
		z-index: 5;
		/* !important er NØDVENDIGT: .fa-card-cover-basens "box-shadow: none
		   !important" (for at nulstille Kadence) ville ellers ALTID overstyre
		   denne hover-skygge — deraf manglede skyggen på foto-thumbnailen. */
		box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .55) !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.fa-gal[data-fa-card] .fa-card-cover,
	.fa-gal[data-fa-card] .fa-card-previews{
		transition: none;
	}
}
.fa-gal[data-fa-card] .fa-card-cover img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fa-gal[data-fa-card] .fa-card-cover:focus-visible{ outline: 2px solid #8D8DFF; outline-offset: 3px; }

/* ---------- Hover-preview (fade-cyklus) ----------
   Albumets billeder vises som en stablet stak ovenpå coveret; ved hover
   cykles de med et let fade af JS i album.js (lidt som videokortenes
   hover-video). Skjules på touch-enheder, hvor der ikke er hover.

   VIGTIGT: Dette lag ligger INDE i .fa-card-cover (button'en), så det
   arver dens hover-transform (scale 1.07) og zoomer/skrumper SAMMEN med
   thumbnailen — ingen forskydning ved hover/unhover. */
.fa-gal[data-fa-card] .fa-card-previews{
	position: absolute;
	inset: 0;
	/* Over coverets eget <img> og ikonet. */
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	/* Match coverets afrundede hjørner, så previewet ikke stikker ud. */
	border-radius: 8px;
}
/* ---------- Hover-preview (fade-cyklus, to-lags) ----------
   Hvert preview (.fa-preview) er to billeder: en blød blur-version som
   16:9-baggrund der dækker hele fladen, og selve billedet intakt (contain)
   ovenpå — så stående (9:16) og andre proportioner IKKE crops. Blurbaggrunden
   giver ingen hårde bjælker. */
.fa-gal[data-fa-card] .fa-card-previews .fa-preview{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	z-index: 0;
	/* Ingen transition på opacity/transform — skiftet er et HÅRDT klik
	   (stop-motion), styret af JS med scale(.85) -> scale(1) i to hurtige trin. */
	transition: none;
}
/* Baggrund: billedet REPETERES (gentages i et mønster), så der ALTID kommer
   nok rundt om til at dække hele 16:9-fladen — især ved stående/liggende
   billeder. Dette er et rent <div> med billedet som CSS-baggrund (sat direkte
   af PHP'en), så der er inget <img>-indhold der kan dobbelt-vises.
   background-size sættes DYNAMISK af album.js til at matche hovedbilledets
   faktiske visningsstørrelse, så mønstret gentages i samme størrelse. */
.fa-gal[data-fa-card] .fa-preview-bg{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-repeat: repeat;
	background-position: center;
}
/* Det intakte billede: vises i sin egen proportion, uden crop */
.fa-gal[data-fa-card] .fa-preview-main{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* Kort/bredt billede (tæt på eller over 16:9): fylder HELE thumbnailen */
.fa-gal[data-fa-card] .fa-preview.is-wide .fa-preview-main{
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Meget stående/liggende billede: vises intakt (contain) ovenpå blur-baggrund.
   is-tall er det standard two-lags setup. */
.fa-gal[data-fa-card] .fa-preview.is-tall .fa-preview-main{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* Aktuel visning med stop-motion-klik (se JS i album.js).
   .is-show = det nyest viste, er ALTID øverst (z:1) — undgår loop-blink.
   .is-incoming = under selve skiftet (z:2), og JS sætter transform scale(.85)
   i trin 1 og skalerer til scale(1) i trin 2 — begge UDEN transition (hårdt cut). */
.fa-gal[data-fa-card] .fa-preview.is-show{
	opacity: 1;
	z-index: 1;   /* det nyest viste er ALTID øverst */
}
.fa-gal[data-fa-card] .fa-preview.is-incoming{
	z-index: 2;   /* over is-show under selve skiftet */
	opacity: 1;
}
/* Previewerne vises kun ved hover (kun på rigtig hover-alverden) */
@media (hover: hover) and (pointer: fine) {
	.fa-gal[data-fa-card] .fa-card-previews{ opacity: 0; transition: opacity .25s ease; }
	.fa-gal[data-fa-card]:hover .fa-card-previews{ opacity: 1; }
}
@media (hover: none) {
	.fa-gal[data-fa-card] .fa-card-previews{ display: none !important; }
}

.fa-gal[data-fa-card] .fa-card-count{
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: rgba(0,0,0,.65);
	color: #fff;
	border-radius: 999px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	/* Nulstil Kadence's globale <button>-font/box-shadow. */
	font: inherit;
	line-height: normal;
	box-shadow: none !important;
	text-transform: none;
}
.fa-gal[data-fa-card] .fa-card-count svg{
	width: 14px;
	height: 14px;
	display: block;
	color: #fff;
}
.fa-gal[data-fa-card] .fa-card-cover .fa-card-count{
	position: absolute;
	right: 10px;
	bottom: 10px;
}
/* Foto-ikonet i hjørnet skjules ved hover, når hover-previewet vises. */
@media (hover: hover) and (pointer: fine) {
	.fa-gal[data-fa-card]:hover .fa-card-cover .fa-card-count{
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce){
	.fa-item img,
	.fa-lb-img,
	.fa-lb-nav,
	.fa-lb-close,
	.fa-lb-thumb{ transition: none; }
	.fa-item:hover img{ transform: none; }
}