/* APARTMÁN LIPENKA — vzhled
   Pravidla, kterými se to drží „drahé":
   1. Málo barev. Inkoust, krém, mosaz. Nic jiného.
   2. Hodně prázdna. Vzduch kolem textu dělá luxus víc než jakýkoliv efekt.
   3. Velká patková písma na nadpisy, drobná prostrkaná verzálka na popisky.
   4. Žádné stíny pod tlačítky, žádné gradienty duhy, žádné emoji.
   5. Fotka je hrdina. Text jí ustupuje, ne naopak. */

:root {
  --inkoust: #14110e;
  --uhel: #1f1b16;
  --kour: #2c2620;
  --mosaz: #b08d57;
  --mosaz-svetla: #cfae7c;
  --krem: #f4f1ea;
  --krem-tlum: #ddd7cb;
  --seda: #8a8177;

  --patka: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --bezpatky: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;

  --sirka: 1180px;
  --uzka: 720px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--inkoust);
  color: var(--krem);
  font-family: var(--bezpatky);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.obal { max-width: var(--sirka); margin: 0 auto; padding: 0 28px; }
.uzky { max-width: var(--uzka); }

/* ── Drobná prostrkaná verzálka nad nadpisem ───────────────────────── */
.stitek {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mosaz);
  margin: 0 0 18px;
  font-weight: 600;
}

h1, h2, h3 { font-family: var(--patka); font-weight: 400; letter-spacing: -0.01em; }

h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.15;
  margin: 0 0 22px;
}

h3 { font-size: 21px; margin: 0 0 8px; }

p { margin: 0 0 18px; }

.tlumene { color: var(--krem-tlum); }

section { padding: clamp(72px, 10vw, 130px) 0; }

.linka { height: 1px; background: rgba(244, 241, 234, 0.1); border: 0; margin: 0; }

/* ── Tlačítka ──────────────────────────────────────────────────────── */
.tlacitka { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-block;
  padding: 15px 34px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--mosaz);
  color: var(--mosaz-svetla);
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease;
  cursor: pointer;
  font-family: inherit;
}

.btn:hover { background: var(--mosaz); color: var(--inkoust); }

.btn--plny { background: var(--mosaz); color: var(--inkoust); }
.btn--plny:hover { background: var(--mosaz-svetla); border-color: var(--mosaz-svetla); }

/* ── Hlavička ──────────────────────────────────────────────────────── */
.hlava {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(20, 17, 14, 0.72);
  border-bottom: 1px solid rgba(244, 241, 234, 0.07);
}

.hlava__obal {
  max-width: var(--sirka); margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.znacka {
  font-family: var(--patka); font-size: 20px; text-decoration: none;
  letter-spacing: 0.04em;
}
.znacka span { color: var(--mosaz); }

.menu { display: flex; gap: 30px; align-items: center; }

.menu a {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--krem-tlum); transition: color 0.2s;
}
.menu a:hover { color: var(--mosaz-svetla); }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 120px 0 80px;
}

.hero__fotka {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(176, 141, 87, 0.22), transparent 60%),
    linear-gradient(160deg, #221d17 0%, #14110e 55%, #0d0b09 100%);
}

/* Jemné zrno — bez něj vypadá plocha jako nedodělaná, ne jako záměr. */
.hero__fotka::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image: radial-gradient(rgba(244, 241, 234, 0.045) 1px, transparent 1px);
  background-size: 3px 3px;
}

.hero__obal { position: relative; z-index: 2; }

.hero h1 {
  font-size: clamp(44px, 8vw, 92px);
  line-height: 1.03;
  margin: 0 0 26px;
  max-width: 14ch;
}

.hero__lead {
  font-size: clamp(17px, 2vw, 21px);
  max-width: 52ch;
  color: var(--krem-tlum);
  margin-bottom: 40px;
}

/* ── Pruh s fakty ──────────────────────────────────────────────────── */
.fakta {
  border-top: 1px solid rgba(244, 241, 234, 0.1);
  border-bottom: 1px solid rgba(244, 241, 234, 0.1);
  background: var(--uhel);
}

.fakta__mrizka {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--sirka); margin: 0 auto;
}

.fakt {
  padding: 34px 28px; text-align: center;
  border-right: 1px solid rgba(244, 241, 234, 0.08);
}
.fakt:last-child { border-right: 0; }

.fakt__cislo {
  font-family: var(--patka); font-size: 34px; color: var(--mosaz-svetla);
  line-height: 1.1;
}
.fakt__popis {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--seda); margin-top: 8px;
}

/* ── Dvousloup text + fotka ────────────────────────────────────────── */
.dvojice {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 84px); align-items: center;
}

.dvojice--obracene .dvojice__text { order: 2; }

/* ── Místo pro fotku ───────────────────────────────────────────────── */
.fotka {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(150deg, #2c2620, #1a1611);
  border: 1px solid rgba(244, 241, 234, 0.08);
  display: flex; align-items: center; justify-content: center;
}
.fotka--vysoka { aspect-ratio: 3 / 4; }
.fotka--siroka { aspect-ratio: 16 / 9; }

.fotka img { width: 100%; height: 100%; object-fit: cover; }

.fotka__popis {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--seda); text-align: center; padding: 20px; line-height: 1.9;
}

