:root {
  --text: #1a1f2b;
  --muted: #545b6b;
  --line: #e3e6ec;
  /* podbarvení sekcí: střídá se s bílou, aby se sousední sekce odlišily; kontrast textu na něm aspoň 5,7 : 1 */
  --soft: #e6ecf7;
  --accent: #1d4ed8;
  --accent-dark: #1e3a8a;
  --accent-soft: #e8eefc;
  --radius: 10px;
  --bar: 3.5rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding-top: var(--bar);
  background: #fff;
  color: var(--text);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0 0 .6em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 65ch; text-wrap: pretty; }
[id] { scroll-margin-top: calc(var(--bar) + 1rem); }

a { color: var(--accent); text-underline-offset: .15em; }
a:hover { color: var(--accent-dark); }
/* tlačítko, které vypadá jako odkaz: otevírá dialog, takže sémanticky je to akce */
.link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.link-button:hover { color: var(--accent-dark); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.sub, .note { color: var(--muted); }
.note { font-size: .95rem; }
small { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; }

.button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: .8rem 1.4rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s;
}
.button:hover { background: var(--accent-dark); color: #fff; }
.button[disabled] { opacity: .6; cursor: progress; }
.button.small { padding: .45rem .9rem; font-size: .95rem; }

/* lišta */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: var(--bar);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(1.5) blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.topbar-in { max-width: 72rem; height: 100%; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; gap: 1.5rem; }
.brand { font-weight: 700; color: var(--text); text-decoration: none; margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.topbar ul a { color: var(--text); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.topbar ul a:hover { color: var(--accent); text-decoration: underline; }
.topbar .button { flex: 0 0 auto; }
@media (max-width: 74rem) { .topbar ul { display: none; } }
@media (max-width: 40rem) { .brand { white-space: normal; font-size: .9rem; line-height: 1.25; } }

/* úvod */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero { display: grid; max-width: 72rem; margin: 0 auto; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-text { padding: 1.5rem 1rem 0; }
.kicker { color: var(--accent); font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }
h1 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
.lead { font-size: 1.1rem; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1.5rem; margin: 1.5rem 0 0; }
.facts div { border-top: 1px solid var(--line); padding-top: .5rem; }
.facts dt { color: var(--muted); font-size: .85rem; }
.facts dd { margin: 0; font-weight: 600; }
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; padding: 1.5rem 1rem 0; align-items: start; }
  .hero-photo img { border-radius: var(--radius); }
  .hero-text { padding: 0; }
}

/* ceny */
.pricing { padding: 2rem 0 3rem; }
.price-grid { display: grid; gap: 1rem; }
@media (min-width: 50rem) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.price-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.price-card-all { background: var(--accent-soft); border-color: var(--accent); }
.prices { list-style: none; margin: 0; padding: 0; }
.prices li { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0 1rem; padding: .4rem 0; border-top: 1px solid var(--line); }
.price-card-all .prices li { border-top-color: #c9d7fb; }
.pname { min-width: 0; }
.pval { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; text-align: right; }
.price-card-all .pval { font-size: 1.35rem; }
/* poslední box: cena svisle uprostřed volného místa pod názvem varianty */
.price-card { display: flex; flex-direction: column; }
.price-card-all .prices { flex: 1; display: flex; flex-direction: column; }
.price-card-all .prices li { flex: 1; flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.price-card-all .pval { margin: auto 0; }
s { color: var(--muted); font-weight: 400; font-size: .95rem; margin-right: .35rem; }
.pricing-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1rem; }
.pricing-foot .note { margin: 0; flex: 1 1 30rem; max-width: none; }
.pricing-foot .button { flex: 0 0 auto; }

/* půdorys */
.plan { background: var(--soft); padding: 3rem 0; margin-bottom: 1rem; }
.band { background: var(--soft); padding: 1.5rem 0; }
.floorplan { width: 100%; height: auto; display: block; max-width: 52rem; margin-top: 1rem; }
.floorplan a { cursor: pointer; }
.fp-room { fill: #fff; stroke: var(--text); stroke-width: 4; }
.fp-balcony { fill: #d3def4; stroke: var(--text); stroke-width: 2; stroke-dasharray: 6 4; }
.floorplan a:hover .fp-room, .floorplan a:focus-visible .fp-room { fill: var(--accent-soft); }
.floorplan a:hover .fp-balcony, .floorplan a:focus-visible .fp-balcony { fill: #b9cbf2; }
.fp-name { font: 600 17px system-ui, sans-serif; fill: var(--text); text-anchor: middle; dominant-baseline: middle; }
.fp-area { font: 14px system-ui, sans-serif; fill: var(--muted); text-anchor: middle; dominant-baseline: middle; }
/* kuchyňský kout je otevřený do obýváku: čárkovaná hranice místo stěny, pod ní prosvítá obvodová zeď */
.fp-open { fill: transparent; stroke: none; }
.fp-divider { fill: none; stroke: var(--text); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
/* dveře jen jako otvory ve zdi; na klikání nemají vliv */
.fp-doors { pointer-events: none; }
.fp-gap { stroke: #fff; stroke-width: 6; }
.fp-window { stroke: var(--text); stroke-width: 1.5; }
.fp-shaft { fill: #b7bfcd; stroke: var(--text); stroke-width: 1.5; }
.fp-low-wall { stroke: var(--text); stroke-width: 3; }
.fp-entrance { font: 600 14px system-ui, sans-serif; fill: var(--muted); text-anchor: middle; }

/* místnosti */
.section-title { padding-top: 3.5rem; }
.room { padding: 1.5rem 0 2.5rem; }
.room h2, .room h3 { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.area { color: var(--muted); font-weight: 400; font-size: 1rem; }
/* štítek u nadpisu garáže a zahrádky, zarovnaný doprava k fotce; pozadí sytější než podbarvení sekce */
.badge { margin-left: auto; align-self: center; padding: .15rem .65rem; border-radius: 999px; background: #c9d6f3; color: var(--accent-dark); font-size: .85rem; font-weight: 600; white-space: nowrap; }

.carousel { position: relative; max-width: 60rem; margin: 1rem auto 0; }
.track {
  display: flex; gap: .5rem; margin: 0; padding: 0 1rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1rem;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 88%; scroll-snap-align: start; }
@media (min-width: 50rem) { .slide { flex-basis: 100%; } .track { padding: 0 1rem; } }
.zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.slide img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--soft); }
.stage { position: relative; }
.carousel .prev, .carousel .next { position: absolute; top: 50%; transform: translateY(-50%); }
.carousel .prev { left: 1.5rem; }
.carousel .next { right: 1.5rem; }
.carousel .prev, .carousel .next, .lightbox button {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--text);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
/* šipky přes fotku tlumené, aby ji nepřebíjely; při najetí zesílí */
.carousel .prev, .carousel .next { background: rgba(255, 255, 255, .7); border-color: transparent; color: rgba(26, 31, 43, .8); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.carousel .prev:hover, .carousel .next:hover { background: rgba(255, 255, 255, .9); color: var(--text); }

/* lokalita */
.location { padding: 1.5rem 0 3rem; }
.map { margin: 0 0 1rem; }
@media (min-width: 60rem) { .map { margin: 0; } }
.map img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.places { padding-left: 1.2rem; margin: 0 0 1rem; }
.places li { margin-bottom: .5rem; }
.map a { display: block; border-radius: var(--radius); }
.map a:hover img { border-color: var(--accent); }

/* podmínky */
.conditions { padding: 3rem 0; }
.table-wrap { overflow-x: auto; margin: 1rem 0; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .95rem; }
th, td { padding: .65rem .8rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th:first-child { text-align: left; }
thead th:not(:first-child) { width: 18%; } /* sloupce variant stejně široké */
thead th { font-weight: 600; color: var(--muted); font-size: .85rem; white-space: normal; vertical-align: bottom; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.terms { display: grid; gap: 1rem; margin: 2rem 0; }
@media (min-width: 40rem) { .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.terms div { background: #f4f7fe; border-radius: var(--radius); padding: 1rem; border: 1px solid #dbe4fa; }
.terms dt { color: var(--muted); font-size: .85rem; }
.terms dd { margin: 0; font-weight: 600; }
.rules { padding-left: 1.2rem; max-width: 65ch; margin-top: 2rem; color: var(--muted); }
.rules li { margin-bottom: .5rem; break-inside: avoid; }
@media (min-width: 50rem) { .rules { max-width: none; columns: 2; column-gap: 3rem; } }

/* postup */
.steps { background: var(--soft); padding: 3rem 0; }
.steps ol { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0; }
.steps li { counter-increment: step; position: relative; padding-left: 3rem; break-inside: avoid; }
.steps li + li { margin-top: 1.25rem; }
/* čtyři kroky do levého sloupce, zbytek do pravého, aby číslování šlo shora dolů; sloupce jsou nezávislé,
   takže mezery mezi kroky jsou všude stejné a kroky se do řádků vedle sebe nesrovnávají */
@media (min-width: 50rem) {
  .steps ol { columns: 2; column-gap: 2.5rem; }
  .steps li + li { margin-top: 1.5rem; }
  .steps li:nth-child(5) { break-before: column; -webkit-column-break-before: always; margin-top: 0; }
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; display: grid; place-items: center;
}
.steps h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.steps p { margin: 0; color: var(--muted); }
/* řádek popisu je samostatný, jen když se do sloupce vejde celý; v užším sloupci text teče normálně.
   Práh odpovídá nejdelšímu řádku i s odsazením pro číslo, po delším textu ho zvětšit. */
.steps li { container-type: inline-size; }
@container (min-width: 26rem) { .steps .line { display: block; } }

/* pronajímatel */
.landlord { padding: 3rem 0; background: var(--soft); }
.landlord .wrap { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 40rem) { .landlord .wrap { grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; } }
.portrait { display: block; width: 10rem; height: auto; border-radius: var(--radius); }

/* formulář */
.contact { padding: 3rem 0 calc(4rem + env(safe-area-inset-bottom)); }
.contact-grid { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 50rem) { .contact-grid { grid-template-columns: 3fr 2fr; } }
.contact-side { background: var(--soft); border-radius: var(--radius); padding: 1.25rem; align-self: start; }
.contact-side h3 { font-size: 1.05rem; }
.privacy { font-size: .85rem; color: var(--muted); }
.side-note { color: var(--muted); }

.form { max-width: 36rem; }
.field { margin: 0 0 1.25rem; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: .35rem; padding: 0; }
.optional { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=month], textarea {
  width: 100%; font: inherit; color: var(--text); background: #fff;
  border: 1px solid #b8bfcc; border-radius: 8px; padding: .65rem .75rem;
}
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input:user-invalid, textarea:user-invalid { border-color: #b42318; }
.choice { display: flex !important; align-items: baseline; gap: .6rem; font-weight: 400 !important; padding: .4rem 0; cursor: pointer; }
.choice input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.choice small { display: inline; margin-left: .25rem; }
@media (min-width: 30rem) { .choices-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 1.5rem; } }
.status { margin-top: 1rem; font-weight: 600; }
/* po úspěšném odeslání stojí potvrzení místo tlačítka */
.button[hidden] { display: none; }
.button[hidden] + .status { margin-top: 0; }
.status.ok { color: #12703a; background: #e7f6ec; padding: .75rem 1rem; border-radius: 8px; }
.status.ok::before { content: "✓" / ""; margin-right: .5rem; font-weight: 700; }
.status.error { color: #b42318; background: #fdecea; padding: .75rem 1rem; border-radius: 8px; }
.botcheck { display: none; }

/* dotazník */
.questionnaire { padding: 2rem 0 4rem; }
.questionnaire h2 { font-size: 1.3rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.questionnaire .wrap { max-width: 40rem; }
.questionnaire .kicker a { text-decoration: none; }
.thresholds { margin: 0 0 1rem; padding-left: 1.2rem; font-variant-numeric: tabular-nums; }
.income-hint { font-weight: 400; color: var(--accent); }


/* fotka přes celou obrazovku */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overscroll-behavior: contain; }
.lightbox::backdrop { background: rgba(10, 12, 18, .92); }
.lightbox img { position: absolute; inset: 0; margin: auto; max-width: 96vw; max-height: 90vh; width: auto; height: auto; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .9); }
.lightbox button:hover { background: #fff; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (min-width: 60rem) {
  .room { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem; align-items: start; max-width: 72rem; margin: 0 auto; padding: 2rem 1rem; }
  .room > .wrap { padding: 0; }
  .room .carousel { margin: 0; width: 100%; }
  .room .track { padding: 0; scroll-padding: 0; }
  /* místnosti a okolí po dvou vedle sebe, fotky nebo mapa nahoře a nadpis s popisem pod nimi */
  .pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
  .pairs .room { display: flex; flex-direction: column; gap: 1rem; max-width: none; margin: 0; padding: 2rem 0; }
  .pairs .room > .wrap { order: 2; }
  .pairs .room > .map-wrap { order: 0; }
  .section-title { max-width: 72rem; }
}


/* box a overlay pro realitky */
.contact-aside { display: grid; gap: 1rem; align-self: start; }
.agency {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #14161c; color: #fff; overflow: hidden; overscroll-behavior: contain;
}
.agency::backdrop { background: #14161c; }
.agency-collage { position: absolute; inset: 0; pointer-events: none; }
.agency-collage span {
  position: absolute; white-space: nowrap; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1;
  opacity: .55; transform: rotate(var(--turn));
}
.agency[open] .agency-collage span { animation: agency-pop .35s ease-out both; }
@keyframes agency-pop { from { opacity: 0; transform: rotate(var(--turn)) scale(2.2); } to { opacity: .55; transform: rotate(var(--turn)) scale(1); } }
.agency-collage .c1 { color: #ff4d4d; }
.agency-collage .c2 { color: #ffd23f; }
.agency-collage .c3 { color: #3ddc97; }
.agency-collage .c4 { color: #4cc9f0; }
.agency-collage .c5 { color: #f72585; }
.agency-collage .c6 { color: #ffffff; }
.agency-message {
  position: relative; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 1.25rem;
  min-height: 100%; padding: 1.5rem 1rem; text-align: center; grid-template-columns: minmax(0, 1fr);
}
.agency-message > * { max-width: 100%; }
.agency-message h2 {
  margin: 0; font-size: clamp(1.9rem, 9vw, 7rem); line-height: .95; text-transform: uppercase; font-weight: 900;
  color: #fff; background: #d90429; padding: .2em .35em; transform: rotate(-3deg); box-shadow: .12em .12em 0 #14161c;
}
.agency-message p { margin: 0; max-width: 32rem; font-size: 1.15rem; background: #14161c; padding: .4rem .8rem; border-radius: var(--radius); }
.agency-message .button { background: #fff; color: #14161c; }
.agency-message .button:hover { background: #ffd23f; color: #14161c; }
.agency-message .button:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .agency[open] .agency-collage span { animation: none; } }