/* styles.css */
:root{
  --bg: #F7EFE8; /* jemné teplé pozadí */
  --card: #FFFFFF;
  --accent: #E9B89B; /* teplý akcent */
  --muted: #8C6A57;
  --text: #3b2f2a;
  --shadow: 0 6px 18px rgba(60,40,30,0.08);
  --radius: 14px;
  --container-width: 1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text); margin:0; -webkit-font-smoothing:antialiased}
.container{max-width:var(--container-width); margin:0 auto; padding:28px}
.site-header{background:transparent; position:sticky; top:0; z-index:40}.header-inner{display:flex; align-items:center; justify-content:space-between}
.brand{font-weight:700; font-size:1.1rem; color:var(--muted); text-decoration:none}
.main-nav{display:flex; gap:18px}
.main-nav a{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px}
.main-nav a:hover{background:rgba(233,184,155,0.12)}
.nav-toggle{display:none; background:none; border:none; font-size:1.2rem}

.panel{padding:48px 0}
.intro{padding-top:36px}
.intro-grid{display:flex; gap:28px; align-items:center}
.intro-text{flex:1}
.intro-text h1{font-size:2rem; margin:0 0 12px}
.intro-images{display:flex; gap:10px}
.intro-images img{width:160px; height:110px; object-fit:cover; border-radius:12px; box-shadow:var(--shadow)}

.cards{display:flex; gap:20px; margin-top:18px}
.card{background:var(--card); padding:18px; border-radius:var(--radius); box-shadow:var(--shadow); flex:1}
.card img{width:100%; height:140px; object-fit:cover; border-radius:10px}
.card h3{margin:12px 0 6px}
.lead{color:var(--muted)}

.about-grid{display:flex; gap:20px; align-items:center}
.about-photo img{width:240px; height:240px; object-fit:cover; border-radius:18px; box-shadow:var(--shadow)}

.form{background:var(--card); padding:22px; border-radius:16px; box-shadow:var(--shadow); max-width:760px}
.form-row{margin-bottom:14px}
.form-row label{display:block; margin-bottom:6px; font-weight:600}
.form-row input[type=text], .form-row select{width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(60,40,30,0.08)}
.two-cols{display:flex; gap:12px}
.two-cols > div{flex:1}
.price{padding:10px 12px; border-radius:10px; background:#fff; box-shadow:inset 0 -2px 0 rgba(0,0,0,0.02)}
.btn{display:inline-block; padding:12px 18px; border-radius:12px; background:var(--accent); color:white; border:none; cursor:pointer; font-weight:700}

.site-footer{padding:20px 0; text-align:center; color:var(--muted)}

/* responsive */
@media (max-width:900px){
  .intro-grid, .about-grid{flex-direction:column}
  .cards{flex-direction:column}
  .main-nav{display:none}
  .nav-toggle{display:inline-block}
  .main-nav.open{display:flex; position:absolute; right:20px; top:64px; background:var(--card); padding:12px; border-radius:12px; box-shadow:var(--shadow); flex-direction:column}
}