/*!
 * Lidaretto kit 1.0.0 (CSS)
 * Spoločný základ stránok lidaretto.com: tokeny, komponenty, responzívne pravidlá, pohyb.
 * Ponuka CP 2026-09-001, možnosť B. Dokumentácia: assets/kit/KIT.md
 *
 * PRAVIDLÁ
 * - Všetko je zapuzdrené pod koreňovou triedou .lk. Tokeny sú na .lk, nie na :root,
 *   takže zvyšok témy tento súbor neovplyvní.
 * - Triedy majú predponu lk-. Žiadne globálne resety (téma je content-box).
 * - Najvyššia špecificita v súbore je (0,3,1); nič nepoužíva !important okrem obmedzenia pohybu.
 * - Súbor sa načítava len na šablónach, ktoré volajú lk_enqueue_kit() (inc/kit/lidaretto-kit.php),
 *   až po app.css a style.css témy.
 * - Zlomy: 959 px (UIkit @m) a 639 px (UIkit @s). V @media custom properties nefungujú, preto čísla.
 * - Pri optimalizácii CSS v LiteSpeed Cache tento súbor nespájať s inými (poradie kaskády).
 */

/* =====================================================================
   1. TOKENY
   ===================================================================== */
.lk {
	/* farby značky */
	--lk-yellow: #fbd220;
	--lk-yellow-gradient: linear-gradient(-45deg, #ffdd47, #fddb4b 50%, #fbd220);
	--lk-ink: #0c142a;
	--lk-deep: #0b0b0d;
	--lk-deep-rgb: 11, 11, 13;

	/* text a plochy na svetlom pozadí */
	--lk-text: #333;
	--lk-text-soft: #444;
	--lk-text-muted: #6b7280;
	--lk-eyebrow: #8a7100;
	--lk-line: #e5e5e5;
	--lk-surface: #fff;

	/* text na tmavom pozadí */
	--lk-on-dark: #fff;
	--lk-on-dark-soft: rgba(255, 255, 255, .78);
	--lk-on-dark-muted: rgba(255, 255, 255, .6);
	--lk-on-dark-faint: rgba(255, 255, 255, .45);

	/* typografia: rodinu písma a základnú výšku riadku dáva téma (Source Sans Pro) */
	--lk-fs-h1: 3.1rem;
	--lk-fs-h1-sm: 2.3rem;
	--lk-fs-h2: 2.3rem;
	--lk-fs-h2-band: 1.9rem;
	--lk-fs-statement: 1.6rem;
	--lk-fs-symbol: 1.6rem;
	--lk-fs-tagline: 1.5rem;
	--lk-fs-tagline-sm: 1.25rem;
	--lk-fs-h3: 1.25rem;
	--lk-fs-h3-step: 1.15rem;
	--lk-fs-lead: 1.1rem;
	--lk-fs-intro: 1.08rem;
	--lk-fs-list: .97rem;
	--lk-fs-small: .95rem;
	--lk-fs-caption-dark: .87rem;
	--lk-fs-caption: .85rem;
	--lk-fs-label: .78rem;
	--lk-fs-kicker: .72rem;
	--lk-fs-eyebrow: 12px;

	--lk-fw-light: 300;
	--lk-fw-semibold: 600;
	--lk-fw-bold: 700;
	--lk-fw-black: 900;

	--lk-lh-display: 1;
	--lk-lh-heading: 1.04;
	--lk-lh-tagline: 1.2;

	--lk-ls-display: -.015em;
	--lk-ls-eyebrow: .18em;
	--lk-ls-eyebrow-sm: .16em;
	--lk-ls-label: .13em;
	--lk-ls-kicker: .12em;
	--lk-ls-note: .1em;

	/* medzery */
	--lk-section-y: 70px;
	--lk-hero-copy-y: 70px;
	--lk-hero-copy-top-sm: 56px;
	--lk-gap-hero: 50px;
	--lk-gap-split: 54px;
	--lk-gap-split-sm: 32px;
	--lk-gap-steps: 20px;
	--lk-gap-steps-sm: 34px;
	--lk-gap-cta: 30px;
	--lk-gap-stack: 16px;
	--lk-card-pad-y: 26px;
	--lk-card-pad-x: 24px;

	/* kontajnery a dĺžky riadkov */
	--lk-container: 1230px;
	--lk-gutter-sm: 15px;
	--lk-hero-min-h: 540px;
	--lk-hero-media-min-h: 420px;
	--lk-hero-media-h-sm: 300px;
	--lk-measure-tagline: 40ch;
	--lk-measure-lead: 54ch;
	--lk-measure-step: 30ch;

	/* tvary a hĺbka */
	--lk-radius: 6px;
	--lk-radius-sm: 4px;
	--lk-border-card: 2px;
	--lk-shadow: 0 2px 6px 1px rgba(0, 0, 0, .1);

	/* pohyb */
	--lk-ease: cubic-bezier(.2, .65, .25, 1);
	--lk-duration-reveal: .7s;
	--lk-duration-hover: .45s;
	--lk-reveal-shift: 16px;
	--lk-reveal-step: 110ms;
}

/* =====================================================================
   2. RYTMUS SEKCIÍ A TLAČIDLÁ
   ===================================================================== */
/* Téma má .uk-section 40 px; stránky kitu dýchajú na 70 px (len sekcie priamo v .lk). */
.lk > .uk-section { padding-top: var(--lk-section-y); padding-bottom: var(--lk-section-y); }

/* tmavý text na žltej (téma má biely, kontrast 1.46:1) */
.lk .uk-button-primary { color: var(--lk-ink); font-weight: var(--lk-fw-semibold); }
/* obrysové tlačidlo na tmavom: rovnaká výška ako primárne (téma: 60 px + 1 px rám) */
.lk .uk-button-outline-white { color: var(--lk-on-dark); height: 62px; line-height: 60px; }
.lk .uk-button-outline-white:hover { background: var(--lk-on-dark); color: var(--lk-deep); }
.lk .uk-button:focus-visible { outline: 2px solid var(--lk-yellow); outline-offset: 3px; }
.lk .uk-button:active { transform: translateY(1px); }

/* =====================================================================
   3. HERO (kit/_hero.twig)
   ===================================================================== */
.lk-hero { background: var(--lk-deep); color: var(--lk-on-dark); position: relative; overflow: hidden; }
.lk-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: var(--lk-gap-hero);
	min-height: var(--lk-hero-min-h);
}
.lk-hero__copy { padding: var(--lk-hero-copy-y) 0; }
.lk-hero__eyebrow {
	font-size: var(--lk-fs-eyebrow); font-weight: var(--lk-fw-bold); letter-spacing: var(--lk-ls-eyebrow); text-transform: uppercase;
	color: var(--lk-yellow); margin: 0 0 18px;
}
.lk-hero h1 {
	color: var(--lk-on-dark); font-size: var(--lk-fs-h1); font-weight: var(--lk-fw-black); line-height: var(--lk-lh-display);
	letter-spacing: var(--lk-ls-display); margin: 0 0 14px;
}
.lk-hero__tagline {
	color: var(--lk-on-dark); font-size: var(--lk-fs-tagline); font-weight: var(--lk-fw-light); line-height: var(--lk-lh-tagline);
	margin: 0 0 22px; max-width: var(--lk-measure-tagline);
}
.lk-hero__lead p { color: var(--lk-on-dark-soft); font-size: var(--lk-fs-lead); max-width: var(--lk-measure-lead); }
.lk-hero__lead p:last-child { margin-bottom: 0; }
.lk-hero__lead strong { color: var(--lk-on-dark); font-weight: var(--lk-fw-semibold); }
.lk-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.lk-hero__media { position: relative; height: 100%; min-height: var(--lk-hero-media-min-h); }
/* ohnisko snímky nastavuje komponent cez --lk-hero-focus (napr. "50% 62%") */
.lk-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--lk-hero-focus, 50% 50%); }
.lk-hero__media::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--lk-deep) 0%, rgba(var(--lk-deep-rgb), .35) 26%, rgba(var(--lk-deep-rgb), 0) 55%);
}
/* snímka vyteká k okraju okna až tam, kde je kontajner naozaj užší ako okno */
@media (min-width: 1230px) {
	.lk-hero__media { margin-right: calc((100vw - var(--lk-container)) / -2); }
}
@media (max-width: 959px) {
	.lk-hero__grid { grid-template-columns: 1fr; min-height: 0; }
	.lk-hero__copy { padding: var(--lk-hero-copy-top-sm) 0 0; }
	.lk-hero h1 { font-size: var(--lk-fs-h1-sm); }
	.lk-hero__tagline { font-size: var(--lk-fs-tagline-sm); }
	.lk-hero__media { margin: 0 calc(var(--lk-gutter-sm) * -1); min-height: var(--lk-hero-media-h-sm); height: var(--lk-hero-media-h-sm); overflow: hidden; }
	.lk-hero__media::after { background: linear-gradient(0deg, rgba(var(--lk-deep-rgb), .15), rgba(var(--lk-deep-rgb), 0)); }
	/* lk-hero--trim: snímka okna programu sa na mobile nekrája zvislo, preto orež hornú lištu (18 %) */
	.lk-hero--trim .lk-hero__media img { top: -18%; height: 118%; }
}

