/* =========================================================
   JandaSport Landing – podle návrhu z Figmy (plátno 1440 px)
   ========================================================= */

/* --- Uvolnění kontejnerů šablony Customify na celou šířku --- */
body.jsl-active #site-content,
body.jsl-active #site-content > .customify-container,
body.jsl-active #site-content .customify-grid,
body.jsl-active #main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
body.jsl-active #site-content .customify-grid { display: block; }
/* nadpis stránky a drobečková navigace ze šablony – stránka má vlastní úvod */
body.jsl-active #page-titlebar,
body.jsl-active #page-breadcrumb { display: none; }

.jsl {
	--jsl-blue: #0057ff;
	--jsl-dark: #171717;
	--jsl-navy: #0c2873;
	--jsl-light: #ededed;
	--jsl-white: #fff;
	--jsl-radius: 30px;
	font-family: "Montserrat", Arial, sans-serif;
	color: var(--jsl-dark);
	line-height: 1.45;
	overflow-x: clip;
}
.jsl *,
.jsl *::before,
.jsl *::after { box-sizing: border-box; }
/* reset přes :where() – nulová specificita, takže třídy níže vždy vyhrají */
.jsl :where(h1, h2, h3, p, ul, li, figure, blockquote) { margin: 0; padding: 0; border: 0; }
.jsl :where(h1, h2, h3) { font-family: inherit; color: inherit; text-transform: none; }
.jsl :where(ul) { list-style: none; }
.jsl :where(blockquote) { font-style: normal; quotes: none; background: none; }
.jsl :where(blockquote)::before, .jsl :where(blockquote)::after { content: none; }
.jsl img { display: block; max-width: 100%; height: auto; }
.jsl :where(a) { color: inherit; text-decoration: none; }
.jsl em { font-style: normal; color: var(--jsl-blue); }
.jsl .jsl-dot { color: var(--jsl-blue); }

.jsl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.jsl-wrap { width: 100%; max-width: 1000px; margin: 0 auto; }
.jsl-wrap--narrow { max-width: 900px; }

.jsl-section { padding: 100px 40px; }
.jsl-light { background: var(--jsl-light); }
.jsl-dark,
.jsl-navy { color: var(--jsl-white); }

.jsl-h1,
.jsl-h2 {
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.01em;
}
.jsl-h1 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.12; color: var(--jsl-white); }
.jsl-h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.2; margin-bottom: 60px; }

/* --- Štítky (pilulky) --- */
.jsl-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 20px 0;
}
.jsl-tags li {
	padding: 5px 15px;
	border-radius: 999px;
	background: var(--jsl-white);
	color: var(--jsl-dark);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}
.jsl-tags li {
	cursor: default;
	transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.jsl-tags li .jsl-dot { transition: color .2s ease; }
.jsl-tags li:hover {
	background: var(--jsl-blue);
	color: var(--jsl-white);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 87, 255, .25);
}
.jsl-tags li:hover .jsl-dot { color: var(--jsl-white); }
.jsl-tags--blue { justify-content: center; padding: 12px 0 0; }
.jsl-tags--blue li { background: var(--jsl-blue); color: var(--jsl-white); font-size: 14px; }
.jsl-tags--blue .jsl-dot { color: var(--jsl-dark); }
.jsl-tags--blue li:hover { background: var(--jsl-white); color: var(--jsl-blue); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.jsl-tags--blue li:hover .jsl-dot { color: var(--jsl-blue); }

/* =========================================================
   HERO
   ========================================================= */
.jsl-hero {
	/* Výška fotky (--jsl-hero-h): jako v návrhu, ale na nižších obrazovkách jen tak velká,
	   aby fotka + nadpis + podnadpis + tlačítka byly vidět bez posouvání.
	   Horních 5 % fotky (prázdné pozadí) se ořízne; text začíná v 64 % výšky fotky,
	   kde už postavy mizí → 0.59 = 0.64 − 0.05. 340 px = výška textu s tlačítky. */
	--jsl-hero-h: min(93.75vw, 1350px);
	--jsl-hero-h: min(93.75vw, 1350px, max(600px, calc((100svh - 340px) / 0.59)));
	position: relative;
	background: #161a23;
	color: var(--jsl-white);
	padding-bottom: 70px;
}
.jsl-hero__bg {
	position: relative;
	display: block;
	height: calc(var(--jsl-hero-h) * 0.95);
	overflow: hidden;
	/* barvy okrajů fotky – fotka bývá užší než okno a plynule do nich přechází */
	background: linear-gradient(180deg, #171716 0%, #171718 11%, #16191e 21%, #151b27 29%, #142037 37%, #122549 43%, #0f2b5f 49%, #0e2e6b 55%, #0f2c61 61%, #112854 68%, #122449 77%, #132039 85%, #151d2d 93%, #161a23 100%);
}
.jsl-hero__bg img {
	width: auto;
	max-width: 100%;
	height: var(--jsl-hero-h);
	margin: calc(var(--jsl-hero-h) * -0.05) auto 0;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.jsl-hero__content {
	position: relative;
	margin-top: calc(-0.36 * var(--jsl-hero-h));
	padding: 0 40px;
	max-width: 1200px;
	text-align: center;
}
.jsl-lead {
	max-width: 860px;
	margin: 30px auto 0;
	font-size: clamp(17px, 1.45vw, 21px);
	line-height: 1.5;
}
.jsl-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 36px;
}
.jsl .jsl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 14px 32px;
	border: 2px solid var(--jsl-blue);
	border-radius: 999px;
	background: var(--jsl-blue);
	color: var(--jsl-white);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.jsl .jsl-btn:hover,
.jsl .jsl-btn:focus-visible {
	background: #2a75ff;
	border-color: #2a75ff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 87, 255, .35);
}
.jsl .jsl-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .45); }
.jsl .jsl-btn--ghost:hover,
.jsl .jsl-btn--ghost:focus-visible { background: rgba(255, 255, 255, .1); border-color: var(--jsl-white); box-shadow: none; }
html:has(body.jsl-active) { scroll-behavior: smooth; }
.jsl section[id] { scroll-margin-top: 90px; }

