/* ====== ZÁKLAD ====== */
:root{
  --bg:#ffffff;
  --tint:#f6f7f8;
  --text:#0f0f12;
  --muted:#666b73;
  --border:#e6e8eb;
  --shadow:0 6px 24px rgba(15,17,19,.06);
  --radius:18px;
  --max:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:system-ui, Arial, sans-serif; color:var(--text);
  background:var(--bg); line-height:1.55;
}
.container{max-width:var(--max); margin:auto; padding:0 20px}
.section{padding:90px 0}
.section--tint{background:var(--tint)}
h1,h2,h3{margin:0 0 14px}
h1{font-size:clamp(28px,4vw,44px); letter-spacing:-.02em}
h2{font-size:clamp(22px,3vw,32px); text-align:center}
.lead{color:var(--muted); margin-top:10px; text-align:center}
.center{text-align:center}
.muted{color:var(--muted)}

/* ====== NAV ====== */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border);
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-weight:600; letter-spacing:.2px}
.menu{display:flex; gap:18px}
.menu a{color:var(--text); text-decoration:none; font-weight:500}
.menu a:hover{opacity:.8}

/* ====== HERO ====== */
.hero{padding-top:120px; text-align:center}
.cta{margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
  appearance:none; border:1px solid var(--border); background:#fff; color:var(--text);
  padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:600;
}
.btn:hover{box-shadow:var(--shadow)}
.btn--dark{background:#0f0f12; color:#fff; border-color:#0f0f12}
.btn.full{display:block; width:100%; text-align:center}

/* ====== GRID ====== */
.grid{display:grid; gap:16px}
@media (min-width:640px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .grid{grid-template-columns:repeat(3,1fr)} }

/* ====== GALERIE ====== */
.gallery img{
  width:100%; height:220px; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--border); box-shadow:var(--shadow); transition:transform .25s ease;
}
.gallery img:hover{transform:scale(1.02)}

/* ====== KARTY ====== */
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px;
}

/* ====== CENÍK ====== */
.pricing{grid-template-columns:1fr; gap:18px}
@media (min-width:900px){ .pricing{grid-template-columns:repeat(3,1fr)} }
.price h3{margin-bottom:6px; font-size:18px}
.price__value{font-size:26px; font-weight:800; margin:4px 0 12px}
.price ul{list-style:none; padding:0; margin:0 0 16px; color:var(--muted)}
.price ul li{padding:6px 0; border-bottom:1px dashed var(--border)}
.price ul li:last-child{border-bottom:none}
.price--featured{position:relative}
.price--featured .badge{
  position:absolute; top:12px; right:12px; font-size:12px; background:#0f0f12; color:#fff;
  padding:6px 10px; border-radius:999px
}

/* ====== RECENZE ====== */
.reviews{grid-template-columns:1fr; gap:16px}
@media (min-width:900px){ .reviews{grid-template-columns:repeat(2,1fr)} }
.review blockquote{
  margin:0 0 10px; font-size:16px; line-height:1.6;
}
.review figcaption{color:var(--muted); font-weight:600}

/* ====== KONTAKT ====== */
.contact{display:grid; gap:18px}
@media (min-width:900px){ .contact{grid-template-columns:1.1fr 1fr} }

.contact__cards{display:grid; gap:14px}
.contact__card{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit}
.contact__card:hover{box-shadow:var(--shadow)}
.ico{font-size:22px}
.contact__label{font-size:12px; color:var(--muted)}
.contact__value{font-weight:600}