/* =====================================================================
   4. POSTUP (kit/_steps.twig): kroky so šípkami
   ===================================================================== */
.lk-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: var(--lk-gap-steps); }
.lk-steps--2 { grid-template-columns: 1fr auto 1fr; }
.lk-steps--4 { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
.lk-steps__step { text-align: center; }
.lk-steps__icon {
	width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%;
	background-image: var(--lk-yellow-gradient); color: var(--lk-ink);
	display: flex; align-items: center; justify-content: center;
}
.lk-steps__icon svg { width: 36px; height: 36px; }
.lk-steps__step h3 { font-size: var(--lk-fs-h3-step); font-weight: var(--lk-fw-bold); color: var(--lk-ink); margin: 0 0 6px; }
.lk-steps__kicker {
	display: block; font-size: var(--lk-fs-kicker); font-weight: var(--lk-fw-bold); letter-spacing: var(--lk-ls-kicker);
	text-transform: uppercase; color: var(--lk-text-muted); margin-bottom: 8px;
}
.lk-steps__step p { font-size: var(--lk-fs-small); color: var(--lk-text-soft); margin: 0 auto; max-width: var(--lk-measure-step); }
.lk-steps__arrow { align-self: center; color: var(--lk-yellow); font-size: var(--lk-fs-symbol); line-height: 1; margin-top: 22px; }
@media (max-width: 959px) {
	.lk-steps, .lk-steps--2, .lk-steps--4 { grid-template-columns: 1fr; gap: var(--lk-gap-steps-sm); }
	.lk-steps__arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* =====================================================================
   5. STRIEDAVÝ BLOK (kit/_split.twig): text + snímky
   ===================================================================== */
/* Snímky sú vysoké presne ako text vedľa nich (pripomienka klienta 13. 9. 2026): stĺpec so
   snímkami je užší (.85fr), naťahuje sa na výšku textu, snímky si výšku delia rovnakým dielom
   a orezávajú sa zo stredu (plná snímka ostáva v lightboxe). */
.lk-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--lk-gap-split); align-items: stretch; }
.lk-split--flip { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.lk-split--flip .lk-split__media { order: -1; }
.lk-split__eyebrow {
	font-size: var(--lk-fs-eyebrow); font-weight: var(--lk-fw-bold); letter-spacing: var(--lk-ls-eyebrow-sm); text-transform: uppercase;
	color: var(--lk-eyebrow); margin: 0 0 12px;
}
.lk-split h2 { font-size: var(--lk-fs-h2); font-weight: var(--lk-fw-black); line-height: var(--lk-lh-heading); color: var(--lk-ink); margin: 0 0 16px; }
.lk-split__intro { font-size: var(--lk-fs-intro); color: var(--lk-text-soft); margin: 0 0 30px; }
@media (max-width: 959px) {
	.lk-split, .lk-split--flip { grid-template-columns: 1fr; gap: var(--lk-gap-split-sm); align-items: start; }
	.lk-split--flip .lk-split__media { order: 0; }
}

/* =====================================================================
   6. ZOZNAM FUNKCIÍ (kit/_features.twig): nadpis skupiny + body
   ===================================================================== */
.lk-features { margin-bottom: 26px; }
.lk-features h3 {
	font-size: var(--lk-fs-label); font-weight: var(--lk-fw-bold); letter-spacing: var(--lk-ls-label); text-transform: uppercase;
	color: var(--lk-ink); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--lk-line);
}
.lk-features ul { list-style: none; margin: 0; padding: 0; }
.lk-features li { position: relative; padding-left: 19px; margin-bottom: 7px; font-size: var(--lk-fs-list); color: var(--lk-text); }
.lk-features li::before {
	content: ''; position: absolute; left: 0; top: .55em;
	width: 7px; height: 7px; border-radius: 50%; background: var(--lk-yellow);
}
.lk-features li b { font-weight: var(--lk-fw-bold); color: var(--lk-ink); }

