/*
 * Komponenty sekcií na mobilnom plátne (440 px) – rovnaké HTML ako desktop,
 * rozloženie podľa mobilného dizajnu (Figma Mobile_*). Rozmery sú v px
 * 440 plátna, relatívne k zóne (scripts/zones-defs.json, kľúče „m:<slug>").
 */

/* Spoločné: šípky a bodky v jednom riadku, vycentrované. */
.zs-dv-m .zs-sec-controls {
	position: absolute;
	left: 0;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 440px;
}

.zs-dv-m .zs-sec-arrow {
	width: 44px;
	height: 44px;
	color: #a89f92;
}

.zs-dv-m .zs-sec-dots {
	gap: 12px;
}

.zs-dv-m .zs-sec-dots button {
	position: relative;
	width: 10px;
	height: 10px;
	border: 1px solid var(--zs-sand-dark);
	background: #fff;
}

/* Klikacia plocha bodky aspoň 24 px (WCAG 2.5.8). */
.zs-dv-m .zs-sec-dots button::after {
	position: absolute;
	inset: -7px;
	content: "";
}

.zs-dv-m .zs-sec-dots button[aria-current="true"] {
	border-color: var(--zs-teal);
	background: var(--zs-teal);
}

.zs-sec-btn--teal {
	border-color: var(--zs-teal);
	background: var(--zs-teal);
	color: #fff;
}

/* Rozbaľovací výber (kategórie, filter odborníkov): zbalený = len aktívna
   položka v čiernej pilulke so šípkou, rozbalený = zoznam pod sebou. */
.zs-dv-m :is(.zs-kt-tabs, .zs-od-tabs) {
	top: 0;
	left: 30px;
	z-index: 5;
	display: block;
	width: 380px;
	height: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 30px;
	background: var(--zs-black);
	transform: none;
}

.zs-dv-m :is(.zs-kt-tab, .zs-od-tab) {
	display: none;
	justify-content: flex-start;
	width: 100%;
	height: 60px;
	margin: 0;
	padding: 0 56px 0 28px;
	border-radius: 30px;
	color: var(--zs-sand-light);
	text-align: left;
}

.zs-dv-m :is(.zs-kt-tab, .zs-od-tab)::before {
	display: none;
}

.zs-dv-m :is(.zs-kt-tab[aria-selected="true"], .zs-od-tab[aria-pressed="true"]),
.zs-dv-m .is-open > :is(.zs-kt-tab, .zs-od-tab) {
	display: flex;
}

/* Šípka výberu pri aktívnej položke. */
.zs-dv-m :is(.zs-kt-tab[aria-selected="true"], .zs-od-tab[aria-pressed="true"])::after {
	position: absolute;
	top: 26px;
	right: 34px;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s;
	content: "";
}

.zs-dv-m .is-open > :is(.zs-kt-tab[aria-selected="true"], .zs-od-tab[aria-pressed="true"])::after {
	top: 29px;
	transform: rotate(-135deg);
}

.zs-dv-m .is-open > :is(.zs-kt-tab, .zs-od-tab):not([aria-selected="true"]):not([aria-pressed="true"]):hover {
	background: rgba(250, 248, 242, 0.12);
	color: var(--zs-sand-light);
}

.zs-dv-m .zs-od-tab {
	gap: 14px;
	--fill-0: var(--zs-yellow);
}

/* --- Premeny (úvod, O aplikácii) – karta 380 px, jedna na šírku. --- */
.zs-dv-m .zs-pk-track {
	top: 5px;
	left: 0;
	width: 440px;
	height: auto;
	gap: 20px;
	padding: 0 30px 30px;
	scroll-padding-left: 30px;
}

.zs-dv-m .zs-pk-track > :nth-child(even) {
	margin-top: 0;
}

.zs-dv-m .zs-pk-track > * {
	border-color: var(--zs-teal);
}

.zs-dv-m .zs-pk-track > :first-child {
	box-shadow: none;
}

.zs-dv-m .zs-pk-card {
	width: 380px;
	padding: 28px 30px 30px;
}

.zs-dv-m .zs-pk-card img {
	width: 316px;
	height: 260px;
}

.zs-dv-m .zs-pk-name {
	margin-top: 26px;
	padding: 0;
	font-size: 32px;
	line-height: 1.2;
}

.zs-dv-m .zs-pk-more {
	width: 100%;
	height: 44px;
	margin-top: 24px;
	justify-content: space-between;
	padding: 0 28px 0 38px;
}

.zs-dv-m .zs-pk-controls {
	top: 568px;
	left: 0;
	justify-content: center;
	width: 440px;
	gap: 10px;
}

/* --- Tím (úvod, O nás) – len stredná karta, šípky pod ňou. --- */
.zs-dv-m .zs-tk {
	height: 713px;
}

.zs-dv-m .zs-tk-card[data-slot="0"],
.zs-dv-m .zs-tk-card[data-slot="2"] {
	display: none;
}

