/* Ubytovanie u Maťka a Kubka — v3 „Teplo domova“: krém a piesok, jantárové detaily, fotografie a video na celú šírku (dokumentacia/DESIGN.md) */

:root {
  --pozadie: #fbf7f0;
  --pozadie-2: #f4ecdf;
  --pozadie-3: #ece2d0;
  --karta: #fffdf9;
  --text: #2b2622;
  --text-2: #4e463e;
  --tlmene: #6b6157;
  --akcent: #2f6b55;
  --akcent-2: #24553f;
  --akcent-mekky: #e3eee6;
  --teplo: #d08a3e;
  --teplo-2: #8f5518;
  --teplo-mekky: #f8e6cc;
  --les: #26423a;
  --noc: #1b1611;
  --linka: #e7dccb;
  --chyba: #a23b2f;
  --ok: #3f6b3a;
  --max: 1240px;
  /* viewport-fit=cover: na iPhone s výrezom na šírku musí okraj obísť výrez (safe area), inde je env() 0 */
  --okraj: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --r: 18px;
  --r-mala: 10px;
  --hl-v: 92px;
  --tien: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 34px -20px rgba(0, 0, 0, .26);
  --tien-velky: 0 2px 4px rgba(0, 0, 0, .05), 0 30px 60px -26px rgba(0, 0, 0, .4);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --pismo-nadpis: "Gloock", "Gloock-fb", Georgia, serif;
  --pismo-text: "Onest", "Onest-fb", "Segoe UI", system-ui, sans-serif;
  --pismo-rucne: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
}
@font-face { font-family: "Gloock"; src: url("/pisma/nadpis.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/pisma/text.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("/pisma/rucne.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gloock-fb"; src: local("Georgia"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Onest-fb"; src: local("Segoe UI"), local("Arial"); size-adjust: 99%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hl-v) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--pozadie); color: var(--text);
  font: 400 17px/1.6 var(--pismo-text); -webkit-font-smoothing: antialiased; overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--akcent-2); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .15s, text-decoration-thickness .15s; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--pismo-nadpis); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; }
