/**
 * Custom Tabs – animácie, viditeľnosť tabov a štrukturálne CSS navigácie.
 *
 * Vizuálne štýlovanie tlačidiel (farby, paddingy, indikátor aktívneho) si rieši Erik
 * mimo tohto súboru. Tu je iba minimum potrebné pre funkčnosť + horizontálny scroll
 * so snapom na mobile.
 *
 * @package melino
 * @version 1.0.0
 */

:root {
	--zz-tabs-duration: 350ms;
	--zz-tabs-distance: 30px;
	--zz-tabs-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   TAB ITEMS – viditeľnosť a animácie
   ============================================================ */

/* Skry všetky .tab-item, ktoré nie sú aktívne ani v stave odchodu */
.tab-item:not(.tab-item-active):not(.zz-tab-leaving) {
	display: none !important;
}

/* Predvolený "pokojný" stav – aktívny tab */
.tab-item {
	opacity: 1;
	transform: translateX(0);
	transition:
		opacity var(--zz-tabs-duration) var(--zz-tabs-easing),
		transform var(--zz-tabs-duration) var(--zz-tabs-easing);
	will-change: opacity, transform;
}

/* Štartovacia poloha pri vstupe – pred odobratím .zz-tab-entering */
.tab-item.zz-tab-entering {
	opacity: 0;
	transform: translateX(calc(var(--zz-tabs-distance) * -1));
}

/* Stav počas odchodu – posun do prava + fade out */
.tab-item.zz-tab-leaving {
	opacity: 0;
	transform: translateX(var(--zz-tabs-distance));
	pointer-events: none;
}

/* ============================================================
   KONTAJNER – orež overflow počas animácie
   ============================================================ */

.zz-tabs-container {
	overflow-x: hidden; /* fallback */
	overflow-x: clip;   /* moderné prehliadače – neovplyvňuje scroll */
}

/* ============================================================
   NAVIGÁCIA – minimálna štruktúra (styling si robí Erik)
   ============================================================ */

.zz-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 30px;
}

.zz-tabs-nav > button {
	display: flex;
    border: 0;
    line-height: 1;
    padding: 10px 15px;
    border-radius: 30px;
    overflow: hidden;
    background-color: transparent;
	color: var(--awb-color6);
	transition: all .3s ease;
	font-family: 'SeasonSansTRIAL-Medium';
	letter-spacing: .05em;
	cursor: pointer;
	text-transform: uppercase;
}

.zz-tabs-nav > button:hover {
	background-color: #d6f1cf;
}

.zz-tabs-nav > button.is-active {
	background-color: var(--awb-color6);
	color: var(--awb-color5);
}

.tab-title {
	display: none !important;
}

/* Mobile: horizontálny scroll so snapom */
@media (max-width: 640px) {
	.zz-tabs-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.zz-tabs-nav::-webkit-scrollbar {
		display: none;
	}

	.zz-tabs-nav > button {
		scroll-snap-align: start;
		flex: 0 0 auto;
	}
}

/* ============================================================
   PRÍSTUPNOSŤ – rešpektuj OS preferenciu znížených pohybov
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.tab-item,
	.tab-item.zz-tab-entering,
	.tab-item.zz-tab-leaving {
		transition: opacity 120ms linear;
		transform: none !important;
	}
}