.jsl-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1000px;
	margin: 50px auto 0;
}
.jsl-stats li { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.jsl-stats strong { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.2; color: var(--jsl-blue); }
.jsl-stats span { max-width: 230px; font-size: 16px; font-weight: 700; line-height: 1.4; }

/* =========================================================
   KARTY S FOTKOU (projekty, případová studie)
   ========================================================= */
.jsl-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 50px 30px;
}
.jsl-projects { row-gap: 50px; }

.jsl-photo-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 485 / 390;
	overflow: hidden;
	border-radius: var(--jsl-radius);
	/* náhradní pozadí, když chybí fotka */
	background: linear-gradient(180deg, #a9bdf5 0%, #3f6cf0 100%);
}
.jsl-photo-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.jsl-photo-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 87, 255, 0) 45%, rgba(0, 60, 220, .85) 100%);
	pointer-events: none;
}
.jsl-photo-card--dark::after { background: linear-gradient(180deg, rgba(23, 23, 23, 0) 45%, rgba(23, 23, 23, .92) 100%); }
.jsl-photo-card__title {
	z-index: 1;
	position: relative;
	padding: 0 40px 35px;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--jsl-white);
}
.jsl-photo-card--case { aspect-ratio: 4 / 3; }
.jsl-photo-card--dark .jsl-photo-card__title .jsl-dot { color: var(--jsl-blue); }
/* zvýrazněné číslo v nadpisu karty – modrý štítek, čitelný na jakékoli fotce */
.jsl-photo-card__title em {
	display: table;
	margin-bottom: 8px;
	padding: 4px 12px;
	border-radius: 8px;
	background: var(--jsl-blue);
	color: var(--jsl-white);
}
.jsl-photo-card:not(.jsl-photo-card--dark) .jsl-photo-card__title .jsl-dot { color: var(--jsl-white); }

.jsl .is-link:hover img,
.jsl .is-link:focus-visible img { transform: scale(1.04); }
.jsl .is-link:focus-visible { outline: 3px solid var(--jsl-blue); outline-offset: 4px; }

/* --- Loga klientů --- */
.jsl-clients-title { margin-top: 100px; }
.jsl-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 50px 50px;
	max-width: 900px;
	margin: 0 auto;
}
.jsl-logos li { display: flex; justify-content: center; }
.jsl-logos img { max-height: 90px; object-fit: contain; }

/* =========================================================
   CO KLIENTŮM PŘINÁŠÍME
   ========================================================= */
.jsl-services {
	background: linear-gradient(155deg, var(--jsl-dark) 15%, var(--jsl-navy) 90%);
	padding-top: 110px;
	padding-bottom: 130px;
}
.jsl-services .jsl-h2 { margin-bottom: 110px; }
.jsl-service-list { display: flex; flex-direction: column; gap: 110px; }
.jsl-service {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 70px;
}
.jsl-service.is-reversed { flex-direction: row-reverse; }
.jsl-service.is-reversed .jsl-service__text { text-align: right; }
.jsl-service__icon {
	flex: 0 0 160px;
	display: flex;
	justify-content: center;
	color: var(--jsl-white);
}
.jsl-service__icon svg { width: auto; height: 150px; max-width: 176px; }
.jsl-service__text { width: 300px; }
.jsl-service__text h3 {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--jsl-blue);
}
.jsl-service__text h3 .jsl-dot { color: var(--jsl-white); }
.jsl-service__text p { margin-top: 20px; font-size: 18px; line-height: 1.25; font-weight: 500; }