/* =====================================================================
   7. SNÍMKY (kit/_shots.twig): stĺpec snímok s popiskom a lightboxom
   ===================================================================== */
.lk-shots { display: grid; grid-auto-rows: minmax(0, 1fr); gap: var(--lk-gap-stack); min-height: 0; }
.lk-shot {
	display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; margin: 0;
	background: var(--lk-deep); border-radius: var(--lk-radius); overflow: hidden; box-shadow: var(--lk-shadow);
}
.lk-shot a { display: block; min-height: 0; height: 100%; cursor: zoom-in; }
.lk-shot picture { display: block; height: 100%; }
.lk-shot img {
	width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block;
	transition: transform var(--lk-duration-hover) var(--lk-ease);
}
/* odozva na ukázanie myšou alebo klávesnicou: snímka sa jemne priblíži, klik otvorí lightbox.
   Orez robí .lk-shot (overflow + radius); odkaz zámerne NEMÁ overflow: hidden, lebo v Chrome
   mení prevzorkovanie snímok v prirodzenom pomere (pod 960 px) o niekoľko pixelov. Popisok je
   position: relative, aby ho priblížená snímka neprekryla. */
.lk-shot a:hover img, .lk-shot a:focus-visible img { transform: scale(1.03); }
.lk-shot a:focus-visible { outline: 2px solid var(--lk-yellow); outline-offset: -4px; }
.lk-shot figcaption {
	position: relative;
	font-size: var(--lk-fs-caption); color: var(--lk-text-muted); padding: 10px 14px; margin: 0;
	background: var(--lk-surface); border-top: 1px solid var(--lk-line);
}
@media (max-width: 959px) {
	/* pod sebou sa snímky nekrájajú: plná snímka v prirodzenom pomere strán */
	.lk-shots { grid-auto-rows: auto; }
	.lk-shot { grid-template-rows: auto auto; }
	.lk-shot a, .lk-shot picture { height: auto; }
	.lk-shot img { height: auto; object-fit: initial; }
}

