/*
 * Naši odborníci – zóna od x 40, y 1080 (pod nadpisom „Nevieš komu a čomu veriť?").
 * Lišta filtrov 60 px vysoká na y 105 (v dizajne 1185), mriežka 4 × 330 px
 * na x 60/430/800/1170 (v dizajne 100/470/840/1210). Geometriu mriežky drží
 * aj PHP (ZANZISAN_OD_*) – pri zmene upraviť oboje.
 */

.zs-od {
	position: absolute;
	inset: 0;
}

.zs-od-perex {
	width: 820px;
	margin: 8px auto 0 !important;
	font-size: 18px;
	line-height: 1.5;
	text-align: center;
}

.zs-od-perex strong {
	font-family: var(--zs-bold);
	font-weight: normal;
}

.zs-od-tabs {
	position: absolute;
	top: 105px;
	left: 50%;
	display: flex;
	align-items: center;
	height: 60px;
	border: 2px solid var(--zs-stroke);
	border-radius: 30px;
	background: var(--zs-sand-light);
	transform: translateX(-50%);
}

.zs-od-tab {
	position: relative;
	display: inline-flex;
	gap: 26px;
	align-items: center;
	height: 60px;
	margin: -2px 0;
	padding: 0 28px;
	border: 0;
	border-radius: 30px;
	background: transparent;
	color: var(--zs-black);
	font-family: var(--zs-bold);
	font-size: 18px;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.25s, color 0.25s;
	--fill-0: #c5baae;
}

/* Oddeľovače medzi neaktívnymi tabmi (v dizajne 1 × 30 px). */
.zs-od-tab + .zs-od-tab::before {
	position: absolute;
	top: 15px;
	left: 0;
	width: 1px;
	height: 30px;
	background: var(--zs-sand-dark);
	content: "";
}

.zs-od-tab[aria-pressed="true"]::before,
.zs-od-tab[aria-pressed="true"] + .zs-od-tab::before {
	display: none;
}

.zs-od-tab[aria-pressed="true"] {
	background: var(--zs-black);
	color: var(--zs-sand-light);
	--fill-0: var(--zs-yellow);
}

.zs-od-tab:not([aria-pressed="true"]):hover {
	color: rgba(26, 26, 26, 0.6);
}

.zs-od-tab svg {
	flex: none;
	width: auto;
	height: 24px;
}

.zs-od-grid {
	position: absolute;
	top: 300px;
	left: 60px;
	display: grid;
	grid-template-columns: repeat(4, 330px);
	gap: 110px 40px;
}

.zs-od-card {
	position: relative;
	height: 420px;
	padding-top: 288px;
	border: 1px solid var(--zs-stroke);
	border-radius: 40px;
	background: #fff;
	text-align: center;
}

.zs-od-card[hidden] {
	display: none;
}

.zs-od-photo {
	position: absolute;
	top: -49px;
	left: 50%;
	width: 300px;
	height: 330px;
	overflow: hidden;
	transform: translateX(-50%);
}

.zs-od-photo img {
	width: 100%;
	height: auto;
}

.zs-od-photo::after {
	position: absolute;
	inset: auto 0 0;
	height: 45%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 90%);
	content: "";
}

.zs-od-label {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 1;
	padding: 6px 14px;
	border: 1px solid var(--zs-stroke);
	border-radius: 15px;
	background: var(--zs-sand-light);
	font-family: var(--zs-bold);
	font-size: 14px;
	line-height: 1.3;
}

.zs-od-name {
	padding: 0 20px;
	font-family: var(--zs-bold);
	font-size: 24px;
	font-weight: normal;
	line-height: 1.5;
}

.zs-od-bio {
	padding: 0 30px;
	font-size: 18px;
	line-height: 1.5;
}