/* =========================================================
   PŘÍPADOVÉ STUDIE
   ========================================================= */
.jsl-dark-card {
	display: flex;
	align-items: flex-end;
	min-height: 307px;
	padding: 40px;
	border-radius: var(--jsl-radius);
	background: linear-gradient(180deg, #313131 0%, #1b1b1b 100%);
	color: var(--jsl-white);
	transition: background .3s ease;
}
.jsl-dark-card h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; font-weight: 700; }
.jsl-dark-card.is-link:hover { background: linear-gradient(180deg, #2a3a6a 0%, #1b1b1b 100%); }

/* =========================================================
   PRODUKCE (videa)
   ========================================================= */
.jsl-navy { background: linear-gradient(180deg, var(--jsl-navy) 0%, #142a6a 45%, var(--jsl-dark) 100%); }
.jsl-videos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px 50px;
}
.jsl-video { text-align: center; }
.jsl-video--featured { grid-column: 1 / -1; }
.jsl-video__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--jsl-radius);
	background: rgba(255, 255, 255, .06);
}
.jsl-video__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.jsl-play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	border-radius: 50%;
	background: var(--jsl-blue);
	color: var(--jsl-white);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	transition: transform .25s ease, background-color .25s ease;
}
.jsl-play svg { width: 30px; height: 30px; margin-left: 4px; }
.jsl-video--featured .jsl-play { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
.jsl .is-video:hover .jsl-play,
.jsl .is-video:focus-visible .jsl-play { transform: scale(1.1); background: #2a75ff; }

.jsl-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 12, 20, .88);
}
.jsl-modal[hidden] { display: none; }
.jsl-modal__box { position: relative; width: min(1100px, 100%, calc((100svh - 140px) * 16 / 9)); }
.jsl-modal__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
	background: #000;
}
.jsl-modal__media iframe,
.jsl-modal__media video { display: block; width: 100%; height: 100%; border: 0; }
#jsl-modal .jsl-modal__close,
#jsl-modal .jsl-modal__close:hover,
#jsl-modal .jsl-modal__close:focus,
#jsl-modal .jsl-modal__close:active {
	position: absolute;
	top: -50px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 0;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	box-shadow: none;
	color: #fff;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}
#jsl-modal .jsl-modal__close:hover,
#jsl-modal .jsl-modal__close:focus-visible { background: rgba(255, 255, 255, .28); }
#jsl-modal .jsl-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#jsl-modal .jsl-modal__close svg { width: 20px; height: 20px; }
html.jsl-modal-open { overflow: hidden; }

.jsl .jsl-more {
	display: inline-block;
	margin-top: 14px;
	color: rgba(255, 255, 255, .8);
	font-size: 15px;
	font-weight: 700;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	transition: color .2s ease, border-color .2s ease;
}
.jsl .jsl-more:hover { color: #fff; border-color: #fff; }
.jsl .jsl-more span { display: inline-block; transition: transform .2s ease; }
.jsl .jsl-more:hover span { transform: translateX(3px); }

/* plovoucí tlačítko na mobilu (zobrazuje landing.js) */
.jsl-sticky { display: none; }

.jsl-video__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .25);
}
.jsl-video__placeholder svg { width: 64px; height: 64px; }
.jsl-video h3 {
	margin-top: 25px;
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.2;
	font-weight: 700;
}

/* =========================================================
   REFERENCE
   ========================================================= */
.jsl-references {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 30px;
}
.jsl-reference {
	padding: 40px;
	border-radius: var(--jsl-radius);
	background: var(--jsl-white);
}
.jsl-reference figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--jsl-dark);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
}
.jsl-reference figcaption span { flex: 1; }
.jsl-reference figcaption strong { display: block; }
.jsl-reference__photo { width: 51px; height: 51px; border-radius: 50%; object-fit: cover; }
.jsl-reference__logo { width: 51px; height: auto; }
.jsl-reference blockquote { margin-top: 20px; font-size: 17px; line-height: 1.4; }
.jsl-reference.is-clamped:not(.is-open) blockquote p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}
/* #jsl = vyšší priorita než styly tlačítek ze šablony a Elementoru */
#jsl .jsl-ref-toggle,
#jsl .jsl-ref-toggle:hover,
#jsl .jsl-ref-toggle:focus,
#jsl .jsl-ref-toggle:active {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 14px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--jsl-blue);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
#jsl .jsl-ref-toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease, margin .2s ease;
}
#jsl .jsl-reference.is-open .jsl-ref-toggle::after { margin-top: 4px; transform: rotate(-135deg); }
#jsl .jsl-ref-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
#jsl .jsl-ref-toggle:focus-visible { outline: 2px solid var(--jsl-blue); outline-offset: 3px; }
#jsl .jsl-ref-toggle[hidden] { display: none; }