h3 { font-family: var(--pismo-text); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
h1 { font-size: clamp(2.5rem, 6.2vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
p { margin: 0 0 1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.2em; }
b, strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--teplo); outline-offset: 3px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skok { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--text); color: #fff; padding: 10px 14px; border-radius: var(--r-mala); }
.skok:focus { top: 8px; }

.in { width: min(100% - 2 * var(--okraj), var(--max)); margin-inline: auto; }
.sek { padding-block: clamp(56px, 9vw, 128px); position: relative; }
.sek-2 { background: var(--pozadie-2); }
.uvod { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 52px); }
.uvod p { font-size: 1.1rem; color: var(--text-2); }
.ik { width: 20px; height: 20px; flex: none; }
.ik-v { width: 58px; height: 58px; padding: 15px; border-radius: 50%; background: var(--teplo-mekky); color: var(--teplo-2); margin-bottom: 16px; }
.fakty { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.fakty li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.fakty .ik { color: var(--teplo-2); margin-top: 2px; }
.fakty-2 { grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 18px 0 6px; }
@media (max-width: 520px) { .fakty-2 { grid-template-columns: 1fr; } }
.pozn { font-size: .95rem; color: var(--tlmene); margin-top: 22px; max-width: 70ch; }
.datum { color: var(--tlmene); font-weight: 400; }
.odd { color: var(--tlmene); margin: 0 .3em; }
.cislo { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.rucne { font-family: var(--pismo-rucne); font-weight: 400; color: var(--teplo-2); letter-spacing: 0; }

/* tlačidlá */
.tl {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.45em;
  border: 1.5px solid var(--text); border-radius: 999px; background: transparent; color: var(--text); font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease-out), color .18s, border-color .18s, transform .09s;
}
.tl:hover { background: var(--text); color: var(--pozadie); }
.tl:active { transform: scale(.97); }
.tl-akcent { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.tl-akcent:hover { background: var(--akcent-2); border-color: var(--akcent-2); color: #fff; }
.tl-svetle { border-color: rgba(255, 255, 255, .8); color: #fff; }
.tl-svetle:hover { background: #fff; color: var(--text); border-color: #fff; }
.tl[disabled] { opacity: .5; cursor: not-allowed; }
.tl-riadok { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 1.4em; }
@media (max-width: 480px) { .tl-riadok .tl { flex: 1 1 auto; white-space: normal; text-align: center; max-width: 100%; } }
/* najužšie telefóny (320–360 px): menší bočný okraj, aby dlhšie texty („Overiť dostupnosť pre skupinu“, „Rezervovať zimný pobyt“) ostali v jednom riadku */
@media (max-width: 360px) { .tl-riadok .tl { padding-inline: 1em; } }

/* hlavička: nad fotkou priehľadná s bielym logom, po posune plná */
.hl { position: sticky; top: 0; z-index: 50; color: var(--text); background: color-mix(in srgb, var(--pozadie) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s, background-color .3s, color .3s; }
.hl.posunute { border-bottom-color: var(--linka); }
.hl-in { width: min(100% - 2 * var(--okraj), var(--max)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--hl-v); }
.hl-logo { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.hl-logo img { height: 54px; width: auto; }
.hl-logo .logo-svetle { display: none; }
.hl-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.hl-nav a { display: inline-block; white-space: nowrap; padding: 11px 14px; color: inherit; text-decoration: none; font-weight: 500; font-size: 1.04rem; border-radius: 999px; transition: background-color .15s; }
.hl-nav a:not(.tl):hover, .hl-nav a:not(.tl)[aria-current="page"] { background: color-mix(in srgb, currentColor 10%, transparent); }
.hl-tel a { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.hl-tel .ik { width: 18px; height: 18px; color: var(--teplo-2); }
.hl-cta a { padding: 12px 22px; margin-left: 10px; font-size: 1rem; }
.hl-nav a.tl-akcent, .hl-nav a.tl-akcent:hover { color: #fff; }
.hl-menu { display: none; }
body:has(> main > .hero) .hl, body:has(> main > .pod) .hl { position: fixed; left: 0; right: 0; }
body:has(> main > .hero) .hl:not(.posunute):not(.otvorene), body:has(> main > .pod) .hl:not(.posunute):not(.otvorene) {
  background: linear-gradient(rgba(27, 22, 17, .45), rgba(27, 22, 17, 0)); backdrop-filter: none; color: #fff; border-bottom-color: transparent;
}
.hl:not(.posunute):not(.otvorene) .hl-tel .ik { color: inherit; }
body:has(> main > .hero) .hl:not(.posunute):not(.otvorene) .logo-tmave, body:has(> main > .pod) .hl:not(.posunute):not(.otvorene) .logo-tmave { display: none; }
body:has(> main > .hero) .hl:not(.posunute):not(.otvorene) .logo-svetle, body:has(> main > .pod) .hl:not(.posunute):not(.otvorene) .logo-svetle { display: block; }
@media (max-width: 1240px) { .hl-nav a { padding: 10px 9px; font-size: .98rem; } }
@media (max-width: 1060px) and (min-width: 901px) { .hl-nav a { padding: 10px 7px; font-size: .92rem; } .hl-logo img { height: 44px; } }
@media (max-width: 900px) {
  :root { --hl-v: 72px; }
  .hl-logo img { height: 44px; }
  .hl-menu { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; margin-right: -8px; color: inherit; }
  .hl-menu span:first-child { position: relative; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease-out), background-color .25s; }
  .hl-menu span:first-child::before, .hl-menu span:first-child::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease-out), top .25s; }
  .hl-menu span:first-child::before { top: -7px; } .hl-menu span:first-child::after { top: 7px; }
  .menu-otvorene .hl-menu span:first-child { background: transparent; }
  .menu-otvorene .hl-menu span:first-child::before { top: 0; transform: rotate(45deg); }
  .menu-otvorene .hl-menu span:first-child::after { top: 0; transform: rotate(-45deg); }
  #menu { position: fixed; inset: var(--hl-v) 0 0; background: var(--pozadie); color: var(--text); flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--okraj) calc(24px + env(safe-area-inset-bottom)); overflow: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s .22s; }
  .menu-otvorene #menu { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .menu-otvorene { overflow: hidden; }
  /* bez rozmazania: backdrop-filter robí z hlavičky obal pre position: fixed a menu by malo len jej výšku (36 px) */
  .hl.otvorene { background: var(--pozadie); color: var(--text); backdrop-filter: none; }
  .hl-nav li a { display: block; padding: 14px 8px; font-size: 1.25rem; border-radius: var(--r-mala); }
  .hl-tel a { display: flex; }
  .hl-tel .ik { color: var(--teplo-2); }
  .hl-cta { margin-top: 12px; } .hl-nav .hl-cta a { display: flex; justify-content: center; padding: 14px; margin: 0; }
}
/* mobilné menu na nízkych obrazovkách: hustejšie položky, aby sa zmestilo aj s tlačidlom Rezervovať;
   telefón na šírku: položky v dvoch stĺpcoch, tlačidlo cez celú šírku */
@media (max-width: 900px) and (max-height: 620px) {
  .hl-nav li a { padding-block: 10px; font-size: 1.12rem; }
  .hl-cta { margin-top: 8px; } .hl-nav .hl-cta a { padding: 11px; }
}
@media (max-width: 599px) and (max-height: 520px) {
  .hl-nav li a { padding-block: 7px; font-size: 1.05rem; }
}
@media (max-width: 900px) and (min-width: 600px) and (max-height: 520px) {
  #menu { display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: 24px; padding-top: 6px; }
  .hl-nav li a { padding-block: 8px; }
  #menu .hl-cta { grid-column: 1 / -1; }
}

/* odhalenie pri scrolle: základ je viditeľný, JS len pridá animáciu */
@media (prefers-reduced-motion: no-preference) {
  .js .odhal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .js .odhal.je { opacity: 1; transform: none; }
}

/* karty */
.karta { background: var(--karta); border-radius: var(--r); overflow: hidden; box-shadow: var(--tien); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .karta:hover { transform: translateY(-4px); box-shadow: var(--tien-velky); } .karta:hover img { transform: scale(1.04); } }
.karta img { transition: transform 1.1s var(--ease-out); }
.karta-obr { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.karta-obr picture, .karta-obr img { width: 100%; height: 100%; object-fit: cover; }
.karta-txt { padding: 22px 26px 26px; }

/* formuláre */
.pole { display: grid; gap: 6px; margin-bottom: 14px; }
.pole label { font-weight: 600; font-size: .95rem; }
.pole input, .pole select, .pole textarea { width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--linka); border-radius: var(--r-mala); background: #fff; font-size: 16px; }
.pole input:focus, .pole select:focus, .pole textarea:focus { border-color: var(--akcent); outline-offset: 2px; }
.pole textarea { min-height: 120px; resize: vertical; }
.pole-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 480px) { .pole-2 { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }
.dopyt-stav { margin-top: 12px; min-height: 1.6em; font-weight: 500; }
.dopyt-stav.ok { color: var(--ok); } .dopyt-stav.chyba { color: var(--chyba); }
.nahlad-oznam { padding: 16px 18px; border: 1px solid #ccb78d; border-radius: var(--r-mala); background: #faf3e5; color: #59482d; }
.nahlad-oznam[hidden] { display: none; }
.rezervacia-kroky { padding-left: 24px; }
.rezervacia-kroky li { margin-bottom: 18px; padding-left: 4px; }

/* lišta termínu: karta cez spodný okraj fotky */
.termin { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, .7fr) auto; gap: 12px; align-items: end; background: var(--karta); border-radius: var(--r); padding: 18px 22px 16px; box-shadow: var(--tien-velky); color: var(--text); }
.termin .pole { margin: 0; }
.termin .pole label { font-size: .85rem; color: var(--tlmene); }
.termin .tl { min-height: 50px; padding-inline: 1.6em; }
.termin-cena { grid-column: 1 / -1; margin: 4px 0 0; font-size: .95rem; color: var(--text-2); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; max-width: none; }
.termin-cena b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); font-size: 1rem; }
.termin-noci { font-size: .9rem; color: var(--tlmene); }
@media (max-width: 900px) { .termin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px; } .termin .tl { grid-column: 1 / -1; } }

/* dialógy: galéria a video */
/* dvh: na telefóne s lištou prehliadača je 100vh vyššie ako viditeľná plocha a spodok okna (popis fotky) by bol pod lištou */
dialog { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; max-height: 100dvh; }
dialog::backdrop { background: rgba(20, 16, 12, .92); }
#lightbox { width: 100vw; height: 100vh; height: 100dvh; display: none; place-items: center; }
#lightbox[open] { display: grid; }
#lightbox img { max-width: min(96vw, 1600px); max-height: 82vh; max-height: 82dvh; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lb-pop { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); text-align: center; color: #fff; padding: 0 64px; font-size: .95rem; }
.lb-poc { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: calc(20px + env(safe-area-inset-left, 0px)); color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.lb-tl { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color .15s; }
.lb-tl:hover { background: rgba(255, 255, 255, .26); }
.lb-zavri { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
.lb-spat { left: calc(12px + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); } .lb-dalej { right: calc(12px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
.lb-tl svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
/* video 16 : 9 musí byť celé vidieť aj na telefóne na šírku: šírku obmedzuje aj výška okna */
#video-dialog { width: min(96vw, 1400px, (100vh - 96px) * 16 / 9); width: min(96vw, 1400px, (100dvh - 96px) * 16 / 9); }
#video-dialog video { width: 100%; height: auto; border-radius: var(--r-mala); background: #000; }
.vd-zavri { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }

/* pevná lišta na telefóne */
.lista { display: none; }
@media (max-width: 900px) {
  .lista { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--okraj) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--pozadie) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--linka); transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease-out), visibility 0s .3s; }
  .lista.vidno { transform: none; visibility: visible; transition-delay: 0s; }
  .lista .tl { flex: 1; }
}

/* omrvinky a drobné */
.chlieb { font-size: .9rem; color: var(--tlmene); margin-bottom: 1em; }
.chlieb a { color: inherit; }
.chlieb span { margin: 0 .4em; }
.citaj-dalej { display: none; }
.viac-mobil { display: contents; }
@media (max-width: 760px) {
  .citaj-dalej { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 0; color: var(--akcent-2); font-weight: 600; cursor: pointer; }
  .citaj-dalej svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
  .viac-mobil { display: none; }
  .viac-mobil.otvorene { display: block; }
}

/* pätička */
.pat { background: var(--les); color: #dfe6df; padding: 0 0 calc(28px + env(safe-area-inset-bottom)); }
.pat a { color: #fff; }
.pat-o a, .pat-p a { display: inline-block; padding: 4px 0; }
.pat-in { width: min(100% - 2 * var(--okraj), var(--max)); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; padding-top: clamp(48px, 7vw, 88px); }
.pat-o img { margin-bottom: 18px; }
.pat-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pat-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pat-nav a { text-decoration: none; display: inline-block; padding: 3px 0; }
.pat-nav a:hover { text-decoration: underline; }
.pat-p { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 20px; font-size: .9rem; color: #b9c4bb; }
.pat-p p { max-width: none; }
@media (max-width: 760px) { .pat-in { grid-template-columns: 1fr; gap: 28px; } .pat-nav { grid-template-columns: 1fr 1fr; } }

/* hero: video a fotka na celú obrazovku, text dole vľavo, lišta termínu cez spodný okraj */
.hero { position: relative; color: #fff; }
.hero-pole { position: relative; min-height: max(640px, 100svh); display: flex; align-items: flex-end; background: #2a2219; overflow: clip; }
.hero-media, .pod-media, .pas-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media picture, .hero-media img, .hero-media video, .pod-media picture, .pod-media img, .pas-media picture, .pas-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-media video { opacity: 0; transition: opacity 1.2s ease; z-index: 2; }
.hero-media video.hra { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; z-index: 3; background: radial-gradient(70% 55% at 12% 100%, rgba(208, 138, 62, .22), transparent 70%), linear-gradient(180deg, rgba(27, 22, 17, .24) 0%, rgba(27, 22, 17, 0) 32%, rgba(27, 22, 17, .18) 58%, rgba(27, 22, 17, .8) 100%), linear-gradient(90deg, rgba(27, 22, 17, .42) 0%, rgba(27, 22, 17, 0) 60%); }
.hero-in { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; padding: calc(var(--hl-v) + 48px) 0 clamp(150px, 16vw, 190px); }
.hero h1 { color: #fff; margin-bottom: .3em; max-width: 12em; text-shadow: 0 2px 30px rgba(20, 14, 8, .4); }
.hero-pod { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: rgba(255, 255, 255, .93); max-width: 36em; text-shadow: 0 1px 20px rgba(20, 14, 8, .5); }
.hero-akcie { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 1.6em; }
.hero-hodn { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .9); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; text-shadow: 0 1px 14px rgba(20, 14, 8, .5); }
.hero-hodn > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
/* 280 px (Galaxy Fold, zväčšené písmo): „4,7 Google z 87 hodnotení“ sa zalomí, inak rozšíri celý úvod za okraj okna */
@media (max-width: 340px) { .hero-hodn > span { white-space: normal; flex-wrap: wrap; } }
.hero-hodn .hviezdy { gap: 1px; margin-right: 2px; }
.hero-hodn .hviezdy .ik { width: 16px; height: 16px; color: var(--teplo); }
.hviezda-pol { position: relative; width: 16px; height: 16px; display: inline-block; flex: none; }
.hviezda-pol .ik { position: absolute; inset: 0; }
.hviezda-pol .ik-plna { clip-path: inset(0 30% 0 0); }
.hero-hodn .ik { color: var(--teplo); width: 18px; height: 18px; }
.hero-hodn b { font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.hero-hodn .odd { color: rgba(255, 255, 255, .6); }
.hero-hodn .datum { color: rgba(255, 255, 255, .7); }
.hero-termin { position: relative; z-index: 5; margin-top: -118px; }
.dovody { list-style: none; margin: 18px 0 0; padding: 0 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px; color: var(--text-2); font-size: .95rem; }
.dovody li { display: flex; gap: 9px; align-items: flex-start; }
.dovody .ik { color: var(--akcent); margin-top: 2px; width: 18px; height: 18px; }
@media (max-width: 900px) { .dovody { grid-template-columns: 1fr; gap: 8px; padding: 0 4px; } }
.hero + .sek { padding-top: clamp(64px, 8vw, 110px); }
@media (max-width: 900px) {
  .hero-pole { min-height: max(560px, 82svh); }
  .hero-media picture, .hero-media img { object-position: 50% 50%; }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: calc(var(--hl-v) + 32px) 0 64px; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.6rem); max-width: none; }
  .hero-pod { font-size: 1.05rem; }
  .hero-termin { margin-top: -36px; }
}
@media (max-width: 420px) { .hero h1 { font-size: 2.45rem; } .hero-akcie .tl { flex: 1; padding-inline: .8em; } }

/* úvodná choreografia (len bez obmedzeného pohybu, len s JS) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-media picture { animation: priblizenie 2.4s var(--ease-out) both; }
  .js .hero .odhal-r { opacity: 0; transform: translateY(16px); animation: odhal-r .9s var(--ease-out) forwards; }
  .js .hero h1 .odhal-r:nth-child(2) { animation-delay: .1s; }
  .js .hero .hero-pod { animation-delay: .22s; }
  .js .hero .hero-akcie { animation-delay: .32s; }
  .js .hero .hero-hodn { animation-delay: .42s; }
  .js .hero .termin { animation-delay: .5s; }
}
@keyframes odhal-r { to { opacity: 1; transform: none; } }
@keyframes priblizenie { from { transform: scale(1.06); } to { transform: none; } }

/* úvodná veta a čísla domu */
.uvod-velky { display: grid; gap: clamp(20px, 3vw, 36px); }
.velka-veta { font-family: var(--pismo-nadpis); font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1.3; letter-spacing: -.008em; max-width: 30em; color: var(--text); text-wrap: pretty; }
.pasik { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 24px; }
.pasik li { border-top: 1px solid var(--linka); padding-top: 14px; color: var(--text-2); font-size: .95rem; }
.pasik b { display: block; font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--teplo-2); line-height: 1.3; margin-bottom: 2px; }
@media (max-width: 760px) { .pasik { grid-template-columns: 1fr 1fr; } }

/* slovo majiteľov */
.majitelia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: center; background: var(--pozadie-3); border-radius: var(--r); padding: clamp(24px, 4vw, 48px); }
.majitelia-foto { width: clamp(120px, 16vw, 180px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px var(--karta), var(--tien); }
.majitelia-foto picture, .majitelia-foto img { width: 100%; height: 100%; object-fit: cover; }
.majitelia h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .4em; }
.majitelia p { color: var(--text-2); font-size: 1.05rem; max-width: 60ch; }
.majitelia p + p { margin-top: .8em; }
.podpis { display: block; margin-top: 14px; font-family: var(--pismo-rucne); font-size: clamp(1.4rem, 2vw, 1.7rem); color: var(--teplo-2); line-height: 1.2; }
@media (max-width: 760px) { .majitelia { grid-template-columns: 1fr; } .majitelia-foto { width: 110px; } }

/* prečo Maťko a Kubko: znak z loga a rozprávka */
.rozpravka { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--karta); border-radius: var(--r); padding: clamp(24px, 4vw, 48px); box-shadow: var(--tien); }
.rozpravka-znak { width: clamp(120px, 14vw, 170px); height: auto; aspect-ratio: 52 / 48; object-fit: contain; object-position: left center; }
.rozpravka h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .4em; }
.rozpravka p { color: var(--text-2); font-size: 1.05rem; max-width: 62ch; }
.rozpravka-malo { font-size: .95rem; color: var(--tlmene); }
@media (max-width: 760px) { .rozpravka { grid-template-columns: 1fr; } .rozpravka-znak { width: 110px; } }
/* Prečo Maťko a Kubko (#247): fotka chlapcov v krojoch ako tretí stĺpec karty, na mobile pod textom */
.rozpravka:has(> .rozpravka-foto) { grid-template-columns: auto minmax(0, 1fr) clamp(200px, 24vw, 300px); }
.rozpravka-foto { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; box-shadow: var(--tien); }
.rozpravka-foto picture, .rozpravka-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .rozpravka-foto:hover img { transform: scale(1.03); } }
@media (max-width: 760px) { .rozpravka:has(> .rozpravka-foto) { grid-template-columns: 1fr; } .rozpravka-foto { aspect-ratio: 1 / 1; } }

/* jednotky */
.dvere { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.dvere-velke { grid-column: span 6; }
.dvere-male { grid-column: span 6; display: grid; grid-template-columns: 2fr 3fr; }
.dvere-male .karta-obr { aspect-ratio: auto; min-height: 100%; }
.karta h3 small { display: block; font-weight: 500; color: var(--tlmene); font-size: .9rem; margin-top: 2px; }
.cena { margin: 6px 0 16px; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cena b { display: inline-block; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.2rem; color: var(--text); background: var(--teplo-mekky); padding: .12em .6em; border-radius: 999px; }
.cena small { font-size: .9rem; color: var(--tlmene); }
.cena .dop { flex-basis: 100%; }
.karta .tl-riadok { margin-top: 0; }
@media (max-width: 760px) { .dvere { gap: 16px; } .dvere-velke, .dvere-male { grid-column: span 12; } .dvere-male { grid-template-columns: 2fr 3fr; } .dvere-male .karta-txt { padding: 14px 16px 16px; } .dvere-male h3 { font-size: 1.1rem; } }
@media (max-width: 420px) { .dvere-male { grid-template-columns: 1fr 1.5fr; } .dvere-male .karta-obr { min-height: 0; } .dvere-velke .karta-obr { aspect-ratio: 16 / 10; } }
@media (max-width: 480px) { .karta .tl-riadok { flex-wrap: nowrap; } .karta .tl-riadok .tl { flex: 1; padding-inline: .7em; font-size: .95rem; } }

/* pás s fotkou cez celú šírku (večer v jacuzzi) */
.pas { position: relative; min-height: min(86svh, 820px); display: flex; align-items: center; color: #fff; background: var(--noc); overflow: clip; }
.pas-media picture, .pas-media img { object-position: 62% 50%; filter: brightness(1.22) saturate(1.05); }
.pas-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 22, 17, .66) 0%, rgba(27, 22, 17, .34) 46%, rgba(27, 22, 17, 0) 100%), linear-gradient(0deg, rgba(27, 22, 17, .3), rgba(27, 22, 17, 0) 35%); }
.pas-in { position: relative; z-index: 2; padding-block: clamp(72px, 10vw, 140px); }
.pas-txt { max-width: 560px; }
.pas-txt h2 { color: #fff; }
.pas-txt p { color: rgba(255, 255, 255, .9); font-size: 1.08rem; }
.pas-txt .fakty li { color: rgba(255, 255, 255, .92); }
.pas-txt .fakty .ik { color: var(--teplo); }
.pas-txt .tl-svetle { border-color: rgba(255, 255, 255, .75); }
@media (max-width: 900px) { .pas { min-height: 0; } .pas-media::after { background: linear-gradient(180deg, rgba(27, 22, 17, .25) 0%, rgba(27, 22, 17, .74) 100%); } .pas-in { padding-block: clamp(240px, 52vw, 320px) 56px; } .pas-media picture, .pas-media img { object-position: 50% 58%; } }

/* dvojstĺpec text + fotky; malé fotky ako „z albumu“ s bielym okrajom */
.dvoj { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.dvoj.obr-vpravo { grid-template-columns: 7fr 5fr; }
.dvoj.obr-vpravo .dvoj-obr { order: 2; }
.dvoj > * { min-width: 0; max-width: 100%; }
.dvoj-obr { display: grid; gap: 18px; }
.dvoj-obr a, .dvoj-obr picture { min-width: 0; max-width: 100%; }
.dvoj-obr a { display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--tien); }
.dvoj-obr img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .dvoj-obr a:hover img { transform: scale(1.03); } }
.dvoj-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 10px; }
.dvoj-mini a { aspect-ratio: 4 / 3; padding: 8px 8px 10px; background: var(--karta); border-radius: 12px; box-shadow: var(--tien-velky); transition: transform .5s var(--ease-out); }
.dvoj-mini a:first-child { transform: rotate(-2deg); }
.dvoj-mini a:last-child { transform: rotate(1.6deg); }
@media (hover: hover) { .dvoj-mini a:hover { transform: rotate(0) translateY(-3px); } }
.dvoj-mini picture { height: 100%; border-radius: 6px; overflow: hidden; }
.dvoj-mini img { height: 100%; }
.vyrez img { aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .dvoj, .dvoj.obr-vpravo { grid-template-columns: 1fr; } .dvoj.obr-vpravo .dvoj-obr { order: 0; } }

/* fotografické karty (okolie, zima) */
.foto-mriezka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.foto-mriezka-3 { grid-template-columns: repeat(3, 1fr); }
.foto-karta { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; color: #fff; text-decoration: none; box-shadow: var(--tien); background: var(--noc); }
.foto-mriezka-3 .foto-karta { aspect-ratio: 4 / 3; }
.foto-karta picture, .foto-karta img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.foto-karta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 42%, rgba(27, 22, 17, .88)); }
.foto-txt { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: grid; gap: 3px; }
.foto-txt b { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.foto-txt span { font-size: .9rem; color: rgba(255, 255, 255, .85); }
@media (hover: hover) { .foto-karta:hover img { transform: scale(1.04); } }
@media (max-width: 900px) { .foto-mriezka { grid-template-columns: 1fr 1fr; } }

/* pás fotiek z domu: päť záberov od kraja po kraj, na telefóne posuvný */
.film { padding-block: clamp(28px, 4vw, 56px) 0; }
.film-pas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }   /* stĺpcov je toľko, koľko fotiek */
.film-pas a { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.film-pas picture, .film-pas img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .film-pas a:hover img { transform: scale(1.04); } }
@media (max-width: 900px) {
  .film { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .film::-webkit-scrollbar { display: none; }
  .film-pas { display: flex; width: max-content; padding-inline: var(--okraj); }
  .film-pas a { width: 72vw; flex: none; scroll-snap-align: start; border-radius: var(--r-mala); }
}

/* čo hostia píšu */
.cit-mriezka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cit { margin: 0; background: var(--karta); border-radius: var(--r); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--tien); }
.hviezdy { display: flex; gap: 2px; color: var(--teplo); }
.hviezdy .ik { width: 18px; height: 18px; }
.cit p { font-family: var(--pismo-nadpis); font-size: 1.3rem; line-height: 1.35; color: var(--text); text-wrap: pretty; }
.cit footer { font-size: .9rem; color: var(--tlmene); margin-top: auto; }
.cit footer b { color: var(--text-2); font-weight: 600; }
.hodn-zdroje { margin-top: 22px; color: var(--text-2); font-size: .95rem; }
@media (max-width: 900px) { .cit-mriezka { grid-template-columns: 1fr; gap: 12px; } .cit { padding: 22px 22px 18px; } .cit p { font-size: 1.18rem; } }

/* hodnotenia / tri dôvody */
.hodn-mriezka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hodn { background: var(--karta); border-radius: var(--r); padding: 28px 28px 26px; box-shadow: var(--tien); }
.hodn h3 { margin-bottom: .3em; }
.hodn p { color: var(--text-2); font-size: 1rem; }
@media (max-width: 900px) { .hodn-mriezka { grid-template-columns: 1fr; gap: 12px; } }

/* mapa po kliknutí */
.mapa { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--tien); aspect-ratio: 4 / 3; background: var(--pozadie-2); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa-tl { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.mapa-tl picture, .mapa-tl img { width: 100%; height: 100%; object-fit: cover; }
.mapa-tl .tl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(27, 22, 17, .72); backdrop-filter: blur(6px); }
.mapa-tl:hover .tl { background: #fff; color: var(--text); }

/* záver */
.sek-zaver { background: var(--pozadie-2); }
.zaver-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.zaver-in .tl-riadok { justify-content: flex-end; margin: 0; }
@media (max-width: 760px) { .zaver-in { grid-template-columns: 1fr; } .zaver-in .tl-riadok { justify-content: flex-start; } }

/* telefón: kompaktne, obsah ostáva (dokumentacia/DESIGN.md 6) – kolo 9: kratšie sekcie, karty jednotiek vodorovne, menšie písmo */
@media (max-width: 600px) {
  .sek { padding-block: 40px; }
  .hero + .sek { padding-top: 40px; }
  .uvod { margin-bottom: 20px; }
  .uvod p, .pas-txt p, .dvoj-txt p, .hodn p, .rozpravka p, .majitelia p { font-size: .98rem; }
  h2 { font-size: clamp(1.7rem, 7.6vw, 2.1rem); }
  .hero-pole { min-height: max(520px, 74svh); }
  .hero-in { padding-bottom: 56px; }
  .hero-pod { font-size: .98rem; }
  .velka-veta { font-size: 1.3rem; }
  .pasik { gap: 10px 16px; }
  .pasik li { padding-top: 10px; font-size: .88rem; }
  .pasik b { font-size: 1.35rem; }
  .majitelia, .rozpravka { padding: 20px; gap: 16px; }
  .majitelia-foto { width: 96px; }
  .rozpravka-znak { width: 90px; }
  .dvere { gap: 12px; }
  .dvere-velke, .dvere-male { display: grid; grid-template-columns: 2fr 3fr; }
  .dvere-velke .karta-obr, .dvere-male .karta-obr { aspect-ratio: auto; min-height: 100%; }
  .dvere-velke .karta-txt, .dvere-male .karta-txt { padding: 12px 14px 14px; }
  .dvere h3 { font-size: 1.05rem; }
  .dvere h3 small { display: none; }
  .dvere .fakty { gap: 4px; font-size: .9rem; margin-bottom: 8px; }
  .dvere .fakty .ik { width: 16px; height: 16px; }
  .dvere .cena { margin: 2px 0 10px; }
  .dvere .cena b { font-size: 1.05rem; }
  .dvere .tl-riadok .tl { min-height: 42px; font-size: .9rem; }
  .dvere .tl-riadok { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
  .dvere .tl-riadok .tl { flex: 0 0 auto; width: 100%; min-height: 40px; padding-block: 8px; white-space: nowrap; }
  .dvere .cena .dop { font-size: .82rem; }
  .pas-in { padding-block: 170px 40px; }
  .cit-mriezka { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--okraj)); padding: 0 var(--okraj) 6px; scrollbar-width: none; }
  .cit-mriezka::-webkit-scrollbar { display: none; }
  .cit { flex: 0 0 82%; scroll-snap-align: start; }
  .rozpravka-malo { display: none; }
  .hodn-zdroje { margin-top: 12px; font-size: .88rem; }
  .pas-txt .fakty { gap: 6px; }
  .film { padding-top: 24px; }
  .film-pas a { width: 64vw; }
  .foto-karta, .foto-mriezka-3 .foto-karta { flex: 0 0 68%; aspect-ratio: 4 / 3; }
  .cit { padding: 18px 18px 16px; gap: 10px; }
  .cit p { font-size: 1.08rem; }
  .tl-riadok { margin-top: 1em; }
  .pozn { margin-top: 14px; font-size: .9rem; }
  .pod { min-height: min(62svh, 540px); }
  .pod-in { padding-bottom: 28px; }
  .pod h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .pod-lead { font-size: .98rem; }
  .jednotka { padding-block: 28px; gap: 16px; }
  .vybava { margin: 10px 0 12px; }
  .vybava li { padding: 2px 0 2px 20px; }
  .balik { padding: 16px; gap: 14px; margin-bottom: 14px; }
  .hodn-mriezka { gap: 10px; }
  .galeria-kap { margin: 24px 0 10px; }
  .faq summary { padding: 12px 40px 12px 0; font-size: 1rem; }
  .pat-in { padding-top: 36px; gap: 20px; }
  .dvoj-mini { display: none; }
  .foto-mriezka { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: calc(-1 * var(--okraj)); padding-inline: var(--okraj); scrollbar-width: none; }
  .foto-mriezka::-webkit-scrollbar { display: none; }
  .foto-karta, .foto-mriezka-3 .foto-karta { flex: 0 0 74%; scroll-snap-align: start; aspect-ratio: 4 / 3; }
  .hodn { padding: 20px 20px 18px; }
  .ik-v { width: 48px; height: 48px; padding: 12px; margin-bottom: 10px; }
  .pat-nav { gap: 14px; }
  .pat-nav ul { gap: 4px; }
  .pat-nav a { font-size: .95rem; }
}

/* podstránky: fotka cez celú šírku, nadpis dole vľavo */
.pod { position: relative; min-height: clamp(460px, 66vh, 720px); display: flex; align-items: flex-end; color: #fff; background: #2a2219; overflow: clip; }
.pod-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 10% 100%, rgba(208, 138, 62, .16), transparent 70%), linear-gradient(180deg, rgba(27, 22, 17, .28) 0%, rgba(27, 22, 17, 0) 30%, rgba(27, 22, 17, .14) 55%, rgba(27, 22, 17, .72) 100%), linear-gradient(90deg, rgba(27, 22, 17, .3) 0%, rgba(27, 22, 17, 0) 60%); }
.pod-in { position: relative; z-index: 2; width: min(100% - 2 * var(--okraj), var(--max)); margin-inline: auto; padding: calc(var(--hl-v) + 56px) 0 clamp(36px, 5vw, 64px); }
.pod-in > * { max-width: 780px; }
.pod h1 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); margin-bottom: .35em; color: #fff; text-shadow: 0 2px 30px rgba(20, 14, 8, .4); }
.pod-lead { font-size: clamp(1.05rem, 1.4vw, 1.24rem); color: rgba(255, 255, 255, .93); max-width: 38em; text-shadow: 0 1px 20px rgba(20, 14, 8, .5); }
.pod .chlieb { color: rgba(255, 255, 255, .78); }
.pod .tl-riadok { margin-top: 1.3em; }
.pod .tl:not(.tl-akcent) { border-color: rgba(255, 255, 255, .8); color: #fff; }
.pod .tl:not(.tl-akcent):hover { background: #fff; color: var(--text); border-color: #fff; }
.pod .fakty li, .pod .nap li { color: rgba(255, 255, 255, .92); }
.pod .fakty .ik, .pod .nap .ik { color: var(--teplo); }
.pod .fakty a, .pod .nap a { color: #fff; }
.pod-m-hore .pod-media picture, .pod-m-hore .pod-media img { object-position: 50% 25%; }
.pod-zrkadlo .pod-media img { transform: scaleX(-1); }
@media (max-width: 900px) { .pod { min-height: min(72svh, 640px); } .pod-in { padding-top: calc(var(--hl-v) + 40px); } .pod-media::after { background: linear-gradient(180deg, rgba(27, 22, 17, .35) 0%, rgba(27, 22, 17, .1) 30%, rgba(27, 22, 17, .86) 100%); } }

.jednotka { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: clamp(32px, 5vw, 72px); border-top: 1px solid var(--linka); }
.jednotka:first-of-type { border-top: 0; }
.jednotka-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jednotka-foto a { display: block; border-radius: var(--r-mala); overflow: hidden; box-shadow: var(--tien); aspect-ratio: 4 / 3; }
.jednotka-foto a:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; border-radius: var(--r); }
.jednotka-foto picture, .jednotka-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .jednotka-foto a:hover img { transform: scale(1.03); } }
.jednotka h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.jednotka-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; color: var(--text-2); font-weight: 500; }
.jednotka-meta span { display: inline-flex; align-items: center; gap: 6px; }
.jednotka-meta .ik { color: var(--teplo-2); }
.vybava { columns: 2; column-gap: 24px; list-style: none; margin: 14px 0 18px; padding: 0; }
.vybava li { break-inside: avoid; padding: 4px 0 4px 22px; position: relative; color: var(--text-2); }
.vybava li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--teplo); }
@media (max-width: 900px) { .jednotka { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .vybava { columns: 1; } }

.tab { width: 100%; border-collapse: collapse; font-size: 1rem; margin: 16px 0 8px; }
.tab th, .tab td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linka); vertical-align: top; }
.tab th { font-weight: 600; background: var(--pozadie-2); }
.tab td b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.tab-obal { overflow-x: auto; background: var(--karta); border-radius: var(--r); padding: 6px 12px 10px; box-shadow: var(--tien); }
.tab-obal .tab { margin: 0; }
.tab-obal .tab tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) { .tab th, .tab td { padding: 10px 8px; font-size: .95rem; } .tab-obal { padding: 2px 6px 6px; } }
/* najužšie telefóny (≤ 340 px): tabuľky cenníka, celého domu a lyžovania sa zmestia bez posúvania do strany */
@media (max-width: 340px) { .tab th, .tab td { padding-inline: 5px; font-size: .86rem; } .tab-obal { padding-inline: 4px; } }

