/* =========================================================
   Amálie Křížková — masáže a lymfodrenáž
   One-page responzivní web
   ========================================================= */

:root{
  --ink:#1d1916;
  --ink-2:#272220;
  --ink-soft:#3a3330;
  --cream:#faf7f2;
  --cream-2:#f1ebe2;
  --sand:#e3d8c8;
  --gold:#c9a227;
  --gold-soft:#dcbb56;
  --sage:#8fa08a;
  --text:#2c2724;
  --text-muted:#6d635c;
  --text-on-dark:#e9e2d8;
  --text-on-dark-muted:#b0a599;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 24px 60px -30px rgba(29,25,22,.45);
  --shadow-lg:0 40px 90px -40px rgba(29,25,22,.6);
  --container:1180px;
  /* Playfair Display — na rozdíl od Cormorantu má správně nakreslené české háčky */
  --ff-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --ff-body:"Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0;
  font-family:var(--ff-body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.75;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3{font-family:var(--ff-display); font-weight:500; line-height:1.22; margin:0 0 .5em; letter-spacing:0}
h1{font-size:clamp(2.4rem,1.7rem + 3.4vw,4.35rem); font-weight:500}
h2{font-size:clamp(1.85rem,1.45rem + 1.8vw,2.75rem)}
h3{font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem); font-family:var(--ff-body); font-weight:500; letter-spacing:.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}

/* ---------- typografické drobnosti ---------- */
.eyebrow{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500; color:var(--gold); margin:0 0 .9rem;
}
.accent{color:var(--gold-soft); font-style:italic; font-weight:400}
.section-light .accent{color:var(--gold)}
.lead{font-size:clamp(1.05rem,1rem + .45vw,1.3rem); line-height:1.7}
.muted{color:var(--text-muted)}

/* ---------- tlačítka ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 2rem; border-radius:999px; border:1px solid transparent;
  font-family:var(--ff-body); font-size:.95rem; font-weight:500; letter-spacing:.04em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-solid{background:var(--gold); color:#1d1916; box-shadow:0 14px 30px -16px rgba(201,162,39,.9)}
.btn-solid:hover{background:var(--gold-soft); transform:translateY(-2px)}
.btn-ghost{border-color:currentColor; color:inherit; background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08); transform:translateY(-2px)}
.section-light .btn-ghost:hover{background:rgba(29,25,22,.06)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* =========================================================
   HLAVIČKA
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.15rem 0;
  transition:background-color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(29,25,22,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:.6rem 0;
  border-bottom-color:rgba(233,226,216,.1);
  box-shadow:0 10px 40px -24px rgba(0,0,0,.9);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1.5rem}

.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--cream); flex:0 1 auto; min-width:0}
.brand-mark{width:34px; height:34px; color:var(--gold); flex:none}
.brand-mark svg{width:100%; height:100%}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text strong{font-family:var(--ff-display); font-size:1.12rem; font-weight:500; letter-spacing:.2px}
.brand-text em{font-style:normal; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-on-dark-muted)}

.nav{display:flex; align-items:center; gap:clamp(1.1rem,2.2vw,2.2rem); flex:0 0 auto}
.nav ul{display:flex; flex-wrap:nowrap; gap:clamp(1rem,2vw,2rem)}
.nav ul li{flex:0 0 auto}
.nav a{
  position:relative; text-decoration:none; color:var(--text-on-dark);
  font-size:.94rem; letter-spacing:.06em; padding:.35rem 0; transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover,.nav a.active{color:#fff}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1); transform-origin:left}
/* flex:none — jinak se položka smrskne pod šířku textu a nápis vyteče z pilulky */
.nav-cta{flex:0 0 auto; padding:.72rem 1.9rem; font-size:.88rem}
.nav-cta::after{display:none}

.nav-toggle{
  display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  padding:0; flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.nav-toggle span{
  display:block; width:26px; height:1.5px; background:var(--cream);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  color:var(--text-on-dark); overflow:hidden; padding:9rem 0 6rem;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 78% 18%, rgba(201,162,39,.16), transparent 62%),
    radial-gradient(ellipse 60% 60% at 12% 88%, rgba(143,160,138,.14), transparent 65%),
    linear-gradient(155deg,#211c19 0%,#1d1916 45%,#15120f 100%);
}
.hero-bg::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23e9e2d8' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M110 20c34 22 52 52 52 84 0 40-26 74-52 96-26-22-52-56-52-96 0-32 18-62 52-84z'/%3E%3Cpath d='M110 20v180'/%3E%3Cpath d='M110 70 70 96M110 70l40 26M110 112l-46 30M110 112l46 30'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 260px;
}
.hero-inner{position:relative; z-index:1; max-width:820px}
.hero h1{margin-bottom:1.5rem; text-shadow:0 20px 60px rgba(0,0,0,.4)}
.hero .lead{max-width:56ch; color:var(--text-on-dark-muted)}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem}
.hero-badges{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; margin-top:3.2rem;
  font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-on-dark-muted);
}
.hero-badges li{display:flex; align-items:center; gap:.6rem}
.hero-badges li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold)}