/* =========================================================
   KONTAKT
   ========================================================= */
.jsl-contact { padding-top: 40px; padding-bottom: 120px; }
.jsl-contact .jsl-h2 { max-width: 680px; margin: 0 auto; }
.jsl-contact__lead {
	max-width: 420px;
	margin: 40px auto 0;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}
/* --- Formulář (Ninja Forms) – vlastní vzhled, výchozí styly pluginu se na landing page nenačítají --- */
.jsl-form {
	max-width: 760px;
	margin: 50px auto 0;
	padding: 48px;
	border-radius: var(--jsl-radius);
	background: var(--jsl-white);
	box-shadow: 0 20px 50px rgba(23, 23, 23, .06);
}
#jsl .jsl-form nf-field,
#jsl .jsl-form nf-section { display: block; }
#jsl .jsl-form .nf-form-title,
#jsl .jsl-form .nf-before-form-content,
#jsl .jsl-form .nf-form-fields-required,
#jsl .jsl-form .ninja-forms-req-symbol,
#jsl .jsl-form .hidden-container,
#jsl .jsl-form .nf-field-description:empty { display: none; }
#jsl .jsl-form .nf-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* mřížka: pole s třídou „one-half“ (nastavení ve formuláři) vedle sebe */
#jsl .jsl-form nf-fields-wrap {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 20px;
}
#jsl .jsl-form nf-fields-wrap > nf-field { grid-column: 1 / -1; }
#jsl .jsl-form nf-fields-wrap > nf-field:has(> .one-half) { grid-column: auto; }

#jsl .jsl-form .nf-field-container { margin: 0; }
#jsl .jsl-form .nf-field-label { margin: 0 0 8px; padding: 0; }
#jsl .jsl-form .nf-field-label label {
	margin: 0;
	color: var(--jsl-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

#jsl .jsl-form input.ninja-forms-field:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
#jsl .jsl-form textarea.ninja-forms-field,
#jsl .jsl-form select.ninja-forms-field {
	display: block;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid #dfe2e8;
	border-radius: 14px;
	background: #f5f6f8;
	box-shadow: none;
	color: var(--jsl-dark);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#jsl .jsl-form textarea.ninja-forms-field { height: 150px; padding: 14px 18px; resize: vertical; }
#jsl .jsl-form input.ninja-forms-field:not([type="button"]):not([type="submit"]):not([type="checkbox"]):hover,
#jsl .jsl-form textarea.ninja-forms-field:hover { border-color: #c5cad3; }
#jsl .jsl-form input.ninja-forms-field:not([type="button"]):not([type="submit"]):not([type="checkbox"]):focus,
#jsl .jsl-form textarea.ninja-forms-field:focus {
	border-color: var(--jsl-blue);
	background: var(--jsl-white);
	box-shadow: 0 0 0 4px rgba(0, 87, 255, .12);
	outline: none;
}

/* souhlasy: zaškrtávátko vlevo, text vpravo */
#jsl .jsl-form .checkbox-container .field-wrap {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 12px;
}
#jsl .jsl-form .checkbox-container .nf-field-label { margin: 0; }
#jsl .jsl-form .checkbox-container .nf-field-label label {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	cursor: pointer;
}
#jsl .jsl-form .checkbox-container .nf-field-label label::before,
#jsl .jsl-form .checkbox-container .nf-field-label label::after { content: none; display: none; }
#jsl .jsl-form input[type="checkbox"].ninja-forms-field {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--jsl-blue);
	cursor: pointer;
}
#jsl .jsl-form .checkbox-container + .nf-after-field,
#jsl .jsl-form nf-field:has(.checkbox-container) + nf-field:has(.checkbox-container) { margin-top: -10px; }

/* odeslat */
#jsl .jsl-form .submit-container { margin-top: 6px; }
#jsl .jsl-form input[type="button"].ninja-forms-field,
#jsl .jsl-form input[type="submit"].ninja-forms-field {
	display: inline-flex;
	width: auto;
	min-width: 220px;
	height: 56px;
	margin: 0;
	padding: 0 36px;
	border: 0;
	border-radius: 999px;
	background: var(--jsl-blue);
	box-shadow: none;
	color: var(--jsl-white);
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#jsl .jsl-form input[type="button"].ninja-forms-field:hover,
#jsl .jsl-form input[type="button"].ninja-forms-field:focus-visible,
#jsl .jsl-form input[type="submit"].ninja-forms-field:hover,
#jsl .jsl-form input[type="submit"].ninja-forms-field:focus-visible {
	background: #2a75ff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 87, 255, .3);
}
#jsl .jsl-form input[type="button"].ninja-forms-field:disabled,
#jsl .jsl-form input[type="submit"].ninja-forms-field:disabled { opacity: .6; cursor: wait; transform: none; }

