/* Vysoká u Jihlavy — vzduch, les a ranní slunce: tmavá modrozelená + jantarová, hero z původní fotografie vsi. */
:root { --brand: #00677f; --brand-d: #003f50; --accent: #ffb400; --ink: #11242b; --muted: #55707a; --bg: #eef5f6; --line: #d3e2e6; --soft: #f3f9fa;
  --hdr-bg: rgba(255, 255, 255, .94); --hdr-ink: #11242b; --ftr-bg: #0b2a33; --ftr-ink: #a5bfc7; --phead-bg: linear-gradient(120deg, #003f50, #0a8aa8); --r: 22px; }
.top { backdrop-filter: blur(10px); border-bottom: 3px solid var(--accent); }
.brand-text { font: 900 26px/1 var(--display); color: var(--brand); letter-spacing: -.01em; } .brand small { max-width: 130px; }
@media (max-width: 1500px) { .brand small { display: none; } } .nav-link { padding: 10px 9px; font-size: 14.8px; } .sub-toggle { margin-left: -10px; width: 24px; }
.nav-link:hover { background: var(--soft); color: var(--brand); } .nav-link.is-on, .nav-link[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -3px 0 var(--accent); }
.hero { --hero-overlay: linear-gradient(100deg, rgba(0, 36, 48, .86) 0%, rgba(0, 36, 48, .5) 52%, rgba(0, 36, 48, .08) 100%); min-height: min(80vh, 760px); display: flex; align-items: flex-end; padding: clamp(70px, 12vw, 150px) 0 clamp(40px, 6vw, 70px); }
.hero-in { width: min(var(--wrap), 100% - 32px); } .hero h1 { font-size: clamp(44px, 8vw, 104px); letter-spacing: -.03em; line-height: .95; } .hero h1 em { display: block; font-style: normal; font-weight: 300; color: #fff; font-size: .5em; letter-spacing: 0; margin-top: .12em; }
.hero .eyebrow { color: var(--accent); } .hero-copy > * { animation: rise .8s both; } .hero-copy > :nth-child(2) { animation-delay: .1s; } .hero-copy > :nth-child(3) { animation-delay: .2s; } .hero-copy > :nth-child(4) { animation-delay: .3s; } @keyframes rise { from { opacity: 0; transform: translateY(22px); } }
.btn { background: var(--accent); color: #11242b; } .btn:hover { background: #ffc83a; color: #11242b; } .btn.ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .7); } .btn.ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.facts { list-style: none; margin: 0; padding: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; color: #fff; background: rgba(255, 255, 255, .13); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .32); border-radius: 26px; animation: rise .9s .25s both; }
.facts b { display: block; font: 800 clamp(30px, 3.6vw, 46px)/1 var(--display); color: var(--accent); } .facts span { font-size: 14.5px; opacity: .93; }
.prose ul:has(> li > a:only-child) { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .prose ul:has(> li > a:only-child) li { margin: 0; }
.prose ul:has(> li > a:only-child) li > a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 13px 16px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.prose ul:has(> li > a:only-child) li > a::after { content: '\2197'; margin-left: auto; opacity: .45; } .prose ul:has(> li > a:only-child) li > a:hover { background: #e3f1f4; border-color: var(--brand); transform: translateY(-2px); color: var(--brand); }
.prose h2 { margin-top: 1.7em; padding-left: 14px; border-left: 5px solid var(--accent); } .prose > p > a > img { box-shadow: var(--shadow); } .card-img img { transition: transform .5s; }
@media (max-width: 960px) { .hero { min-height: 0; } .facts { padding: 20px; } }