.faq { max-width: 76ch; }
.faq details { border-top: 1px solid var(--linka); }
.faq details:last-child { border-bottom: 1px solid var(--linka); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 44px 16px 0; font-weight: 600; font-size: 1.08rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--teplo-2); border-bottom: 2px solid var(--teplo-2); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details > p, .faq details > ul { margin-bottom: 16px; color: var(--text-2); }

.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.galeria a { display: block; border-radius: var(--r-mala); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--tien); }
.galeria a.velka { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; border-radius: var(--r); }
/* široká dlaždica (2 stĺpce × 1 riadok) pre časti so 7 fotkami: 8 : 3 = dve dlaždice 4 : 3 vedľa seba */
.galeria a.siroka { grid-column: span 2; aspect-ratio: 8 / 3; border-radius: var(--r); }
/* fotky na výšku v dlaždici 4 : 3 (#284–#286): ukázať podstatné – ovce, kostol so štítmi, kmene so štítmi */
.galeria img.obr-ovce { object-position: 50% 70%; } .galeria img.obr-kostol { object-position: 50% 41%; } .galeria img.obr-klady { object-position: 50% 22%; }
.film-pas img.obr-kostol { object-position: 50% 38%; } /* Ždiar s kostolom (na výšku) v páse 3 : 2 na Kontakte namiesto domu s červenou strechou: štíty aj kostol */
.galeria picture, .galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .galeria a:hover img { transform: scale(1.03); } }
.galeria-kap { margin: 40px 0 16px; }
/* galéria so všetkými fotkami domu (19. 10. 2026): skoky na Interiér / Exteriér / Zima, podnadpisy častí */
.galeria-skoky { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 8px; }
.galeria-skoky a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 1.5px solid var(--linka); border-radius: 999px; background: var(--karta); color: var(--text); font-weight: 600; text-decoration: none; }
.galeria-skoky a span { font-weight: 500; font-size: .85em; color: var(--text-2); }
@media (max-width: 480px) { .galeria-skoky { gap: 6px; } .galeria-skoky a { padding: 8px 13px; gap: 6px; font-size: .95rem; } }
@media (hover: hover) { .galeria-skoky a:hover { border-color: var(--text); } }
.sek > .in > .galeria-kap:first-child { margin-top: 0; }
.galeria-pod { margin: 32px 0 12px; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.galeria-kap + .galeria-pod { margin-top: 8px; }
/* galéria má rozloženie pre 4 stĺpce (počítač, tablet) a 2 stĺpce (telefón) – pri 3 stĺpcoch by časti končili dierami */
@media (max-width: 900px) { .galeria { gap: 10px; } }
@media (max-width: 600px) { .galeria { grid-template-columns: 1fr 1fr; gap: 8px; } .galeria a.velka, .galeria a.siroka { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; } }

.kontakt-mriezka { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.kontakt-mriezka .mapa { margin-bottom: 22px; }
.nap { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.nap li { display: flex; gap: 12px; align-items: flex-start; }
.nap .ik { color: var(--teplo-2); margin-top: 3px; }
.cesty { width: 100%; border-collapse: collapse; }
.cesty td { padding: 8px 0; border-bottom: 1px solid var(--linka); color: var(--text-2); }
.cesty td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .kontakt-mriezka { grid-template-columns: 1fr; } }

/* rezervačný systém Rezerva (widget v2, light DOM, premenné na .rz) v štýle webu: krém, zelená z loga, Onest */
.rz-obal { max-width: 920px; margin-inline: auto; min-height: 420px; }
.rz-obal .rz-mount:empty::before { content: "Načítavam rezervačný systém…"; display: block; padding: 40px; text-align: center; color: var(--tlmene); }
#rz-book .rz, dialog.rz-dlg, .rz-dlg {
  --a: #2f6b55 !important; --a-ink: #24553f !important; --a-soft: #e3eee6 !important; --on: #fff !important;
  --bg: #fffdf9 !important; --paper: #f4ecdf !important; --soft: #f6efe3 !important;
  --ink: #2b2622 !important; --ink2: #4e463e !important; --mut: #6b6157 !important;
  --line: #e7dccb !important; --line-strong: #cbbfa8 !important;
  --warn: #8f5518 !important; --warn-bg: #f8e6cc !important; --bad: #a23b2f !important; --bad-bg: #f6e6e2 !important;
  --r-card: 18px !important; --r-room: 14px !important; --r-ctrl: 12px !important; --r-sm: 10px !important; --r-xs: 8px !important;
  --sh: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 34px -20px rgba(0, 0, 0, .26) !important;
  --fh: "Onest", "Onest-fb", "Segoe UI", system-ui, sans-serif !important;
  --fb: "Onest", "Onest-fb", "Segoe UI", system-ui, sans-serif !important;
}
#rz-book .rz { font-size: 16px; box-shadow: var(--tien); border-color: var(--linka); }
#rz-book .rz-tab, #rz-book .rz-btn, #rz-book .rz-stepbtn, #rz-book .rz-lang-btn, #rz-book .rz-navbar-next, #rz-book .rz-navbar-back, #rz-book .rz-dlg-go, #rz-book .rz-promo-go, #rz-book .rz-retry { border-radius: 999px; font-weight: 600; }
#rz-book .rz-score { border-radius: 999px; background: var(--teplo-mekky); color: var(--text); }
/* úzky telefón: hotové kroky len ikonou, aktívny krok dostane zvyšok riadka (pri 320 px inak „Kontaktné …“);
   textové tlačidlá Späť a „+ pridať poznámku“ aspoň 32 px na dotyk */
@media (max-width: 480px) {
  #rz-book .rz-step:not(.on) { flex: 0 0 auto; }
  #rz-book .rz-step.on { flex: 1 1 auto; }
}
#rz-book .rz-back, #rz-book .rz-notetoggle { min-height: 32px; }
/* úzke telefóny: záložky widgetu sa zalomia do dvoch riadkov namiesto skrytého vodorovného posuvu */
@media (max-width: 480px) {
  #rz-book .rz .rz-tabs { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 4px; }
  #rz-book .rz .rz-tab { flex: 1 1 auto; padding: 8px 10px; font-size: 12.5px; text-align: center; }
  #rz-book .rz .rz-topright { flex-wrap: wrap; gap: 6px; }
}
.rz-obal .rz-mount:empty::before { content: "Načítavam rezervačný systém…"; display: block; padding: 40px; text-align: center; color: var(--tlmene); }
.balik { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(20px, 3vw, 32px); background: var(--karta); border-radius: var(--r); box-shadow: var(--tien); margin-bottom: 22px; }
.balik > * { min-width: 0; }
.balik-obr { border-radius: var(--r-mala); overflow: hidden; aspect-ratio: 4 / 3; }
.balik-obr picture, .balik-obr img { width: 100%; height: 100%; object-fit: cover; }
/* romantický balík (#249): nadpis zoznamu obsahu tesne nad zoznamom */
.balik-zahrna { margin: 14px 0 0; font-weight: 600; color: var(--text); }
.balik-zahrna + .vybava { margin-top: 6px; }
/* rodinný balík (#254): obývačka apartmánu č. 2 – výrez posunutý doprava, aby sa zmestili oba obrazy */
.balik-obr img.obr-a2 { object-position: 88% 50%; }
.balik h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .3em; }
.balik .cena { margin: 10px 0 12px; }
.balik .cena small { display: block; width: 100%; font-size: .9rem; color: var(--tlmene); }
@media (max-width: 760px) { .balik { grid-template-columns: 1fr; } }
.lead-2 { font-size: 1.1rem; color: var(--text-2); max-width: 62ch; }
.pravo h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-top: 1.6em; }
.pravo { max-width: 76ch; }
.pravo p, .pravo li { color: var(--text-2); }
.e404 { text-align: center; padding-block: clamp(64px, 12vw, 160px); }

