/* =========================================
   SALON MARYANA – MINIMAL ONE-PAGE THEME
   • jedno menu (desktop) + mobilní panel
   • hladké skrolování na kotvy
   • luxusní akcent (zlatá) a decentní pozadí
========================================= */

/* ========== ZÁKLAD / PROMĚNNÉ ========== */
:root{
  --bg:#f7f6f6;              /* jemné světle šedé pozadí */
  --surface:#ffffff;         /* karty/podklady */
  --text:#191620;            /* primární text */
  --muted:#6b7280;           /* sekundární text */
  --line:#e7e7ea;            /* tenká linka/rámečky */

  --accent:#c8a97e;          /* zlatá – světlejší */
  --accent-strong:#b28a56;   /* zlatá – tmavší */

  --maxw:1120px;
  --radius:16px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.06);
  --shadow:0 8px 28px rgba(0,0,0,.08);
}

/* Reset / typografie */
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text);}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-size:16px}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:Montserrat,Inter,sans-serif; line-height:1.12; margin:0 0 .6rem}
h1{font-weight:700}
/* Styl sekčních nadpisů */
section h2 {
  font-family: Montserrat, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin: 60px 0 32px;   /* horní a spodní mezera */
  position: relative;
  color: var(--text);
}

section h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  margin: 12px auto 0;
  border-radius: 2px;
}




h3{font-weight:600}
p{margin:.2rem 0 1rem}

/* Hladký skok na kotvy + „offset“ pod sticky hlavičku */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:88px}

/* Kontejner */
.container{max-width:var(--maxw); margin:0 auto; padding:0 18px}

/* ========== HLAVIČKA / NAV ========== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(8px);
}
.nav{min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:.8rem; font-weight:700}
.brand__mark{width:38px; height:38px; border-radius:999px;
  background:linear-gradient(145deg,var(--accent),var(--accent-strong));
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.06);
}
.brand__name{font-size:1.12rem; letter-spacing:.02em}
.brand__logo{
  height:42px;
  width:auto;
  display:block;
}
.menu{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.menu a{display:block; padding:12px 6px; font-weight:600; opacity:.92}
.menu a:hover{color:var(--accent-strong); opacity:1}
.menu a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px}

.cta{margin-left:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:11px 16px; border-radius:999px; font-weight:700; letter-spacing:.01em;
  background:linear-gradient(145deg,var(--accent),var(--accent-strong));
  color:#fff; border:1px solid var(--accent-strong); box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(200,169,126,.35)}

.burger{
  display:none; border:1px solid var(--line); background:#fff; border-radius:12px;
  padding:8px 10px; cursor:pointer;
}
.burger span{display:block; width:22px; height:2px; background:#111; margin:4px 0}

/* Mobilní panel – jediné menu na mobilu */
@media (max-width: 980px){
  .menu,.cta{display:none}
  .burger{display:block}
  .mobile-panel{
    position:fixed; inset:76px 0 auto 0; background:#fff;
    border-top:1px solid var(--line); box-shadow:0 18px 30px rgba(0,0,0,.08);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease;
  }
  body.nav-open .mobile-panel{transform:none; opacity:1; pointer-events:auto}
  .mobile-menu{padding:10px 18px}
  .mobile-menu a{display:block; padding:14px 4px; border-bottom:1px dashed #eee}
}

/* Jistota: na desktopu panel nikdy neuvidíme */
@media (min-width: 981px){ .mobile-panel{display:none !important} }

/* ========== SEKCE – OBECNÉ ========== */
.section{padding:72px 0}
.section--tight{padding:44px 0}
.lead {
  color: #e7e7ea;   /* PC – světle šedý text */
  max-width: 820px;
}

@media (max-width: 768px){
  .lead {
    color: #000;    /* Mobil – černý text */
  }
}

/* ========== HERO (DOMŮ) – DESKTOP default ========== */
.hero{
  position:relative; isolation:isolate; color:#fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.28)),
    url("../img/hero/hero@1920x1200.png") center/cover no-repeat;
}

.hero__inner{
  min-height:80vh;
  display:flex;
  flex-direction:column;
  justify-content:center;     /* svisle doprostřed */
  align-items:flex-start;     /* zarovnání vlevo */
  text-align:left;
  padding:46px 0;

  max-width:520px;            /* úzký sloupec */
  margin-left:8%;             /* odstup od levého okraje */
}

.hero__inner h1,
.hero__inner p,
.hero__inner a{
  max-width:100%;             /* text respektuje úzký sloupec */
  margin-left:0;
}

.hero__phone{
  margin-top:1rem;
  font-size:1.3rem;
  font-weight:700;
}
.hero__phone a{ color:var(--accent); text-decoration:none; }
.hero__phone a:hover{ color:var(--accent-strong); text-decoration:underline; }

/* ========== Úpravy pro tablety ========== */
@media (max-width: 900px){
  .hero__inner{
    min-height:68vh;
    max-width:520px;
    margin-left:6%;
    padding:36px 0;
  }
}

/* ========== MOBILNÍ LAYOUT – obrázek nahoře, text POD ním ========== */
@media (max-width: 768px){
  /* Hero už nepoužije background přímo; vytvoříme horní „panel“ s obrázkem */
  .hero{
    color:var(--text);
    background:none;
    padding-top:56vh;               /* výška horního obrázku */
    min-height:unset;
  }
  .hero::before{
    content:"";
    position:absolute; left:0; top:0; right:0; height:56vh;
    background:
      linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.2)),
      url("../img/hero/hero@1920x1200.png") center/cover no-repeat;
  }

  /* Textový blok je pod obrázkem, v bílém boxu */
  .hero__inner{
    position:relative;
    min-height:unset;
    max-width:100%;
    margin:0;
    padding:20px 18px 26px;
    background:#fff;
    text-align:center;
    align-items:center;
  }

  .hero__inner .btn{ margin-top:12px }
  .hero__phone{ margin-top:.5rem; font-size:1.15rem; text-align:center }
}

