:root{
  --bg: #f6f1ec;
  --panel: #ffffff;
  --ink: #3f322c;
  --text: #4a3b34;
  --muted: #8f7a6c;
  --brand: #e4a07a;
  --brand-ink: #3f322c;
  --ring: #f2c7a5;
  --radius: 18px;
  --space: clamp(16px, 3vmin, 28px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.7;
}

a{color: var(--brand-ink); text-decoration: none}
a:hover{text-decoration: underline}

/* Header */

.site-header{
  position: sticky; top:0; z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(246,241,236,0.96);
  border-bottom: 1px solid rgba(63,50,44,0.08);
  display:flex; align-items:center; justify-content: space-between;
  padding: 10px var(--space);
}
.brand{
  font-weight:700;
  display:flex; align-items:center; gap:10px;
  color:var(--ink);
}
.brand .logo{
  display:inline-grid; place-items:center;
  width:28px; height:28px;
  border-radius:999px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size:16px;
}

.site-nav{display:flex; gap: 18px; align-items:center}
.site-nav a{
  padding:8px 12px;
  border-radius:999px;
  color:var(--ink);
  font-size:14px;
}
.site-nav a:hover{background: rgba(228,160,122,0.12);}
.site-nav .cta{
  background: var(--brand);
  color: var(--brand-ink);
  font-weight:600;
}
.site-nav .cta:hover{
  box-shadow: 0 4px 14px rgba(63,50,44,0.18);
}

.nav-toggle{display:none; background:none; border:none; padding:8px; cursor:pointer}
.nav-toggle span{
  display:block; width:22px; height:2px;
  background:var(--ink); margin:5px 0;
  transition:transform .2s ease;
}

@media (max-width: 820px){
  .nav-toggle{display:block}
  .site-nav{
    position:fixed;
    inset:60px var(--space) auto;
    display:grid; gap:10px;
    padding:14px;
    background: var(--panel);
    border:1px solid rgba(63,50,44,0.12);
    border-radius:18px;
    transform-origin:top right;
    transform: scale(.9);
    opacity:0;
    pointer-events:none;
    transition:.2s;
  }
  .site-nav[aria-expanded="true"]{
    transform:scale(1);
    opacity:1;
    pointer-events:auto;
  }
}

/* Hero */

.hero{
  position:relative;
  padding: calc(var(--space)*2.8) var(--space) calc(var(--space)*2.2);
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(246,241,236,0.6), rgba(246,241,236,0.95)),
    url("https://png.pngtree.com/thumb_back/fh260/background/20250120/pngtree-soft-focus-nature-background-with-dreamy-springtime-meadow-and-yellow-wildflowers-image_16882095.jpg") center/cover no-repeat;
  opacity:0.8;
  filter: brightness(1.05) saturate(1.1);
  pointer-events:none;
  z-index:-1;
}
.hero-inner{
  max-width: 960px;
  margin: 0 auto;
  background: var(--panel);
  padding: calc(var(--space)*1.8);
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(63,50,44,0.14);
  border: 1px solid rgba(228,160,122,0.16);
}
.kicker{
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size:11px;
  color: var(--muted);
  margin:0 0 6px;
}
.hero h1{
  font-family: "Playfair Display", "Open Sans", serif;
  font-size: clamp(28px, 4.6vw, 40px);
  line-height:1.25;
  color: var(--ink);
  margin:0 0 10px;
}
.lead{
  font-size: 17px;
  color: var(--muted);
  max-width: 58ch;
}
.actions{
  display:flex; gap:12px;
  margin:18px 0 6px;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  background: var(--brand);
  color: var(--brand-ink);
  padding:12px 22px;
  border-radius: 999px;
  font-weight: 600;
  border:none;
  cursor:pointer;
  transition: all .18s ease;
}
.btn.ghost{
  background: transparent;
  border:1px solid rgba(63,50,44,0.18);
  color: var(--ink);
}
.btn:hover{
  filter:brightness(1.05);
  box-shadow: 0 6px 18px rgba(63,50,44,0.18);
}
.trust{
  display:flex; gap:10px;
  list-style:none;
  padding:0; margin:16px 0 0;
  flex-wrap:wrap;
}
.trust li{
  padding:6px 12px;
  background:#faf5f1;
  border-radius:999px;
  color: var(--muted);
  font-size:13px;
  border:1px solid rgba(63,50,44,0.08);
}

/* Sections */

.features,
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space);
  padding: var(--space);
  max-width:1100px;
  margin: 0 auto;
}
.features article,
.card{
  background: var(--panel);
  border:1px solid rgba(63,50,44,0.06);
  padding: var(--space);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(63,50,44,0.04);
  color: var(--muted);
}
.features h2,
.card h3{
  font-family: "Playfair Display", "Open Sans", serif;
  color: var(--ink);
  margin-top:0;
}
.card .price-inline{
  font-weight:600;
  color: var(--brand-ink);
}
.card .more{
  display:inline-block;
  margin-top:8px;
  font-weight:600;
  color: var(--brand-ink);
}