.doplnit { background: #fff1c2; color: #5a4300; padding: 0 .25em; border-radius: 3px; }
.volitelne { border: 1px dashed #c9b48f; border-radius: var(--r-mala); background: var(--pozadie-2); padding: 10px 14px; margin: 0 0 1em; color: var(--text-2); font-size: .95rem; }
.pravo h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: .6em; }
.pravo .tab { font-size: .95rem; }

/* === kolo 10: výška okna – notebooky 1366×768 a 1280×720, tablety, telefóny na šírku ===
   Písmo nadpisov a odsadenia sa riadia menšou z hodnôt šírka/výška (min(vw, svh)), aby nadpis, text,
   tlačidlá aj lišta termínu boli na prvej obrazovke aj na nízkom notebooku. */

/* hlavička: nižšia na nízkych obrazovkách */
@media (min-width: 901px) and (max-height: 860px) {
  :root { --hl-v: 76px; }
  .hl-logo img { height: 46px; }
  .hl-nav a { padding-block: 9px; }
  .hl-cta a { padding: 10px 20px; }
}
@media (max-height: 520px) {
  :root { --hl-v: 58px; }
  .hl-logo img { height: 36px; }
  .hl-menu { width: 42px; height: 42px; }
}
/* 901–1130 px (telefón na šírku, malý notebook): osem položiek menu je tesných – hustejšie odkazy, aby logo nemuselo
   klesnúť na ~24 px výšky (19. 10. 2026, test zariadení 915 × 360 a 932 × 380) */
@media (min-width: 901px) and (max-width: 1130px) {
  .hl-in { gap: 12px; }
  .hl-nav a { padding-inline: 5px; font-size: .9rem; }
  .hl-cta a { padding: 9px 14px; margin-left: 4px; }
}

/* úvod domovskej stránky */
@media (min-width: 901px) {
  .hero-pole { min-height: max(540px, 100svh); }
  .hero h1 { font-size: clamp(2.6rem, min(6.2vw, 10.2svh), 5.4rem); }
  .hero-pod { font-size: clamp(1rem, min(1.5vw, 2.75svh), 1.3rem); max-width: 44em; }
  .hero-in { padding: calc(var(--hl-v) + clamp(16px, 5svh, 48px)) 0 calc(clamp(60px, 14svh, 118px) + clamp(20px, 5svh, 64px)); }
  .hero-akcie { margin-top: clamp(.8em, 3.2svh, 1.6em); }
  .hero-termin { margin-top: calc(-1 * clamp(60px, 14svh, 118px)); }
  .termin { padding-block: clamp(12px, 2.4svh, 18px) clamp(10px, 2.2svh, 16px); }
}
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(2rem, min(11vw, 9.5svh), 3.6rem); }
}
@media (max-width: 420px) {
  .hero h1 { font-size: clamp(1.95rem, min(10.2vw, 7.4svh), 2.45rem); }
}
@media (max-width: 900px) and (max-height: 520px) {
  .hero-pole { min-height: 100svh; }
  .hero-in { padding: calc(var(--hl-v) + 14px) 0 52px; gap: 10px; }
  .hero-pod { font-size: .95rem; }
  .hero-akcie { margin-top: .8em; }
  .hero-akcie .tl { min-height: 42px; padding-block: 8px; }
}