.scroll-hint{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  width:24px; height:40px; border:1px solid rgba(233,226,216,.35); border-radius:14px; z-index:1;
}
.scroll-hint span{
  position:absolute; left:50%; top:9px; width:3px; height:7px; border-radius:2px;
  background:var(--gold); transform:translateX(-50%);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{0%,100%{opacity:0; transform:translate(-50%,0)}35%{opacity:1}70%{opacity:0; transform:translate(-50%,13px)}}

/* =========================================================
   SEKCE
   ========================================================= */
.section{position:relative; padding:clamp(5rem,4rem + 6vw,9rem) 0}
.section-light{background:var(--cream); color:var(--text)}
.section-light + .section-light{padding-top:0}
.section-dark{background:var(--ink); color:var(--text-on-dark)}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23e9e2d8' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M110 20c34 22 52 52 52 84 0 40-26 74-52 96-26-22-52-56-52-96 0-32 18-62 52-84z'/%3E%3Cpath d='M110 20v180'/%3E%3Cpath d='M110 70 70 96M110 70l40 26M110 112l-46 30M110 112l46 30'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 260px;
}
.section-dark > .container{position:relative; z-index:1}

.section-head{max-width:640px; margin-bottom:clamp(2.5rem,2rem + 2vw,4rem)}
.section-sub{color:var(--text-on-dark-muted)}
.section-light .section-sub{color:var(--text-muted)}

