/*
 * Evenemangsmallen (skiss 3a). Layout, typografi och färger sitter som
 * native-fält på de globala st-*-klasserna i Bricks. Här ligger bara det som
 * inte går i ett fält: dynamiska modifierare, <details>, elementet
 * st-startavgift, galleriets mosaik och skriptets tillstånd.
 */

/* Bankort: färgen kommer ur fältet "Kortets färg" (data-farg på kortet). */
.st-bana {
	background-color: var(--led-gra);
	color: var(--black);
}

.st-bana[data-farg="gron"] { background-color: var(--led-gron); color: var(--white); }
.st-bana[data-farg="gul"]  { background-color: var(--led-gul); }
.st-bana[data-farg="bla"]  { background-color: var(--led-bla); }
.st-bana[data-farg="rod"]  { background-color: var(--led-rod); color: var(--white); }

.st-bana a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.st-bana a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Dragspel: inbyggt <details>, plus/minus i stället för pilen. */
.st-dragspel__fraga {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-s);
}

.st-dragspel__fraga::-webkit-details-marker {
	display: none;
}

.st-dragspel__fraga::after {
	content: "+";
	color: var(--action);
	font-weight: 400;
	font-size: 1.3em;
	line-height: 1;
}

.st-dragspel__post[open] > .st-dragspel__fraga::after {
	content: "−";
}

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

/* Startavgift (elementet st-startavgift). */
.st-startavgift__flikar {
	display: flex;
	gap: calc(var(--space-xs) / 2);
	margin-block-end: var(--space-s);
}

.st-startavgift__flikar[hidden] {
	display: none;
}

.st-startavgift__flik {
	flex: 1 1 auto;
	padding: calc(var(--space-xs) / 2) calc(var(--space-xs) / 4);
	border: 2px solid var(--primary);
	background: transparent;
	color: var(--primary);
	font-size: var(--text-xs);
	white-space: nowrap;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing);
}

.st-startavgift__flik[aria-selected="true"] {
	background: var(--primary);
	color: var(--white);
}

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

.st-startavgift__period {
	margin: var(--space-xs) 0 0;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary);
}

.st-startavgift.is-flikar .st-startavgift__period {
	display: none;
}

.st-startavgift__priser {
	margin: 0;
}

.st-startavgift__rad {
	display: flex;
	justify-content: space-between;
	gap: var(--space-s);
	padding: calc(var(--space-xs) / 2) 0;
	border-top: 1px solid var(--base-light);
}

.st-startavgift__rad dt,
.st-startavgift__rad dd {
	margin: 0;
}

.st-startavgift__rad dd {
	font-weight: 700;
}

/* Galleri: mosaik med stor första bild. Skriptet begränsar till fem. */
.st-galleri__bilder.brxe-image-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: 20rem;
	gap: calc(var(--space-xs) / 2);
}

.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);
	outline-offset: 2px;
}

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

@media (max-width: 767px) {
	.st-galleri__bilder.brxe-image-gallery {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 14rem;
	}

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

@media (prefers-reduced-motion: reduce) {
	.st-startavgift__flik {
		transition: none;
	}
}