/* chyby a potvrzení */
#jsl .jsl-form .nf-error input.ninja-forms-field:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
#jsl .jsl-form .nf-error textarea.ninja-forms-field { border-color: #e5484d; background: #fff7f7; }
#jsl .jsl-form .nf-error-msg,
#jsl .jsl-form .nf-error-wrap { margin-top: 6px; color: #d1343a; font-size: 13px; font-weight: 600; }
#jsl .jsl-form .nf-form-errors .nf-error-msg { margin-top: 18px; }
#jsl .jsl-form .nf-response-msg {
	padding: 24px;
	border-radius: 18px;
	background: #eaf1ff;
	color: var(--jsl-dark);
	font-size: 17px;
	font-weight: 600;
	text-align: center;
}
#jsl .jsl-form .nf-response-msg p { margin: 0; }
#jsl .jsl-form .nf-response-msg:empty { display: none; }

/* =========================================================
   PODSTRÁNKY – úvodní pás (případové studie, služby…)
   ========================================================= */
.jsl-page-hero {
	padding: 150px 40px 90px;
	background: linear-gradient(155deg, var(--jsl-dark) 20%, var(--jsl-navy) 100%);
	color: var(--jsl-white);
	text-align: center;
}
.jsl-eyebrow {
	margin-bottom: 18px;
	color: var(--jsl-blue);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.jsl-page-hero .jsl-lead { max-width: 720px; }
.jsl-page-hero .jsl-stats { margin-top: 60px; }

/* --- Filtr podle služeb --- */
.jsl-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 50px;
}
#jsl .jsl-filter__btn,
#jsl .jsl-filter__btn:hover,
#jsl .jsl-filter__btn:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 0;
	margin: 0;
	padding: 10px 18px;
	border: 1.5px solid #d5d8de;
	border-radius: 999px;
	background: var(--jsl-white);
	box-shadow: none;
	color: var(--jsl-dark);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
#jsl .jsl-filter__btn span { color: #8a8f99; font-weight: 600; }
#jsl .jsl-filter__btn:hover { border-color: var(--jsl-blue); }
#jsl .jsl-filter__btn.is-active { background: var(--jsl-blue); border-color: var(--jsl-blue); color: var(--jsl-white); }
#jsl .jsl-filter__btn.is-active span { color: rgba(255, 255, 255, .75); }
#jsl .jsl-filter__btn:focus-visible { outline: 2px solid var(--jsl-blue); outline-offset: 3px; }

/* --- Karta případovky v seznamu --- */
.jsl-case-list { row-gap: 60px; }
.jsl-case-item[hidden] { display: none; }
.jsl-case-item__body { padding: 22px 20px 0; }
.jsl-case-item__meta {
	color: #6b707a;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
}
.jsl-case-item__text { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.jsl-tags--services { padding: 16px 0 0; }
#jsl .jsl-tags--services li { padding: 0; }
#jsl .jsl-tags--services button,
#jsl .jsl-tags--services button:hover,
#jsl .jsl-tags--services button:focus {
	display: inline-block;
	min-height: 0;
	margin: 0;
	padding: 5px 15px;
	border: 0;
	border-radius: 999px;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}
.jsl-tags--services li .jsl-dot { margin-left: 0; }
.jsl .jsl-read {
	display: inline-flex;
	gap: 6px;
	margin-top: 18px;
	color: var(--jsl-blue);
	font-size: 16px;
	font-weight: 700;
}
.jsl .jsl-read:hover { text-decoration: underline; text-underline-offset: 3px; }
.jsl .jsl-read span[aria-hidden] { transition: transform .2s ease; }
.jsl .jsl-read:hover span[aria-hidden] { transform: translateX(3px); }
.jsl-case-empty { margin-top: 20px; text-align: center; font-size: 17px; }

/* odkaz pod případovkami na homepage */
.jsl-more-wrap { margin-top: 50px; text-align: center; }
.jsl .jsl-btn--outline-dark { background: transparent; border-color: var(--jsl-dark); color: var(--jsl-dark); }
.jsl .jsl-btn--outline-dark:hover,
.jsl .jsl-btn--outline-dark:focus-visible { background: var(--jsl-dark); border-color: var(--jsl-dark); color: var(--jsl-white); box-shadow: none; }

/* =========================================================
   SPORTOVCI
   ========================================================= */