/* ========== CENÍK + SLUŽBY ========== */
.prices{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:18px}
.price{padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.price strong{display:block}

.services{
  margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px
}
.service{
  padding:16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm)
}
.service-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.5rem;
}

.price-tag {
  font-weight:700;
  color:var(--accent-strong);
}

.service .btn.small {
  margin-top:.75rem;
  padding:8px 14px;
  font-size:.9rem;
}

.service strong{display:block; margin-bottom:6px}

@media (max-width: 900px){
  .prices{grid-template-columns:1fr}
  .services{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .services{grid-template-columns:1fr}
}

/* ========== GALERIE – CAROUSEL (3/2/1 snímky) ========== */
.carousel{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#000;
  box-shadow:var(--shadow);
}

/* Pás se snímky */
.carousel__track{
  display:flex;
  transition:transform .4s ease;
  will-change:transform;
}

/* Každý snímek zabere 1/3 šířky – na menších zařízeních 1/2 nebo 1/1 */
.carousel__slide{
  flex:0 0 calc(100% / 3);
  padding:4px;           /* malá mezera mezi snímky */
  user-select:none;
}

.carousel__slide img{
  width:100%;
  height:40vh;
  max-height:620px;
  object-fit:cover;
  display:block;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}

/* Tablet: 2 snímky */
@media (max-width: 900px){
  .carousel__slide{ flex:0 0 50%; }
  .carousel__slide img{ height:38vh; }
}

/* Mobil: 1 snímek */
@media (max-width: 600px){
  .carousel__slide{ flex:0 0 100%; }
  .carousel__slide img{ height:34vh; }
}

/* Šipky */
.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(25,22,32,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  backdrop-filter:blur(4px);
}
.carousel__btn:hover{ background:rgba(25,22,32,.75) }
.carousel__btn.prev{ left:12px }
.carousel__btn.next{ right:12px }

/* Tečky (indikátory stran) */
.carousel__dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:12px; display:flex; gap:8px;
}
.carousel__dots button{
  width:10px; height:10px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.55);
}
.carousel__dots button[aria-current="true"]{
  background:linear-gradient(145deg,var(--accent),var(--accent-strong));
}

/* Zlatý proužek pod karuselem (vizuální integrace se stylem webu) */
.carousel::after{
  content:"";
  position:absolute; inset:auto 0 -3px 0; height:6px;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong));
  border-radius:3px;
}


/* ========== KONTAKTY (upraveno) ========== */
.contacts{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:start;
}

.contact-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-sm);
}

.contact-list{
  list-style:none;
  margin:0;
  padding:0;
}

.contact-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 0;
  border-bottom:1px dashed #ececec;
}
.contact-list li:last-child{ border-bottom:0 }

/* Ikona – decentní „zlatý“ kroužek, barvu přebírá z currentColor */
.icon{
  flex:0 0 28px;
  width:28px; height:28px;
  display:inline-grid; place-items:center;
  border-radius:999px;
  border:1px solid var(--accent-strong);
  background:linear-gradient(145deg,var(--accent),var(--accent-strong));
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  font-size:14px;            /* když použijeme emoji */
  line-height:1;
}

/* Text u položky */
.contact-list a{
  color:var(--text);
  font-weight:600;
  text-decoration:none;
}
.contact-list a:hover{ color:var(--accent-strong) }
.contact-list small{ color:var(--muted) }

/* Mapa */
.map-embed{
  width:100%;
  aspect-ratio:16/10;
}

/* ====== Patička ====== */
.site-footer {
  border-top: 1px solid var(--line);
  background: #fafafa;
  padding: 18px 0;
  color: #4b5563;
  font-size: 0.9rem;
}

.foot-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;  /* na mobilu spadne pod sebe */
  gap: 12px;
}

.credits {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.credits a {
  color: var(--accent-strong);
  font-weight: 600;
}

.footer-logo img {
  height: 88px;
  width: auto;
  display: block;
  opacity: 0.9;
  transition: opacity .2s ease;
}

.footer-logo img:hover {
  opacity: 1;
}


/* ========== UŽITEČNÉ ========== */
.container-narrow{max-width:860px}
.center{text-align:center}
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:1rem}
.mb-0{margin-bottom:0}


/* ===== Minimal cookie notice ===== */
.cc-mini{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(0,0,0,.08);
  display:none; padding:12px 0;
}
.cc-mini.show{ display:block; }
.cc-mini__inner{display:flex; gap:12px; align-items:center; justify-content:space-between}
.cc-mini__text{margin:0; color:var(--muted)}
.cc-mini__text a{color:var(--accent-strong); font-weight:600}
.cc-mini__btn{white-space:nowrap}
@media (max-width:800px){
  .cc-mini__inner{flex-direction:column; align-items:stretch}
  .cc-mini__btn{align-self:flex-end}
}