/* =====================================================================
   8. GALÉRIA NA TMAVOM (kit/_gallery.twig)
   ===================================================================== */
.lk-gallery { background: var(--lk-deep); }
.lk-gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.lk-gallery h2 { color: var(--lk-on-dark); font-size: var(--lk-fs-h2-band); font-weight: var(--lk-fw-black); margin: 0; }
.lk-gallery__note { font-size: var(--lk-fs-eyebrow); letter-spacing: var(--lk-ls-note); text-transform: uppercase; color: var(--lk-on-dark-faint); margin: 0; }
.lk-gallery__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lk-gap-stack); }
.lk-gallery figure { margin: 0; }
.lk-gallery img { border-radius: var(--lk-radius-sm); width: 100%; height: auto; display: block; }
.lk-gallery figcaption { font-size: var(--lk-fs-caption-dark); color: var(--lk-on-dark-muted); margin-top: 9px; }
@media (max-width: 959px) {
	.lk-gallery__strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
	.lk-gallery__strip { grid-template-columns: 1fr; }
}

/* =====================================================================
   9. KARTY (kit/_cards.twig), napr. licencie
   ===================================================================== */
/* box-sizing: téma je content-box; bez neho by sa k výške 100 % pripočítalo odsadenie
   a karta by pod textom mala ~56 px prázdna navyše */
.lk-card {
	box-sizing: border-box; height: 100%; text-align: center;
	border: var(--lk-border-card) solid var(--lk-yellow); border-radius: var(--lk-radius);
	padding: var(--lk-card-pad-y) var(--lk-card-pad-x); background: var(--lk-surface);
}
/* .lk-card--featured je len značka v HTML; vzhľad nemení (klient 15. 9. 2026: všetky karty rovnako žlté) */
.lk-card h3 { font-size: var(--lk-fs-h3); font-weight: var(--lk-fw-bold); color: var(--lk-ink); margin: 0 0 8px; }
.lk-card p { font-size: var(--lk-fs-small); color: var(--lk-text-soft); margin: 0; }

/* =====================================================================
   10. VÝZVA NA KONCI (kit/_cta.twig): tmavý pás
   ===================================================================== */
.lk-cta { background: var(--lk-deep); min-height: 220px; display: flex; align-items: center; }
.lk-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--lk-gap-cta); width: 100%; }
.lk-cta p { font-size: var(--lk-fs-statement); font-weight: var(--lk-fw-semibold); color: var(--lk-on-dark); margin: 0; }
@media (max-width: 959px) {
	.lk-cta__inner { flex-direction: column; text-align: center; }
}

/* =====================================================================
   11. POHYB (assets/kit/lidaretto-kit.js)
   ===================================================================== */
/* Progressive enhancement: prvok sa skryje len vtedy, keď skript pridá koreňu .lk-motion
   (prehliadač má IntersectionObserver, návštevník nemá obmedzený pohyb) a prvok je pri
   načítaní pod okrajom okna. Bez skriptu je všetko hneď viditeľné; konečný stav je
   totožný so statickým. Pohybuje sa len opacity a transform. */
.lk-motion [data-lk-reveal] {
	transition: opacity var(--lk-duration-reveal) var(--lk-ease), transform var(--lk-duration-reveal) var(--lk-ease);
	transition-delay: var(--lk-reveal-delay, 0ms);
}
.lk-motion [data-lk-reveal].lk-is-pending { opacity: 0; }
.lk-motion [data-lk-reveal=""].lk-is-pending { transform: translate3d(0, var(--lk-reveal-shift), 0); }
@media print {
	.lk-motion [data-lk-reveal].lk-is-pending { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lk *, .lk *::before, .lk *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}