.zs-dv-m .zs-tk-card--center {
	top: 90px;
	left: 31px;
	width: 378px;
	height: 508px;
	padding-top: 316px;
	border-radius: 40px;
}

.zs-dv-m .zs-tk-card--center .zs-tk-photo {
	top: -84px;
	width: 300px;
	height: 400px;
}

.zs-dv-m .zs-tk-card--center .zs-tk-name {
	font-size: 36px;
	line-height: 1.2;
}

.zs-dv-m .zs-tk-bio {
	min-height: 0;
	margin-top: 8px !important;
	padding: 0 30px;
}

.zs-dv-m .zs-tk-card--center .zs-sec-btn {
	bottom: 46px;
}

.zs-dv-m .zs-tk > .zs-sec-arrow {
	top: 664px;
}

.zs-dv-m .zs-tk > .zs-sec-arrow[data-dir="prev"] {
	left: 150px;
}

.zs-dv-m .zs-tk > .zs-sec-arrow[data-dir="next"] {
	left: 246px;
}

/* --- Komunita (úvod, Naši odborníci) – screenshoty komentárov. --- */
.zs-dv-m .zs-km-track {
	inset: 0 0 60px;
	gap: 16px;
	padding: 10px 30px 20px;
	scroll-padding-left: 30px;
}

.zs-dv-m .zs-km-card {
	width: 360px;
	padding: 10px;
	border-radius: 20px;
}

.zs-dv-m .zs-km .zs-sec-controls {
	bottom: 4px;
}

/* --- Najčastejšie otázky – pozri faq.css (komponent je len mobilný). --- */

/* --- Kategórie (O aplikácii) – výber, nadpis, perex, karty 313 px, šípky.
   V toku (nie absolútne): texty klienta majú rôznu dĺžku a zóna sa
   prispôsobí výške aktívneho tabu (data-zs-fit, sections/base.js). --- */
.zs-dv-m .zs-kt {
	bottom: auto;
	min-height: 820px;
	padding-top: 84px;
}

.zs-dv-m .zs-kt-panel {
	position: static;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	justify-items: center;
	padding-bottom: 30px;
}

.zs-dv-m .zs-kt-panel[hidden] {
	display: none;
}

.zs-dv-m .zs-kt-title {
	position: static;
	grid-area: 1 / 1 / 2 / -1;
	padding: 0 30px;
	font-size: 28px;
}

.zs-dv-m .zs-kt-perex {
	position: static;
	grid-area: 2 / 1 / 3 / -1;
	width: 380px;
	margin-top: 18px;
	font-size: 15px;
	transform: none;
}

.zs-dv-m .zs-kt-perex p + p {
	margin-top: 14px;
}

.zs-dv-m .zs-kt-track {
	position: static;
	grid-area: 3 / 1 / 4 / -1;
	width: 440px;
	margin-top: 14px;
	gap: 20px;
	padding: 10px 30px;
	scroll-padding-left: 30px;
}

.zs-dv-m .zs-kt-card {
	width: 313px;
	min-height: 0;
	padding-bottom: 24px;
	border-radius: 30px;
}

.zs-dv-m .zs-kt-card:nth-child(2) {
	border-color: var(--zs-stroke);
}

.zs-dv-m .zs-kt-card img {
	width: 309px;
	height: 195px;
	border-radius: 28px 28px 0 0;
}

.zs-dv-m .zs-kt-card h4 {
	margin: 24px 30px 0;
}

.zs-dv-m .zs-kt-card p {
	margin: 10px 30px 0;
}

/* ← • • • → v jednom riadku pod kartami. */
.zs-dv-m .zs-kt-panel > .zs-sec-arrow {
	position: static;
	grid-row: 4;
	width: 44px;
	height: 44px;
	margin-top: 6px;
	border: 0;
	background: none;
	box-shadow: none;
}

.zs-dv-m .zs-kt-panel > .zs-sec-arrow[data-dir="prev"] {
	grid-column: 1;
	justify-self: end;
}

.zs-dv-m .zs-kt-panel > .zs-sec-arrow[data-dir="next"] {
	grid-column: 3;
	justify-self: start;
}

.zs-dv-m .zs-kt-panel > .zs-sec-dots {
	position: static;
	grid-area: 4 / 2;
	align-self: center;
	margin: 6px 10px 0;
	transform: none;
}

.zs-dv-m .zs-kt-panel > .zs-sec-arrow:disabled {
	opacity: 0.3;
}

/* --- Malé veci (O aplikácii) – len text karty (ikona, nadpis, popis). --- */
.zs-dv-m .zs-mv-layer,
.zs-dv-m .zs-mv-photo {
	display: none;
}

