@layer blocks {

	/* =========================================
	   KARUSEL
	   Oder (.blkRuns__sticky) se pripne na vrh zaslona, frontend.js pa navpično drsenje strani
	   pretvarja v vodoravni premik traku s karticami (.blkRuns__list). Dodatna vsebina (.blkRuns__cta)
	   je v odru pod trakom, zato se z vodoravnim drsenjem ne premika.
	   Višino sekcije (= dolžino drsenja) nastavi frontend.js; 300vh je le rezerva, dokler se ta ne zažene.
	   ========================================= */

	.blkRuns--carousel {
		--blkRuns__cardRatio: 0.68;				/* širina / višina kartice */
		--blkRuns__cardMaxH: min(34rem, 118vw);

		height: 300vh;
		position: relative;
		padding-block: 0;
	}

	.blkRuns__sticky {
		grid-column: full-start / full-end;
		grid-template-rows: auto minmax(0, var(--blkRuns__cardMaxH)) auto;
		align-content: center;

		position: sticky;
		top: 0;

		/* svh: višina brez brskalnikovih orodnih vrstic na mobilnikih, da oder nikoli ne seže čez vidno polje */
		height: 100vh;
		height: 100svh;
		padding-block: var(--spacing5) var(--spacing4);
	}

	.blkRuns__header {
		grid-row: 1;
		margin-bottom: var(--spacing4);
	}

	/* Okno traku: na mobilnikih kartice zdrsnejo čez oba roba zaslona, prva pa se začne na robu vsebine (padding traku).
	   Višino okna določa vrstica odra, zato je to "size" container: kartice dobijo velikost iz višine okna (cqh). */
	.blkRuns__viewport {
		grid-column: full-start / full-end;
		grid-row: 2;

		display: flex;
		align-items: center;
		min-height: 0;
		overflow: hidden;
		container-type: size;
	}

	.blkRuns--carousel .blkRuns__list {
		display: flex;
		gap: var(--spacing2);
		align-items: center;
		flex: 0 0 auto;
		width: max-content;
		padding-left: calc(var(--w__padding) + var(--w__gap));
		will-change: transform;
	}

	.blkRuns--carousel .wRunEntry {
		flex: 0 0 auto;
		max-width: none;
		width: var(--cardSize);					/* rezerva za brskalnike brez enot cqh */
		height: auto;
		height: 100cqh;
		width: calc(100cqh * var(--blkRuns__cardRatio));
	}


	/* Dodatna vsebina (karusel in mreža) */

	.blkRuns__cta {
		grid-row: 3;

		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing3);
		padding-top: var(--spacing4);
	}

	.blkRuns__ctaContent {
		font-size: var(--size__h2);
		line-height: 1.4;
		letter-spacing: 5%;
	}

	.blkRuns__ctaButtons {
		align-items: center;
		justify-content: flex-start;
		max-width: 100%;
	}

	/* Na mobilnikih se dolg napis gumba prelomi, da ne štrli čez rob zaslona. */
	.blkRuns__ctaButtons .b {
		max-width: 100%;
		height: auto;
		min-height: var(--b__height);
		padding-block: 0.4em;
		padding-inline: var(--spacing4);
		white-space: normal;
		text-wrap: balance;
	}

	.blkRuns--grid .blkRuns__cta {
		margin-top: var(--spacing6);
		padding-top: 0;
	}

	@media (max-width: 47.99em) {
		.blkRuns__ctaButtons {
			flex-direction: column;
			align-items: stretch;
			align-self: stretch;
		}

		.blkRuns__ctaButtons > div {
			text-align: center;
		}
	}

	/* Brez dovolj kartic za vodoravno drsenje frontend.js odstrani pripenjanje (razred blkRuns--static). */
	.blkRuns--static {
		height: auto;
	}

	.blkRuns--static .blkRuns__sticky {
		position: static;
		height: auto;
		grid-template-rows: auto auto auto;
	}

	.blkRuns--static .blkRuns__viewport {
		overflow-x: auto;
		container-type: normal;
	}

	.blkRuns--static .wRunEntry {
		height: auto;
		width: min(var(--cardSize), 78vw);
	}


	/* =========================================
	   MREŽA
	   ========================================= */

	.blkRuns__list--grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--gridGap);
	}

	.blkRuns__teaser {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--innerCardPadding);

		color: var(--color__white);
		background-color: var(--color__green);
		font-size: var(--size__h1);
		font-style: italic;
		text-align: center;
		border-radius: var(--borderRadius1);
	}

	@media (min-width: 37em) {
		.blkRuns__list--grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.blkRuns__list--grid > *:first-child {
			grid-column: span 2;
			max-width: none;
			aspect-ratio: 16 / 9;
		}
	}

	@media (min-width: 48em) {
		.blkRuns--carousel {
			--blkRuns__cardRatio: 0.909091;			/* 60 / 66 */
			--blkRuns__cardMaxH: 26rem;
		}

		.blkRuns__sticky {
			padding-block: var(--spacing7) var(--spacing5);
		}

		/* Od tablice naprej se kartice levo odrežejo na robu vsebine, desno segajo do roba zaslona. */
		.blkRuns__viewport {
			grid-column: content-start / full-end;
		}

		.blkRuns--carousel .blkRuns__list {
			padding-left: 0;
		}

		/* V eni vrstici (besedilo levo, gumbi desno), če je dovolj prostora, sicer so gumbi pod besedilom. */
		.blkRuns__cta {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: var(--spacing2) var(--spacing4);
		}

		.blkRuns__ctaContent {
			font-size: var(--size__h1);
			line-height: 1.7;
		}

		.blkRuns__ctaButtons .b {
			height: var(--b__height);
			min-height: 0;
			padding-block: 0;
			padding-inline: var(--spacing5);
			white-space: nowrap;
		}
	}

	@media (min-width: 65em) {
		.blkRuns--carousel {
			--blkRuns__cardMaxH: 22rem;
		}

		.blkRuns__sticky {
			padding-block: var(--spacing4) var(--spacing6);
		}

		.blkRuns--carousel .blkRuns__cta {
			padding-top: var(--spacing8);
		}
	}

	@media (min-width: 75em) {
		.blkRuns__list--grid {
			grid-template-columns: repeat(3, 1fr);
		}

		.blkRuns__list--grid > *:first-child {
			grid-column: span 2;
			max-width: none;
			aspect-ratio: 16 / 9;
		}
	}
}