/* ── Galerie ───────────────────────────────────────────────────────── */
.galerie {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.galerie > *:first-child { grid-column: span 2; grid-row: span 2; }

/* ── Vybavení ──────────────────────────────────────────────────────── */
.vybaveni {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px;
}

.vybaveni li {
  padding: 14px 0; border-bottom: 1px solid rgba(244, 241, 234, 0.08);
  font-size: 15px; color: var(--krem-tlum);
}

.vybaveni li::before {
  content: "—"; color: var(--mosaz); margin-right: 12px;
}

/* ── Karty (okolí) ─────────────────────────────────────────────────── */
.karty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.karta {
  background: var(--uhel); border: 1px solid rgba(244, 241, 234, 0.08);
  padding: 38px 34px;
}
.karta h3 { color: var(--krem); }
.karta ul { list-style: none; padding: 0; margin: 18px 0 0; }
.karta li {
  padding: 9px 0; color: var(--krem-tlum); font-size: 15px;
  border-top: 1px solid rgba(244, 241, 234, 0.06);
  display: flex; justify-content: space-between; gap: 16px;
}
.karta li span { color: var(--seda); white-space: nowrap; }

/* ── Ceník ─────────────────────────────────────────────────────────── */
.cenik { width: 100%; border-collapse: collapse; }
.cenik th, .cenik td { padding: 18px 8px; text-align: left; }
.cenik thead th {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--seda); font-weight: 600;
  border-bottom: 1px solid rgba(244, 241, 234, 0.16);
}
.cenik tbody tr { border-bottom: 1px solid rgba(244, 241, 234, 0.07); }
.cenik td:last-child, .cenik th:last-child { text-align: right; }
.cenik .cena {
  font-family: var(--patka); font-size: 24px; color: var(--mosaz-svetla);
}
.cenik__pod { color: var(--seda); font-size: 14px; margin-top: 22px; }

/* ── Recenze ───────────────────────────────────────────────────────── */
.recenze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.recenze blockquote {
  margin: 0; padding: 0; font-family: var(--patka);
  font-size: 19px; line-height: 1.6; color: var(--krem);
}
.recenze blockquote::before { content: "„"; color: var(--mosaz); }
.recenze figcaption {
  margin-top: 16px; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--seda);
}

/* ── Formulář ──────────────────────────────────────────────────────── */
.poptavka { background: var(--uhel); }

.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.formular .siroke { grid-column: 1 / -1; }

label {
  display: block; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--seda); margin-bottom: 8px;
}

input, textarea, select {
  width: 100%; padding: 14px 16px;
  background: var(--inkoust); color: var(--krem);
  border: 1px solid rgba(244, 241, 234, 0.14);
  font-family: inherit; font-size: 16px; border-radius: 0;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--mosaz);
}
textarea { min-height: 130px; resize: vertical; }

/* Návnada na roboty. Člověk ji nikdy neuvidí, robot ji vyplní a my ho
   podle toho poznáme. Levnější a slušnější než captcha. */
.navnada { position: absolute; left: -9999px; opacity: 0; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.otazka {
  border-bottom: 1px solid rgba(244, 241, 234, 0.09);
  padding: 4px 0;
}
.otazka summary {
  cursor: pointer; padding: 20px 0; list-style: none;
  font-family: var(--patka); font-size: 19px;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
.otazka summary::-webkit-details-marker { display: none; }
.otazka summary::after { content: "+"; color: var(--mosaz); font-size: 22px; }
.otazka[open] summary::after { content: "–"; }
.otazka p { color: var(--krem-tlum); padding-bottom: 12px; margin: 0; }

/* ── Patička ───────────────────────────────────────────────────────── */
.pata {
  background: var(--inkoust); border-top: 1px solid rgba(244, 241, 234, 0.09);
  padding: 70px 0 40px; font-size: 14px; color: var(--seda);
}
.pata__mrizka { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.pata a { color: var(--krem-tlum); text-decoration: none; }
.pata a:hover { color: var(--mosaz-svetla); }
.pata__spodek {
  margin-top: 50px; padding-top: 24px;
  border-top: 1px solid rgba(244, 241, 234, 0.07);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px;
}

/* ── Menší obrazovky ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .menu { display: none; }
  .dvojice { grid-template-columns: 1fr; }
  .dvojice--obracene .dvojice__text { order: 0; }
  .fakta__mrizka { grid-template-columns: repeat(2, 1fr); }
  .fakt:nth-child(2) { border-right: 0; }
  .fakt:nth-child(1), .fakt:nth-child(2) {
    border-bottom: 1px solid rgba(244, 241, 234, 0.08);
  }
  .vybaveni, .recenze, .karty { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr 1fr; }
  .galerie > *:first-child { grid-column: span 2; grid-row: span 1; }
  .formular { grid-template-columns: 1fr; }
  .pata__mrizka { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}