/* Reviews */

.reviews{
  max-width:900px;
  margin: 10px auto 0;
  padding: var(--space);
}
.reviews h2{
  font-family: "Playfair Display", "Open Sans", serif;
  color: var(--ink);
}
#google-reviews{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  border:1px dashed rgba(63,50,44,0.18);
  background:#fdf8f4;
  font-size:14px;
  color:var(--muted);
}

/* CTA */

.cta.wide{
  margin: 8vh auto;
  text-align:center;
  padding: calc(var(--space)*2);
  background: var(--panel);
  border:1px solid rgba(63,50,44,0.10);
  border-radius: 26px;
  max-width:1100px;
  box-shadow: 0 12px 30px rgba(63,50,44,0.10);
}
.booking-wrapper{
  text-align:left;
  max-width:900px;
  margin:16px auto 0;
  color: var(--muted);
}

/* Page generic */

.page{
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space);
}
.page h1{
  font-family: "Playfair Display", "Open Sans", serif;
  font-size: clamp(26px, 4vw, 34px);
  margin-top:10px;
  color: var(--ink);
}
.price{
  font-weight:700;
  background:#fdf8f4;
  border:1px solid rgba(63,50,44,0.10);
  padding:8px 14px;
  border-radius:999px;
  display:inline-block;
  margin:8px 0 14px;
}
.note{
  border-left:4px solid var(--brand);
  background:#fdf8f4;
  padding:10px 12px;
  border-radius:10px;
  color:#8f7a6c;
  margin-top:20px;
}
.check{
  columns:2;
  gap: 28px;
  padding-left:18px;
}
.check li{margin: 8px 0}

/* Contact */

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space);
  margin-top: var(--space);
}
.contact-grid form{
  display:grid;
  gap:10px;
  background: var(--panel);
  border:1px solid rgba(63,50,44,0.10);
  padding: var(--space);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(63,50,44,0.06);
}
label{
  display:grid;
  gap:6px;
  font-weight:600;
  color: var(--ink);
}
input, textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(63,50,44,0.18);
  background:#fffaf6;
  color:var(--ink);
}
input:focus, textarea:focus{
  outline:2px solid var(--ring);
  outline-offset:2px;
}
.form-note{
  color:#8f7a6c;
  font-size: 13px;
}

@media (max-width: 820px){
  .contact-grid{grid-template-columns: 1fr}
}

/* Footer */

.site-footer{
  padding: calc(var(--space)*1.5) var(--space) var(--space);
  background:#f0e4da;
  border-top:1px solid rgba(63,50,44,0.12);
  margin-top: var(--space);
}
.footer-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: var(--space);
  max-width:1100px;
  margin:0 auto;
}
.site-footer h3{
  margin:0 0 8px;
  color: var(--ink);
}
.site-footer ul{
  list-style:none;
  padding:0;
  margin:0;
  color: var(--muted);
}
.site-footer a{color: var(--brand-ink);}
.copy{
  text-align:center;
  margin-top: var(--space);
  color: #8f7a6c;
  font-size: 13px;
}
.about-photo {
  text-align: center;
  margin-bottom: 28px;
}

.about-photo img {
  max-width: 260px;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(63, 50, 44, 0.15);
}
/* Zarovnání sekce rezervace na střed */
.cta.wide {
  text-align: center;
}

/* Ujistíme se, že obal tlačítka i tlačítko samotné jsou vystředěné */
.cta.wide .booking-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.cta.wide .btn {
  display: inline-block;
  margin: 0 auto;
}
/* Barva a styl podnadpisu v úvodní části */
.subtitle {
  color: #6E4F40;
  font-size: 1.55rem;
  margin-top: 0.75rem;
  font-weight: 400;
}
/* Jemná louka v pozadí na podstránkách */
body.meadow {
  position: relative;
  z-index: 0;
  background: var(--bg);
}

body.meadow::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(246,241,236,0.7), rgba(246,241,236,0.98)),
    url("https://png.pngtree.com/thumb_back/fh260/background/20250120/pngtree-soft-focus-nature-background-with-dreamy-springtime-meadow-and-yellow-wildflowers-image_16882095.jpg") center/cover no-repeat;
  opacity: 0.6;
  filter: brightness(1.03) saturate(1.05);
  pointer-events: none;
  z-index: -1;
}
/* Styl mapy na stránce Kontakt */
.map-container iframe {
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12);
}
.about-photo {
  width: 320px;          /* větší šířka = vyváží text */
  height: 320px;         /* zachová kulatý tvar */
  border-radius: 50%;
  object-fit: cover;
  object-position: center 8%;
  float: right;
  margin: 0 0 0.5rem 2rem;   /* menší mezera dole, víc místa nahoře */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  shape-outside: circle();  /* kouzlo – text bude obtékat přesně podle kruhu */
}