/* ---------- dvousloupcový layout ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,2rem + 4vw,5.5rem); align-items:center}
.split-cenik{align-items:start}

.split-media{position:relative; isolation:isolate}
.split-media img{
  position:relative; z-index:1;
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  aspect-ratio:4/3; object-fit:cover; width:100%;
}
.split-media::before{
  content:""; position:absolute; inset:-16px -16px 36px 36px; z-index:0;
  border:1px solid var(--sand); border-radius:calc(var(--radius) + 8px);
}
.media-note{
  position:absolute; left:-14px; bottom:-28px; z-index:2;
  background:var(--ink); color:var(--text-on-dark);
  padding:1rem 1.4rem; border-radius:var(--radius-sm); box-shadow:var(--shadow);
  display:flex; flex-direction:column; line-height:1.35;
}
.media-note strong{font-family:var(--ff-display); font-size:1.2rem; color:var(--gold-soft)}
.media-note span{font-size:.8rem; letter-spacing:.08em; color:var(--text-on-dark-muted)}

.courses{margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--sand)}
.courses h3{margin-bottom:.7rem}
.courses p{color:var(--text-muted); font-size:.98rem}
.chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.2rem}
.chips li{
  font-size:.83rem; letter-spacing:.04em; padding:.42rem 1rem; border-radius:999px;
  background:var(--cream-2); border:1px solid var(--sand); color:var(--text);
}
.chip-soon{background:transparent; border-style:dashed; color:var(--text-muted)}

/* ---------- karty služeb ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem}
.card{
  position:relative; padding:2.4rem 2.2rem; border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(233,226,216,.12);
  transition:transform .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease);
}
.card:hover{transform:translateY(-6px); border-color:rgba(201,162,39,.45)}
.card-feature{grid-column:1/-1}
.card-num{
  font-family:var(--ff-display); font-size:1rem; letter-spacing:.2em;
  color:var(--gold); display:block; margin-bottom:.9rem;
}
.card p{color:var(--text-on-dark-muted)}
.card h3{margin-bottom:.75rem}
.card-meta{
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid rgba(233,226,216,.12);
  font-size:.92rem; color:var(--gold-soft) !important; letter-spacing:.02em;
}
.ticks{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.6rem 1.5rem; margin:1.4rem 0 0}
.ticks li{display:flex; align-items:center; gap:.7rem; font-size:.95rem; color:var(--text-on-dark)}
.ticks li::before{
  content:""; width:18px; height:18px; flex:none; border-radius:50%;
  border:1px solid var(--gold);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 5 5L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}

.quote{margin:clamp(3rem,2rem + 3vw,4.5rem) 0 0; padding:0; text-align:center}
.quote blockquote{
  margin:0 auto; max-width:26ch;
  font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-size:clamp(1.45rem,1.1rem + 1.7vw,2.25rem); line-height:1.42; color:#fff;
}
.quote blockquote::before,.quote blockquote::after{content:"„"; color:var(--gold); opacity:.6}
.quote blockquote::after{content:"“"}

/* ---------- ceník ---------- */
.note{
  display:flex; align-items:center; gap:1rem; margin:1.8rem 0 2rem;
  padding:1.1rem 1.3rem; border-radius:var(--radius-sm);
  background:var(--cream-2); border:1px solid var(--sand);
}
.note-icon{width:26px; height:26px; color:var(--gold); flex:none}
.note-icon svg{width:100%; height:100%}
.note p{font-size:.97rem}

.pricelist ul{display:flex; flex-direction:column}
.price-item{padding:1.5rem 0; border-bottom:1px solid var(--sand)}
.price-item:first-child{padding-top:0}
.price-item:last-child{border-bottom:0; padding-bottom:0}
.price-head{display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem}
.price-head h3{margin:0 0 .35rem; font-size:1.12rem}
.price{
  margin:0; flex:none; text-align:right; font-weight:500; font-size:1.05rem;
  color:var(--ink); white-space:nowrap;
}
.price span{display:block; font-size:.82rem; font-weight:300; color:var(--text-muted); letter-spacing:.04em}
.price-desc{font-size:.94rem; color:var(--text-muted); margin:0; max-width:52ch}

/* ---------- kontakt ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2.5rem,2rem + 3vw,4.5rem); align-items:start}

.contact-list{display:flex; flex-direction:column; gap:1.6rem}
.contact-list li{display:flex; gap:1.1rem; align-items:flex-start}
.ci-icon{
  width:42px; height:42px; flex:none; border-radius:50%;
  display:grid; place-items:center; color:var(--gold);
  border:1px solid rgba(201,162,39,.35); background:rgba(201,162,39,.07);
}
.ci-icon svg{width:20px; height:20px}
.contact-list strong{display:block; font-weight:500; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-on-dark-muted); margin-bottom:.25rem}
.contact-list a{display:block; text-decoration:none; color:#fff; transition:color .3s var(--ease)}
.contact-list a:hover{color:var(--gold-soft)}
.contact-list .muted{display:block; font-size:.92rem; color:var(--text-on-dark-muted)}
.quick-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem}

.contact-form{
  padding:clamp(1.8rem,1.4rem + 2vw,2.6rem);
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(233,226,216,.12);
}
.field{position:relative; margin-bottom:1.6rem}
.field input,.field textarea{
  width:100%; padding:1.35rem 0 .55rem; border:0; border-bottom:1px solid rgba(233,226,216,.3);
  background:transparent; color:#fff; font-family:var(--ff-body); font-size:1rem; font-weight:300;
  border-radius:0; resize:vertical; transition:border-color .3s var(--ease);
}
.field label{
  position:absolute; left:0; top:1.3rem; pointer-events:none;
  color:var(--text-on-dark-muted); font-size:1rem;
  transition:transform .3s var(--ease), font-size .3s var(--ease), color .3s var(--ease);
  transform-origin:left top;
}
.field input:focus,.field textarea:focus{outline:none; border-bottom-color:var(--gold)}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.25rem); font-size:.74rem; letter-spacing:.12em; color:var(--gold);
}
.field.invalid input,.field.invalid textarea{border-bottom-color:#e07a5f}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.contact-form .btn{margin-top:.5rem}
.contact-form .btn[disabled]{opacity:.6; cursor:progress; transform:none}
.form-note{margin:1rem 0 0; font-size:.9rem; min-height:1.2em; color:var(--gold-soft)}
.form-note.success{color:#9ec49a}
.form-note.error{color:#e8977c}

.map{
  margin-top:clamp(3rem,2rem + 3vw,4.5rem);
  border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(233,226,216,.14); box-shadow:var(--shadow-lg);
  line-height:0;
}
.map iframe{width:100%; height:clamp(280px,38vw,440px); border:0; filter:grayscale(.25) contrast(1.02)}

/* =========================================================
   PATIČKA + FAB
   ========================================================= */
