/* Chata Eva: mobil najprv, šírky pridávajú min-width. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --m: 16px;
  --gap: 56px;
  --bg: #fbfaf7;
  --surface: #f0eee8;
  --card: #fff;
  --ink: #1b2620;
  --soft: #5b655e;
  --busy: #d8d5cc;
  --accent: #c94c17;
  --accent-ink: #fff;
  --s-small: 14px;
  --s-lg: 28px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 'General Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
main, footer { overflow-x: clip; }
img, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, input, summary, label { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h2 { font-size: var(--s-lg); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }

.wrap { padding-inline: var(--m); max-width: 1180px; margin-inline: auto; }
.sec { padding-top: var(--gap); }
.sec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sec-head { margin-bottom: 16px; }
.sec-head p { margin-top: 6px; max-width: 56ch; color: var(--soft); }
.link { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; background: var(--accent); color: var(--accent-ink); font-weight: 500; text-decoration: none; border-radius: 999px; transition: transform 160ms var(--ease-out), background-color 180ms ease; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--line { background: var(--surface); color: var(--ink); }
.btn--big { min-height: 54px; width: 100%; }
.chips, .seg { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button, .seg button { min-height: 40px; padding: 0 14px; background: var(--surface); border-radius: 999px; font-size: 15px; font-weight: 500; transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out); }
.chips button:active, .seg button:active { transform: scale(.96); }
.chips button[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #ad3f11; }
  .btn--line:hover { background: var(--busy); }
  .btn[disabled]:hover { background: var(--accent); }
}

/* ---------- Hlavička ---------- */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; height: 56px; padding-inline: var(--m); background: var(--bg); }
.nav__name { font-weight: 700; font-size: 18px; letter-spacing: -.01em; text-decoration: none; margin-right: auto; }
.nav__links, .btn--nav { display: none; }
.nav__menu { min-height: 44px; padding-inline: 4px; font-weight: 500; }
.menu { position: fixed; inset: 0; z-index: 40; padding: 72px var(--m) 32px; background: var(--bg); overflow: auto; }
.menu nav { display: grid; gap: 2px; margin-bottom: 24px; }
.menu nav a { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.6; text-decoration: none; }

