/* =========================================================
   SVOBODA NÁBYTEK — Japandi design system (mockup)
   Teplý minimalismus, nadčasová typografie
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* Paleta */
  --bg:        #F7F2EA;   /* teplá off-white */
  --bg-2:      #EFE7DA;   /* sekce */
  --surface:   #FFFFFF;
  --ink:       #2A2420;   /* teplá tmavá */
  --ink-soft:  #6B6258;   /* muted text */
  --wood:      #9C7A57;   /* dřevo akcent */
  --wood-deep: #7A5C40;
  --line:      #E3D8C7;   /* jemné linky */
  --clay:      #B5764F;   /* terakotový akcent */

  --maxw: 1280px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --radius: 2px;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; line-height:1.1; letter-spacing:-0.01em; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,3.5rem); }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--clay);
  font-weight:500;
  display:inline-block;
  margin-bottom:1.1rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:1rem 2rem; border-radius:var(--radius);
  border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  cursor:pointer; transition:.35s ease;
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--bg); }
.btn--light{ background:var(--bg); color:var(--ink); border-color:var(--bg); }
.btn--light:hover{ background:transparent; color:var(--bg); border-color:var(--bg); }

.link-arrow{
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  display:inline-flex; align-items:center; gap:.5rem; color:var(--ink);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:.3s;
}
.link-arrow:hover{ border-color:var(--ink); gap:.85rem; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,242,234,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
/* horní informační lišta nad menu */
.topbar-strip{ background:var(--ink); color:#CFC3B2; font-size:.8rem; }
.topbar-strip .container{ display:flex; align-items:center; justify-content:space-between; min-height:40px; padding-block:.4rem; }
.ts-tag{ letter-spacing:.06em; }
.ts-contacts{ display:flex; gap:1.6rem; }
.ts-contacts a{ color:#E9D9C4; font-weight:500; transition:.25s; }
.ts-contacts a:hover{ color:#FFF8EE; }

.nav{ display:flex; align-items:center; justify-content:space-between; height:84px; }
.brand{ font-family:var(--serif); font-size:1.45rem; letter-spacing:.02em; line-height:1; }
.brand-name{ display:block; white-space:nowrap; }
.brand-sub{ display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); margin-top:5px; }
.nav-links{ display:flex; gap:clamp(1.1rem,1.9vw,2.1rem); list-style:none; }
.nav-links a{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--ink-soft); transition:.25s; position:relative; padding-bottom:4px; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--clay); }
.nav-cta{ display:flex; align-items:center; gap:1.1rem; flex:none; }
.nav-phone{ font-size:.85rem; font-weight:500; letter-spacing:.02em; white-space:nowrap; }
.nav nav{ flex:1; display:flex; justify-content:center; margin-inline:clamp(1.5rem,4vw,3.5rem); }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.burger span{ width:26px; height:1.5px; background:var(--ink); transition:.3s; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; }
.hero-media{ position:relative; height:clamp(520px,82vh,820px); overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,15,10,.15) 0%,rgba(20,15,10,.05) 40%,rgba(20,15,10,.45) 100%); }
.hero-overlay{ position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; }
.hero-overlay .container{ padding-bottom:clamp(2.5rem,6vw,5rem); }
.hero-overlay .eyebrow{ color:#E9D9C4; }
.hero h1{ color:#FFF8EE; font-size:clamp(2.6rem,6.5vw,5.4rem); max-width:18ch; font-weight:300; }
.hero p{ color:#F0E6D8; max-width:46ch; margin-top:1.4rem; font-size:1.05rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem; }

/* =========================================================
   SECTION primitives
   ========================================================= */
.section{ padding-block:clamp(4.5rem,9vw,8rem); }
.section--alt{ background:var(--bg-2); }
.section--ink{ background:var(--ink); color:var(--bg); }
.section--ink .eyebrow{ color:var(--clay); }
.section-head{ max-width:62ch; }
.section-head h2{ font-size:clamp(2rem,4.4vw,3.4rem); font-weight:300; }
.section-head p{ color:var(--ink-soft); margin-top:1.2rem; font-size:1.05rem; }
.section--ink .section-head p{ color:#C9BEAE; }
.center{ text-align:center; margin-inline:auto; }

/* =========================================================
   CATEGORIE GRID
   ========================================================= */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.5rem); margin-top:clamp(2.5rem,5vw,4rem); }
.cat-card{ position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:var(--radius); display:block; }
.cat-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.8,.2,1); }
.cat-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,15,10,0) 35%,rgba(20,15,10,.72) 100%); transition:.4s; }
.cat-card:hover img{ transform:scale(1.06); }
.cat-card-body{ position:absolute; left:0; bottom:0; z-index:2; padding:1.6rem 1.8rem; width:100%; }
.cat-card-body h3{ color:#FFF8EE; font-size:1.5rem; }
.cat-card-body span{ display:inline-flex; align-items:center; gap:.5rem; color:#E9D9C4; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin-top:.5rem; opacity:0; transform:translateY(6px); transition:.4s; }
.cat-card:hover .cat-card-body span{ opacity:1; transform:translateY(0); }

/* feature split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split--reverse .split-media{ order:2; }
.split-media{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-body h2{ font-size:clamp(1.9rem,3.6vw,3rem); font-weight:300; }
.split-body p{ color:var(--ink-soft); margin-top:1.2rem; }
.split-body .btn, .split-body .link-arrow{ margin-top:1.8rem; }

/* =========================================================
   PROCES
   ========================================================= */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem); margin-top:clamp(2.5rem,5vw,4rem); }