/* bannery podstránok */
@media (min-width: 901px) {
  .pod { min-height: clamp(380px, 64svh, 720px); }
  .pod-in { padding: calc(var(--hl-v) + clamp(20px, 6svh, 56px)) 0 clamp(24px, 5.5svh, 64px); }
  .pod h1 { font-size: clamp(2.2rem, min(4.8vw, 8.6svh), 4.2rem); }
  .pod-lead { font-size: clamp(1rem, min(1.4vw, 2.6svh), 1.24rem); }
  .pod .chlieb { margin-bottom: clamp(.4em, 1.6svh, 1em); }
  .pod .tl-riadok { margin-top: clamp(.8em, 2.4svh, 1.3em); }
}
@media (max-height: 520px) {
  .pod { min-height: 0; }
  .pod-in { padding-top: calc(var(--hl-v) + 16px); padding-bottom: 20px; }
  .pod h1 { font-size: clamp(1.8rem, 9svh, 2.4rem); }
  .pod-lead { font-size: .95rem; }
  .pod .tl-riadok { margin-top: .8em; }
}

/* sekcie: menej vzduchu na nízkych notebookoch */
@media (min-width: 901px) and (max-height: 860px) {
  .sek { padding-block: clamp(48px, 11svh, 96px); }
  .hero + .sek { padding-top: clamp(48px, 10svh, 96px); }
}

/* spodná lišta na telefóne na šírku: nižšia */
@media (max-width: 900px) and (max-height: 520px) {
  .lista { padding-block: 6px calc(6px + env(safe-area-inset-bottom)); }
  .lista .tl { min-height: 40px; padding-block: 6px; }
}

/* rezervácia: nízky banner, widget hneď na prvej obrazovke */
.pod-nizky { min-height: 0; }
.pod-nizky .pod-in { padding-bottom: clamp(20px, 3.5svh, 36px); }
.pod-nizky + .sek { padding-top: clamp(20px, 4svh, 40px); }
@media (min-width: 600px) {
  .pod-nizky .fakty-2 { display: flex; flex-wrap: wrap; gap: 6px 26px; max-width: none; }
  .pod-nizky .fakty-2 li { white-space: nowrap; }
}
@media (min-width: 901px) { .pod-nizky .pod-in { padding-top: calc(var(--hl-v) + clamp(16px, 4svh, 40px)); } }
/* rezervácia (#267): podtitul nadpisu na vlastnom riadku, menším písmom; čiernobiela panoráma štítov – vrcholy pod lištou menu */
.h1-pod { display: block; font-size: max(1.05rem, .42em); line-height: 1.25; letter-spacing: 0; margin-top: .4em; }
.pod-media img.obr-stity { object-position: 50% 0%; }
/* výrezy hlavičiek podstránok (19. 10. 2026, Andy: „nič podstatné nesmie byť odrezané, nie zbytočne veľa oblohy“).
   object-fit: cover orezáva vždy len jednu os: X platí pre banner na výšku (telefón, tablet), Y pre široký banner
   (počítač, telefón na šírku) – preto stačí jeden bod pre všetky obrazovky. Bod = kde je podstatné (ľudia, dom, kufre, štíty). */
.pod-media img.obr-ovce-tatry { object-position: 35% 0%; } /* aktivity: ovce-belianske-hd (#287) – nad štítmi je málo oblohy */
.pod-media img.obr-jedalen { object-position: 55% 88%; } /* apartmany: apartman-jedalen */
.pod-media img.obr-stromy { object-position: 40% 30%; } /* bachledka: stromy-tatry */
.pod-media img.obr-lounge { object-position: 55% 50%; } /* caste-otazky: terasa-lounge */
.pod-media img.obr-dom-luka { object-position: 65% 50%; } /* cely-dom: dom-luka */
.pod-media img.obr-okno { object-position: 50% 15%; } /* cennik: okno-tatry */
.pod-media img.obr-zdiar-sepia { object-position: 50% 30%; } /* galeria: zdiar-sepia-v2-hd (#288) – na šírku pás so štítmi, na výšku celá fotka zdiar-sepia-v2-m */
.pod-media img.obr-dom { object-position: 80% 30%; } /* kontakt: dom-exterier */
.pod-media img.obr-zdiar-zima { object-position: 55% 60%; } /* lyzovanie: zdiar-zima */
.pod-media img.obr-kufre { object-position: 18% 84%; } /* pobytove-baliky: terasa-kufre */
.pod-media img.obr-kada-noc { object-position: 55% 75%; } /* silvester-a-vianoce: kada-noc-2 */
.pod-media img.obr-terasa { object-position: 65% 76%; } /* ubytovanie: terasa-vyhlad */
.pod-media img.obr-kada-par { object-position: 55% 56%; } /* wellness: jacuzzi-zapad-par */
.pod-media img.obr-deti { object-position: 30% 72%; } /* zdiar-s-detmi: deti-pes-luka */
/* #287: hlavička Okolia je fotka Jozefa Pitoňáka – jeho vodoznak (© 2021, vpravo dole) výrez hlavičky odreže, meno autora preto ostáva v rohu */
.foto-autor { position: absolute; right: var(--okraj); bottom: 6px; z-index: 2; margin: 0; font-size: .75rem; line-height: 1.3; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 8px rgba(20, 14, 8, .7); pointer-events: none; }
.rez-postup { margin-bottom: 1.2em; }
.rez-tesime { font-family: var(--pismo-nadpis); font-size: 1.25rem; line-height: 1.3; }
/* sekcia balíčkov pod rezervačným kalendárom: nadpis klientky s podtitulom, stĺpce formulára a postupu */
.h2-pod { display: block; font-size: max(1rem, .5em); line-height: 1.3; letter-spacing: 0; margin-top: .35em; }
.rez-h { margin: 0 0 16px; font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* široké obrazovky: hodnotenie vpravo dole sa zalomí do dvoch riadkov, nadpis a text majú viac miesta */
@media (min-width: 1200px) { .hero-hodn { max-width: 330px; justify-content: flex-end; text-align: right; } }

/* veľmi nízke obrazovky (telefón na šírku, najmenšie telefóny): omrvinky v banneri skryté, nadpis je hneď pod hlavičkou */
@media (max-width: 900px) and (max-height: 520px) { .pod .chlieb { display: none; } }

/* telefónne číslo sa nikdy nerozdelí na dva riadky */
a[href^="tel:"] { white-space: nowrap; }

/* stredné šírky (malé notebooky, tablety na šírku): hodnotenie pod tlačidlami, nadpis má celú šírku */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 2.4svh, 22px); }
  .hero h1 { max-width: 13em; }
}

/* malé telefóny na výšku (iPhone SE, staršie Androidy): banner sa zmestí na obrazovku */
@media (max-width: 600px) and (max-height: 700px) {
  .pod-in { padding-top: calc(var(--hl-v) + 18px); padding-bottom: 22px; }
  .pod .chlieb { margin-bottom: .5em; font-size: .85rem; }
  .pod h1 { font-size: clamp(1.75rem, min(8.6vw, 6.4svh), 2.4rem); }
  .pod-lead { font-size: .92rem; line-height: 1.5; }
  .pod .tl-riadok { margin-top: .8em; gap: 8px; }
  .pod .tl-riadok .tl { min-height: 44px; padding-block: 9px; }
}

/* widget Rezervy: kalendár bez štvorcových buniek, nižšie riadky na nízkych obrazovkách */
#rz-book .rz .rz-d { aspect-ratio: auto; height: clamp(34px, 6svh, 46px); }
/* tlačidlo „Pokračovať“ je vždy na obrazovke, aj keď je kalendár alebo zoznam izieb vyšší než okno */
#rz-book .rz-cont { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 6; box-shadow: 0 12px 30px -12px rgba(27, 22, 17, .5); }
#rz-book .rz-navbar { position: sticky; bottom: 0; z-index: 6; background: var(--bg); padding-block: 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); box-shadow: 0 -12px 20px -16px rgba(27, 22, 17, .35); }
/* na stránke rezervácie netreba spodnú lištu „Rezervovať / Zavolať“ – telefón je v banneri */
body:has(#rz-book) .lista { display: none; }
/* nízke obrazovky: menej vzduchu vo widgete */
@media (max-height: 820px) {
  #rz-book .rz-topbar { padding-block: 7px; }
  #rz-book .rz-body { padding-top: 14px; }
  #rz-book .rz-sub { margin-bottom: 10px; }
  #rz-book .rz-steps { margin-bottom: 12px; }
  #rz-book .rz-body > h4 { margin: 12px 0 8px; }
  #rz-book .rz-cal-head { margin-bottom: 4px; }
  #rz-book .rz .rz-d { height: clamp(30px, 5.4svh, 46px); }
  #rz-book .rz-calnote { margin-top: 8px; }
  #rz-book .rz-pill { margin-top: 10px; }
}
/* detail izby: galéria podľa výšky okna, aby bol popis izby viditeľný bez skrolovania */
dialog.rz-dlg .rz-gal-item { aspect-ratio: auto; height: clamp(170px, 40svh, 480px); }
dialog.rz-dlg .rz-gal-item img { width: 100%; height: 100%; object-fit: cover; }
/* === koniec kola 10 === */

/* kolo 11: poloha – vzdialenosti a výlety pešo (fakty klientky, ikony webu namiesto emoji) */
.vzdial { margin: 14px 0 6px; gap: 6px; }
.tipy-h { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin: 1.3em 0 .55em; }
.tipy { gap: 10px; }
.tipy li { align-items: flex-start; }
.tipy .ik { margin-top: 2px; }
.tipy b { font-weight: 600; color: var(--text); }
#poloha .fakty-2 { margin-top: 18px; }
.zaver-fakty { margin: 12px 0 10px; gap: 8px; }
.zaver-fakty li { align-items: flex-start; }
.zaver-fakty .ik { margin-top: 2px; }
.zaver-pozdrav { margin: 0; color: var(--text-2); }
/* záver: hlavné tlačidlo hore cez celú šírku, dve telefónne čísla pod ním vedľa seba */
@media (min-width: 761px) { .zaver-in .tl-riadok:has(> .tl:nth-child(3)) { display: grid; grid-template-columns: repeat(2, auto); justify-content: end; } .zaver-in .tl-riadok:has(> .tl:nth-child(3)) .tl-akcent { grid-column: 1 / -1; } }

/* kolo 12: wellness a lyžovanie podľa pripomienok klientky #22–#51 */
/* galéria v sekcii: hlavná fotka a rad piatich náhľadov; na telefóne posuvný pás (malé fotky sa tam už neskrývajú) */
.dvoj-rad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dvoj-rad a { aspect-ratio: 4 / 3; border-radius: 10px; }
.dvoj-rad picture { display: block; width: 100%; height: 100%; }
/* šesť náhľadov: dva rady po tri; na telefóne ostáva posuvný pás */
@media (min-width: 601px) { .dvoj-rad-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
  .dvoj-rad { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--okraj)); padding: 2px var(--okraj) 6px; }
  .dvoj-rad::-webkit-scrollbar { display: none; }
  .dvoj-rad a { flex: 0 0 36%; scroll-snap-align: start; }
}
/* zoznam s výrazným prvým riadkom a menším druhým */
.fakty-dv li > span { display: block; min-width: 0; }
.fakty-dv b { display: block; font-weight: 600; color: var(--text); line-height: 1.35; }
.fakty-dv small { display: block; margin-top: 1px; font-size: .88rem; line-height: 1.4; color: var(--tlmene); }
.pod .fakty-dv b { color: #fff; }
.pod .fakty-dv small { color: rgba(255, 255, 255, .82); }
.pod .fakty-dv { margin-top: 14px; }
/* body v banneri na malých telefónoch: dva stĺpce, na telefóne na šírku jeden riadok */
@media (max-width: 520px) and (max-height: 700px) {
  .pod .fakty-dv { grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; }
  .pod .fakty-dv li { gap: 7px; }
  .pod .fakty-dv b { font-size: .9rem; }
  .pod .fakty-dv small { font-size: .78rem; }
  .pod .fakty-dv .ik { width: 17px; height: 17px; }
  .pod-lead { font-size: .9rem; line-height: 1.45; }
}
@media (min-width: 600px) and (max-height: 520px) {
  .pod .fakty-dv { grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px 20px; max-width: none; margin-top: 8px; }
  .pod .fakty-dv b { font-size: .88rem; }
  .pod .fakty-dv small { font-size: .78rem; }
}
/* úvod sekcie v dvoch stĺpcoch (dlhší text klientky ostane kompaktný) a tip v rámčeku */
.uvod-siroky { max-width: none; }
.stlpce { columns: 2 340px; column-gap: clamp(28px, 4vw, 56px); }
.stlpce p { break-inside: avoid; max-width: none; }
.uvod-siroky .pozn { margin-top: 16px; font-size: .95rem; color: var(--tlmene); }
.tip { background: var(--pozadie-3); border-radius: var(--r); padding: clamp(18px, 3vw, 28px); margin-top: 26px; max-width: 900px; }
.tip h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin-bottom: .35em; }
.tip p { margin: 0; max-width: none; color: var(--text-2); }
@media (max-width: 600px) { .tip { padding: 16px; margin-top: 18px; } }
/* dva rámčeky vedľa seba a nadpis druhej tabuľky */
.tipy-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; align-items: stretch; }
.tipy-rad .tip { margin-top: 0; max-width: none; }
@media (max-width: 760px) { .tipy-rad { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; } }
.tab-h { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: clamp(26px, 4vw, 40px) 0 12px; }
/* dve tabuľky pod sebou s rovnakými stĺpcami */
@media (min-width: 761px) { .tab-3 { table-layout: fixed; width: 100%; } .tab-3 th:nth-child(1) { width: 34%; } .tab-3 th:nth-child(2) { width: 20%; } }

