/*
 * Aktuellt: listan (skiss 1a) och nyhetsmallen (skiss 1c). Layout, typografi
 * och färger sitter som native-fält på de globala st-*-klasserna i Bricks,
 * med var(--kat-*) där kategorin styr. Här ligger bara det som inte går i ett
 * fält: kategori- och statusfärger (dynamiska modifierare), galleriets
 * rutnät och tillstånd som skriptet sätter.
 */

/* Kategorifärg. data-kategori = primärkategorins slug ({st_kategori}). */
[data-kategori] {
	--kat-bg: var(--primary);
	--kat-ink: var(--white);
	--kat-text: var(--primary);
}

[data-kategori="evenemang"] {
	--kat-bg: var(--action);
	--kat-text: var(--action);
}

[data-kategori="ledutveckling"] {
	--kat-bg: var(--led-gron);
	--kat-text: var(--led-gron);
}

[data-kategori="turforslag"] {
	--kat-bg: var(--led-bla);
	--kat-ink: var(--black);
	--kat-text: var(--led-bla-text);
}

/* Den utvalda nyhetens orange knapp syns inte mot orange bakgrund utan kant.
   Bara den utvalda (första) – på övriga kort är "Läs mer" en textlänk. */
.st-nyhetskort:first-child[data-kategori="evenemang"] > .st-nyhetskort__innehall .st-nyhetskort__las-mer {
	outline: 2px solid var(--st-white);
}

/* Ledstatus. data-status = fältets värde. */
.st-ledstatus {
	--status: var(--led-gron);
}

.st-ledstatus[data-status="Delvis avstängd"] {
	--status: #9a7a00;
}

.st-ledstatus[data-status="Avstängd"] {
	--status: var(--led-rod);
}

.st-ledstatus::before {
	content: "";
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: var(--status);
}

/* Galleriet: tre lika kolumner, bilderna 4:3. */
.st-artikel-galleri__bilder .bricks-layout-wrapper,
.st-artikel-galleri__bilder.bricks-layout-wrapper {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5); /* samma som alla kortrutnät */
	margin: 0;
}

.st-artikel-galleri__bilder .bricks-layout-item {
	width: auto !important;
	padding: 0 !important;
}

.st-artikel-galleri__bilder img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

@media (max-width: 767px) {
	.st-artikel-galleri__bilder .bricks-layout-wrapper,
	.st-artikel-galleri__bilder.bricks-layout-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Visa fler: döljs när alla nyheter är laddade. */
/* .brxe-block: klassens display: flex vinner annars över [hidden]. */
.st-nyheter__mer.brxe-block[hidden] {
	display: none;
}

/* Kopiera länk: kort bekräftelse. */
.st-dela__lank[data-kopierad]::after {
	content: " – kopierad";
	color: var(--neutral-dark);
}

/* Kategorin i minikortens meta sitter i ett span i texten, inte på ett element. */
.st-minikort__kategori {
	color: var(--kat-text);
}

/* Inga nyheter: Bricks skriver ut no_results_text i .bricks-posts-nothing-found inne i rutnätet. */
.st-nyheter > .bricks-posts-nothing-found {
	grid-column: 1 / -1;
	padding: var(--space-l);
	background-color: var(--base-ultra-light);
}

.st-nyheter__tom {
	max-width: 52ch;
	margin: 0;
	font-size: var(--text-l);
	font-weight: 500;
	line-height: 1.5;
}

/*
 * Vyn Rutnät (1a, växlaren Kort/Rutnät; skriptet sätter .is-rutnat på listan).
 * Ljusgrå yta, fyra kolumner. Varje nyhet blir två celler: kvadratisk bild och
 * en färgruta i ledfärgerna i tur och ordning. Den utvalda nyheten är oförändrad.
 */
/* .brxe-block i selektorn: klassen st-nyheter (Bricks) har samma vikt och kommer senare. */
.st-nyheter.brxe-block.is-rutnat {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-4); /* samma som galleriet och Fler turförslag */
	width: calc(100% + 2 * var(--st-gutter));
	max-width: none;
	margin-inline: calc(-1 * var(--st-gutter));
	padding: 0 var(--st-gutter) var(--space-8);
	background-color: var(--surface-section);
}

.st-nyheter.is-rutnat > .st-nyhetskort:first-child {
	margin-bottom: var(--space-7);
}

.st-nyheter.is-rutnat > .st-nyhetskort:not(:first-child) {
	display: contents;
}

.st-nyheter.is-rutnat > .st-nyhetskort:not(:first-child) .st-nyhetskort__bild {
	aspect-ratio: 1 / 1;
	height: 100%;
}

.st-nyheter.is-rutnat > .st-nyhetskort:not(:first-child) .st-nyhetskort__innehall {
	position: relative; /* länkens klickyta stannar i rutan */
	padding: var(--space-7) var(--space-6) var(--space-6);
	background-color: var(--ruta, var(--st-trail-yellow));
	color: var(--ruta-text, var(--text-primary));
}

.st-nyheter.is-rutnat > .st-nyhetskort:nth-child(6n + 2) { --ruta: var(--st-trail-yellow); }
.st-nyheter.is-rutnat > .st-nyhetskort:nth-child(6n + 3) { --ruta: var(--st-trail-lime); }
.st-nyheter.is-rutnat > .st-nyhetskort:nth-child(6n + 4) { --ruta: var(--st-trail-sky); }
.st-nyheter.is-rutnat > .st-nyhetskort:nth-child(6n + 5) { --ruta: var(--st-trail-ochre); }
.st-nyheter.is-rutnat > .st-nyhetskort:nth-child(6n + 6) { --ruta: var(--st-trail-green); --ruta-text: var(--text-on-dark); }
.st-nyheter.is-rutnat > .st-nyhetskort:nth-child(6n + 7) { --ruta: var(--st-orange); --ruta-text: var(--text-on-dark); }

/* display: contents tar bort kortets ram; fokusringen hamnar på rutan. */
.st-nyheter.is-rutnat > .st-nyhetskort:not(:first-child) .st-nyhetskort__innehall:focus-within {
	outline: 2px solid var(--action-primary);
	outline-offset: 2px;
}

@media (max-width: 991px) {
	.st-nyheter.brxe-block.is-rutnat {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.st-nyheter.brxe-block.is-rutnat {
		width: calc(100% + 2 * var(--page-gutter-mobile));
		margin-inline: calc(-1 * var(--page-gutter-mobile));
		padding: 0 var(--page-gutter-mobile) var(--space-7);
	}

	.st-nyheter.is-rutnat > .st-nyhetskort:not(:first-child) .st-nyhetskort__innehall {
		padding: var(--space-5) var(--space-4);
	}
}