/* projekt.obeczije.cz — the project's website (Lukas, 2026-11-11). The app lives on obeczije.cz; this is the
   place for what it is, who it is for, the package and examples, and it grows page by page. */
:root {
  --ink: #0f2038; --soft: #566579; --rule: #d9dfe7; --paper: #fff; --mist: #f2f6fd;
  --enamel: #12479e; --deep: #0c2f6b; --link: #12479e;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e8edf4; --soft: #a2afc0; --rule: #2d3a4d; --paper: #121a26; --mist: #19232f; --link: #8fbcff }
}
* { box-sizing: border-box; margin: 0 }
body { font-family: "Overpass", system-ui, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.5 }
a { color: var(--link) }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px }

header.top { background: var(--deep); color: #fff }
header.top .wrap { display: flex; align-items: center; gap: 22px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap }
.sign { display: inline-block; background: var(--enamel); color: #fff; border: 3px solid #fff; outline: 3px solid var(--enamel); padding: 3px 11px 0; font-weight: 800; letter-spacing: .02em; text-decoration: none }
header.top nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap }
header.top nav a { color: #dfe8f6; text-decoration: none; font-weight: 600 }
header.top nav a[aria-current="page"], header.top nav a:hover { color: #fff; text-decoration: underline }
.cta { display: inline-block; background: #fff; color: var(--deep); font-weight: 800; padding: 10px 18px; border-radius: 10px; text-decoration: none }
.cta.blue { background: var(--enamel); color: #fff }

.hero { background: var(--deep); color: #fff; padding: 40px 0 46px }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; font-weight: 800; max-width: 16em }
.hero p { font-size: 1.15rem; color: #c9d7ee; margin: 14px 0 24px; max-width: 38em }
.shot { display: block; width: 100%; max-height: 440px; object-fit: cover; object-position: center 62% }

section { padding: 44px 0 }
section + section { border-top: 1px solid var(--rule) }
h2 { font-size: 1.7rem; font-weight: 800; line-height: 1.2; margin-bottom: 18px }
.lead { color: var(--soft); font-size: 1.08rem; max-width: 42em; margin-bottom: 22px }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 28px }
.point { padding-left: 14px; border-left: 4px solid var(--enamel) }
.point b { display: block; font-size: 1.08rem }
.point span { color: var(--soft) }

.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px }
.card { border: 2px solid var(--rule); border-radius: 14px; padding: 22px 24px }
.card.paid { border-color: var(--enamel); background: var(--mist) }
.card h3 { font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--soft) }
.price { font-size: 2.1rem; font-weight: 800; margin: 2px 0 10px }
.price small { font-size: 1rem; font-weight: 600; color: var(--soft) }
.card ul { padding-left: 20px }
.card li + li { margin-top: 4px }
.soon { font-size: .8rem; font-weight: 700; color: var(--enamel); background: var(--mist); border: 1px solid var(--rule); border-radius: 6px; padding: 0 6px; margin-left: 4px; white-space: nowrap }

.villages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }
.village { border: 2px solid var(--rule); border-radius: 14px; padding: 18px 20px; text-decoration: none; color: inherit; display: block }
.village:hover { border-color: var(--enamel) }
.village b { font-size: 1.2rem; display: block }
.village span { color: var(--soft) }

footer { background: var(--deep); color: #c9d7ee; padding: 30px 0 }
footer .wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap }
footer a { color: #fff }
footer img { width: 84px; height: 84px; background: #fff; padding: 6px; border-radius: 8px }
footer small { display: block; margin-top: 4px; color: #9fb0c8 }