/* Gaasivõrk – teadete riba
   Asub DOM-is kõige esimesena: teal-riba ja peamenüü kohal.
   Ilma JS-ita on kõik teated üksteise all nähtaval; JS teeb sellest liuguri.
   Kollane on tuletatud logo korallist: sama küllastus ja heledus, toon
   nihutatud 15° → 44°. Tekst #16324f kollasel #f0c84f → 8.2:1.
   Juhtelemendid 3.7:1. */

.gv-teated {
	/* Slaidide vahe. Peab olema laiem kui fade-ala, muidu paistab järgmine
	   teade puhkeolekus servast välja. JS kasutab sama muutujat. */
	--gv-vahe: 64px;
	position: relative;
	z-index: 100;
	width: 100%;
	background: #f0c84f;
	color: #16324f;
	font-size: 14.5px;
	line-height: 1.5;
}

.gv-teated__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1240px;
	margin: 0 auto;
	min-height: 40px;
	padding: 8px 24px;
}

.gv-teated__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: #16324f;
}

.gv-teated__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.gv-teated__viewport {
	flex: 1;
	min-width: 0;
}

/* --- Üksik teade --- */

.gv-teade {
	display: block;
	min-width: 0;
	color: #16324f;
	text-decoration: none;
	text-wrap: pretty;
}

.gv-teade + .gv-teade {
	margin-top: 6px;
}

.gv-teade__body {
	font-weight: 400;
}

.gv-teade__link {
	color: #16324f;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gv-teade__link:hover {
	color: #0e2338;
	text-decoration: none;
}

/* --- Liugur. Aktiveeritakse JS-iga. --- */

.gv-teated__nav {
	display: none;
}

.gv-teated--karussell .gv-teated__viewport {
	overflow: hidden;
}

/* Pehmed servad mõlemal pool.
   Vaade ulatub 16px vasakule (ikooni-vahe peale) ja tekst lükatakse sama
   palju polsterdusega tagasi. Nii jääb fade tühja ala peale ja teate
   esimesed tähed püsivad täies tugevuses. */
.gv-teated--karussell .gv-teated__viewport {
	margin-left: -16px;
	padding-left: 16px;
	margin-right: -32px;
	padding-right: 32px;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 16px,
		#000 calc(100% - 32px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 16px,
		#000 calc(100% - 32px),
		transparent 100%
	);
}

.gv-teated--karussell .gv-teated__track {
	display: flex;
	gap: var(--gv-vahe);
	align-items: center;
	transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.gv-teated--karussell .gv-teade {
	flex: 0 0 100%;
	/* -webkit-box ei võta laiust alati flex-basis'e järgi – sunnitakse peale,
	   muidu piilub järgmine teade vaate serva alt välja. */
	width: 100%;
	min-width: 100%;
	margin-top: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gv-teated--karussell .gv-teated__nav {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	/* Vahe teksti ja noolte vahel. JS arvutab selle nii, et fade lõpeb
	   keelevaheti EST-kasti vasaku serva kohal; 56px on tagavara. */
	margin-left: var(--gv-nav-vahe, 56px);
}

.gv-teated[data-gv-total="1"] .gv-teated__nav {
	display: none !important;
}

.gv-teated__count {
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gv-teated__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1.5px solid rgba(22, 50, 79, 0.65); /* 3.7:1 */
	border-radius: 50%;
	background: transparent;
	color: #16324f;
	cursor: pointer;
}

.gv-teated__btn:hover {
	border-color: #16324f;
	background: rgba(22, 50, 79, 0.1);
}

/* Kerad – ainult mobiilis */
.gv-teated__dots {
	display: none;
	align-items: center;
	gap: 0;
}

/* Nupp on 24px puuteala, kera joonistatakse selle sisse. */
.gv-teated__dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.gv-teated__dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(22, 50, 79, 0.65); /* 3.7:1 */
}

.gv-teated__dot[aria-current="true"]::before {
	background: #16324f;
	box-shadow: none;
}

.gv-teated__dot:hover::before {
	box-shadow: inset 0 0 0 1.5px #16324f;
}

.gv-teated__dot[aria-current="true"]:hover::before {
	box-shadow: none;
}

/* --- Fookus --- */

.gv-teade__link:focus-visible,
.gv-teated__btn:focus-visible,
.gv-teated__dot:focus-visible {
	outline: 2px solid #16324f;
	outline-offset: 2px;
}

/* --- Mobiil --- */

@media (max-width: 720px) {
	.gv-teated {
		font-size: 13px;
	}

	.gv-teated__inner {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 8px;
		padding: 8px 16px 6px;
	}

	.gv-teated__icon {
		width: 16px;
		height: 16px;
		margin-top: 2px;
	}

	.gv-teated {
		--gv-vahe: 32px;
	}

	.gv-teated--karussell .gv-teated__viewport {
		margin-left: -8px;
		padding-left: 8px;
		margin-right: -16px;
		padding-right: 16px;
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 8px,
			#000 calc(100% - 16px),
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 8px,
			#000 calc(100% - 16px),
			transparent 100%
		);
	}

	.gv-teated--karussell .gv-teade {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		line-height: 1.45;
	}

	.gv-teated--karussell .gv-teade__body {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.gv-teated--karussell .gv-teade__link {
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		min-height: 30px;
		padding: 3px 0;
		/* Pikk CTA murdub, muidu jookseb kerade alt läbi. */
		white-space: normal;
	}

	/* Kerad CTA-ga samal real, paremas servas. Teatele reserveeritakse
	   sama palju ruumi, et tekst nende alla ei jookseks. */
	.gv-teated__inner {
		position: relative;
	}

	.gv-teated--karussell .gv-teated__nav {
		position: absolute;
		right: 16px;
		bottom: 6px;
		flex: none;
		justify-content: flex-end;
		gap: 0;
	}

	/* Ruum kerade jaoks reserveeritakse ainult lingile, mitte tekstile –
	   ülemine tekst kasutab kogu laiust. */
	.gv-teated--karussell[data-gv-total="2"] .gv-teade__link { margin-right: 56px; }
	.gv-teated--karussell[data-gv-total="3"] .gv-teade__link { margin-right: 80px; }
	.gv-teated--karussell[data-gv-total="4"] .gv-teade__link { margin-right: 104px; }
	.gv-teated--karussell[data-gv-total="5"] .gv-teade__link { margin-right: 128px; }

	.gv-teated__count {
		display: none;
	}

	/* Mobiilil ainult kerad – nooled dubleeriksid pühkimisžesti. */
	.gv-teated__btn {
		display: none;
	}

	.gv-teated--karussell .gv-teated__dots {
		display: flex;
		gap: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gv-teated--karussell .gv-teated__track {
		transition: none;
	}
}

@media print {
	.gv-teated {
		display: none;
	}
}