/* ---------- Úvod: fotky ako stories ---------- */
.hero { display: grid; }
.story { position: relative; height: 56svh; min-height: 340px; overflow: hidden; background: var(--surface); margin-inline: var(--m); border-radius: 22px; touch-action: pan-y; user-select: none; isolation: isolate; }
.story__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 320ms ease; pointer-events: none; }
.story__img.is-on { opacity: 1; animation: drift 7s ease-out both; }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.story::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0,0,0,.38), transparent 22%, transparent 72%, rgba(0,0,0,.55)); pointer-events: none; }
.story__bars { position: absolute; z-index: 2; left: 12px; right: 12px; top: 12px; display: flex; gap: 4px; }
.story__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); overflow: hidden; }
.story__bars i::after { content: ""; display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.story__bars i.is-done::after { transform: none; }
.story__bars i.is-on::after { animation: fill 5s linear both; }
.story.is-held .story__bars i.is-on::after, .story.is-held .story__img.is-on { animation-play-state: paused; }
@keyframes fill { to { transform: none; } }
.story__cap { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; color: #fff; font-weight: 500; }
.story__tap { position: absolute; z-index: 3; top: 0; bottom: 0; width: 38%; }
.story__tap--l { left: 0; } .story__tap--r { right: 0; width: 62%; }
.hero__copy { padding: 16px var(--m) 0; }
.hero__where { color: var(--soft); font-weight: 500; font-size: 15px; }
h1 { font-size: clamp(36px, 10vw, 60px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.hero__lead { margin-top: 6px; font-size: 17px; line-height: 1.4; max-width: 46ch; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0; }
.facts li { padding: 8px 4px; background: var(--surface); border-radius: 14px; text-align: center; font-size: 14px; line-height: 1.2; }
.facts b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

/* ---------- Karty ---------- */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; gap: 8px; }
.tile { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--surface); text-align: left; color: #fff; transition: transform 160ms var(--ease-out); }
.tile:active { transform: scale(.98); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.tile::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.tile span { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; line-height: 1.2; }
.tile b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tile small { font-size: 14px; }
.tile--w { grid-column: span 2; }
.tile--t { grid-row: span 2; }
@media (hover: hover) and (pointer: fine) { .tile:hover img { transform: scale(1.05); } }

/* ---------- Okno zospodu ---------- */
.sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 100%; max-height: 90svh; margin: 0; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--bg); color: var(--ink); overflow: hidden; }
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in 340ms var(--ease-drawer); }
@keyframes sheet-in { from { transform: translateY(100%); } }
.sheet::backdrop { background: rgba(10,16,12,.5); animation: fade 200ms ease; }
.sheet__grab { flex: none; display: grid; place-items: center; height: 28px; touch-action: none; cursor: grab; }
.sheet__grab span { width: 40px; height: 5px; border-radius: 3px; background: var(--busy); }
.sheet__close { position: absolute; z-index: 2; top: 8px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); font-size: 24px; line-height: 1; }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.sheet__photos { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--m); scrollbar-width: none; }
.sheet__photos::-webkit-scrollbar { display: none; }
.sheet__photos img { flex: 0 0 auto; width: 86%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; scroll-snap-align: center; }
.sheet__photos img:only-child { width: 100%; }
.sheet__text { padding: 14px var(--m) 0; }
.sheet__text p { margin-top: 4px; }
.sheet__text ul { margin: 10px 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.sheet__text li { padding: 4px 10px; background: var(--surface); border-radius: 999px; font-size: 14px; }

/* ---------- Plánovač ---------- */
.pl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pl > *, .voices__grid > * { min-width: 0; }
.pl__ctrl { padding: 14px; background: var(--surface); border-radius: 18px; }
.pl__ctrl label { font-weight: 500; }
.pl__ctrl label b { font-size: 26px; font-variant-numeric: tabular-nums; }
.pl__label { margin: 10px 0 6px; font-weight: 500; }
.pl__ctrl .chips button { background: var(--card); }
.pl__ctrl .chips button[aria-pressed="true"] { background: var(--ink); }
.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 42px; margin: 2px 0; background: none; cursor: grab; touch-action: pan-y; }
.calc__range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--busy); }
.calc__range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--busy); }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; transition: transform 140ms var(--ease-out); }
.calc__range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; }
.calc__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.pl__months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pl__months button { min-height: 50px; padding: 4px 2px; background: var(--card); border-radius: 12px; font-size: 14px; line-height: 1.15; font-weight: 500; transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out); }
.pl__months button small { display: block; font-size: 13px; font-weight: 400; color: inherit; font-variant-numeric: tabular-nums; }
.pl__months button:active { transform: scale(.96); }
.pl__months button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.pl__out { border-radius: 18px; overflow: hidden; background: var(--surface); align-self: start; }
.pl__out img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.pl__sum { padding: 14px; }
.pl__total b { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
#plWhen { font-weight: 500; }
.pl__small { font-size: var(--s-small); color: var(--soft); margin: 4px 0 12px; }
#plGo { width: 100%; }

/* ---------- Okolie ---------- */
.strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-inline: var(--m); scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.strip::-webkit-scrollbar { display: none; }
.strip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.strip > li { flex: 0 0 auto; display: flex; scroll-snap-align: center; }
.place { display: block; width: 70vw; max-width: 300px; background: var(--surface); border-radius: 18px; overflow: hidden; text-decoration: none; }
.place img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; pointer-events: none; }
.place b { display: block; padding: 10px 12px 0; font-weight: 700; line-height: 1.2; }
.place span { display: block; padding: 2px 12px 12px; font-size: 15px; line-height: 1.3; color: var(--soft); }
.place em { font-style: normal; text-decoration: underline; }