.zs-dv-m .zs-mv-card {
	top: 0;
	left: 30px;
	width: 380px;
	height: 330px;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.zs-dv-m .zs-mv-text {
	width: 100%;
	padding: 14px 0 0;
	text-align: center;
}

.zs-dv-m .zs-mv-icon {
	margin: 0 auto;
}

.zs-dv-m .zs-mv-text h3 {
	position: relative;
	margin-top: 14px !important;
	padding-bottom: 28px;
	font-family: var(--zs-light);
	font-size: 24px;
}

/* Tyrkysová linka pod nadpisom (v dizajne 230 × 2 px). */
.zs-dv-m .zs-mv-text h3::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 230px;
	height: 2px;
	background: var(--zs-teal);
	transform: translateX(-50%);
	content: "";
}

.zs-dv-m .zs-mv-text p {
	margin-top: 26px !important;
	font-size: 18px;
}

.zs-dv-m .zs-mv-controls {
	top: 340px;
	gap: 10px;
}

/* --- Príbeh (O nás) – fotka, počítadlo, text, šípky s bodkami. --- */
.zs-dv-m .zs-pb-photos {
	top: 55px;
	left: 30px;
	width: 380px;
	height: 427px;
	border-radius: 40px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.zs-dv-m .zs-pb-badge {
	top: 5px;
	left: 91px;
	gap: 14px;
	width: 258px;
	height: 90px;
	padding: 0 24px 0 30px;
	border-radius: 30px;
	font-size: 13px;
}

.zs-dv-m .zs-pb-badge svg {
	width: 34px;
	height: 31px;
}

.zs-dv-m .zs-pb-counter {
	top: 512px;
	left: 50%;
	height: 46px;
	transform: translateX(-50%);
}

.zs-dv-m .zs-pb-panel {
	top: 582px;
	left: 30px;
	width: 380px;
	font-size: 15px;
	text-align: center;
}

.zs-dv-m .zs-pb-title {
	margin-bottom: 22px !important;
	font-size: 32px;
}

.zs-dv-m .zs-pb-panel p + p {
	margin-top: 18px;
}

.zs-dv-m .zs-pb-nav {
	display: none;
}

.zs-dv-m .zs-pb-controls {
	top: 930px;
	left: 0;
	justify-content: center;
	width: 440px;
	gap: 10px;
}

/* --- Naši odborníci – perex, výber filtra, karusel kariet. --- */
.zs-dv-m .zs-od-perex {
	width: 380px;
	margin: 0 auto !important;
	font-size: 15px;
}

.zs-dv-m .zs-od--m .zs-od-tabs {
	top: 120px;
}

.zs-dv-m .zs-od--m .zs-od-grid {
	top: 190px;
	left: 0;
	display: flex;
	width: 440px;
	gap: 20px;
	padding: 100px 30px 20px;
	scroll-padding-left: 30px;
}

.zs-dv-m .zs-od--m .zs-od-card {
	width: 378px;
	height: 480px;
	padding-top: 330px;
	border: 2px solid var(--zs-stroke);
	background: var(--zs-sand);
}

.zs-dv-m .zs-od--m .zs-od-photo {
	top: -84px;
	width: 300px;
	height: 400px;
}

.zs-dv-m .zs-od--m .zs-od-photo::after {
	background: linear-gradient(to bottom, rgba(249, 234, 219, 0), var(--zs-sand) 90%);
}

.zs-dv-m .zs-od--m .zs-od-name {
	font-size: 32px;
	line-height: 1.2;
}

.zs-dv-m .zs-od--m .zs-od-bio {
	margin-top: 8px !important;
}

.zs-dv-m .zs-od--m .zs-sec-controls {
	top: 876px;
}

/* Veľa kariet (premeny 18, odborníci 32) – menšie bodky, aby sa riadok zmestil. */
.zs-dv-m :is(.zs-pk-controls, .zs-od--m .zs-sec-controls) .zs-sec-dots {
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	max-width: 290px;
}

.zs-dv-m :is(.zs-pk-controls, .zs-od--m .zs-sec-controls) .zs-sec-dots button {
	width: 7px;
	height: 7px;
}

/* Odborníkov je 32 – bodky by zabrali dva riadky, stačia šípky. */
.zs-dv-m .zs-od--m .zs-sec-dots {
	display: none;
}

.zs-dv-m .zs-od--m .zs-sec-controls {
	gap: 120px;
}

/* --- Premeny (stránka) – jeden stĺpec: fotka 380 × 300, meno a kilá pod ňou. --- */
.zs-dv-m .zs-pm-grid {
	grid-template-columns: 380px;
	gap: 30px;
	padding: 10px 30px 40px;
}

.zs-dv-m .zs-pm-grid .zs-pk-card {
	width: 380px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.zs-dv-m .zs-pm-grid .zs-pk-card img {
	width: 380px;
	height: 300px;
	border-radius: 30px;
}

.zs-dv-m .zs-pm-grid .zs-pk-kg {
	right: 0;
	bottom: -20px;
}

.zs-dv-m .zs-pm-grid .zs-pk-name {
	margin-top: 8px;
	padding: 0;
	font-size: 32px;
	line-height: 1.5;
}