/* ============================================================
   Jemná joga – ručne kódovaná úvodná stránka (.jjx)
   Farby a písmo berie z theme.json (premenné --wp--preset--…)
   ============================================================ */

.jjx {
	--jjx-biela: var(--wp--preset--color--biela, #fff);
	--jjx-krem: var(--wp--preset--color--krem, #F7F5F8);
	--jjx-lev-sv: var(--wp--preset--color--pudrova-svetla, #EBE7EE);
	--jjx-lev: var(--wp--preset--color--pudrova, #CCC4D1);
	--jjx-mauve: var(--wp--preset--color--oliva, #958492);
	--jjx-mauve-tm: var(--wp--preset--color--fialova-tmava, #6F6070);
	--jjx-navy: var(--wp--preset--color--oliva-tmava, #22223B);
	--jjx-text: var(--wp--preset--color--hlavny-text, #22223B);
	--jjx-jemny: var(--wp--preset--color--text-jemny, #5C5A6B);
	--jjx-ease: cubic-bezier(.22, .61, .36, 1);
	position: relative;
	color: var(--jjx-text);
	font-family: var(--wp--preset--font-family--hanken, "Hanken Grotesk", sans-serif);
}
.jjx *, .jjx *::before, .jjx *::after { box-sizing: border-box; }
.jjx img { display: block; max-width: 100%; }
.jjx h1, .jjx h2 { font-weight: 300; letter-spacing: -0.025em; line-height: 1.08; margin: 0; text-wrap: balance; }
.jjx h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.jjx p { margin: 0; }
.jjx-obal {
	max-width: 1180px;
	margin-inline: auto;
	padding-left: max(20px, env(safe-area-inset-left, 0px));
	padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.jjx-uzky { max-width: 860px; }
.jjx-stitok {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--jjx-mauve-tm);
	margin-bottom: 1rem !important;
}

/* Tlačidlá a odkazy */
.jjx-btn {
	display: inline-flex;
	align-items: center;
	gap: .8em;
	padding: 16px 30px;
	background: var(--jjx-lev);
	color: var(--jjx-text);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .35s ease, color .35s ease, transform .35s var(--jjx-ease);
}
.jjx-btn:hover { background: var(--jjx-biela); color: var(--jjx-text); transform: translateY(-2px); }
.jjx-btn-obrys { background: transparent; border: 1px solid var(--jjx-mauve); }
.jjx-btn-obrys:hover { background: var(--jjx-mauve); color: var(--jjx-biela); }
.jjx-odkaz {
	display: inline-flex;
	gap: .8em;
	align-items: center;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
}
.jjx-odkaz span { transition: transform .3s ease; }
.jjx-odkaz:hover span { transform: translateX(6px); }

/* Ťahy štetcom a bloky v nadpisoch kreslí téma (theme.css + animacie.js) */

/* ------------------------------------------------------------
   1 · HERO
   ------------------------------------------------------------ */
.jjx-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: min(92vh, 860px);
	background: var(--jjx-mauve);
	color: var(--jjx-biela);
	overflow: hidden;
}
.jjx-hero-text {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(4rem, 8vw, 7rem) clamp(20px, 6vw, 6rem) clamp(6rem, 10vw, 9rem);
}
.jjx-hero-text > * { position: relative; z-index: 1; max-width: 560px; margin-left: auto; width: 100%; }
.jjx-hero .jjx-stitok { color: var(--jjx-lev); }
.jjx-hero-nadpis { font-size: clamp(2.4rem, 4.6vw, 4.1rem); }
.jjx-hero-lead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.7; margin-top: 1.6rem !important; font-weight: 400; max-width: 480px; }
.jjx-akcie { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; margin-top: 2.2rem; }
.jjx-akcie .jjx-odkaz { color: var(--jjx-biela); }
.jjx-slnko {
	position: absolute;
	left: -90px;
	bottom: -90px;
	width: 340px;
	height: 340px;
	stroke: var(--jjx-lev);
	stroke-width: 1;
	opacity: .5;
	z-index: 0 !important;
	margin: 0 !important;
}
.jjx-hero-foto { margin: 0; position: relative; overflow: hidden; }
.jjx-hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.jjx-scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 3;
	display: grid;
	justify-items: center;
	gap: 10px;
	color: var(--jjx-biela);
	text-decoration: none;
	font-size: 0.62rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	mix-blend-mode: difference;
}
.jjx-scroll::after { content: ""; width: 1px; height: 46px; background: currentColor; transform-origin: top; }

/* ------------------------------------------------------------
   2 · VITAJ – slová sa rozsvecujú
   ------------------------------------------------------------ */
.jjx-vitaj { background: var(--jjx-krem); padding-block: clamp(5rem, 12vw, 10rem); text-align: center; }
.jjx-svetlo { font-size: clamp(1.8rem, 3.8vw, 3.1rem); font-weight: 300; line-height: 1.25; letter-spacing: -0.02em; }
.jjx-vitaj-text { max-width: 600px; margin: 2.4rem auto 0 !important; color: var(--jjx-jemny); line-height: 1.8; }
.jjx-slovo { transition: opacity .4s ease, color .4s ease; }

/* ------------------------------------------------------------
   3 · ROZVRH
   ------------------------------------------------------------ */
.jjx-rozvrh { background: var(--jjx-biela); padding-block: clamp(4.5rem, 9vw, 8rem); }
.jjx-rozvrh-mriezka { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.jjx-rozvrh-hlava { display: grid; gap: 1.1rem; position: sticky; top: 32px; }
.jjx-rozvrh-hlava h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.jjx-rozvrh-hlava p:not(.jjx-stitok) { color: var(--jjx-jemny); }
.jjx-rozvrh-hlava .jjx-odkaz { justify-self: start; margin-top: .6rem; }
.jjx-rozvrh-plugin { min-width: 0; }

/* ------------------------------------------------------------
   4 · LEKCIE – zoznam + meniaca sa fotka
   ------------------------------------------------------------ */
.jjx-lekcie { background: var(--jjx-lev-sv); padding-block: clamp(4.5rem, 9vw, 8rem); }
.jjx-lekcie-hlava { max-width: 640px; display: grid; gap: 1.1rem; }
.jjx-lekcie-hlava p:not(.jjx-stitok) { color: var(--jjx-jemny); }
.jjx-lekcie-mriezka { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.jjx-lekcie-zoznam { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--jjx-lev); }
.jjx-lekcia { border-bottom: 1px solid var(--jjx-lev); }
.jjx-lekcia a {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .4rem 1.5rem;
	padding: 1.7rem 0;
	text-decoration: none;
	color: inherit;
}
.jjx-lekcia-nazov {
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.1;
	transition: transform .5s var(--jjx-ease), color .4s ease;
}
.jjx-lekcia-text {
	grid-column: 1;
	color: var(--jjx-jemny);
	font-size: .95rem;
	max-width: 30rem;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .6s var(--jjx-ease), opacity .5s ease;
}
.jjx-lekcia-sipka {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 1.4rem;
	color: var(--jjx-mauve);
	transition: transform .4s var(--jjx-ease);
}
.jjx-lekcia.je-aktivna .jjx-lekcia-nazov { transform: translateX(10px); color: var(--jjx-mauve-tm); }
.jjx-lekcia.je-aktivna .jjx-lekcia-text { max-height: 8rem; opacity: 1; }
.jjx-lekcia.je-aktivna .jjx-lekcia-sipka { transform: translateX(6px); }
.jjx .jjx-lekcia-mobil { display: none; }
.jjx-lekcie-fotky { position: sticky; top: 40px; aspect-ratio: 4 / 5; overflow: hidden; }
.jjx-lekcie-fotky img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .9s ease, transform 1.6s var(--jjx-ease);
}
.jjx-lekcie-fotky img.je-aktivna { opacity: 1; transform: scale(1); }

/* ------------------------------------------------------------
   5 · DÝCHAJ
   ------------------------------------------------------------ */
.jjx-dych { background: var(--jjx-biela); padding-block: clamp(4.5rem, 9vw, 8rem); }
.jjx-dych-mriezka { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.jjx-dych-text { display: grid; gap: 1.1rem; justify-items: start; }
.jjx-dych-text p:not(.jjx-stitok) { color: var(--jjx-jemny); max-width: 34rem; }
.jjx-dych-text .jjx-btn { margin-top: .8rem; }
.jjx-kruh { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.jjx-kruh-vlna, .jjx-kruh-jadro { position: absolute; border-radius: 50%; }
.jjx-kruh-vlna { inset: 0; border: 1px solid var(--jjx-lev); }
.jjx-kruh-jadro { inset: 18%; background: radial-gradient(circle at 35% 30%, var(--jjx-lev-sv), var(--jjx-lev) 70%); }
.jjx-kruh-text { position: relative; display: grid; font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--jjx-mauve-tm); }
.jjx-kruh-text b { grid-area: 1 / 1; font-weight: 600; text-align: center; }
.jjx-kruh-text b + b { opacity: 0; }

/* ------------------------------------------------------------
   6 · REFERENCIE na fotke
   ------------------------------------------------------------ */
.jjx-pas { color: var(--jjx-biela, #fff); padding-block: 18px; }
.jjx-ref { position: relative; overflow: hidden; background: var(--jjx-navy); color: var(--jjx-biela); padding-block: clamp(5rem, 10vw, 8.5rem); text-align: center; }
.jjx-ref-pozadie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.jjx-ref-obsah { position: relative; z-index: 1; }
.jjx-ref h2 { color: var(--jjx-biela); font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.jjx-ref .is-style-blok mark { background: var(--jjx-lev); color: var(--jjx-text); padding: .02em .2em .08em; }

/* ------------------------------------------------------------
   7 · O MNE
   ------------------------------------------------------------ */
.jjx-omne { background: var(--jjx-krem); padding-block: clamp(5rem, 10vw, 8.5rem); }
.jjx-omne-mriezka { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 7vw, 6.5rem); align-items: center; }
.jjx-omne-text { display: grid; gap: 1.1rem; justify-items: start; }
.jjx-omne-text > p:not(.jj-pismeno):not(.jj-lead) { color: var(--jjx-jemny); }
.jjx .jjx-omne-nadpis { font-size: clamp(2.6rem, 5vw, 4rem); }
.jjx-omne .is-style-blok mark { background: var(--jjx-lev); padding: .02em .2em .08em; }
.jjx-omne .jjx-btn { margin-top: .8rem; }

/* ------------------------------------------------------------
   Mobil
   ------------------------------------------------------------ */
@media (max-width: 860px) {
	.jjx-hero { grid-template-columns: 1fr; min-height: 0; }
	.jjx-hero-foto { order: -1; height: 58vh; min-height: 340px; }
	.jjx-hero-text > * { margin-left: 0; }
	.jjx-scroll { display: none; }
	.jjx-rozvrh-mriezka, .jjx-lekcie-mriezka, .jjx-dych-mriezka, .jjx-omne-mriezka { grid-template-columns: 1fr; }
	.jjx-rozvrh-hlava { position: static; }
	.jjx .jjx-lekcie-fotky { display: none; }
	.jjx .jjx-lekcia-mobil { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 1.7rem; }
	.jjx-lekcia .jjx-lekcia-text { max-height: none; opacity: 1; }
	.jjx-lekcia .jjx-lekcia-nazov { transform: none !important; }
	.jjx-kruh { width: min(80%, 300px); }
}

/* ============================================================
   Animácie (len s .jj-anim a bez "obmedziť pohyb")
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	/* Objavenie zdola */
	.jj-anim .jjx [data-jjx-r] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--jjx-ease), transform 1.1s var(--jjx-ease); }
	.jj-anim .jjx [data-jjx-r].jjx-videne { opacity: 1; transform: none; }

	/* Hero: slová nadpisu vystupujú postupne */
	.jj-anim .jjx-slova .jjx-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
	.jj-anim .jjx-slova .jjx-w > span { display: inline-block; transform: translateY(105%); animation: jjx-hore 1.1s var(--jjx-ease) forwards; }
	@keyframes jjx-hore { to { transform: none; } }
	.jj-anim .jjx [data-jjx-uvod] { opacity: 0; animation: jjx-vynor 1.1s var(--jjx-ease) forwards; }
	@keyframes jjx-vynor { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
	.jj-anim .jjx-hero-foto img { animation: jjx-foto 2.2s var(--jjx-ease) both; }
	@keyframes jjx-foto { from { clip-path: inset(0 0 0 100%); transform: scale(1.12); } to { clip-path: inset(0 0 0 0); transform: scale(1); } }
	.jjx-slnko { animation: jjx-slnko 60s linear infinite; transform-origin: 50% 50%; }
	@keyframes jjx-slnko { to { transform: rotate(360deg); } }
	.jjx-scroll::after { animation: jjx-ciara 2.4s ease-in-out infinite; }
	@keyframes jjx-ciara { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

	/* Dýchací kruh: 4 s nádych, 4 s výdych */
	.jjx-kruh-jadro { animation: jjx-dych 8s ease-in-out infinite; }
	.jjx-kruh-vlna { animation: jjx-vlna 8s ease-in-out infinite; }
	.jjx-kruh-text b:first-child { animation: jjx-t1 8s ease-in-out infinite; }
	.jjx-kruh-text b + b { animation: jjx-t2 8s ease-in-out infinite; }
	@keyframes jjx-dych { 0%, 100% { transform: scale(.62); } 50% { transform: scale(1); } }
	@keyframes jjx-vlna { 0%, 100% { transform: scale(.8); opacity: .3; } 50% { transform: scale(1.04); opacity: 1; } }
	@keyframes jjx-t1 { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
	@keyframes jjx-t2 { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }

	/* Pozadie referencií sa pomaly posúva */
	.jjx-ref-pozadie { transition: transform .2s linear; will-change: transform; }
}