.jsl-wrap--wide { max-width: 1200px; }
.jsl-h3 { font-size: 24px; line-height: 1.25; font-weight: 700; margin-bottom: 16px; }
.jsl-hero-note { margin-top: 14px; color: rgba(255, 255, 255, .65); font-size: 14px; }

.jsl-athletes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 24px;
}
.jsl-athletes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
.jsl-athlete[hidden] { display: none; }
.jsl-athlete__link { display: block; }
.jsl-athlete__photo {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 24px;
	background: #d9dce2;
}
.jsl-athlete__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.jsl-athlete__sport {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--jsl-blue);
	color: var(--jsl-white);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}
.jsl-athlete__body { display: block; padding: 16px 6px 0; }
.jsl-athlete__name { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.jsl-athlete__name small { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: var(--jsl-dark); color: var(--jsl-white); font-size: 11px; vertical-align: 2px; }
.jsl-athlete__headline { display: block; margin-top: 4px; color: #555b66; font-size: 15px; line-height: 1.4; }
.jsl-athlete__more { display: inline-block; margin-top: 10px; color: var(--jsl-blue); font-size: 14px; font-weight: 700; }
.jsl-athlete__more span { display: inline-block; transition: transform .2s ease; }
.jsl .jsl-athlete__link:hover img { transform: scale(1.04); }
.jsl .jsl-athlete__link:hover .jsl-athlete__more span { transform: translateX(3px); }

/* --- Body (proč, co získáš) --- */
.jsl-why { background: linear-gradient(155deg, var(--jsl-dark) 15%, var(--jsl-navy) 95%); }
.jsl-points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 36px;
}
.jsl-points li { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); }
.jsl-points__num { display: block; margin-bottom: 14px; color: var(--jsl-blue); font-size: 15px; font-weight: 700; }
.jsl-points h3 { font-size: 22px; line-height: 1.25; font-weight: 700; }
.jsl-points h3 .jsl-dot { color: var(--jsl-blue); }
.jsl-points p { margin-top: 10px; color: rgba(255, 255, 255, .8); font-size: 16px; line-height: 1.5; }

/* --- Kroky --- */
.jsl-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	counter-reset: jsl-step;
	list-style: none;
}
.jsl-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jsl-steps li {
	position: relative;
	padding: 26px 22px 24px;
	border-radius: 22px;
	background: var(--jsl-white);
	counter-increment: jsl-step;
}
.jsl-steps li::before {
	content: counter(jsl-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--jsl-blue);
	color: var(--jsl-white);
	font-size: 16px;
	font-weight: 700;
}
.jsl-steps h3 { font-size: 18px; line-height: 1.3; font-weight: 700; }
.jsl-steps p { margin-top: 8px; color: #4a505a; font-size: 15px; line-height: 1.5; }

/* --- Pozvánka do programu --- */
.jsl-join-wrap { padding-top: 0; }
.jsl-join {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 44px 48px;
	border-radius: var(--jsl-radius);
	background: linear-gradient(120deg, var(--jsl-blue), #0a3fc4);
	color: var(--jsl-white);
}
.jsl-join h2 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; font-weight: 700; }
.jsl-join h2 .jsl-dot { color: var(--jsl-white); }
.jsl-join p { margin-top: 10px; max-width: 560px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.jsl .jsl-join .jsl-btn { flex: none; background: var(--jsl-white); border-color: var(--jsl-white); color: var(--jsl-blue); }
.jsl .jsl-join .jsl-btn:hover { background: var(--jsl-dark); border-color: var(--jsl-dark); color: var(--jsl-white); }

/* --- Profil sportovce --- */
.jsl-profile-hero {
	padding: 140px 40px 80px;
	background: linear-gradient(155deg, var(--jsl-dark) 20%, var(--jsl-navy) 100%);
	color: var(--jsl-white);
}
.jsl-profile-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	align-items: center;
	gap: 60px;
	max-width: 1100px;
}
.jsl-profile-hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--jsl-radius); }
.jsl-profile-hero .jsl-h1 { text-align: left; }
.jsl-profile-hero .jsl-eyebrow { margin-bottom: 10px; }
.jsl-profile-hero__headline { margin-top: 14px; font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, .9); }
.jsl-profile-hero .jsl-cta { justify-content: flex-start; }
.jsl .jsl-back a { color: rgba(255, 255, 255, .7); font-size: 14px; font-weight: 700; }
.jsl .jsl-back a:hover { color: var(--jsl-white); }
.jsl-back { margin-bottom: 26px; }

.jsl-checks { margin-top: 24px; display: grid; gap: 10px; }
.jsl-checks li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.45; }
.jsl-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--jsl-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.jsl-checks--dark li { font-size: 18px; }

