/*
 * Galleri (skiss 3a och 9b): mosaik med stor första bild.
 * Markup: Bricks image-gallery med klassen st-galleri__bilder i en st-galleri.
 * Skriptet visar fem och lägger resten bakom knappen Visa alla.
 *
 * Radhöjden följer galleriets bredd så att rutorna har skissens proportion
 * (liten ruta 283 × 220 px i 1280-skissen = 1,29:1) på alla skärmar:
 *   rad = (bredd − 2 mellanrum) / 4 / 1,29. Galleriets förälder är container (cqw).
 *
 * Antal bilder styr rutnätet:
 *   5+  2fr 1fr 1fr – stor bild över två rader, fyra små
 *   4   2fr 1fr 1fr – stor bild, två små, den fjärde över två kolumner
 *   3   2fr 1fr     – stor bild, två små staplade
 *   2   1fr 1fr     – två lika rutor
 *   1   hel bredd, två rutors höjd
 * Mobil: två kolumner, första bilden 2 × 2 rutor.
 */

/* Galleriets container mäts (cqw) – padding räknas inte, bara innehållsbredden. */
.st-galleri .brxe-container:has(> .st-galleri__bilder) {
	container-type: inline-size;
}

.st-galleri__bilder.brxe-image-gallery {
	--st-galleri-rad: calc((100cqw - 2 * var(--space-5)) / 4 / 1.29); /* 2fr 1fr 1fr: två mellanrum */
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: var(--st-galleri-rad);
	gap: var(--space-5); /* samma som korten i Fler turförslag */
}

.st-galleri__bilder .bricks-layout-item {
	display: block;
	width: auto;
	min-height: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.st-galleri__bilder .bricks-layout-item:first-child {
	grid-row: span 2;
}

.st-galleri__bilder .bricks-layout-item a,
.st-galleri__bilder .bricks-layout-item figure,
.st-galleri__bilder .bricks-layout-item img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.st-galleri__bilder img {
	object-fit: cover;
}

.st-galleri__bilder a:focus-visible {
	outline: 2px solid var(--action-primary);
	outline-offset: 2px;
}

.st-galleri.is-begransad .st-galleri__bilder .bricks-layout-item:nth-child(n + 6) {
	display: none;
}

/* 4 bilder: den fjärde fyller nedre raden. */
.st-galleri__bilder:has(> .bricks-layout-item:nth-child(4)):not(:has(> .bricks-layout-item:nth-child(5))) .bricks-layout-item:nth-child(4) {
	grid-column: span 2;
}

/* 3 bilder: 2fr 1fr, små rutor = en tredjedel. */
.st-galleri__bilder.brxe-image-gallery:not(:has(> .bricks-layout-item:nth-child(4))) {
	grid-template-columns: 2fr 1fr;
	--st-galleri-rad: calc((100cqw - var(--space-5)) / 3 / 1.29);
}

/* 2 bilder: två lika rutor i en rad. */
.st-galleri__bilder.brxe-image-gallery:not(:has(> .bricks-layout-item:nth-child(3))) {
	grid-template-columns: 1fr 1fr;
	--st-galleri-rad: calc((100cqw - var(--space-5)) / 2 / 1.29);
}

.st-galleri__bilder:not(:has(> .bricks-layout-item:nth-child(3))) .bricks-layout-item:first-child {
	grid-row: auto;
}

/* 1 bild: hel bredd, lika hög som två rutor bredvid varandra. */
.st-galleri__bilder.brxe-image-gallery:not(:has(> .bricks-layout-item:nth-child(2))) {
	grid-template-columns: 1fr;
	--st-galleri-rad: calc(100cqw / 2 / 1.29);
}

@media (max-width: 767px) {
	.st-galleri__bilder.brxe-image-gallery,
	.st-galleri__bilder.brxe-image-gallery:not(:has(> .bricks-layout-item:nth-child(4))) {
		grid-template-columns: 1fr 1fr;
		--st-galleri-rad: calc((100cqw - var(--space-5)) / 2 / 1.29);
	}

	/* Första bilden över hela bredden och två rader: samma proportion som de små. */
	.st-galleri__bilder .bricks-layout-item:first-child {
		grid-row: span 2;
		grid-column: span 2;
	}

	.st-galleri__bilder:not(:has(> .bricks-layout-item:nth-child(3))) .bricks-layout-item:first-child {
		grid-row: auto;
		grid-column: auto;
	}

	/* 4 bilder: den sista över hela bredden, så att ingen ruta blir tom. */
	.st-galleri__bilder:has(> .bricks-layout-item:nth-child(4)):not(:has(> .bricks-layout-item:nth-child(5))) .bricks-layout-item:nth-child(4) {
		grid-column: span 2;
	}
}