.site-footer{background:#15120f; color:var(--text-on-dark-muted); padding:2.2rem 0; font-size:.9rem}
.footer-inner{display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between}
.site-footer nav{display:flex; gap:1.6rem; flex-wrap:wrap}
.site-footer a{text-decoration:none; transition:color .3s var(--ease)}
.site-footer a:hover{color:var(--gold-soft)}
.site-footer p{margin:0}

.fab{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:90;
  width:54px; height:54px; border-radius:50%; display:none; place-items:center;
  background:var(--gold); color:#1d1916; box-shadow:0 14px 32px -12px rgba(0,0,0,.7);
}
.fab svg{width:24px; height:24px}

/* =========================================================
   ANIMACE
   ========================================================= */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.visible{opacity:1; transform:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .scroll-hint span{animation:none}
  *{transition-duration:.01ms !important}
}

/* =========================================================
   RESPONZIVITA
   ========================================================= */
@media (max-width:1024px){
  .split{grid-template-columns:1fr; gap:3.5rem}
  .contact-grid{grid-template-columns:1fr}
  .media-note{left:1rem}
}

@media (max-width:860px){
  html{scroll-padding-top:70px}
  .nav-toggle{display:flex}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:2.5rem;
    padding:2rem clamp(1.6rem,6vw,2.6rem);
    background:rgba(21,18,15,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-left:1px solid rgba(233,226,216,.12);
    transform:translateX(100%); transition:transform .45s var(--ease);
    overflow-y:auto;
  }
  .nav.open{transform:none}

  /* Prvek s backdrop-filter je containing blockem pro fixed potomky — panel menu
     by se pak vztahoval k hlavičce a byl oříznutý na její výšku. Po dobu otevřeného
     menu proto rozostření vypneme a hlavičce dáme plnou barvu. */
  body.nav-open .site-header,
  body.nav-open .site-header.scrolled{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(21,18,15,.98);
  }
  .nav ul{flex-direction:column; gap:1.4rem; width:100%}
  .nav a{font-family:var(--ff-display); font-size:1.55rem; letter-spacing:0}
  .nav-cta{font-family:var(--ff-body); font-size:.92rem; width:100%}
  body.nav-open{overflow:hidden}

  .cards{grid-template-columns:1fr}
  .fab{display:grid}
  .site-footer{padding-bottom:5rem}
  .footer-inner{justify-content:center; text-align:center; flex-direction:column}
}

@media (max-width:560px){
  .hero{padding-top:7.5rem; min-height:92svh}
  .hero-actions .btn{flex:1 1 100%}
  .hero-badges{gap:.5rem 1.2rem; font-size:.74rem}
  .card{padding:1.9rem 1.5rem}
  .price-head{flex-direction:column; gap:.2rem; align-items:flex-start}
  .price{text-align:left}
  .price span{display:inline; margin-left:.4rem}
  .media-note{left:1rem; bottom:-24px}
  .quick-actions .btn{flex:1 1 100%}
  .scroll-hint{display:none}
}