.jsl-profile-about {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 60px;
	max-width: 1100px;
}
.jsl-profile-about__bio { font-size: 18px; line-height: 1.6; }
.jsl-profile-about__help { margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: var(--jsl-white); color: #4a505a; font-size: 15px; line-height: 1.5; }
.jsl-profile-about .jsl-tags { padding: 0; }

.jsl-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 260px));
	justify-content: center;
	gap: 24px;
}
.jsl-gallery--1 { grid-template-columns: minmax(0, 300px); }
.jsl-gallery--2 { grid-template-columns: repeat(2, minmax(0, 280px)); }
.jsl-gallery img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }

/* --- Athletes Creator Program --- */
.jsl-intro { text-align: center; }
.jsl-intro p { font-size: 19px; line-height: 1.6; }
.jsl-strip {
	display: flex;
	gap: 18px;
	margin-top: 60px;
	padding: 0 40px 10px;
	overflow-x: auto;
	scrollbar-width: none;
	justify-content: center;
}
.jsl-strip::-webkit-scrollbar { display: none; }
.jsl-strip li { flex: 0 0 170px; }
.jsl-strip a { position: relative; display: block; }
.jsl-strip img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; }
.jsl-strip span {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	padding: 4px 8px;
	border-radius: 8px;
	background: rgba(23, 23, 23, .7);
	color: var(--jsl-white);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}
.jsl-points--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jsl-acp-who { padding-top: 0; }

.jsl-faces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.jsl-faces li { width: 92px; }
.jsl-faces img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; transition: transform .2s ease; }
.jsl .jsl-faces a:hover img { transform: scale(1.08); }

.jsl-faq { display: grid; gap: 12px; }
.jsl-faq details { padding: 0 24px; border-radius: 18px; background: var(--jsl-white); }
.jsl-faq summary {
	position: relative;
	padding: 20px 30px 20px 0;
	font-size: 18px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}
