/* =========================================================================
   ZŠ a MŠ – Vlnka (frontend)
   Oddělovač sekcí jako OPAKUJÍCÍ SE vlnka. Jedna dlaždice s pevnou šířkou se
   tiluje přes CSS mask (repeat-x), barvu dělá background-color. Na širokém
   monitoru vln přibývá – nikdy se neroztáhnou ani neuříznou. Stejný princip
   jako vlnky v hlavičce webu.

   Šířku jedné vlny (mask-size X), výšku, barvu, posun a překlopení řídí
   Elementor style controls; tady jsou tvary dlaždic a rozumné výchozí hodnoty.
   ========================================================================= */

.zsms-vlnka {
	line-height: 0; /* zruší mezeru pod inline prvkem, aby nevznikala škvíra */
	font-size: 0;
	width: 100%;
}

.zsms-vlnka__wave {
	display: block;
	width: 100%;
	height: 28px;
	background-color: #e3d8c6;

	/* Dlaždice se opakuje vodorovně s pevnou šířkou (mask-size X),
	   svisle vyplní celou výšku (100%). */
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 64px 100%;
	mask-size: 64px 100%;
	-webkit-mask-position: left bottom;
	mask-position: left bottom;
}

/* ---------- Tvary dlaždic (jedna perioda vlny, plocha dole) ---------- */

/* Vlnky jako v menu – hladká sinusovka. */
.zsms-vlnka__wave--sinus {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20' viewBox='0 0 64 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q16 1 32 10 Q48 19 64 10 L64 20 L0 20 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20' viewBox='0 0 64 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q16 1 32 10 Q48 19 64 10 L64 20 L0 20 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Obloučky – kulaté domečky vedle sebe. */
.zsms-vlnka__wave--obloucky {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20' viewBox='0 0 64 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q16 2 32 20 Q48 2 64 20 L64 20 L0 20 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20' viewBox='0 0 64 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q16 2 32 20 Q48 2 64 20 L64 20 L0 20 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Špičatá – jemný zubatý okraj. */
.zsms-vlnka__wave--spicata {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20' viewBox='0 0 64 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L32 3 L64 20 L64 20 L0 20 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20' viewBox='0 0 64 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L32 3 L64 20 L64 20 L0 20 Z' fill='%23000'/%3E%3C/svg%3E");
}