/* ---------- Hodnotenia ---------- */
.voices__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.voices__score p { margin-top: 6px; font-size: var(--s-small); color: var(--soft); max-width: 52ch; }
.deck { position: relative; height: 250px; margin-bottom: 8px; }
.deck__card { position: absolute; inset: 0; padding: 18px; background: var(--card); border: 1px solid var(--surface); border-radius: 18px; overflow: auto; display: flex; flex-direction: column; justify-content: center; touch-action: pan-y; cursor: grab; user-select: none; transition: transform 240ms var(--ease-out), opacity 200ms ease; }
.deck__card p { font-size: 18px; line-height: 1.35; font-weight: 500; }
.deck__card footer { margin-top: 8px; font-size: var(--s-small); color: var(--soft); }
.deck__ctrl { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

/* ---------- Rezervácia ---------- */
.booking__sub { margin-top: 6px; color: var(--soft); max-width: 52ch; }

/* ---------- Rezervácia ---------- */
.booking__sub { margin-top: 14px; max-width: 52ch; }
.bk { margin-top: 20px; }
.bk__steps { border-radius: 12px; overflow: hidden; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); }
.bk__steps li { position: relative; padding: 13px 8px; font-weight: 500; text-align: center; color: var(--soft); cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.bk__steps li.is-active { background: var(--ink); color: var(--bg); }
.bk__steps li.is-done { color: var(--ink); }
.bk__body { display: grid; gap: 20px; margin-top: 18px; }
.bk__panel { display: none; min-width: 0; }
.bk__panel.is-active { display: block; animation: step-in 240ms var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }

.cal { position: relative; }
.cal__nav { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; pointer-events: none; }
.cal__arrow { border-radius: 12px; pointer-events: auto; width: 48px; height: 48px; font-size: 26px; line-height: 1; background: var(--surface); transition: transform 140ms var(--ease-out), opacity 160ms ease; }
.cal__arrow:active { transform: scale(.94); }
.cal__arrow[disabled] { opacity: .35; }
.cal__months { display: grid; gap: 24px; }
.cal__month:nth-child(2) { display: none; }
.cal__month h4 { margin: 0 0 12px; height: 48px; display: grid; place-items: center; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow { text-align: center; font-size: var(--s-small); padding-bottom: 4px; color: var(--soft); }
.day { border-radius: 10px; position: relative; isolation: isolate; aspect-ratio: 1; min-height: 44px; display: grid; place-items: center; font-weight: 500; font-variant-numeric: tabular-nums; background: var(--surface); transition: background-color 120ms ease, color 120ms ease; overflow: hidden; }
.day--empty { background: none; min-height: 0; }
.day--past { opacity: .3; background: none; cursor: default; }
.day--busy { background: none; color: var(--soft); text-decoration: line-through; cursor: not-allowed; }
.day--busy::before, .day--dep::before { content: ""; position: absolute; inset: 0; background: var(--busy); z-index: -1; }
.day--arr::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.day--dep::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.day--arr { background: var(--surface); }
.day--checkout { cursor: pointer; text-decoration: none; color: var(--ink); }
.day--today { outline: 2px solid var(--ink); outline-offset: -2px; }
.day--inrange { background: var(--accent); color: var(--accent-ink); opacity: .78; }
.day--start, .day--end { background: var(--accent) !important; color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.day--start::before, .day--end::before { display: none; }
.day--invalid { animation: nope 260ms var(--ease-out); }
@keyframes nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cal__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; font-size: var(--s-small); }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 14px; height: 14px; }
.lg--free { background: var(--surface); } .lg--busy { background: var(--busy); } .lg--sel { background: var(--accent); }
.cal__clear { min-height: 36px; padding: 0 12px; background: var(--ink); color: var(--bg); font-weight: 500; }
.cal__hint { margin-top: 8px; font-size: var(--s-small); color: var(--soft); }

.form { display: grid; gap: 12px; }
.form__two { display: grid; gap: 12px; }
.field { position: relative; display: block; }
.field input, .field textarea { border-radius: 12px; width: 100%; padding: 24px 14px 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; border: 2px solid transparent; border-radius: 0; resize: vertical; transition: border-color 160ms ease; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--accent); }
.field span { position: absolute; left: 16px; top: 16px; color: var(--soft); pointer-events: none; transform-origin: 0 0; transition: transform 160ms var(--ease-out); }
.field input:focus + span, .field input:not(:placeholder-shown) + span, .field textarea:focus + span, .field textarea:not(:placeholder-shown) + span { transform: translateY(-9px) scale(.76); }
.field.is-error input { border-color: #e23d1f; }
.check { display: flex; gap: 10px; align-items: flex-start; padding-block: 6px; cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--accent); }
.check a { text-decoration: underline; }
.form__error { min-height: 1.5em; font-weight: 500; }
.done { padding: 28px 0; display: grid; gap: 14px; max-width: 56ch; justify-items: start; }
.done h3 { margin: 0; font-size: 24px; line-height: 1; letter-spacing: -.03em; }
.done__check { width: 64px; fill: none; stroke: var(--accent); stroke-width: 3.5; }
.done__check path { stroke-dasharray: 40; animation: draw 500ms 120ms var(--ease-out) both; }
@keyframes draw { from { stroke-dashoffset: 40; } }