/* kolo 13: karty vedľa seba majú spoločné riadky (obrázok, nadpis, body, cena, tlačidlá) – cena aj tlačidlá sú v rade vždy v jednej línii */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .dvere-velke { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
    .dvere-velke .karta-txt { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
    .dvere-male { grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
    .dvere-male .karta-obr { grid-column: 1; grid-row: 1 / -1; }
    .dvere-male .karta-txt { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; }
    .dvere .karta-txt > * { min-width: 0; }
    .dvere .cena { align-self: start; align-content: flex-start; }
    .dvere .tl-riadok { align-self: start; }
  }
}

/* kolo 14: Zimná výzva Maťka a Kubka – päť úloh pre deti, stav v prehliadači (pripomienky #67; zimný vzhľad a odmena 10. 10.) */
#zimna-vyzva { padding-top: 0; }
.vyzva { --obloha: #1d4877; --obloha-2: #3577ae; --atrament: #1b2f47; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(24px, 3.4vw, 48px); border-radius: var(--r); background: radial-gradient(60% 80% at 100% 0%, rgba(126, 190, 235, .42), transparent 65%), linear-gradient(180deg, var(--obloha), var(--obloha-2)); color: #fff; box-shadow: var(--tien-velky); }
.vyzva::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(/img/vyzva-vlocky.svg) 0 0 / 360px 240px; opacity: .55; }
.vyzva::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 128px; z-index: -1; background: url(/img/vyzva-kopec-pred.svg) bottom / 100% 44% no-repeat, url(/img/vyzva-snehuliaci.svg) right 12% bottom 26px / auto 82px no-repeat, url(/img/vyzva-smreky.svg) right 2.5% bottom 40px / auto 74px no-repeat, url(/img/vyzva-kopec-zad.svg) bottom / 100% 100% no-repeat; }
.u1 { --c: #2b83c6; --p: #e4f1fb; } .u2 { --c: #7a5cc4; --p: #eee9fa; } .u3 { --c: #e07b16; --p: #fdeedc; } .u4 { --c: #2d9a68; --p: #e2f5ea; } .u5 { --c: #d94862; --p: #fce7eb; }
.vyzva-stitok { display: inline-flex; justify-self: start; align-items: center; gap: 7px; margin: 0 0 14px; padding: 5px 13px 5px 9px; border-radius: 999px; background: #ffd166; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3d2c0c; }
.vyzva-stitok .ik { width: 18px; height: 18px; }
.vyzva h2 { color: #fff; margin-bottom: .35em; }
.vyzva-text { margin: 0; max-width: 30em; color: #eef5fb; }
.vyzva-stav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 20px; }
.vyzva-gule { display: flex; gap: 7px; }
.vyzva-gule span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .14); transition: background-color .2s ease, border-color .2s ease, transform .22s var(--ease-out); }
.vyzva-gule span::after { content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(.6); opacity: 0; transition: opacity .16s ease, transform .22s var(--ease-out); }
.vyzva-gule span.plna { background: var(--c); border: 2px solid #fff; transform: scale(1.08); }
.vyzva-gule span.plna::after { opacity: 1; transform: rotate(45deg); }
.vyzva-pocet { margin: 0; white-space: nowrap; font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.vyzva-pocet b { font-weight: 800; }
.vyzva-listok, .vyzva-hura { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 20px; border-radius: 16px; color: #3d2c0c; }
.vyzva-listok { padding: 11px 16px 11px 11px; background: #fff6df; border: 2px dashed #e9a93a; }
.vyzva-listok-ik { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #d94862; color: #fff; }
.vyzva-listok-ik .ik { width: 28px; height: 28px; }
.vyzva-listok p { margin: 0; max-width: none; font-size: .95rem; line-height: 1.4; }
.vyzva-listok b { font-weight: 700; }
.vyzva-hura { padding: 14px 18px 14px 14px; background: #fff; box-shadow: 0 2px 0 rgba(13, 40, 70, .2), 0 18px 30px -18px rgba(6, 26, 52, .7); transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.vyzva-hura[hidden] { display: none; }
.vyzva-hura:not([hidden]) + .vyzva-listok { display: none; }
@starting-style { .vyzva-hura { opacity: 0; transform: translateY(8px) scale(.94); } }
.vyzva-pecat { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #f1f8f3; border: 2px solid var(--akcent); box-shadow: inset 0 0 0 4px #fff; }
.vyzva-pecat img { display: block; width: auto; height: 50px; }
.vyzva-hura-txt { margin: 0; max-width: none; font-family: var(--pismo-rucne); font-size: clamp(1.35rem, 2.1vw, 1.65rem); line-height: 1.2; color: var(--obloha); }
.vyzva-hura-odmena { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; max-width: none; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.vyzva-hura-odmena .ik { flex: none; width: 24px; height: 24px; margin-top: -1px; color: #d94862; }
.vyzva-pata { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 16px 0 0; max-width: none; font-size: .86rem; color: #e3eef8; }
.vyzva-znova { appearance: none; min-height: 32px; padding: 4px 0; border: 0; background: none; font: inherit; font-weight: 700; color: #ffd166; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vyzva-znova[hidden] { display: none; }
.vyzva-znova:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; border-radius: 4px; }
.vyzva-ulohy { list-style: none; margin: 0 0 76px; padding: 0; display: grid; gap: 10px; }
.uloha { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 66px; padding: 7px 14px 7px 10px; border-radius: 16px; border: 2px solid #fff; background: #fff; box-shadow: 0 2px 0 rgba(13, 40, 70, .2), 0 14px 24px -18px rgba(6, 26, 52, .7); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; transition: background-color .2s ease, border-color .2s ease, transform .16s var(--ease-out); }
.uloha:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .uloha:hover { border-color: var(--c); } }
.uloha input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.uloha:has(input:focus-visible) { outline: 3px solid #ffd166; outline-offset: 2px; }
.uloha-ik { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c); color: #fff; transition: transform .28s var(--ease-out); }
.uloha-ik .ik { width: 28px; height: 28px; }
.uloha-txt { font-size: 1.02rem; font-weight: 500; line-height: 1.4; color: var(--atrament); }
.uloha-box { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #a9bccf; background: #fff; transition: background-color .18s ease, border-color .18s ease; }
.uloha-fajka { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .16s ease, transform .22s var(--ease-out); }
.uloha:has(input:checked) { background: var(--p); border-color: var(--c); }
.uloha:has(input:checked) .uloha-box { background: var(--c); border-color: var(--c); }
.uloha:has(input:checked) .uloha-fajka { opacity: 1; transform: none; }
.uloha:has(input:checked) .uloha-ik { transform: scale(1.07) rotate(-7deg); }
.vyzva-sneh { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; pointer-events: none; }
.vyzva-sneh i { position: absolute; top: -14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 54, 100, .4); opacity: 0; animation: vyzva-padanie var(--t, 2.6s) linear var(--o, 0s) forwards; }
@keyframes vyzva-padanie { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 12% { opacity: .95; } 82% { opacity: .9; } 100% { opacity: 0; transform: translate3d(var(--dx, 20px), var(--dy, 520px), 0); } }
html:not(.js) .vyzva-stav, html:not(.js) .vyzva-pata { display: none; }
/* jeden stĺpec: úvod, úlohy, až potom poznámka; scéna má vlastný pás pod obsahom */
@media (max-width: 860px) {
  .vyzva { grid-template-columns: 1fr; gap: 0; padding-bottom: calc(clamp(24px, 3.4vw, 48px) + 78px); }
  .vyzva-uvod { display: contents; }
  .vyzva-ulohy { order: 1; margin: 20px 0 0; }
  .vyzva-pata { order: 2; }
  .vyzva::after { height: 112px; background-size: 100% 46%, auto 66px, auto 60px, 100% 100%; background-position: bottom, right 13% bottom 22px, right 2.5% bottom 34px, bottom; }
}
@media (max-width: 600px) {
  .vyzva { padding: 20px 14px 72px; }
  .vyzva::after { height: 84px; background-size: 100% 46%, auto 50px, auto 46px, 100% 100%; background-position: bottom, right 17% bottom 16px, right 3% bottom 24px, bottom; }
  .vyzva-stitok { margin-bottom: 10px; }
  .vyzva-stav, .vyzva-listok, .vyzva-hura { margin-top: 14px; }
  .vyzva-ulohy { gap: 8px; margin-top: 16px; }
  .vyzva-pata { display: block; margin-top: 12px; line-height: 1.5; }
  .vyzva-znova { display: inline; min-height: 0; margin-left: 4px; padding: 6px 0; }
  .uloha { min-height: 62px; gap: 11px; padding: 6px 11px 6px 8px; }
  .uloha-ik { width: 42px; height: 42px; } .uloha-ik .ik { width: 25px; height: 25px; }
  .uloha-txt { font-size: .96rem; line-height: 1.35; }
  .vyzva-listok { gap: 11px; padding: 9px 12px 9px 9px; } .vyzva-listok p { font-size: .92rem; } .vyzva-listok-ik { width: 40px; height: 40px; } .vyzva-listok-ik .ik { width: 24px; height: 24px; }
  .vyzva-hura { gap: 12px; padding: 11px 13px 11px 11px; }
  .vyzva-pecat { width: 68px; height: 68px; } .vyzva-pecat img { height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .uloha, .uloha-ik, .uloha-fajka, .vyzva-gule span, .vyzva-gule span::after, .vyzva-hura { transition-duration: .01s; } .uloha:has(input:checked) .uloha-ik { transform: none; } }
/* zimné prechádzky: štyri tipy vedľa seba (pripomienka #81) */
#prechadzky .tipy-h { margin-top: 0; }
.trasy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.trasy li { display: grid; align-content: start; gap: 12px; padding: clamp(16px, 1.8vw, 22px); border-radius: var(--r); background: var(--karta); box-shadow: var(--tien); }
.trasy-ik { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--akcent-mekky); color: var(--akcent-2); }
.trasy-ik .ik { width: 24px; height: 24px; }
.trasy b { display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.trasy p { margin: 4px 0 0; max-width: none; font-size: .95rem; line-height: 1.5; color: var(--text-2); }
@media (max-width: 1000px) { .trasy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 560px) {
  .trasy { grid-template-columns: 1fr; gap: 10px; }
  .trasy li { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .trasy-ik { width: 40px; height: 40px; }
}
/* kolo 20: fotka zo strediska vedľa textu „Kam na svah“, štyri náhľady pri texte o deťoch (pripomienky #83, #84, #94) */
.uvod-foto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.uvod-obr { display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--tien); }
.uvod-obr picture, .uvod-obr img { display: block; width: 100%; }
.uvod-obr img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 45%; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .uvod-obr:hover img { transform: scale(1.03); } }
@media (max-width: 900px) {
  .uvod-foto { grid-template-columns: 1fr; gap: 18px; }
  .uvod-obr img { aspect-ratio: 4 / 3; object-position: 50% 55%; }
}
@media (min-width: 601px) { .dvoj-rad-4 { grid-template-columns: repeat(4, 1fr); } }
/* krátke dvojriadkové body ostanú aj na telefóne v dvoch stĺpcoch */
@media (max-width: 520px) { .fakty-kratke { grid-template-columns: 1fr 1fr; gap: 10px 12px; } .fakty-kratke li { gap: 8px; } }
/* dlhý text vedľa fotiek: fotky ostanú pri čítaní na očiach */
@media (min-width: 901px) { .dvoj-dlhy { align-items: start; } .dvoj-dlhy .dvoj-obr { position: sticky; top: calc(var(--hl-v) + 24px); } }
/* dlhšie úvodné texty v banneri (#82, #88): na telefóne body v dvoch stĺpcoch, na nízkych obrazovkách drobnejšie písmo a len hlavný riadok bodov */
@media (max-width: 520px) {
  .pod .fakty-dv { grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; }
  .pod .fakty-dv li { gap: 7px; }
  .pod .fakty-dv b { font-size: .9rem; }
  .pod .fakty-dv small { font-size: .78rem; }
  .pod .fakty-dv .ik { width: 17px; height: 17px; }
}
@media (max-width: 520px) and (max-height: 620px), (min-width: 600px) and (max-height: 520px) {
  .pod-lead { font-size: .86rem; line-height: 1.42; }
  .pod .fakty-dv small { display: none; }
}
/* Kontakt na telefóne na šírku: telefóny, adresa a časy príchodu v banneri vedľa seba, inak je banner vyšší ako obrazovka;
   riadky aspoň 24 px, aby sa čísla dali pohodlne ťuknúť */
@media (min-width: 600px) and (max-height: 520px) {
  .pod .nap { grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 22px; margin-bottom: 0; font-size: .84rem; line-height: 1.8; }
  .pod .nap li { gap: 8px; }
  .pod .nap .ik { width: 17px; height: 17px; margin-top: 4px; }
}
/* úvod v banneri z dvoch odsekov (#101) */
.pod-lead:has(+ .pod-lead) { margin-bottom: .5em; }
/* najnižšie obrazovky (≤ 500 px na výšku: starý malý telefón, telefón na šírku): banner s dlhším úvodom sa zmestí na jednu obrazovku */
@media (max-height: 500px) {
  .pod-in { padding-top: calc(var(--hl-v) + 8px); padding-bottom: 12px; }
  .pod h1 { margin-bottom: .2em; }
  .pod-lead { font-size: .84rem; line-height: 1.38; }
  .pod-lead:has(+ .pod-lead) { margin-bottom: .35em; }
  .pod .fakty-dv { margin-top: 6px; gap: 4px 12px; }
  .pod .tl-riadok { margin-top: .55em; }
  .pod .tl { min-height: 40px; padding-block: 8px; }
}
/* kolo 23: apartmán s množstvom fotiek – štyri náhľady, na poslednom „+N fotiek“, ostatné otvorí galéria (#112–#115) */
.jednotka-foto .foto-skryta { display: none; }
.jednotka-foto .foto-viac { position: relative; }
.foto-viac::after { content: attr(data-viac); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(27, 22, 17, .52); color: #fff; font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.2rem); letter-spacing: .01em; transition: background-color .25s ease; }
@media (hover: hover) { .foto-viac:hover::after { background: rgba(27, 22, 17, .4); } }
/* výbava apartmánu v štyroch skupinách (#110) */
.vybava-h { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin: 18px 0 10px; }
.vybava-skupiny { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 0 0 18px; }
.vybava-skup h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: var(--pismo-text); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--text); }
.vybava-skup h4 .ik { color: var(--teplo-2); width: 20px; height: 20px; flex: none; }
.vybava-skup .vybava { columns: 1; margin: 0; }
.vybava-skup .vybava li { padding: 2px 0 2px 22px; }
.vybava-skup .vybava li::before { top: 11px; }
@media (max-width: 420px) { .vybava-skupiny { grid-template-columns: 1fr; gap: 12px; } }
/* body v kartách vedľa seba: pri rôznom počte bodov sa nerozťahujú na výšku susednej karty */
.dvere .fakty { align-content: start; }
/* výbava izby s ikonami (#129): zoznam hneď pod nadpisom, cena s odstupom */
.fakty-izba { margin: 0 0 22px; }
/* spoločné priestory na Ubytovaní (#135): štyri bloky s fotkou, nadpisom a menším podnadpisom */
.bloky { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bloky li { display: grid; grid-template-rows: auto auto 1fr; border-radius: var(--r); background: var(--karta); box-shadow: var(--tien); overflow: hidden; }
.bloky a { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.bloky picture, .bloky img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .bloky a:hover img { transform: scale(1.03); } }
.bloky b { padding: 16px 18px 0; font-size: 1.08rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.bloky small { padding: 4px 18px 18px; font-size: .9rem; line-height: 1.45; color: var(--tlmene); }
/* praktické informácie o pobyte (#137): panel s nadpisom a šiestimi bodmi s ikonou */
.prakticke { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 20px clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(28px, 4vw, 48px); padding: clamp(20px, 3vw, 34px); border-radius: var(--r); background: var(--karta); box-shadow: var(--tien); }
.prakticke-hl h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.prakticke-hl p { margin: 6px 0 0; color: var(--tlmene); }
.prakticke-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; margin: 0; }
.prakticke-body .ik { width: 22px; height: 22px; }
.spolocne-tl { margin-top: clamp(20px, 3vw, 28px); }
@media (max-width: 900px) { .prakticke { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .prakticke-body { grid-template-columns: 1fr 1fr; gap: 14px 12px; } .prakticke-body li { gap: 8px; } .prakticke-body b { font-size: .95rem; } .prakticke-body small { font-size: .82rem; } }
@media (max-width: 900px) { .bloky { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 520px) { .bloky { gap: 10px; } .bloky b { padding: 10px 12px 0; font-size: .95rem; } .bloky small { padding: 2px 12px 12px; font-size: .8rem; } }
/* pod 300 px (zväčšené písmo na telefóne) sa „spoločenská“ do polovičnej karty nezmestí – karty pod sebou */
@media (max-width: 300px) { .bloky { grid-template-columns: minmax(0, 1fr); } }
/* dlhší pás fotiek (Ubytovanie, #139–#143): na počítači dva rady po šesť, pri nepárnom počte spodný rad posunutý o pol fotky */
@media (min-width: 901px) {
  .film-2rady .film-pas { grid-auto-flow: row; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .film-2rady .film-pas a { grid-column: span 2; }
  .film-2rady .film-pas a:nth-child(7):nth-last-child(5) { grid-column: 2 / span 2; }
}
/* Celý dom (#152–#155): banner s úvodom z troch odsekov, bodmi s ikonou a kontaktom vedľa tlačidla */
.pod-ikony { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; }
.pod-ikony li { align-items: center; gap: 8px; font-weight: 500; }
.pod-kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; max-width: none; font-weight: 600; color: #fff; }
.pod-kontakt .ik { color: var(--teplo); margin-right: -8px; }
.pod-kontakt a { color: #fff; text-decoration: none; text-underline-offset: 3px; display: inline-block; padding-block: 4px; } /* dotykový cieľ ≥ 24 px aj pri drobnejšom písme na telefóne */
@media (hover: hover) { .pod-kontakt a:hover { text-decoration: underline; } }
/* na počítači nadpis a body cez celú šírku bannera a širší úvod: banner aj s tlačidlom sa zmestí na prvú obrazovku */
@media (min-width: 901px) {
  .pod-dlhy .pod-in > h1 { max-width: none; font-size: clamp(2.1rem, min(3.6vw, 7svh), 3.4rem); }
  .pod-dlhy .pod-in > .pod-lead { max-width: 50em; }
  .pod-in > .pod-ikony { max-width: none; margin-top: clamp(10px, 2.2svh, 18px); }
}
@media (max-width: 600px) {
  .pod-ikony { gap: 5px 16px; margin-top: 12px; font-size: .86rem; }
  .pod-ikony li { gap: 6px; }
  .pod-ikony .ik { width: 18px; height: 18px; }
  .pod-dlhy h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .pod-dlhy .pod-lead { font-size: .92rem; line-height: 1.46; }
  .pod-dlhy .pod-lead:has(+ .pod-lead) { margin-bottom: .4em; }
  .pod-kontakt { width: 100%; justify-content: center; }
}
/* nižšie telefóny: bez omrviniek, drobnejší úvod */
@media (max-width: 600px) and (max-height: 760px) {
  .pod-dlhy .chlieb { display: none; }
  .pod-dlhy .pod-in { padding-top: calc(var(--hl-v) + 14px); padding-bottom: 18px; }
  .pod-dlhy .pod-lead { font-size: .86rem; line-height: 1.4; }
  .pod-dlhy .pod-lead:has(+ .pod-lead) { margin-bottom: .35em; }
  .pod-dlhy .tl-riadok { margin-top: .7em; }
}
/* najnižšie obrazovky (malý telefón na výšku, telefón na šírku): body s ikonami len opakujú druhý odsek, preto skryté */
@media (max-width: 600px) and (max-height: 620px), (max-height: 500px) {
  .pod-ikony { display: none; }
  .pod-dlhy .pod-lead { font-size: .82rem; line-height: 1.36; }
}
@media (max-height: 500px) {
  .pod-dlhy h1 { font-size: 1.6rem; }
  .pod-dlhy .pod-lead { font-size: .78rem; line-height: 1.32; }
  .pod-dlhy .pod-in { padding-bottom: 10px; }
}
@media (max-width: 600px) and (max-height: 500px) {
  .pod-dlhy h1 { font-size: 1.45rem; }
  .pod-dlhy .tl-riadok { gap: 6px; margin-top: .5em; }
  .pod-kontakt { font-size: .85rem; }
}
/* karty s ikonou (Celý dom #174–#180, Aktivity, Bachledka): pri rôzne dlhých nadpisoch začínajú texty v rovnakej výške */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .hodn-mriezka:has(> .hodn > .ik-v):not(:has(> .hodn-s-foto)) > .hodn { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
    .hodn-mriezka:not(:has(> .hodn > .ik-v)) > .hodn-s-foto { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
  }
}
/* karty výletov s deťmi s fotkou od klientky (#217): fotka cez celú šírku karty namiesto ikony; na tablete fotka vľavo a text vpravo */
.hodn-s-foto { padding: 0 0 26px; overflow: hidden; }
.hodn-s-foto > h3, .hodn-s-foto > p { margin-inline: 28px; }
.hodn-s-foto > h3 { margin-top: 22px; }
.hodn-foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.hodn-foto picture, .hodn-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .hodn-foto:hover img { transform: scale(1.03); } }
/* karta, ku ktorej klientka fotku ešte neposlala: na mieste fotky teplá plocha s ikonou, aby nadpisy a texty v rade sedeli */
.hodn-foto-ik { display: grid; place-items: center; background: linear-gradient(160deg, var(--teplo-mekky), var(--karta)); color: var(--teplo-2); }
.hodn-foto-ik .ik { width: 64px; height: 64px; }
@media (min-width: 601px) and (max-width: 900px) {
  .hodn-s-foto { display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: auto 1fr; padding: 0; }
  .hodn-s-foto > .hodn-foto { grid-row: 1 / -1; aspect-ratio: auto; height: 100%; min-height: 210px; }
  .hodn-s-foto > h3 { margin: 22px 24px 0; }
  .hodn-s-foto > p { margin: 0 24px 22px; }
}
@media (max-width: 600px) {
  .hodn-s-foto { padding: 0 0 18px; }
  .hodn-s-foto > h3, .hodn-s-foto > p { margin-inline: 20px; }
  .hodn-s-foto > h3 { margin-top: 16px; }
}
/* do 900 px sú karty pod sebou a zarovnávať netreba: karta bez fotky ostane kompaktná s ikonou v krúžku ako ostatné karty .hodn */
@media (max-width: 900px) {
  .hodn-s-foto:has(> .hodn-foto-ik) { display: block; padding: 28px 28px 26px; }
  .hodn-s-foto > .hodn-foto-ik { width: 58px; height: 58px; min-height: 0; aspect-ratio: auto; padding: 15px; margin-bottom: 16px; border-radius: 50%; background: var(--teplo-mekky); }
  .hodn-foto-ik .ik { width: 28px; height: 28px; }
  .hodn-s-foto:has(> .hodn-foto-ik) > h3 { margin: 0 0 .3em; }
  .hodn-s-foto:has(> .hodn-foto-ik) > p { margin: 0 0 1em; }
}
@media (max-width: 600px) {
  .hodn-s-foto:has(> .hodn-foto-ik) { padding: 20px 20px 18px; }
  .hodn-s-foto > .hodn-foto-ik { width: 48px; height: 48px; padding: 12px; margin-bottom: 10px; }
  .hodn-foto-ik .ik { width: 24px; height: 24px; }
}
/* cyklotrasy na Aktivitách (#194–#200): očíslované karty s textom klientky; .sek-h = rovnaký podnadpis v sekcii S deťmi (#215–#216) */
.cyklo-h, .sek-h { margin: clamp(28px, 4vw, 44px) 0 16px; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.uvod .sek-h, .dvoj-txt .sek-h { margin-bottom: 10px; }
/* S deťmi (#219): text pri dome s fotkou ihriska, zvieratká s fotkou samojedov; bloky striedajú strany */
.rodiny-dvoj + .rodiny-dvoj, .tury-blok { margin-top: clamp(36px, 5vw, 72px); }
/* turistika (#227–#228, #234): úvod bloku, trasy ako karty s fotkou (bez čísla; mriežka ako pri cyklotrasách), záverečná veta */
.tury-blok .uvod:first-child { margin-bottom: 20px; }
.cyklo.trasy-2 > li::before { content: none; display: none; }
.tury-zaver { margin: 22px 0 0; }
/* trasy od domu (#227): tretia trasa zatiaľ bez fotky, tabuľka trás s krátkym popisom pod názvom */
.trasy-2 > li:not(:has(> .cyklo-foto)) .cyklo-txt { padding: 22px 24px 24px; }
.tury-tab { margin-top: 22px; }
.tury-tab > p { margin-bottom: 12px; color: var(--text-2); }
.tab td small { display: block; margin-top: 2px; color: var(--text-2); font-size: .9em; }
/* 2. Horské túry (#229–#231): panoráma pod úvodom, potom očíslované karty túr ako pri cyklotrasách */
.tury-panorama { display: block; aspect-ratio: 3 / 1; margin: 0 0 22px; border-radius: var(--r); overflow: hidden; box-shadow: var(--tien); }
.tury-panorama picture, .tury-panorama img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .tury-panorama:hover img { transform: scale(1.03); } }
@media (max-width: 600px) { .tury-panorama { aspect-ratio: 16 / 9; margin-bottom: 14px; } }
/* fotka chaty Plesnivec je na výšku: v karte 3 : 2 výrez na chatu, nie na oblohu */
.cyklo-foto img.obr-chata { object-position: 50% 70%; }
/* obria lavička (#234) je štvorec: výrez na lavičku a hory */
.cyklo-foto img.obr-lavicka { object-position: 50% 75%; }
.tury-blok + .in { margin-top: clamp(28px, 4vw, 48px); }
.dvoj-txt > .sek-h:first-child { margin-top: 0; }
@media (max-width: 900px) { .rodiny-dvoj { gap: 20px; } }
.cyklo { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 18px; counter-reset: cyklo; }
.cyklo > li { counter-increment: cyklo; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r); background: var(--karta); box-shadow: var(--tien); }
.cyklo > li::before { content: counter(cyklo); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--akcent-mekky); color: var(--akcent-2); font-weight: 700; }
.cyklo h4 { margin: 0 0 10px; font-family: var(--pismo-text); font-size: 1.08rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--text); }
.cyklo p { margin: 0 0 .6em; max-width: none; color: var(--text-2); font-size: .98rem; }
.cyklo p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .cyklo { gap: 12px; } .cyklo > li { padding: 18px; } }
/* cyklotrasy s fotkou (#194–#200): karta = fotka s číslom, názov, štítky (náročnosť, povrch, pre koho), popis */
.cyklo-foto-zoznam > li { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 761px) { .cyklo-foto-zoznam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cyklo-foto-zoznam { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cyklo-foto-zoznam > li::before { margin: 18px 0 0 20px; }
.cyklo-foto-zoznam > li:has(> .cyklo-foto)::before { position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(27, 22, 17, .18); }
.cyklo-foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.cyklo-foto picture, .cyklo-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .cyklo-foto:hover img { transform: scale(1.03); } }
.cyklo-txt { padding: 18px 20px 20px; }
.cyklo-stitky { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.cyklo-stitky li { padding: 3px 10px; border-radius: 999px; background: var(--teplo-mekky); font-size: .82rem; line-height: 1.45; color: var(--text); }
.cyklo-stitky li:first-child { background: var(--akcent-mekky); color: var(--akcent-2); font-weight: 600; }
@media (max-width: 760px) { .cyklo-txt { padding: 14px 16px 16px; } }
/* päť malých fotiek pod hlavnou (Goralský Ždiar, #206–#208): tri stĺpce, druhý rad v strede, natočenie striedavo */
.dvoj-mini-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 14px; padding: 0 6px; }
.dvoj-mini-3 > a { grid-column: span 2; padding: 6px 6px 8px; border-radius: 10px; }
.dvoj-mini-3 > a:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.dvoj-mini.dvoj-mini-3 > a:nth-child(odd) { transform: rotate(-1.6deg); }
.dvoj-mini.dvoj-mini-3 > a:nth-child(even) { transform: rotate(1.4deg); }
@media (hover: hover) { .dvoj-mini.dvoj-mini-3 > a:hover { transform: rotate(0) translateY(-3px); } }
/* na telefóne sú malé fotky skryté (.dvoj-mini); štítok na hlavnej fotke povie, koľko ďalších otvorí galéria (Goralský Ždiar, #207) */
@media (max-width: 600px) {
  .dvoj-obr > a[data-viac] { position: relative; display: block; }
  .dvoj-obr > a[data-viac]::after { content: attr(data-viac); position: absolute; right: 10px; bottom: 10px; padding: 5px 11px; border-radius: 999px; background: rgba(27, 22, 17, .62); color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.3; pointer-events: none; }
}

/* Jazyk zostáva dostupný aj pri zatvorenom mobilnom menu. */
.hl-logo { flex-shrink: 0; }
.hl-nav { order: 1; }
.language-switch { position: relative; order: 2; flex: 0 0 auto; }
.language-switch summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 9px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; list-style: none; cursor: pointer; font-size: .88rem; font-weight: 600; }
.language-switch summary::-webkit-details-marker { display: none; }
.language-switch summary:hover, .language-switch[open] summary { background: color-mix(in srgb, currentColor 10%, transparent); }
.language-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.language-switch .language-chevron { width: 12px; height: 12px; }
.language-switch ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; margin: 0; padding: 5px; list-style: none; background: var(--pozadie); color: var(--text); border: 1px solid var(--linka); border-radius: var(--r-mala); }
.language-switch a { display: block; padding: 11px 14px; text-decoration: none; white-space: nowrap; border-radius: 6px; }
.language-switch a:hover, .language-switch a[aria-current] { color: var(--akcent-2); background: var(--akcent-mekky); }
@media (min-width: 1280px) { .hl-in { gap: 14px; } .hl-logo img { height: 38px; } .hl-nav { margin-left: auto; } .hl-nav a { padding-inline: 8px; font-size: .96rem; } .hl-nav .hl-cta a { padding-inline: 18px; } }
@media (max-width: 1279px) {
  :root { --hl-v: 72px; }
  .hl-in { gap: 12px; }
  .language-switch { order: 1; margin-left: auto; }
  .hl-nav { order: 2; }
}
/* Dlhšie preklady potrebujú rozbalené menu skôr než slovenský text. */
@media (min-width: 901px) and (max-width: 1279px) {
  .hl-logo img { height: 44px; }
  .hl-menu { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; margin-right: -8px; color: inherit; }
  .hl-menu span:first-child { position: relative; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
  .hl-menu span:first-child::before, .hl-menu span:first-child::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
  .hl-menu span:first-child::before { top: -7px; } .hl-menu span:first-child::after { top: 7px; }
  .menu-otvorene .hl-menu span:first-child { background: transparent; }
  .menu-otvorene .hl-menu span:first-child::before { top: 0; transform: rotate(45deg); }
  .menu-otvorene .hl-menu span:first-child::after { top: 0; transform: rotate(-45deg); }
  #menu { position: fixed; inset: var(--hl-v) 0 0; background: var(--pozadie); color: var(--text); flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--okraj) 24px; overflow: auto; opacity: 0; visibility: hidden; }
  .menu-otvorene #menu { opacity: 1; visibility: visible; }
  .menu-otvorene { overflow: hidden; }
  .hl.otvorene { background: var(--pozadie); color: var(--text); backdrop-filter: none; }
  .hl-nav li a { display: block; padding: 12px 8px; font-size: 1.2rem; border-radius: var(--r-mala); }
  .hl-cta { margin-top: 12px; } .hl-nav .hl-cta a { display: flex; justify-content: center; padding: 14px; margin: 0; }
}
@media (max-width: 420px) { .hl-logo img { height: 36px; } .hl-in { gap: 8px; } }
@media (max-width: 360px) { .hl-logo img { height: 28px; } .hl-in { gap: 6px; } .language-switch summary { padding-inline: 7px; } .language-switch summary > svg:first-child { display: none; } }
/* 280 px (vonkajší displej Galaxy Fold): logo + prepínač jazyka + menu sa nezmestili, menu trčalo 7 px za okraj obrazovky */
@media (max-width: 300px) { .hl-logo img { height: 26px; } .language-switch .language-chevron { display: none; } }
.language-switch .language-note { max-width: 230px; padding: 10px 14px; border-top: 1px solid var(--linka); color: var(--tlmene); font-size: .78rem; line-height: 1.45; }
.language-offer { position: fixed; z-index: 60; top: var(--language-offer-top, 100px); right: var(--language-offer-right, 16px); width: min(355px, calc(100% - 32px)); padding: 18px 52px 14px 20px; border: 1px solid var(--linka); border-radius: var(--r-mala); background: var(--pozadie); color: var(--text); }
.language-offer p { margin: 0 0 4px; font-size: .95rem; line-height: 1.5; }
.language-offer-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--akcent-2); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.language-offer-close { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.language-offer-close:hover { color: var(--akcent-2); }
.language-offer-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.menu-otvorene .language-offer { display: none; }
@media (max-width: 600px) { .language-offer { top: auto; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); } }