.step .num{ font-family:var(--serif); font-size:2.6rem; color:var(--wood); line-height:1; }
.step h3{ font-size:1.25rem; margin:.9rem 0 .5rem; }
.step p{ color:var(--ink-soft); font-size:.96rem; }
.section--ink .step p{ color:#C9BEAE; }
.section--ink .step .num{ color:var(--clay); }
.step{ border-top:1px solid var(--line); padding-top:1.4rem; }
.section--ink .step{ border-color:rgba(255,255,255,.14); }

/* =========================================================
   STATY
   ========================================================= */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat .n{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,3.8rem); font-weight:300; color:var(--wood); line-height:1; }
.stat .l{ color:var(--ink-soft); font-size:.9rem; letter-spacing:.04em; margin-top:.6rem; }

/* =========================================================
   REFERENCE / quote
   ========================================================= */
.quote{ max-width:30ch; margin-inline:auto; text-align:center; }
.quote blockquote{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.3rem); font-weight:300; line-height:1.3; max-width:24ch; margin:0 auto; }
.quote cite{ display:block; margin-top:1.6rem; font-style:normal; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }

/* =========================================================
   CAROUSEL RECENZÍ
   ========================================================= */
.carousel{ position:relative; max-width:900px; margin:0 auto; }
.carousel-viewport{ overflow:hidden; }
.carousel-track{ display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.review{ flex:0 0 100%; padding:0 clamp(1rem,4vw,3.5rem); text-align:center; }
.review blockquote{ font-family:var(--serif); font-size:clamp(1.4rem,2.8vw,2.1rem); font-weight:300; line-height:1.4; }
.review .stars{ color:var(--clay); letter-spacing:.2em; margin-bottom:1.4rem; font-size:1rem; }
.review cite{ display:block; margin-top:1.6rem; font-style:normal; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.car-btn{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer; transition:.25s; display:flex; align-items:center; justify-content:center; }
.car-btn:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.car-prev{ left:-8px; }
.car-next{ right:-8px; }
.car-dots{ display:flex; gap:.6rem; justify-content:center; margin-top:2.5rem; }
.car-dot{ width:8px; height:8px; border-radius:50%; border:none; background:var(--line); cursor:pointer; transition:.25s; padding:0; }
.car-dot.active{ background:var(--clay); transform:scale(1.3); }
@media (max-width:760px){ .car-prev{ left:-4px; } .car-next{ right:-4px; } .car-btn{ width:38px; height:38px; } }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(2rem,4.5vw,3.4rem); font-weight:300; max-width:20ch; margin:0 auto; }
.cta-band p{ color:#C9BEAE; margin:1.2rem auto 2.2rem; max-width:44ch; }

/* =========================================================
   PAGE HEADER (podstránky)
   ========================================================= */
.page-hero{ position:relative; height:clamp(360px,52vh,560px); overflow:hidden; }
.page-hero img{ width:100%; height:100%; object-fit:cover; }
.page-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,15,10,.25),rgba(20,15,10,.55)); }
.page-hero-body{ position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; }
.page-hero-body .container{ padding-bottom:clamp(2rem,5vw,4rem); }
.page-hero h1{ color:#FFF8EE; font-size:clamp(2.4rem,5.5vw,4.4rem); font-weight:300; }
.page-hero .eyebrow{ color:#E9D9C4; }
.breadcrumb{ font-size:.8rem; letter-spacing:.08em; color:#E9D9C4; margin-top:1rem; }
.breadcrumb a:hover{ color:#fff; }

/* prose */
.prose{ max-width:66ch; }
.prose p{ color:var(--ink-soft); margin-bottom:1.2rem; }
.prose p.lead{ font-size:1.2rem; color:var(--ink); }

/* feature list */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin-top:1rem; }
.feature{ border-top:1px solid var(--line); padding-top:1.2rem; }
.feature h3{ font-size:1.15rem; margin-bottom:.5rem; }
.feature p{ color:var(--ink-soft); font-size:.95rem; }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.8rem,1.6vw,1.4rem); }
.gallery img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius); }
.gallery .g-tall{ grid-column:span 6; aspect-ratio:3/4; }
.gallery .g-wide{ grid-column:span 6; aspect-ratio:3/2; }
.gallery .g-third{ grid-column:span 4; aspect-ratio:1; }
.gallery .g-full{ grid-column:span 12; aspect-ratio:21/9; }