.sum { border-radius: 16px; padding: 16px; background: var(--surface); display: grid; gap: 16px; align-self: start; }
.sum__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sum__dates small { display: block; font-size: var(--s-small); color: var(--soft); }
.sum__dates b { font-size: 20px; letter-spacing: -.01em; }
.sum__guests { display: grid; gap: 8px; }
.counter { display: flex; justify-content: space-between; align-items: center; }
.counter__ctrl { display: flex; align-items: center; gap: 6px; }
.counter__ctrl button { width: 44px; height: 44px; font-size: 22px; background: var(--bg); transition: transform 140ms var(--ease-out); }
.counter__ctrl button:active { transform: scale(.93); }
.counter__ctrl output { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.sum__lines { display: grid; gap: 8px; }
.sum__lines > div { display: flex; justify-content: space-between; gap: 12px; }
.sum__lines small { display: block; font-size: var(--s-small); color: var(--soft); }
.sum__note { font-size: var(--s-small); color: var(--soft); }
.sum__lines:has(> p:only-child) + .sum__total { display: none; }
.sum__total { display: flex; justify-content: space-between; align-items: baseline; }
.sum__total b { font-size: 34px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sum__actions { display: flex; gap: 8px; }
.sum__actions .btn { flex: 1; }

/* ---------- Dobré vedieť ---------- */
.faq__list { margin-top: 14px; display: grid; gap: 6px; }
details { padding: 12px 14px; background: var(--surface); border-radius: 14px; }
summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 17px; font-weight: 500; line-height: 1.25; cursor: pointer; list-style: none; min-height: 26px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 200ms var(--ease-out); }
details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details p { max-width: 62ch; margin-top: 8px; }

/* ---------- Kontakt a pätka ---------- */
.contact { margin-top: var(--gap); background: var(--surface); }
.contact__in { display: grid; gap: 16px; padding-block: 32px; }
.contact__in p { margin-top: 8px; }
.contact__map iframe { width: 100%; height: 260px; border: 0; border-radius: 16px; }
.footer { padding-block: 18px 92px; font-size: var(--s-small); color: var(--soft); }
.footer__row { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- Spodná lišta na mobile ---------- */
.dock { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; background: var(--ink); color: #fff; border-radius: 999px; text-decoration: none; transform: translateY(170%); transition: transform 260ms var(--ease-out); }
.dock.is-on { transform: none; }
.dock b { font-size: 18px; }
.dock i { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; background: var(--accent); border-radius: 999px; font-style: normal; font-weight: 500; }

/* ---------- Fotky na celú obrazovku ---------- */
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: #0a0f0c; color: #fff; touch-action: pan-y; animation: fade 180ms ease; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity 160ms ease, transform 240ms var(--ease-out); user-select: none; }
.lightbox__cap { position: absolute; left: 16px; right: 72px; bottom: 16px; font-size: 15px; }
.lightbox__cap span + span { opacity: .75; margin-left: 8px; }
.lightbox__btn { position: absolute; width: 48px; height: 48px; font-size: 30px; line-height: 1; background: rgba(0,0,0,.55); color: #fff; }
.lightbox__close { top: 10px; right: 10px; }
.lightbox__prev { left: 8px; top: 50%; margin-top: -24px; }
.lightbox__next { right: 8px; top: 50%; margin-top: -24px; }
@keyframes fade { from { opacity: 0; } }

.legal-modal { position: fixed; inset: 0; z-index: 90; background: rgba(5,12,10,.6); display: grid; place-items: center; padding: 12px; opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.legal-modal.is-open { opacity: 1; pointer-events: auto; }
.legal-modal__box { position: relative; width: min(720px, 100%); max-height: 88vh; background: var(--bg); display: flex; flex-direction: column; transform: scale(.98); transition: transform 220ms var(--ease-out); }
.legal-modal.is-open .legal-modal__box { transform: none; }
.legal-modal__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 18px 28px; font-size: 16px; -webkit-overflow-scrolling: touch; }
.legal-modal__body h1 { margin: 0 44px 8px 0; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.legal-modal__body h2 { margin: 22px 0 6px; font-size: 20px; }
.legal-modal__body p { margin-bottom: 10px; }
.legal-modal__body ul { padding-left: 20px; list-style: disc; }
.legal-modal__body table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 16px; }
.legal-modal__body th, .legal-modal__body td { text-align: left; vertical-align: top; padding: 8px 8px 8px 0; }
.legal-modal__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 28px; line-height: 1; background: var(--surface); z-index: 1; }
html.legal-open, html.locked, html.locked body, html.legal-open body { overflow: hidden; }


/* ---------- Tablet ---------- */
@media (min-width: 700px) {
  :root { --m: 28px; --gap: 80px; --s-lg: 34px; }
  .cal__months { grid-template-columns: 1fr 1fr; }
  .cal__month:nth-child(2) { display: block; }
  .form__two { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
  .contact__in { grid-template-columns: 1fr 2fr; }
  .place { width: 300px; }
  .sheet { inset: 0; margin: auto; width: min(760px, 92vw); max-height: 88svh; border-radius: 22px; }
  .sheet__grab { display: none; }
  .sheet[open] { animation: fade 180ms ease; }
  .sheet__close { background: var(--surface); }
  .sheet__body { padding-top: 56px; }
}

/* ---------- Počítač ---------- */
@media (min-width: 1000px) {
  :root { --m: 32px; --gap: 96px; }
  .nav { height: 68px; padding-inline: max(var(--m), calc((100vw - 1180px) / 2 + var(--m))); gap: 26px; }
  .nav__name { margin-right: 10px; }
  .nav__links { display: flex; gap: 22px; margin-right: auto; }
  .nav__links a { text-decoration: none; font-weight: 500; text-underline-offset: 5px; }
  .nav__links a:hover, .nav__links a.is-current { text-decoration: underline; text-decoration-thickness: 2px; }
  .btn--nav { display: inline-flex; min-height: 42px; }
  .nav__menu, .dock { display: none; }
  .footer { padding-bottom: 20px; }
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; max-width: 1180px; margin-inline: auto; padding: 12px var(--m) 0; }
  .hero__copy { order: -1; padding: 0; }
  .story { margin: 0; height: min(76svh, 620px); border-radius: 26px; }
  .btn--big { width: auto; padding-inline: 30px; }
  .bento { grid-auto-rows: 230px; gap: 12px; }
  .tile:nth-child(6), .tile:nth-child(7) { grid-column: span 2; }
  .pl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .pl__months { grid-template-columns: repeat(6, 1fr); }
  .voices__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; }
  .bk__steps { max-width: calc(100% - 400px); }
  .bk__body { grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; }
  .bk__panel.is-active { grid-column: 1; }
  .bk__panel[data-step="3"].is-active { grid-column: 1 / -1; }
  .sum { grid-column: 2; grid-row: 1; position: sticky; top: 84px; margin-top: -64px; }
  .faq__list { grid-template-columns: 1fr 1fr; align-items: start; gap: 8px; }
  .lightbox__prev { left: 20px; } .lightbox__next { right: 20px; }
  .legal-modal__body { padding: 32px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
