/* alpineski — svetlý vzhľad webu v duchu obchodu (body.je-svetla) + spoločný karusel bannerov.
   Farby a písmo ako obchod: tmavomodrá #002045, oranžová #ff6a00, svetlé plochy, Space Grotesk + Inter.
   Načítava sa po tmava.css a prepisuje len to, čo treba. */

:root {
  --zj-navy: #002045;
  --zj-navy-2: #0b3364;
  --zj-oranz: #ff6a00;
  --zj-text: #191c1e;
  --zj-sivy: #5d6a7e;
  --zj-plocha: #f7f9fb;
  --zj-linka: rgb(0 32 69 / 12%);
  --zj-nadpis: "Space Grotesk", Inter, sans-serif;
}

/* ---------- karusel bannerov (karusel.js) — web aj obchod ---------- */
.kr-karusel { position: relative; }
/* len vodorovný posun — overflow-x: auto by inak spravil posúvateľným aj zvislý smer (na mobile „pláva“ hore-dole) */
.kr-stopa { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 3 / 1; outline: none; }
.kr-stopa::-webkit-scrollbar { display: none; }
.kr-stopa:focus-visible { outline: 2px solid var(--zj-oranz); outline-offset: 3px; }
.kr-snimka { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: block; overflow: hidden; }
.kr-snimka picture { display: block; height: 100%; }
.kr-snimka img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kr-sipka { position: absolute; top: calc(50% - 1.2rem); translate: 0 -50%; width: 48px; height: 48px; border: 0; background: #fff; color: var(--zj-navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgb(0 0 0 / 22%); transition: background 0.2s, color 0.2s; }
.kr-sipka:hover { background: var(--zj-oranz); color: #fff; }
.kr-sipka:focus-visible { outline: 2px solid var(--zj-oranz); outline-offset: 2px; }
.kr-sipka--spat { left: -24px; }
.kr-sipka--dalej { right: -24px; }
.kr-bodky { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.4rem; }
/* bodka je tenká čiarka, ale klikateľná plocha má 24 px na výšku (WCAG 2.5.8) */
.kr-bodka { position: relative; width: 28px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; transition: width 0.2s; }
.kr-bodka::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: rgb(255 255 255 / 30%); transition: background 0.2s; }
.kr-bodka:hover::before { background: rgb(255 255 255 / 55%); }
.kr-bodka[aria-current="true"] { width: 44px; }
.kr-bodka[aria-current="true"]::before { background: var(--zj-oranz); }
@media (max-width: 1279px) {
  .kr-sipka--spat { left: 0.8rem; }
  .kr-sipka--dalej { right: 0.8rem; }
}
@media (max-width: 767px) {
  .kr-stopa { aspect-ratio: 1 / 1; }
  .kr-sipka { width: 38px; height: 38px; top: 50%; background: rgb(255 255 255 / 88%); box-shadow: 0 4px 14px rgb(0 0 0 / 20%); }
  .kr-sipka .material-symbols-outlined { font-size: 22px; }
}

/* ---------- hlavná stránka: tmavomodrý pás s bannermi ---------- */
/* odsadenie pod pevným menu rovnaké ako v obchode (oznamovací pás je nad ním v toku stránky) */
.zj-uvod { background: var(--zj-navy); padding: 7rem 2rem 2.2rem; }
.zj-uvod .kr-karusel { max-width: 75rem; margin: 0 auto; }
@media (max-width: 767px) {
  .zj-uvod { padding: 5.4rem 1rem 1.4rem; }
}

/* ---------- svetlé sekcie ---------- */
body.je-svetla, body.je-svetla main { background: #fff; color: var(--zj-text); }
body.je-svetla .ws-sekcia { padding-top: 3.6rem; padding-bottom: 3.6rem; }
body.je-svetla .ws-hlava small { display: inline-block; background: var(--zj-oranz); color: #fff; font-family: Inter, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; padding: 0.3rem 0.6rem; margin-bottom: 0.7rem; }
body.je-svetla .ws-hlava h2 { font-family: var(--zj-nadpis); color: var(--zj-navy); text-transform: none; letter-spacing: -0.025em; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; }
body.je-svetla .ws-hlava p { font-family: Inter, sans-serif; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--zj-sivy); }
body.je-svetla .ws-obrys { border: 1.5px solid var(--zj-navy); color: var(--zj-navy); border-radius: 0; letter-spacing: 0.08em; }
body.je-svetla .ws-obrys:hover { background: var(--zj-navy); color: #fff; }
body.je-svetla main .ws-btn { background: var(--zj-oranz); color: #fff; border-radius: 0; }
body.je-svetla main .ws-btn:hover { background: #e85f00; transform: none; }
body.je-svetla main .ws-btn--obrys { background: transparent; color: var(--zj-navy); border: 1.5px solid var(--zj-navy); }
body.je-svetla main .ws-btn--obrys:hover { background: var(--zj-navy); color: #fff; }

/* Objav alpineski — fotodlaždice ostávajú, len čistejšie */
body.je-svetla .dl-dlazdica { border: 0; border-radius: 4px; background: var(--zj-navy); }
body.je-svetla .dl-dlazdica h2 { text-transform: none; letter-spacing: -0.02em; }
body.je-svetla .dl-dlazdica p { font-family: Inter, sans-serif; text-transform: none; letter-spacing: 0; font-size: 0.9rem; }
body.je-svetla .dl-dlazdica b { color: #fff; border-bottom: 2px solid var(--zj-oranz); padding-bottom: 2px; }
/* 7 dlaždíc: 4 stĺpce, servis (hlavná služba) cez dva — dva plné riadky bez osamotenej dlaždice */
body.je-svetla .dl-dlazdice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.je-svetla .dl-dlazdica:first-child { grid-column: span 2; }
@media (max-width: 1023px) {
  body.je-svetla .dl-dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body.je-svetla .dl-dlazdice { gap: 0.6rem; }
  body.je-svetla .dl-dlazdica { min-height: 190px; }
  body.je-svetla .dl-dlazdica .cislo, body.je-svetla .dl-dlazdica p { display: none; }
  body.je-svetla .dl-dlazdica .text { padding: 0.9rem; }
  body.je-svetla .dl-dlazdica h2 { font-size: 1.2rem; }
}

/* Najbližšie akcie — svetlá plocha a biele karty */
body.je-svetla .dl-akcie { background: var(--zj-plocha); border: 0; }
body.je-svetla .dl-akcie > img, body.je-svetla .dl-akcie::before, body.je-svetla .dl-akcie-rukopis { display: none; }
body.je-svetla .dl-akcie-obsah { grid-template-columns: 1fr; }
body.je-svetla .ws-workshop, body.je-svetla .dl-akcie-mriezka .ws-workshop { background: #fff; border: 1px solid var(--zj-linka); border-radius: 4px; color: var(--zj-text); box-shadow: 0 8px 24px rgb(0 0 0 / 5%); }
body.je-svetla .ws-workshop .ws-datum { background: var(--zj-navy); color: #fff; }
body.je-svetla .ws-workshop .sipka { border-color: var(--zj-linka); color: var(--zj-navy); }
body.je-svetla .ws-workshop .ws-meta, body.je-svetla .ws-meta { color: var(--zj-sivy); }
body.je-svetla .ws-zajazd { border: 0; border-radius: 4px; }
body.je-svetla .ws-prazdne { border-color: var(--zj-linka); color: var(--zj-sivy); background: #fff; }

/* appka — tmavomodrý pás ako popis v obchode */
body.je-svetla .dl-appka { background: var(--zj-navy); border: 0; color: #fff; }
body.je-svetla .dl-appka .ws-hlava h2 { color: #fff; }
body.je-svetla .dl-appka .ws-btn--obrys { color: #fff; border-color: rgb(255 255 255 / 60%); }
body.je-svetla .dl-appka .ws-btn--obrys:hover { background: rgb(255 255 255 / 12%); }

/* recenzie — biele karty */
body.je-svetla #recenzie-mriezka article { background: #fff !important; border: 1px solid var(--zj-linka) !important; color: var(--zj-text); box-shadow: 0 8px 24px rgb(0 0 0 / 5%); border-radius: 4px; }
body.je-svetla #recenzie-mriezka article p { color: var(--zj-text); }
body.je-svetla #recenzie-mriezka .text-primary, body.je-svetla #recenzie-hlavicka .text-primary { color: var(--zj-navy) !important; }
body.je-svetla #recenzie-hlavicka a { background: #fff !important; border-color: var(--zj-linka) !important; }
body.je-svetla #recenzie-hlavicka .text-on-surface-variant, body.je-svetla #recenzie-mriezka .text-on-surface-variant { color: var(--zj-sivy) !important; }

/* journal */
body.je-svetla .dl-clanok { border: 0; border-radius: 4px; }
body.je-svetla .dl-clanok h3 { text-transform: none; font-size: 1.05rem; }

/* newsletter — tmavomodrý pás */
body.je-svetla .ws-novinky { background: var(--zj-navy); border: 0; }
body.je-svetla .ws-novinky .riadok { border-radius: 0; }
body.je-svetla .ws-novinky button { background: var(--zj-oranz); color: #fff; }

/* ---------- podstránky: celoplošná tmavá fotka → tmavomodrý pás s textom vľavo a fotkou vpravo (ako obchod) ---------- */
body.je-svetla .ws-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 3.5rem; align-items: center; min-height: 0; background: var(--zj-navy); padding: 7.4rem max(2rem, calc((100% - 75rem) / 2)) 3.2rem; overflow: hidden; }
body.je-svetla .ws-hero .tien, body.je-svetla .ws-hero .ws-hero-rukopis-1, body.je-svetla .ws-hero .ws-hero-rukopis-2 { display: none; }
body.je-svetla .ws-hero img.pozadie { position: static; inset: auto; grid-column: 2; grid-row: 1; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 24px 60px rgb(0 0 0 / 30%); }
body.je-svetla .ws-hero-obsah { grid-column: 1; grid-row: 1; position: static; display: block; max-width: none; margin: 0; padding: 0 !important; min-height: 0; }
body.je-svetla .ws-hero .ws-nad { display: inline-block; background: var(--zj-oranz); color: #fff; font-family: Inter, sans-serif; font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; line-height: 1.4; padding: 0.35rem 0.65rem; margin-bottom: 1.1rem; }
body.je-svetla .ws-hero .ws-stetec { color: #fff; font-size: clamp(2.2rem, 4.2vw, 3.7rem); line-height: 1.02; letter-spacing: -0.035em; text-shadow: none; margin: 0 0 1.1rem; }
body.je-svetla .ws-hero-text p { font-family: Inter, sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1.06rem; line-height: 1.6; color: rgb(255 255 255 / 80%); max-width: 36rem; margin-bottom: 1.6rem; }
body.je-svetla .ws-hero .ws-btn { background: var(--zj-oranz); color: #fff; border-radius: 0; }
body.je-svetla .ws-hero .ws-btn:hover { background: #e85f00; transform: none; }
body.je-svetla .ws-hero .ws-btn--obrys { background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / 55%); }
body.je-svetla .ws-hero .ws-btn--obrys:hover { background: rgb(255 255 255 / 10%); }
body.je-svetla .ws-hero .om-kredit--hero { position: absolute; right: max(2rem, calc((100% - 75rem) / 2)); bottom: 0.9rem; color: rgb(255 255 255 / 55%); }
body.je-svetla .ws-hero { position: relative; }

/* pás s výhodami pod úvodom — biely ako dlaždice v obchode */
body.je-svetla .ws-vyhody { background: var(--zj-plocha); }
body.je-svetla .ws-vyhody-mriezka > div { color: var(--zj-navy); }
body.je-svetla .ws-vyhody-mriezka .material-symbols-outlined { color: var(--zj-oranz); }

@media (max-width: 1023px) {
  body.je-svetla .ws-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 2rem; }
}
@media (max-width: 767px) {
  body.je-svetla .ws-hero { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding: 5.8rem 1rem 2rem; }
  body.je-svetla .ws-hero img.pozadie { grid-column: 1; grid-row: 2; aspect-ratio: 16 / 10; }
  body.je-svetla .ws-hero .ws-stetec { font-size: 2.2rem; }
  body.je-svetla .ws-hero .om-kredit--hero { position: static; grid-row: 3; }
}

/* nadpisy bežným písmom ako v obchode; rukopisné poznámky vo svetlých sekciách oranžovo */
body.je-svetla main h1, body.je-svetla main h2, body.je-svetla main h3 { text-transform: none; }
body.je-svetla .ws-sekcia .ws-rukopis { color: var(--zj-oranz); text-shadow: none; }

/* tmavé pásy s fotkou alebo tmavomodrou plochou — text ostáva biely aj vo svetlom vzhľade */
body.je-svetla :is(.om-cta, .ap-cta, .ap-ako3, .sp-race, .dl-appka, .ws-novinky, .om-citat) :is(h2, h3, .ws-hlava h2) { color: #fff; }
body.je-svetla :is(.om-cta, .ap-cta, .ap-ako3, .sp-race, .dl-appka, .ws-novinky, .om-citat) :is(p, li, .ws-hlava p) { color: rgb(255 255 255 / 82%); }
body.je-svetla :is(.om-cta, .ap-cta, .ap-ako3, .sp-race, .dl-appka, .ws-novinky, .om-citat) .ws-nad { color: #ffb690; }
body.je-svetla :is(.om-cta, .ap-cta, .ap-ako3, .sp-race, .dl-appka, .ws-novinky, .om-citat) .ws-btn--obrys { color: #fff; border-color: rgb(255 255 255 / 60%); }

/* právne stránky: úvodný pás ostáva tmavomodrý s bielym nadpisom */
body.je-svetla.je-pravne main { padding-top: 0; }
body.je-svetla.je-pravne section.bg-primary h1 { color: #fff !important; }
body.je-svetla.je-pravne section.bg-primary p { color: rgb(255 255 255 / 80%) !important; }
body.je-svetla.je-pravne .a-pravne { box-shadow: 0 8px 24px rgb(0 0 0 / 5%); border-radius: 4px; }
body.je-svetla.je-pravne .a-pravne a { color: #0b5cad; }

/* mobil: alpine.css dáva každej sekcii 2,75rem s !important — úvodné pásy potrebujú miesto pod pevným menu */
@media (max-width: 767px) {
  body.je-svetla main section.zj-uvod { padding: 5.4rem 1rem 1.4rem !important; }
  body.je-svetla main section.ws-hero { padding: 5.6rem 1rem 2rem !important; }
  body.je-svetla main .ws-hero .ws-stetec { font-size: 2.1rem !important; line-height: 1.05 !important; }
}

/* servis a cenník: zelené akcenty tmavšie, aby boli čitateľné na bielom */
body.je-svetla { --sp-zelena: #0a8a4a; }

/* hromadný servis pre kluby — zoznam s ikonami (predtým bez štýlov) */
.sp-kluby { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 52rem; }
.sp-kluby-text > p { color: var(--zj-text); line-height: 1.6; margin: 0 0 1.4rem; }
.sp-kluby-zoznam { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sp-kluby-zoznam li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.9rem; align-items: start; background: #fff; border: 1px solid var(--zj-linka); padding: 1.1rem; border-radius: 4px; }
.sp-kluby-zoznam .material-symbols-outlined { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: rgb(255 106 0 / 10%); color: var(--zj-oranz); font-size: 22px; }
.sp-kluby-zoznam b { display: block; font-family: var(--zj-nadpis); color: var(--zj-navy); margin-bottom: 0.25rem; }
.sp-kluby-zoznam p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--zj-sivy); }
.sp-kluby-pozn { color: var(--zj-sivy); font-size: 0.95rem; margin: 0 0 1rem; }
.sp-kluby-akcie { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ws-tlacidlo { display: inline-flex; align-items: center; gap: 0.5rem; border: 1.5px solid var(--zj-navy); color: var(--zj-navy); padding: 0.8rem 1.2rem; font-family: var(--zj-nadpis); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, color 0.2s; }
.ws-tlacidlo:hover { background: var(--zj-navy); color: #fff; }
@media (max-width: 767px) {
  .sp-kluby-zoznam { grid-template-columns: minmax(0, 1fr); }
  .sp-kluby-akcie > * { flex: 1 1 100%; justify-content: center; }
}
body.je-svetla .sp-stitok { color: #fff; }
body.je-svetla .sp-race { --sp-zelena: #8fe3a6; }

/* konfigurátor: výber oranžovou ako tlačidlá, popisky na fotkách ostávajú biele */
body.je-svetla .kf-typ .nazov { color: #fff; text-shadow: 0 2px 10px rgb(0 0 0 / 65%); }
body.je-svetla :is(.kf-typ, .kf-doplnok, .kf-balik, .kf-expres):has(input:checked) { border-color: var(--zj-oranz); box-shadow: 0 0 0 1px var(--zj-oranz), 0 10px 30px rgb(255 106 0 / 14%); }
body.je-svetla label:has(input:checked) > .fajka, body.je-svetla label:has(input:checked) > .hlava > .fajka { background: var(--zj-oranz); border-color: var(--zj-oranz); }
body.je-svetla .fajka { border-color: rgb(0 32 69 / 30%); background: #fff; }
body.je-svetla .kf-typ .fajka { background: rgb(255 255 255 / 85%); }
body.je-svetla .kf-balik li::before { color: var(--zj-oranz); }
body.je-svetla .kf-pole :is(input, select, textarea):focus { border-color: var(--zj-oranz); }
body.je-svetla .kf-odoslat { background: var(--zj-oranz); }

/* newsletter — bez širokého riedenia písmen */
body.je-svetla .ws-novinky h2 { letter-spacing: -0.01em; line-height: 1.2; }

/* aplikácia: úvod má vlastný obrázok telefónu — tmavú fotku dielne nezobrazujeme */
body.je-svetla .ap-hero2 img.pozadie { display: none; }
body.je-svetla .ap-hero2 { grid-template-columns: minmax(0, 1fr); }
body.je-svetla .ap-hero2 .ws-hero-obsah { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
body.je-svetla .ap-hero2 .ws-hero-text p { letter-spacing: 0; font-size: 1.06rem; color: rgb(255 255 255 / 80%); }
body.je-svetla .ap-hero2 .ws-nad { letter-spacing: 0.18em; color: #fff; }
@media (max-width: 767px) {
  body.je-svetla .ap-hero2 .ws-hero-obsah { grid-template-columns: minmax(0, 1fr); }
}

/* malé nadpisy nad sekciami (Kto som?, Čo ma napĺňa?…) ako oranžové štítky — rovnako ako v obchode */
body.je-svetla .ws-sekcia .ws-nad, body.je-svetla .sp-odporucit .ws-nad { display: inline-block; background: var(--zj-oranz); color: #fff; font-family: Inter, sans-serif; font-style: normal; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; padding: 0.3rem 0.6rem; margin-bottom: 0.7rem; }

/* riedené písmo bolo pre VEĽKÉ nadpisy — pri bežnom písme ho rušíme */
body.je-svetla main :is(h2, h3, h4) { letter-spacing: -0.01em; }

/* audit 26. 10. — kontrast textov, ktoré automatický prevod nezachytil */
body.je-svetla .pk-suhrn span { color: #a3460a; }
body.je-svetla .sp-lab--express small { color: #a3460a; }
body.je-svetla .ws-zajazd .ws-meta { color: rgb(255 255 255 / 78%); }
body.je-svetla .pd-spat { color: rgb(255 255 255 / 80%); }
body.je-svetla .pd-spat:hover { color: #fff; }
body.je-svetla .sv-cta .ws-btn .material-symbols-outlined { color: inherit; }
body.je-svetla .sv-cta > div > .material-symbols-outlined { color: var(--zj-oranz); }

/* fotopásy (citát, výzvy, pretekári, appka) v značkovej tmavomodrej ako hero a e-shop — nie takmer čierne */
body.je-svetla :is(.om-citat, .om-cta, .sp-race, .ap-ako3) { background: var(--zj-navy, #002045); border-color: transparent; }
body.je-svetla :is(.om-cta, .ap-cta)::before { background: linear-gradient(90deg, rgb(0 32 69 / 95%), rgb(0 32 69 / 70%) 55%, rgb(0 32 69 / 45%)); }
body.je-svetla .sp-race::before { background: linear-gradient(90deg, rgb(0 32 69 / 96%) 0%, rgb(0 32 69 / 75%) 45%, rgb(0 32 69 / 15%) 100%); }
body.je-svetla .ap-ako3::after { background: linear-gradient(180deg, transparent 70%, #002045 100%); }