/* =========================================================
   VALCOM WOOD — style.css
   Nadpisy: Lora (serif) · Texty: Inter (sans)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --brown:#453a30;        /* tmavě hnědá (footer blok, overlay, tlačítka) */
  --brown-deep:#382f26;
  --cream:#f0ebe4;        /* světlé sekce */
  --cream-2:#f7f4ef;
  --ink:#2e2620;          /* tmavý text */
  --muted:#7d746a;        /* šedohnědý text */
  --line:#ddd5ca;
  --white:#ffffff;
  --serif:"Lora",Georgia,serif;
  --sans:"Inter",-apple-system,"Segoe UI",Arial,sans-serif;
  --maxw:1240px;
}

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

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

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

.inner{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ---------- Tlačítka ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 28px;border:1px solid transparent;transition:.2s;
}
.btn--light{background:var(--cream-2);color:var(--ink);}
.btn--light:hover{background:#fff;}
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);}
.btn--outline:hover{background:rgba(255,255,255,.12);}
.btn--dark{background:var(--brown);color:#fff;}
.btn--dark:hover{background:var(--brown-deep);}

/* ---------- Header ---------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:10;
  padding:28px 0;
}
.site-header .inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo img{height:36px;width:auto;display:block;}
.nav{display:flex;align-items:center;gap:34px;}
.nav a{
  color:#fff;font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  opacity:.9;transition:.15s;
}
.nav a:hover{opacity:1;}
.header-right{display:flex;align-items:center;gap:26px;}
.lang{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;color:#fff;}
.lang a{opacity:.55;transition:.15s;}
.lang a:hover{opacity:1;}
.lang a.is-active{opacity:1;font-weight:600;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:640px;
  display:flex;align-items:center;
  isolation:isolate;
  padding:140px 0 90px;
}
.hero .inner{width:100%;}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(26,20,14,.6) 0%,rgba(26,20,14,.25) 140px,rgba(26,20,14,0) 280px),
    linear-gradient(90deg,rgba(26,20,14,.82) 0%,rgba(26,20,14,.6) 42%,rgba(28,21,15,.3) 65%,rgba(28,21,15,.12) 100%);
}
.hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:52px;line-height:1.12;color:#fff;
  max-width:560px;margin-bottom:26px;
}
.hero p{
  color:#eee7dd;font-size:16px;line-height:1.6;
  max-width:440px;margin-bottom:36px;
}
.hero-actions{display:flex;align-items:center;gap:28px;}

/* ---------- Výhody ---------- */
.benefits{background:var(--cream);padding:64px 0;}
.benefits-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  text-align:center;
}
.benefit .b-icon{
  width:44px;height:44px;margin:0 auto 18px;
  color:var(--brown);
}
.benefit .b-icon svg{width:100%;height:100%;}
.benefit h3{
  font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:10px;
}
.benefit p{font-size:13.5px;color:var(--muted);max-width:230px;margin:0 auto;}

/* ---------- Služby / galerie ---------- */
.services{padding:96px 0;}
.services-grid{
  display:grid;
  grid-template-columns:260px repeat(4,1fr);
  gap:28px;
  align-items:start;
}
.services-intro h2{
  font-family:var(--serif);font-weight:500;
  font-size:30px;line-height:1.2;margin-bottom:20px;
}
.services-intro p{font-size:14px;color:var(--muted);line-height:1.65;}
.service img{width:100%;aspect-ratio:322/432;object-fit:cover;}
.service figcaption{
  margin-top:16px;
  font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.6;
}

/* ---------- Řemeslo banner ---------- */
.craft{
  position:relative;isolation:isolate;
  padding:110px 0;
}
.craft-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;}
/* Levá část plnou hnědou — kryje zapečený text v mockup fotce
   a zároveň odpovídá vzhledu návrhu (solidní hnědý blok vlevo). */
.craft-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#40352a 0%,#40352a 42%,rgba(64,53,42,.65) 62%,rgba(64,53,42,.15) 100%);
}
.craft h2{
  font-family:var(--serif);font-weight:500;
  font-size:34px;line-height:1.2;color:#fff;
  max-width:340px;margin-bottom:24px;
}
.craft p{
  color:#eee7dd;font-size:15px;line-height:1.7;
  max-width:340px;
}

/* ---------- Pro koho / kontakt ---------- */
.audience{background:var(--cream);}
.audience .inner{
  display:grid;
  grid-template-columns:170px 1fr 320px;
  gap:48px;
  align-items:stretch;
}
.audience-title{padding:72px 0;}
.audience-title h2{
  font-family:var(--serif);font-weight:500;
  font-size:30px;line-height:1.25;
}
.audience-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  text-align:center;padding:72px 0;
}
.aud .b-icon{width:40px;height:40px;margin:0 auto 16px;color:var(--brown);}
.aud .b-icon svg{width:100%;height:100%;}
.aud h3{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:8px;line-height:1.6;
}
.aud p{font-size:12.5px;color:var(--muted);}

.contact-card{
  background:var(--brown);color:#fff;
  padding:48px 36px;
  display:flex;flex-direction:column;gap:14px;
}
.contact-card h2{
  font-family:var(--serif);font-weight:500;
  font-size:24px;line-height:1.3;
}
.contact-card .note{font-size:13px;color:#d8cec2;}
.contact-person{
  display:flex;align-items:center;gap:14px;margin-top:8px;
}
.contact-person img{
  width:56px;height:56px;border-radius:50%;
  object-fit:cover;filter:grayscale(1);
}
.contact-person .cp-name{font-size:14px;font-weight:600;}
.contact-person .cp-role{font-size:12px;color:#d8cec2;}
.contact-lines{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.contact-lines a,.contact-lines span{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:#f2ece4;
}
.contact-lines a:hover{text-decoration:underline;text-underline-offset:2px;}
.contact-lines svg{width:15px;height:15px;flex:0 0 auto;opacity:.8;}
.contact-card .btn{margin-top:14px;align-self:flex-start;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--brown-deep);color:#c9beb1;
  font-size:12px;padding:22px 0;
}
.site-footer .inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px;}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .services-grid{grid-template-columns:1fr 1fr;}
  .services-intro{grid-column:1/-1;max-width:520px;}
  .audience .inner{grid-template-columns:1fr;gap:0;}
  .audience-title{padding:56px 0 0;}
  .audience-grid{padding:40px 0 56px;}
  .contact-card{margin:0 -32px;padding:48px 32px;}
}

@media (max-width:820px){
  .inner{padding:0 20px;}
  .nav{display:none;}
  .hero{min-height:560px;padding:120px 0 70px;}
  .hero-scrim{
    background:
      linear-gradient(180deg,rgba(26,20,14,.7) 0%,rgba(26,20,14,.3) 140px,rgba(26,20,14,0) 300px),
      linear-gradient(90deg,rgba(26,20,14,.85) 0%,rgba(26,20,14,.6) 50%,rgba(28,21,15,.25) 100%);
  }
  .hero h1{font-size:36px;}
  .benefits-grid{grid-template-columns:1fr 1fr;gap:32px 20px;}
  .services{padding:64px 0;}
  .services-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .audience-grid{grid-template-columns:1fr 1fr;gap:28px 20px;}
  .contact-card{margin:0 -20px;padding:44px 24px;}
  .hero-actions{flex-wrap:wrap;gap:16px;}
}