@layer blocks {
	.hero {
		--container-padding: 2rem;
		--border-radius: 1rem;
		--hero-countdown-bottom: 3rem; /* odmik odštevalnika od spodnjega roba videa */
		--hero-logo-gap: var(--spacing5); /* razmik med belim logotipom in odštevalnikom, ko se logotip ustavi nad njim */
		--hero-overlay: rgb(0 0 0 / 0.3); /* črna prosojnost čez video, da sta beli logotip in odštevalnik bolje vidna */

		/* Logotip je enako širok kot odštevalnik: 4 škatlice + 6 razmikov + 3 dvopičja (dvopičje ≈ 0.24 velikosti pisave).
		   Velikosti odštevalnika so zato nastavljene na .hero (ne na .mtsCountdown), da jih vidita oba. */
		--countdown__sepSize: var(--size__h1);
		--hero-logo-w: calc(4 * var(--countdown__box) + 6 * var(--countdown__gap) + 3 * 0.24 * var(--countdown__sepSize));

		padding-top: var(--headerOffset);

		view-timeline-name: --hero-scroll;
		view-timeline-axis: block;
	}

	.hero > header {
		position: sticky;
		top: 0;

		grid-column: 1 / -1;
		text-align: center;
	}

	.hero h1 {
		font-size: inherit;
		color: var(--color__green);
		text-align: center;
	}
	
	.hero__logo {
		width: var(--hero-logo-w);
		max-width: 100%;
		margin: var(--spacing5) auto 0 auto;
	}
	
	.hero__date {
		font-weight: var(--weight__normal);
		color: var(--color__black);
	}
	
	.hero__logoRadenska {
		max-width: 13em;
		margin: 1em auto -0.5em auto;
	}


	.hero__video {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
		min-height: 0; 

		clip-path: inset(0);
	}
	
	.hero > header .hero__date {
		will-change: opacity, transform;
	}

	.hero__video video,
	.hero__video img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}



	.hero__fakeHeader .text--h1 {
		font-size: inherit;
		font-weight: var(--weight__bold);
		color: var(--color__white);
	}

	.hero__fakeHeader .hero__date {
		opacity: 0;
	}

	/* Beli logotip v videu: se prilepi na vrh okna (na isto mesto kot zeleni logotip v glavi), ko pa
	   pride odštevalnik do njega, ga zadrži tir (.hero__logoRail), ki se konča tik nad odštevalnikom. */
	.hero__fakeHeader {
		position: sticky;
		top: 0;

		text-align: center;
	}

	.hero__logoRail {
		position: absolute;
		left: 0;
		bottom: calc(100% + var(--hero-logo-gap)); /* 100% = zgornji rob odštevalnika */
		width: 100%;
		height: 200vw; /* dovolj visok, da je logotip prilepljen že od vrha strani */
		pointer-events: none;
	}

	.hero__media {
		position: relative;
		/* height: 100%; - če je dodano se predaleč scrolla */

		clip-path: inset(0px var(--container-padding) round var(--border-radius, 20px));

		animation: video-clip-anim linear forwards;
		animation-timeline: --hero-scroll;
		animation-range: cover 40% cover 50%;
	}

	/* črna prosojnost čez video (pod odštevalnikom in belim logotipom, ki sta v DOM-u za njo) */
	.hero__media::before {
		content: '';
		position: absolute;
		inset: 0;
		background: var(--hero-overlay);
		pointer-events: none;
	}

	.hero__countdown {
		position: absolute;
		bottom: var(--hero-countdown-bottom);
		width: 100%;

		text-align: center;
		align-items: center;
	}

	/****** odštevalnik STATT ********/

		.mtsCountdown {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: var(--countdown__gap);
			font-family: var(--family1);
			color: var(--color__white);
		}

		.mtsCountdown__item {
			width: var(--countdown__box);
			height: var(--countdown__box);
			background: var(--color__green);
			border-radius: var(--countdown__radius);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: var(--spacing2);
			padding: 2em 1.5em;
		}

		.mtsCountdown__num {
			font-size: var(--countdown__num);
			font-weight: var(--weight__bold);
			line-height: 1;
			font-variant-numeric: tabular-nums;
		}

		.mtsCountdown__label {
			font-size: var(--countdown__label);
			font-weight: var(--weight__normal);
			letter-spacing: 0.02em;
			text-transform: uppercase;
			line-height: var(--lh__body--small);
		}

		.mtsCountdown__sep {
			font-size: var(--countdown__sepSize);
			line-height: 1;
			font-weight: var(--weight__bold);
			color: var(--color__white);
		}

		@media (max-width: 768px) {
			.hero {
				--countdown__box: 3.3em;
				--countdown__gap: var(--spacing2);
				--countdown__sepSize: var(--size__h3);
			}
			.mtsCountdown__num { font-size: var(--size__h2); }
		}

	/****** odštevalnik END   ********/

	/* telefoni: video do spodnjega roba zaslona in od roba do roba, manjši odštevalnik čim nižje */
	@media (max-width: 47.99em) {
		.hero {
			--hero-countdown-bottom: 1.2rem;
			--countdown__box: 3em; /* toliko je škatlica že zaradi paddinga (2 × 1.5em); enaka vrednost, da se širina logotipa ujema */
			--countdown__gap: var(--spacing2);
			--countdown__sepSize: var(--size__body);

			min-height: 100vh;
			min-height: 100svh;
			grid-template-rows: auto minmax(75vw, 1fr); /* video zapolni preostanek zaslona, a ni nižji od 4:3 */
		}
		
		.hero__logoRadenska {
			max-width: 11em;
		}

		.hero__video {
			aspect-ratio: auto;
		}

		.hero__media {
			height: 100%;
			clip-path: none;
			animation: none;
		}

		.mtsCountdown__item { gap: 0.2em; padding: 1.8em 1.5em; }
		.mtsCountdown__num { font-size: var(--size__h3); }
	}


	@keyframes video-clip-anim {
		0% {
			clip-path: inset(0px var(--container-padding) round var(--border-radius, 20px));
		}
		100% {
			clip-path: inset(0px 0 round 0);
		}
	}
}