.contact__form .row{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:520px){ .contact__form .row{grid-template-columns:1fr 1fr} }
input, textarea{
  width:100%; border:1px solid var(--border); border-radius:12px; padding:12px 14px; font:inherit;
  background:#fff;
}
input:focus, textarea:focus{outline:none; border-color:#c8ccd1; box-shadow:0 0 0 4px rgba(15,17,19,.06)}

/* ====== FOOTER ====== */
.footer{border-top:1px solid var(--border); padding:28px 0; color:var(--muted); text-align:center}

/* ====== ALBUM TILES (landing) ====== */
.album-tiles{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:700px){ .album-tiles{ grid-template-columns:repeat(2,1fr);} }

.album-tile{
  position:relative; display:block; overflow:hidden; border-radius:18px;
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.album-tile img{
  width:100%; height:280px; object-fit:cover; transition:transform .35s ease, filter .35s ease;
  display:block;
}
.album-tile__title{
  position:absolute; left:12px; bottom:12px;
  background:rgba(15,16,18,.72); color:#fff; padding:10px 14px; border-radius:999px;
  font-weight:600; letter-spacing:.2px;
}
.album-tile:hover img{ transform:scale(1.04); filter:brightness(.92); }
/* ====== HERO s fotkou ====== */
.hero--photo{
  position:relative;
  margin-top:64px; /* kvůli sticky navigaci */
  height:clamp(420px, 78vh, 760px);
  display:flex; align-items:center;
  background:url("header.JPG") center/cover no-repeat; /* 👈 sem dáš fotku */
  isolation:isolate;
}

/* jemný gradient pro čitelnost – zlehka u hran */
.hero--photo::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.0) 60%, rgba(255,255,255,.20)),
    linear-gradient(to right, rgba(255,255,255,.25), rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,.25));
  z-index:-1;
}
.hero__content{
  max-width:720px;
  color:#0f0f12;               /* tmavý text – fotka je světlá po okrajích */
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}

/* zarovnání na levý vs. pravý světlý okraj */
.hero--align-left .hero__content{ margin-left:min(5vw,40px); text-align:left; }
.hero--align-right .hero__content{ margin-left:auto; margin-right:min(5vw,40px); text-align:right; }

/* tlačítko dole na fotce, uprostřed */
.hero__cta{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  padding:14px 22px; font-weight:700;
  box-shadow:var(--shadow);
}

/* na menších displejích trochu zmenšíme */
@media (max-width:640px){
  .hero--photo{ height:60vh; }
  .hero__content h1{ font-size:clamp(24px,6vw,32px); }
}
/* ====== ABOUT TEXT ====== */
.about{ font-size:16px; line-height:1.8; }
.about p{ margin:0 0 14px; }

/* Ceník – 2 karty na střed */
#cenik .pricing{
  display:flex;
  justify-content:center;   /* vycentrování */
  gap:24px;
  flex-wrap:wrap;
}
#cenik .price{
  width:min(380px, 100%);   /* stejné šířky karet */
}
/* Kontakt – text + fotka vedle sebe */
#kontakt .about-wrap{
  display:grid;
  gap:24px;
}
@media (min-width: 900px){
  #kontakt .about-wrap{
    grid-template-columns: 1.4fr 1fr; /* text širší, fotka užší */
    align-items:start;
  }
}
#kontakt .about-photo{
  padding:0;                /* čistý rámeček bez vnitřního odsazení */
}



#kontakt .kontakt-text p{
  margin:0 0 14px;
  line-height:1.7;
}


/* Kontakt – text + fotka vedle sebe */
#kontakt .about-wrap{
  display:grid;
  gap:24px;
  margin-bottom:32px;
}
@media (min-width: 900px){
  #kontakt .about-wrap{
    grid-template-columns: 1.5fr 1fr; /* vlevo text, vpravo fotka */
    align-items:start;
  }
}
#kontakt .about-photo img{
   width:100%;
  max-height:520px;
  object-fit:cover;
  object-position: center top; /* posuneme výřez nahoru na obličej */
  border-radius:18px;
  display:block;
object-position: 50% 15%;


}

/* Kontakty dole v řadě */
#kontakt .contact-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:32px;
  margin-top:20px;
}
#kontakt .contact-item{
  text-decoration:none;
  color:inherit;
  font-weight:500;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 16px;
  box-shadow:var(--shadow);
}
#kontakt .contact-item:hover{
  background:#fafafa;
}