/* other-cats strip */
.cat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.5rem; }
.cat-strip a{ position:relative; aspect-ratio:1; overflow:hidden; border-radius:var(--radius); }
.cat-strip img{ width:100%; height:100%; object-fit:cover; transition:.8s; }
.cat-strip a:hover img{ transform:scale(1.07); }
.cat-strip span{ position:absolute; inset:auto 0 0 0; padding:1rem; color:#FFF8EE; font-family:var(--serif); font-size:1.1rem; background:linear-gradient(180deg,transparent,rgba(20,15,10,.7)); }

/* =========================================================
   KONTAKT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); }
.contact-info dt{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--clay); margin-bottom:.3rem; }
.contact-info dd{ font-size:1.15rem; margin-bottom:1.8rem; }
.field{ margin-bottom:1.3rem; }
.field label{ display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem; }
.field input,.field textarea{ width:100%; padding:.95rem 1.1rem; font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); transition:.25s; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--wood); }
.map{ aspect-ratio:21/9; background:var(--bg-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); border-radius:var(--radius); margin-top:2.5rem; }

/* hláška u formuláře */
.form-note{ padding:1rem 1.2rem; border-radius:var(--radius); border:1px solid var(--line); margin-bottom:1.6rem; font-size:.95rem; }
.form-note--ok{ background:#EEF3E9; border-color:#C6D6B5; color:#42612C; }
.form-note--err{ background:#FBEDE8; border-color:#E6C3B6; color:#A24B33; }
.form-note ul{ margin:0; padding-left:1.1rem; }
.form-note li{ margin:.2rem 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ink); color:#C9BEAE; padding-block:clamp(3.5rem,6vw,5rem) 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.footer-brand{ font-family:var(--serif); font-size:1.6rem; color:#FFF8EE; }
.footer-brand p{ font-family:var(--sans); font-size:.95rem; margin-top:1rem; max-width:34ch; }
.footer-col h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:#FFF8EE; margin-bottom:1.1rem; }
.footer-col ul{ list-style:none; display:grid; gap:.6rem; }
.footer-col a{ font-size:.95rem; transition:.25s; }
.footer-col a:hover{ color:#FFF8EE; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12); font-size:.82rem; color:#8E847A; }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .nav-phone{ display:none; } /* uvolní místo, ať se menu nebije s tlačítkem */
}
@media (max-width:980px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .steps,.stats{ grid-template-columns:repeat(2,1fr); }
  .features{ grid-template-columns:repeat(2,1fr); }
  .cat-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav-links,.nav-phone{ display:none; }
  .burger{ display:flex; }
  .nav-links.open{ display:flex; position:absolute; top:84px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:1rem 0; }
  .nav-links.open li{ padding:.4rem clamp(1.25rem,5vw,3.5rem); }
  .cat-grid{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .split--reverse .split-media{ order:0; }
  .contact-grid{ grid-template-columns:1fr; }
  .gallery .g-tall,.gallery .g-wide{ grid-column:span 12; }
  .gallery .g-third{ grid-column:span 6; }
}
@media (max-width:600px){
  .topbar-strip .container{ justify-content:center; }
  .ts-tag{ display:none; }
  .ts-contacts{ gap:1rem; font-size:.78rem; }
}
@media (max-width:520px){
  .cat-grid{ grid-template-columns:1fr; }
  .steps,.stats,.features,.cat-strip{ grid-template-columns:1fr; }
}