/* ==========================================================================
   Roubenka Dřevíkov – Veselý Kopec
   Design: dřevěná roubenka na Vysočině / v Železných horách — teplá, hebká,
   ručně tesaná typografie, dřevité barvy, klidné asymetrické bloky.
   ========================================================================== */

:root{
  --cream:      #F4EEDF;   /* plátno stránky */
  --paper:      #FBF8F0;   /* karty / světlé plochy */
  --bark:       #2A2117;   /* skoro černá, tmavé dřevo */
  --timber:     #6B4A2E;   /* středně hnědá, nadpisy */
  --timber-dk:  #4A311D;
  --moss:       #4C5A38;   /* lesní zelená, druhý akcent */
  --ember:      #AB4A2C;   /* cihlová/oheň z kamen, CTA */
  --ember-dk:   #8F3B22;
  --gold:       #C79A4B;   /* med / sláma, detaily */
  --line:       #D9CBA6;   /* hairline na krému */
  --line-dark:  rgba(42,33,23,.14);
  --ink:        #2A2117;
  --ink-soft:   #5B4E3E;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Karla", "Segoe UI", Arial, sans-serif;

  --maxw: 1180px;
}

/* -------------------------------------------------- alternating tone backgrounds (v2) */
:root{
  --tone-a: var(--cream);          /* plátno */
  --tone-b: #ECE2C4;                /* teplejší med */
  --tone-c: #E4E6D4;                /* studenější mech */
  --tone-d: #F3E9DA;                /* timber pudr */
}
.tone-a{ background:var(--tone-a); }
.tone-b{ background:linear-gradient(160deg, var(--tone-b), #E9DCB4 70%); }
.tone-c{ background:linear-gradient(160deg, var(--tone-c), #D9DEC4 70%); }
.tone-d{ background:linear-gradient(160deg, var(--tone-d), #EADFC8 70%); }
.tone-b, .tone-c, .tone-d{
  background-size:220% 220%;
  animation:tone-drift 22s ease-in-out infinite alternate;
}
@keyframes tone-drift{
  0%{ background-position:0% 30%; }
  100%{ background-position:100% 70%; }
}
@media (prefers-reduced-motion: reduce){
  .tone-b, .tone-c, .tone-d{ animation:none; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--timber-dk);
  margin:0 0 .4em;
  font-weight:600;
  letter-spacing:.002em;
}
h1{ font-size:clamp(2.6rem,5vw,4.1rem); line-height:1.04; font-weight:560; }
h2{ font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.16; }
h3{ font-size:1.28rem; }
p{ margin:0 0 1em; max-width:62ch; color:var(--ink-soft); }
.lede{ font-size:1.18rem; color:var(--ink-soft); }

.tag{
  display:inline-block;
  font-family:var(--serif);
  font-style:italic;
  color:var(--ember);
  font-size:1.02rem;
  margin-bottom:.6em;
}

/* -------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans);
  font-weight:700;
  font-size:.98rem;
  padding:.85em 1.6em;
  border-radius:3px;
  border:1.5px solid var(--ember);
  background:var(--ember);
  color:var(--paper);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ background:var(--ember-dk); border-color:var(--ember-dk); }
.btn.ghost{
  background:transparent; color:var(--timber-dk); border-color:var(--timber-dk);
}
.btn.ghost:hover{ background:var(--timber-dk); color:var(--paper); }
.btn.on-dark{ border-color:var(--gold); background:var(--gold); color:var(--bark); }
.btn.on-dark:hover{ background:#dcb469; border-color:#dcb469; }

/* -------------------------------------------------- header */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(244,238,223,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-dark);
}
.nav{
  max-width:var(--maxw); margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:38px; height:38px; flex:none;
  border-radius:50%;
  background:var(--timber-dk);
  color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; font-size:1.1rem;
}
.brand-name{ font-family:var(--serif); font-size:1.18rem; color:var(--timber-dk); line-height:1.1; }
.brand-name small{ display:block; font-family:var(--sans); font-size:.68rem; letter-spacing:.04em; color:var(--ink-soft); font-weight:600; }

nav.links{ display:flex; align-items:center; gap:28px; }
nav.links a{
  font-size:.97rem; font-weight:600; color:var(--ink-soft);
  padding:4px 0; border-bottom:2px solid transparent;
}
nav.links a:hover, nav.links a[aria-current="page"]{ color:var(--timber-dk); border-color:var(--ember); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-tel{ font-weight:700; color:var(--timber-dk); white-space:nowrap; }

.burger{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.burger span{ display:block; width:26px; height:2px; background:var(--bark); margin:5px 0; }

/* -------------------------------------------------- hero (v2: automatický slider / smyčka) */
.hero{
  position:relative; min-height:78vh;
  display:flex; align-items:flex-end;
  background:var(--bark);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.86;
}
.hero-slide{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0;
  animation-name:hero-fade, hero-kenburns;
  animation-duration:18s, 18s;
  animation-timing-function:ease-in-out, ease-in-out;
  animation-iteration-count:infinite, infinite;
}
.hero-slide img{ width:100%; height:100%; object-fit:cover; opacity:.86; }
/* 3 slides, staggered so exactly one is visible at a time on an 18s loop */
.hero-slide:nth-child(1){ animation-delay:0s, 0s; }
.hero-slide:nth-child(2){ animation-delay:-6s, -6s; }
.hero-slide:nth-child(3){ animation-delay:-12s, -12s; }
@keyframes hero-fade{
  0%, 2%{ opacity:0; }
  8%, 30%{ opacity:1; }
  36%, 100%{ opacity:0; }
}
@keyframes hero-kenburns{
  0%{ transform:scale(1.02); }
  100%{ transform:scale(1.14); }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{ animation:none; opacity:0; }
  .hero-slide:first-child{ opacity:1; }
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(20,14,8,.86) 0%, rgba(20,14,8,.28) 46%, rgba(20,14,8,.12) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding:0 32px 64px; max-width:var(--maxw); margin:0 auto; }
.hero .tag{ color:var(--gold); }
.hero h1{ color:#FBF6EA; margin-bottom:.3em; }
.hero p.lede{ color:#EBE2CB; max-width:52ch; }
.hero-cta{ display:flex; gap:14px; margin-top:1.6em; flex-wrap:wrap; }
.hero-sub{
  min-height:44vh;
}

/* small page-header (non-home hero) */
.page-hero{ min-height:42vh; }
.page-hero .hero-inner{ padding-bottom:48px; }

/* -------------------------------------------------- sections */
section{ padding:88px 0; }
section.tight{ padding:56px 0; }
.section-head{ max-width:640px; margin-bottom:2.6em; }
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.split.rev .col-text{ order:2; }
.split.rev .col-img{ order:1; }
.col-img img{ width:100%; border-radius:3px; }
.frame{ position:relative; }
.frame::before{
  content:""; position:absolute; top:18px; left:-18px; right:18px; bottom:-18px;
  border:1.5px solid var(--gold); border-radius:3px; z-index:-1;
}

.stat-row{ display:flex; gap:40px; margin-top:1.8em; flex-wrap:wrap; }
.stat b{ display:block; font-family:var(--serif); font-size:1.9rem; color:var(--ember); }
.stat span{ font-size:.86rem; color:var(--ink-soft); }

hr.rule{
  border:0; border-top:1px solid var(--line);
  max-width:var(--maxw); margin:0 auto;
}

/* on-dark section (contact strip, cta band) */
.band-dark{ background:var(--bark); color:#EFE7D4; }
.band-dark h2, .band-dark h3{ color:#FBF6EA; }
.band-dark p{ color:#CFC3A6; }
.band-dark .tag{ color:var(--gold); }

/* -------------------------------------------------- cards: apartments */
.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.acard{
  background:var(--paper); border:1px solid var(--line-dark); border-radius:3px;
  overflow:hidden; display:flex; flex-direction:column;
}
.acard .img{ aspect-ratio:4/3; overflow:hidden; }
.acard .img img{ width:100%; height:100%; object-fit:cover; }
.acard .body{ padding:24px 26px 28px; flex:1; display:flex; flex-direction:column; }
.acard h3{ margin-bottom:.3em; }
.acard .meta{ font-size:.88rem; color:var(--moss); font-weight:700; margin-bottom:.8em; }
.acard p{ font-size:.95rem; margin-bottom:1.2em; }
.acard .btn{ margin-top:auto; align-self:flex-start; padding:.6em 1.3em; font-size:.88rem; }

/* -------------------------------------------------- feature list (zázemí) */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.feat{ border-top:2px solid var(--ember); padding-top:18px; }
.feat .num{ font-family:var(--serif); font-style:italic; color:var(--gold); font-size:1rem; }
.feat h4{ margin:.3em 0 .4em; font-size:1.08rem; }
.feat p{ font-size:.93rem; margin:0; }

/* -------------------------------------------------- masonry-ish gallery teaser */
.gal-teaser{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:10px;
}
.gal-teaser a{ overflow:hidden; border-radius:2px; }
.gal-teaser img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gal-teaser a:hover img{ transform:scale(1.05); }
.gal-teaser .tall{ grid-row:span 2; }

/* full gallery grid */
.gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gal-grid figure{ margin:0; border-radius:2px; overflow:hidden; background:var(--line); }
.gal-grid img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; cursor:zoom-in; transition:transform .4s ease; }
.gal-grid img:hover{ transform:scale(1.035); }
.gal-cat{ margin-bottom:20px; }
.gal-cat h3{ margin-bottom:.9em; }

/* lightbox */
#lightbox{
  position:fixed; inset:0; background:rgba(20,14,8,.94); display:none;
  align-items:center; justify-content:center; z-index:200; padding:5vh 5vw;
}
#lightbox.open{ display:flex; }
#lightbox img{ max-width:100%; max-height:88vh; border-radius:2px; }
#lightbox .lb-close{
  position:absolute; top:22px; right:28px; color:#EFE7D4; font-size:2rem;
  background:none; border:0; cursor:pointer; line-height:1;
}

/* -------------------------------------------------- photo slider (v2) */
.slider{ position:relative; }
.slider-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; scrollbar-width:none;
}
.slider-track::-webkit-scrollbar{ display:none; }
.slider-track figure{
  flex:0 0 78%; max-width:520px; margin:0; scroll-snap-align:center;
  border-radius:3px; overflow:hidden; background:var(--line); aspect-ratio:4/3;
}
.slider-track img{ width:100%; height:100%; object-fit:cover; }
.slider-nav{
  display:flex; justify-content:flex-end; gap:10px; margin-top:14px;
}
.slider-nav button{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--timber-dk);
  background:transparent; color:var(--timber-dk); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease;
}
.slider-nav button:hover{ background:var(--timber-dk); color:var(--paper); }
@media (max-width:720px){
  .slider-track figure{ flex-basis:88%; }
}

/* -------------------------------------------------- testimonial / quote */
.quote{
  font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--timber-dk);
  max-width:760px; line-height:1.4;
}

/* -------------------------------------------------- okoli list */
.around-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.around-item{ padding:20px 0; border-bottom:1px solid var(--line); display:flex; gap:18px; align-items:flex-start; }
.around-item .dist{ font-family:var(--serif); color:var(--ember); font-size:1.05rem; white-space:nowrap; min-width:70px; }
.around-item h4{ margin:0 0 .25em; font-size:1.02rem; }
.around-item p{ margin:0; font-size:.92rem; }

/* -------------------------------------------------- pricing table */
.price-table{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line-dark); }
.price-table th, .price-table td{ padding:16px 20px; text-align:left; border-bottom:1px solid var(--line-dark); font-size:.96rem; }
.price-table th{ font-family:var(--serif); font-weight:600; color:var(--timber-dk); background:#EFE6CF; }
.price-table tr:last-child td{ border-bottom:0; }
.price-note{
  margin-top:18px; padding:16px 20px; background:#EFE6CF; border-left:3px solid var(--ember);
  font-size:.92rem; color:var(--ink-soft); border-radius:0 2px 2px 0;
}
.price-note strong{ color:var(--timber-dk); }

/* -------------------------------------------------- contact */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; }
.contact-info dl{ margin:1.6em 0 0; }
.contact-info dt{ font-size:.8rem; text-transform:none; letter-spacing:.02em; color:var(--gold); font-weight:700; margin-top:1.2em; }
.contact-info dd{ margin:.15em 0 0; font-size:1.06rem; color:#FBF6EA; }
.map-frame{ border-radius:3px; overflow:hidden; border:1px solid var(--line-dark); }
.map-frame iframe{ width:100%; height:340px; border:0; display:block; }

form.cform{ background:var(--paper); padding:32px; border-radius:3px; border:1px solid var(--line-dark); }
form.cform label{ display:block; font-size:.85rem; font-weight:700; color:var(--timber-dk); margin:1em 0 .4em; }
form.cform label:first-child{ margin-top:0; }
form.cform input, form.cform textarea{
  width:100%; padding:.75em .9em; border:1px solid var(--line-dark); border-radius:2px;
  font-family:var(--sans); font-size:.98rem; background:#fff; color:var(--ink);
}
form.cform textarea{ min-height:120px; resize:vertical; }
form.cform button{ margin-top:1.4em; width:100%; justify-content:center; border-radius:2px; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:1em; }

/* -------------------------------------------------- availability calendar embed (eChalupy.cz) */
.cal-embed{
  background:var(--paper); border:1px solid var(--line-dark); border-radius:4px;
  padding:8px; overflow:hidden;
}
.cal-embed iframe{ border-radius:2px; }
.cal-embed-placeholder{
  padding:48px 32px; text-align:center; border:1.5px dashed var(--line-dark); border-radius:2px;
}
.cal-embed-placeholder strong{ display:block; font-family:var(--serif); font-size:1.15rem; color:var(--timber-dk); margin-bottom:.5em; }
.cal-embed-placeholder p{ margin:0 auto; max-width:48ch; font-size:.92rem; }
.cal-month-select{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background:var(--paper); border:1.5px solid var(--ember); border-radius:3px;
  padding:10px 16px; margin-bottom:12px;
}
.cal-month-select label{ font-weight:700; color:var(--timber-dk); font-size:.9rem; }
.cal-month-select select{
  font-family:var(--sans); font-size:.94rem; padding:.4em .7em;
  border:1px solid var(--line-dark); border-radius:2px; background:#fff; color:var(--ink);
}
@media (max-width:720px){
  .cal-embed iframe{ min-height:520px !important; }
}

/* -------------------------------------------------- footer */
footer.site{ background:var(--bark); color:#C9BE9F; padding:64px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; margin-bottom:48px; }
.foot-grid h4{ color:#FBF6EA; font-size:.98rem; margin-bottom:1em; }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6em; font-size:.93rem; }
.foot-grid p{ color:#B7AB8B; font-size:.93rem; }
.foot-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.foot-brand .brand-mark{ background:var(--gold); color:var(--bark); }
.foot-brand span{ font-family:var(--serif); font-size:1.2rem; color:#FBF6EA; }
.social a{ margin-right:14px; font-size:.9rem; font-weight:700; color:#DCCFA9; }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color:#8B7F63;
}

/* -------------------------------------------------- breadcrumb-ish page tag */
.crumb{ font-size:.85rem; color:var(--ink-soft); margin-bottom:1.4em; }
.crumb a{ color:var(--ember); font-weight:700; }

/* -------------------------------------------------- responsive */
@media (max-width:980px){
  .split, .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .split.rev .col-text, .split.rev .col-img{ order:0; }
  .cards3{ grid-template-columns:1fr 1fr; }
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .gal-teaser{ grid-template-columns:repeat(2,1fr); }
  .around-list{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  nav.links{ display:none; }
  .burger{ display:block; }
  .nav-tel{ display:none; }
  .cards3{ grid-template-columns:1fr; }
  .feat-grid{ grid-template-columns:1fr; }
  .gal-grid{ grid-template-columns:1fr 1fr; }
  section{ padding:56px 0; }
  .foot-grid{ grid-template-columns:1fr; }
  .wrap{ padding:0 20px; }
  .nav{ padding:14px 20px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .gal-teaser img, .gal-grid img{ transition:none; }
}