/* Ukázka rezervací LADA Lipno – modrá Lipna, světlé pozadí. */
:root { --bg: #f8f9f7; --m: #24506b; --m2: #1b3e54; --text: #1c2529; --sedy: #5b676c; --cara: #e0e4e2; --r: 12px; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 Inter, system-ui, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: Lora, Georgia, serif; font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: 1.7rem; }
.obal { width: min(1160px, 100% - 32px); margin-inline: auto; }
.pruh { background: #fff6d6; border-bottom: 1px solid #efe1a8; font-size: .88rem; padding: 9px 16px; text-align: center; }
.hl { background: #fff; border-bottom: 1px solid var(--cara); position: sticky; top: 0; z-index: 20; }
.hl-in { display: flex; justify-content: space-between; align-items: center; height: 62px; }
.znacka { font: 600 1.35rem Lora, serif; text-decoration: none; color: var(--m); }
.znacka span { font-weight: 500; color: var(--text); }
.hl nav { display: flex; gap: 22px; font-size: .92rem; font-weight: 500; }
.hl nav a { text-decoration: none; }
.hl nav a:hover { color: var(--m); }
.hero { position: relative; height: clamp(280px, 40vw, 440px); overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55)); }
.hero div { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 1; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.hero p { margin: 0; }
.uvod { padding: 34px 0 10px; max-width: 760px; color: var(--sedy); }
.jednotky { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 8px 0 56px; }
.j { background: #fff; border: 1px solid var(--cara); border-radius: var(--r); overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.j:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.j img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.j div { padding: 12px 14px 14px; }
.j h3 { font-size: 1.1rem; margin: 0 0 2px; }
.j p { margin: 0 0 8px; color: var(--sedy); font-size: .85rem; line-height: 1.4; }
.j b { display: block; color: var(--m); font-size: .92rem; }
.j-vic { display: block; margin-top: 6px; font-size: .82rem; color: var(--sedy); }
.spol { display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: center; margin-bottom: 56px; }
.spol ul, .box ul, .proc ul { margin: 0; padding-left: 18px; }
.spol li, .box li { color: var(--sedy); margin-bottom: 8px; }
.spol-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.spol-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.podm { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-bottom: 70px; }
.box { background: #fff; border: 1px solid var(--cara); border-radius: var(--r); padding: 24px; }
.proc { background: var(--m); color: #fff; border-radius: var(--r); padding: 24px; }
.proc li { color: #dbe7ee; margin-bottom: 6px; }
.detail-hlava { padding-top: 22px; }
.drobky { font-size: .88rem; color: var(--sedy); margin-bottom: 10px; }
.drobky a { color: var(--m); }
.detail-hlava h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 4px; }
.meta { color: var(--sedy); margin: 0 0 18px; }
.bk-galerie { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: clamp(320px, 38vw, 480px); }
.bk-galerie a { position: relative; overflow: hidden; border-radius: 10px; }
.bk-galerie a:first-child { grid-row: 1 / 3; }
.bk-galerie img { width: 100%; height: 100%; object-fit: cover; }
.bk-galerie a[data-vse]::after { content: attr(data-vse); position: absolute; inset: 0; background: rgba(28,37,41,.5); color: #fff; display: grid; place-items: center; font-weight: 600; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding: 32px 0 80px; align-items: start; }
.detail article > p { color: var(--sedy); }
.info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 40px; }
.info div { background: #fff; border: 1px solid var(--cara); border-radius: var(--r); padding: 14px 16px; }
.info span { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sedy); }
.info b { font-weight: 500; font-size: .92rem; }
.kal { background: #fff; border: 1px solid var(--cara); border-radius: var(--r); padding: clamp(14px, 3vw, 24px); }
.dalsi { margin-top: 22px; }
.dalsi a { color: var(--m); font-weight: 600; text-decoration: none; }
.bok { position: sticky; top: 84px; }
.bok-in { background: #fff; border: 1px solid var(--cara); border-radius: var(--r); padding: 24px; box-shadow: 0 14px 34px rgba(0,0,0,.06); }
.bok-in > b { font: 600 2rem Lora, serif; color: var(--m); }
.bok-in > span { color: var(--sedy); }
.bok-in ul { margin: 16px 0 20px; padding: 14px 0 0; border-top: 1px solid var(--cara); list-style: none; font-size: .93rem; }
.bok-in li { padding: 3px 0; }
.tl { display: block; text-align: center; background: var(--m); color: #fff; text-decoration: none; font-weight: 600; padding: 13px; border-radius: 999px; }
.tl:hover { background: var(--m2); }
.bok-in p { text-align: center; font-size: .86rem; color: var(--sedy); margin: 12px 0 0; }
.pata { border-top: 1px solid var(--cara); padding: 24px 0 40px; color: var(--sedy); font-size: .85rem; }
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(15,18,20,.94); display: grid; place-items: center; }
.lb[hidden] { display: none; }
.lb img { max-width: 92vw; max-height: 86vh; border-radius: 6px; }
.lb button { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; cursor: pointer; padding: 10px 18px; }
.lb-x { top: 10px; right: 10px; } .lb-p { left: 6px; top: 50%; transform: translateY(-50%); } .lb-n { right: 6px; top: 50%; transform: translateY(-50%); }
.lb-c { position: absolute; bottom: 18px; color: #ccc; font-size: .9rem; }
@media (max-width: 980px) {
  .jednotky { grid-template-columns: repeat(2, 1fr); }
  .spol, .podm, .detail { grid-template-columns: 1fr; }
  .bok { position: static; order: -1; }
  .info { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hl nav { display: none; }
  .bk-galerie { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 280px; }
  .bk-galerie a { flex: 0 0 82%; scroll-snap-align: start; }
  .bk-galerie a[hidden] { display: block; }
  .bk-galerie a[data-vse]::after { display: none; }
  .jednotky { gap: 10px; }
}