/* ==========================================================================
   Blog-kort, variant A ("Række")
   Hører til inc/kort-variant-a.php og shortcoden [evnews_kort].

   Farverne peger på Bricks' egne variabler med hardcodet fallback, så kortene
   følger med, hvis paletten ændres i Bricks.

   Alle størrelser er i rem/px i forhold til roden — ikke em — så kortet ser
   ens ud uanset at body står på 1,25rem.
   ========================================================================== */

.th-a-card {
	--th-a-accent: var(--bricks-color-ecczet, #0b1e5b);
	--th-a-ink: var(--bricks-color-twwlhj, #171a20);
	--th-a-grey: var(--bricks-color-nmaaho, #5c5e62);
	--th-a-line: #d4d4d4;
	--th-a-radius: 10px;

	position: relative;
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	align-items: stretch;

	background: #fff;
	border-radius: var(--th-a-radius);

	/* padding-bottom holder plads til stregen; overflow:hidden er det, der får
	   både stregen og billedet til at følge hjørneradius i stedet for at stikke
	   ud forbi den. */
	overflow: hidden;
	padding-bottom: 3px;
}

/* Den grå streg i hvile. Ligger inde i kortets afrundede beskæring. */
.th-a-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--th-a-line);
	z-index: 1;
}

/* Sitets signatur: den røde streg, der løber ind fra venstre ved hover. */
.th-a-line {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0;
	background: var(--th-a-accent);
	transition: width .5s;
	z-index: 2;
}

.th-a-card:hover .th-a-line {
	width: 100%;
}

/* -------------------------------------------------------------- billede -- */

/* min-height er gulvet, når teksten er kort. Selve billedet ligger absolut
   placeret, så det aldrig selv kan trække rækken højere: med height:100% i
   normalt flow opstår der en cirkulær afhængighed (rækkens højde afhænger af
   billedet, billedet af rækken), browseren falder tilbage til auto, og et
   portrætbillede gør kortet 250-355px højt i stedet for 153px. */
.th-a-thumb {
	position: relative;
	overflow: hidden;
	background: #d8d8d8;
	min-height: 150px;
}

.th-a-card .th-a-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}

.th-a-card:hover .th-a-img {
	transform: scale(1.08);
}

/* ---------------------------------------------------------------- tekst -- */

.th-a-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 20px 14px;
	min-width: 0;
}

.th-a-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--th-a-grey);
}

.th-a-meta i {
	flex: 0 0 auto;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #b3b5b8;
}

.th-a-card .th-a-title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.01em;
	color: var(--th-a-ink);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.th-a-card .th-a-titlelink {
	color: inherit;
	text-decoration: none;
}

/* Gør hele kortet klikbart, men lader titlen være det, der bliver oplæst som
   linkets navn. Bedre end at pakke hele kortet ind i ét <a>. */
.th-a-card .th-a-titlelink::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.th-a-card:hover .th-a-title {
	color: var(--th-a-accent);
}

/* Den afrundede beskæring ville æde en fokusring udenpå, så den tegnes indeni. */
.th-a-card .th-a-titlelink:focus-visible {
	outline: none;
}

.th-a-card .th-a-titlelink:focus-visible::after {
	outline: 3px solid var(--th-a-accent);
	outline-offset: -3px;
	border-radius: var(--th-a-radius);
}

.th-a-excerpt {
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--th-a-grey);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.th-a-foot {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.th-a-credit {
	font-size: 10.5px;
	letter-spacing: .02em;
	color: #8d9094;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.th-a-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--th-a-accent);
	white-space: nowrap;
}

/* easeOutCubic: standardkurven sætter i gang og bremser igen, hvilket over så
   kort en afstand læses som et ryk. Den her kører ud med det samme og lander
   blødt. */
.th-a-chev {
	display: inline-block;
	transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.th-a-card:hover .th-a-chev {
	transform: translateX(5px);
}

/* ----------------------------------------------------------------- grid -- */

/* Sæt klassen th-a-grid på den Bricks-container, loopet ligger i.
   NB: Bricks skriver selv #brxe-xxxx{grid-template-columns:…}, og et id slår en
   klasse. Virker kolonnerne ikke, så sæt dem i Bricks-panelet i stedet — den
   her regel er kun til containere uden Bricks' egen grid-indstilling. */
.th-a-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2rem;
	align-items: start;
}

.th-a-grid > * {
	min-width: 0;
}

/* ----------------------------------------------------------- responsivt -- */

@media (max-width: 991px) {
	.th-a-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 478px) {
	.th-a-card {
		grid-template-columns: 128px minmax(0, 1fr);
	}

	.th-a-thumb {
		min-height: 128px;
	}

	.th-a-body {
		padding: 12px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.th-a-line,
	.th-a-img,
	.th-a-chev {
		transition-duration: .01ms;
	}
}

/* ------------------------------------------------------ Bricks-wrapper -- */

/* Ligger shortcoden inde i Bricks' gamle kort-element, maler det elementet en
   hvid kasse bag kortet — og dens radius er kun sat på de to øverste hjørner.
   De firkantede nederste hjørner stikker derfor ud som hvide hakker under
   kortets afrundede kanter. Her nulstilles enhver indpakning, der indeholder et
   kort, så placeringen i Bricks ikke kan give artefakter.
   Alternativt: fjern baggrund og radius på elementet i Bricks-panelet. */
.fb-post-arc-one__card:has(.th-a-card) {
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.brxe-shortcode:has(> .th-a-card) {
	padding: 0;
	background: none;
	border-radius: 0;
}

/* Lige høje kort på samme række. Bricks' grid strækker allerede selve
   grid-elementet (align-items: initial), men indpakningerne og kortet fylder
   ikke højden ud, så et kort med to-linjers titel efterlader sin nabo lavere.
   Højden gives videre ned gennem hele kæden. Falder tilbage til indholdshøjde,
   hvis kortet står et sted uden strakt forælder. */
.fb-post-arc-one__card:has(.th-a-card),
.brxe-shortcode:has(> .th-a-card) {
	height: 100%;
}

.th-a-card {
	height: 100%;
}

/* Bliver kortet strakt, skal billedet følge med, og bundlinjen med «Se nyhed»
   lægger sig i bunden — margin-top:auto på .th-a-foot klarer resten. */
.th-a-card .th-a-thumb {
	height: 100%;
}