/*
 * Komponenty sekcií dizajnu (inc/design-sections.php) – spoločný základ.
 *
 * Komponenty ležia na 1640 px plátne (škáluje ho design-canvas.js), takže
 * všetky rozmery sú v px dizajnu. Písma a farby = tokeny Figmy.
 */

.zs-sec {
	--zs-black: #1a1a1a;
	--zs-yellow: #ffbe00;
	--zs-teal: #00d1c7;
	--zs-mint: #bce8e7;
	--zs-sand: #f9eadb;
	--zs-sand-light: #faf8f2;
	--zs-sand-dark: #c5baae;
	--zs-stroke: rgba(197, 186, 174, 0.5);
	--zs-bold: "GT Ultra:Bold", sans-serif;
	--zs-light: "GT Ultra:Light", sans-serif;

	position: absolute;
	z-index: 40;
	box-sizing: border-box;
	color: var(--zs-black);
	font-family: var(--zs-light);
	font-size: 18px;
	line-height: 1.5;
}

.zs-sec *,
.zs-sec *::before,
.zs-sec *::after {
	box-sizing: border-box;
}

.zs-sec :where(h2, h3, h4, p, ul, figure) {
	margin: 0;
	padding: 0;
}

.zs-sec :where(ul) {
	list-style: none;
}

.zs-sec img {
	display: block;
	max-width: none;
}

.zs-sec :where(a) {
	color: inherit;
	text-decoration: none;
}

/* Šípky karuselov – tvar z dizajnu, klikacia plocha ≥ 44 px. */
.zs-sec-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--zs-black);
	cursor: pointer;
	transition: transform 0.2s, opacity 0.2s;
}

.zs-sec-arrow svg {
	width: 23px;
	height: 16px;
}

.zs-sec-arrow:hover:not(:disabled) {
	transform: scale(1.15);
}

.zs-sec-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.zs-sec-arrow:focus {
	outline: none;
}

.zs-sec :focus-visible {
	outline: 3px solid var(--zs-teal);
	outline-offset: 3px;
	border-radius: 12px;
}

/* Bodky stránkovania. */
.zs-sec-dots {
	display: flex;
	gap: 16px;
	align-items: center;
}

.zs-sec-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(26, 26, 26, 0.18);
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}

.zs-sec-dots button[aria-current="true"] {
	background: var(--zs-teal);
	transform: scale(1.25);
}

/* Posuvný pás kariet – natívny scroll (dotyk, touchpad), bez lišty. */
.zs-sec-track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	align-items: flex-start;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.zs-sec-track::-webkit-scrollbar {
	display: none;
}

.zs-sec-track > * {
	flex: none;
	scroll-snap-align: start;
}

/* Tlačidlá ako v dizajne (pilulky). */
.zs-sec-btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 28px;
	border: 1px solid var(--zs-sand-dark);
	border-radius: 30px;
	background: transparent;
	font-family: var(--zs-bold);
	font-size: 15px;
	transition: filter 0.2s, box-shadow 0.2s;
}

.zs-sec-btn--yellow {
	border-color: var(--zs-yellow);
	background: var(--zs-yellow);
}

.zs-sec-btn:hover {
	filter: brightness(0.95);
	box-shadow: 0 6px 18px rgba(26, 26, 26, 0.12);
}

.zs-sec-btn svg {
	width: 13px;
	height: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.zs-sec *,
	.zs-sec-track {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}