.jsl-faq summary::-webkit-details-marker { display: none; }
.jsl-faq summary::after { content: "+"; position: absolute; right: 0; top: 16px; color: var(--jsl-blue); font-size: 26px; font-weight: 400; }
.jsl-faq details[open] summary::after { content: "–"; }
.jsl-faq details p { padding-bottom: 20px; font-size: 16px; line-height: 1.6; color: #4a505a; }

.jsl-final { text-align: center; background: linear-gradient(155deg, var(--jsl-dark) 15%, var(--jsl-navy) 95%); }
.jsl-final__text { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.jsl .jsl-final__text a { color: var(--jsl-white); text-decoration: underline; text-underline-offset: 3px; }
.jsl-final .jsl-cta { margin-top: 28px; }

/* --- Sportovci na homepage (kompaktní řada) --- */
.jsl-home-athletes { padding-top: 100px; }
.jsl-home-athletes__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.jsl-home-athletes__head .jsl-h2 { margin-bottom: 18px; }
.jsl-home-athletes__head p { font-size: 18px; line-height: 1.55; }
.jsl-athletes--row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.jsl-athletes--row .jsl-athlete__headline,
.jsl-athletes--row .jsl-athlete__more { display: none; }
.jsl-athletes--row .jsl-athlete__name { font-size: 16px; }
.jsl-athletes--row .jsl-athlete__sport { font-size: 11px; padding: 4px 9px; left: 8px; bottom: 8px; }
.jsl .jsl-service__link { display: inline-block; margin-top: 14px; color: var(--jsl-white); font-size: 15px; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.jsl .jsl-service__link:hover { border-color: var(--jsl-white); }

/* --- Vložená přihláška (JFH Base) --- */
.jsl-apply__frame { max-width: 760px; margin: 0 auto; padding: 12px; border-radius: var(--jsl-radius); background: var(--jsl-white); }
.jsl-apply__frame iframe { display: block; width: 100%; min-height: 900px; border: 0; }

/* =========================================================
   RESPONZIVITA
   ========================================================= */
@media (max-width: 1024px) {
	.jsl-section { padding: 80px 24px; }
	.jsl-athletes--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jsl-athletes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jsl-steps, .jsl-steps--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jsl-profile-hero { padding: 120px 24px 60px; }
	.jsl-profile-hero__grid { gap: 36px; }
	.jsl-hero__content { padding: 0 24px; }
	.jsl-service { gap: 40px; }
}

@media (max-width: 768px) {
	.jsl-h2 { margin-bottom: 40px; }
	.jsl-hero { padding-bottom: 50px; background: #161b2a; }
	.jsl-hero__bg { height: auto; overflow: visible; background: none; }
	.jsl-hero__bg img { width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5; object-position: 50% 30%; -webkit-mask-image: none; mask-image: none; }
	.jsl-hero__bg::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(180deg, rgba(22, 27, 42, 0), #161b2a); }
	.jsl-hero__content { margin-top: -38vw; }
	.jsl-lead { margin-top: 20px; }
	.jsl-cta { flex-direction: column; align-items: stretch; max-width: 360px; margin: 28px auto 0; }
	.jsl-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
	.jsl-video--featured .jsl-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
	.jsl-stats { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }

	.jsl-grid-2,
	.jsl-videos,
	.jsl-references { grid-template-columns: 1fr; gap: 40px; }
	.jsl-tags { padding: 16px 0 0; }
	.jsl-tags li { font-size: 14px; }
	.jsl-photo-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 87, 255, 0) 45%, rgba(0, 60, 220, .85) 100%);
	pointer-events: none;
}
.jsl-photo-card--dark::after { background: linear-gradient(180deg, rgba(23, 23, 23, 0) 45%, rgba(23, 23, 23, .92) 100%); }
.jsl-photo-card__title {
	z-index: 1; padding: 0 24px 24px; }
	.jsl-dark-card { min-height: 220px; padding: 28px; }

	.jsl-clients-title { margin-top: 80px; }
	.jsl-logos { gap: 32px 36px; }
	.jsl-logos img { max-height: 64px; max-width: 160px; }

	.jsl-services .jsl-h2 { margin-bottom: 60px; }
	.jsl-service-list { gap: 60px; }
	.jsl-service,
	.jsl-service.is-reversed { flex-direction: column; gap: 24px; text-align: center; }
	.jsl-service.is-reversed .jsl-service__text { text-align: center; }
	.jsl-service__icon { flex: none; }
	.jsl-service__icon svg { height: 96px; }
	.jsl-service__text { width: 100%; max-width: 340px; }
	.jsl-service__text h3 { font-size: 24px; }
	.jsl-service__text p { margin-top: 12px; font-size: 17px; line-height: 1.4; }

	.jsl-reference { padding: 28px; }
	.jsl-page-hero { padding: 120px 24px 60px; }
	.jsl-page-hero .jsl-stats { margin-top: 40px; }
	.jsl-filter { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px 36px; padding: 0 24px 6px; scrollbar-width: none; }
	.jsl-filter::-webkit-scrollbar { display: none; }
	#jsl .jsl-filter__btn { flex: none; }
	.jsl-case-item__body { padding: 18px 4px 0; }

	.jsl-athletes, .jsl-athletes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
	.jsl-athletes--row { display: flex; gap: 12px; overflow-x: auto; margin: 0 -24px; padding: 0 24px 8px; scrollbar-width: none; }
	.jsl-athletes--row::-webkit-scrollbar { display: none; }
	.jsl-athletes--row .jsl-athlete { flex: 0 0 42%; }
	.jsl-athlete__photo { border-radius: 18px; }
	.jsl-athlete__sport { left: 8px; bottom: 8px; font-size: 11px; padding: 4px 9px; }
	.jsl-athlete__name { font-size: 16px; }
	.jsl-athlete__headline { font-size: 13px; }
	.jsl-points, .jsl-points--6 { grid-template-columns: 1fr; gap: 28px; }
	.jsl-steps, .jsl-steps--5 { grid-template-columns: 1fr; }
	.jsl-join { flex-direction: column; align-items: flex-start; padding: 30px 24px; }
	.jsl-profile-hero__grid { grid-template-columns: 1fr; }
	.jsl-profile-hero__photo { max-width: 320px; }
	.jsl-profile-about { grid-template-columns: 1fr; gap: 36px; }
	.jsl-gallery, .jsl-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.jsl-gallery--1 { grid-template-columns: minmax(0, 240px); }
	.jsl-strip { justify-content: flex-start; padding: 0 24px 10px; margin-top: 40px; }
	.jsl-strip li { flex-basis: 140px; }
	.jsl-faces li, .jsl-faces img { width: 64px; height: 64px; }
	.jsl-contact { padding-bottom: 80px; }

	.jsl-sticky {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		display: block;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: rgba(23, 23, 23, .92);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		transform: translateY(110%);
		transition: transform .3s ease;
	}
	.jsl-sticky.is-visible { transform: none; }
	.jsl-sticky .jsl-btn { width: 100%; min-height: 50px; }
	.jsl-contact__lead { margin-top: 24px; }
	.jsl-form { margin-top: 32px; padding: 28px 20px; }
	#jsl .jsl-form nf-fields-wrap { grid-template-columns: 1fr; gap: 18px; }
	#jsl .jsl-form input[type="button"].ninja-forms-field,
	#jsl .jsl-form input[type="submit"].ninja-forms-field { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.jsl * { transition: none !important; }
}