/* Rolfterapie Kladno — blog (Poradna). Exkluzivní vizuál s gradienty, ladí s webem. */
:root{
  --porcelan:#FBFAF7; --mist:#EAF0EC; --ink:#1A2A27; --ink-soft:#48605b;
  --petrol:#2E5751; --petrol-deep:#1F3E39; --petrol-abyss:#122824;
  --bronze:#9A7038; --bronze-soft:#C9A876; --bronze-glow:#D9BC8E; --line:#dde5df;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Albert Sans",-apple-system,"Segoe UI",sans-serif;font-size:19px;line-height:1.68;
  color:var(--ink);background:linear-gradient(180deg,#FBFAF7 0%,#F1F5F1 100%);background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:Lora,Georgia,serif;line-height:1.25;font-weight:600;color:var(--ink)}
a{color:var(--petrol)}
img{max-width:100%;height:auto}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{max-width:1000px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:Lora,Georgia,serif;font-weight:600;font-size:1.15rem;color:var(--petrol);text-decoration:none;letter-spacing:.2px}
.logo span{color:var(--bronze)}
.head-right{display:flex;align-items:center;gap:18px;font-size:.95rem}
.head-right a{text-decoration:none;color:var(--ink-soft)}
.head-cta{background:linear-gradient(135deg,var(--bronze-soft),var(--bronze));color:#fff!important;padding:9px 18px;border-radius:999px;font-weight:600;box-shadow:0 6px 16px rgba(154,112,56,.28)}

.wrap{max-width:720px;margin:0 auto;padding:0 22px}
.wrap-wide{max-width:1040px;margin:0 auto;padding:0 22px}

/* ===== Poradna hero (tmavý gradientový panel = signature prémiový prvek) ===== */
.poradna-hero{position:relative;overflow:hidden;text-align:center;color:var(--porcelan);
  background:radial-gradient(120% 140% at 80% -10%, #2c534c 0%, var(--petrol-deep) 42%, var(--petrol-abyss) 100%);
  padding:78px 24px 84px;margin-bottom:-46px}
.poradna-hero::before{content:"";position:absolute;top:-160px;right:-120px;width:520px;height:520px;
  background:radial-gradient(circle, rgba(217,188,142,.34), rgba(217,188,142,0) 62%);pointer-events:none}
.poradna-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--bronze),transparent);opacity:.5}
.poradna-hero .eyebrow{color:var(--bronze-glow)}
.poradna-hero h1{color:var(--porcelan);font-size:clamp(2.1rem,5.4vw,3.2rem)}
.poradna-hero p{color:#d4e2dc;max-width:640px;margin:16px auto 0}
.eyebrow{font-family:"Albert Sans";font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:var(--bronze);margin-bottom:14px}

/* ===== Cards ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding:0 0 66px;position:relative;z-index:2}
.card{position:relative;display:block;background:#fff;border-radius:20px;padding:28px 26px 26px;text-decoration:none;color:inherit;
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(18,40,36,.06);
  transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--bronze-soft),var(--bronze),var(--petrol))}
.card::after{content:"";position:absolute;top:-80px;right:-80px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(201,168,118,.18),rgba(201,168,118,0) 65%);opacity:0;transition:opacity .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(18,40,36,.13)}
.card:hover::after{opacity:1}
.card .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:12px}
.card h2{font-size:1.42rem;margin-bottom:.4em;color:var(--ink)}
.card p{color:var(--ink-soft);font-size:1rem}
.card .more{display:inline-block;margin-top:16px;color:var(--petrol);font-weight:600}

/* ===== Article ===== */
.article{padding:48px 0 20px}
.breadcrumb{font-size:.85rem;color:var(--ink-soft);margin-bottom:18px}
.breadcrumb a{text-decoration:none}
.article h1{font-size:clamp(1.95rem,4.6vw,2.85rem);margin-bottom:.35em}
.article h1::after{content:"";display:block;width:74px;height:4px;margin-top:.4em;border-radius:3px;
  background:linear-gradient(90deg,var(--bronze),var(--bronze-soft))}
.article .lead{font-size:1.2rem;color:var(--ink-soft);margin-bottom:1.4em}
.article h2{font-size:clamp(1.5rem,3.4vw,2rem);margin:1.55em 0 .5em;color:var(--petrol)}
.article h2::before{content:"";display:inline-block;width:22px;height:3px;border-radius:3px;vertical-align:middle;
  margin-right:12px;transform:translateY(-4px);background:linear-gradient(90deg,var(--bronze),var(--bronze-soft))}
.article p{margin:0 0 1.05em}
.article ul{margin:0 0 1.2em 1.1em}
.article li{margin:.35em 0}
.article li::marker{color:var(--bronze)}
.pull{font-family:Lora,Georgia,serif;font-style:italic;font-size:1.32rem;color:var(--petrol);
  border-left:3px solid var(--bronze);padding:8px 0 8px 22px;margin:1.5em 0;
  background:linear-gradient(90deg,rgba(201,168,118,.12),rgba(201,168,118,0));border-radius:0 10px 10px 0}

/* CTA panel */
.cta{margin:2.5em 0 1em;position:relative;overflow:hidden;text-align:center;border-radius:24px;
  color:var(--porcelan);padding:40px 32px;
  background:radial-gradient(120% 130% at 15% 0%, #2c534c 0%, var(--petrol-deep) 45%, var(--petrol-abyss) 100%)}
.cta::before{content:"";position:absolute;bottom:-140px;right:-100px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(217,188,142,.32),rgba(217,188,142,0) 62%);pointer-events:none}
.cta h3{color:var(--porcelan);font-size:1.65rem;margin-bottom:.4em;position:relative}
.cta p{color:#cfe0da;margin:0 auto 1.3em;max-width:520px;position:relative}
.btn{position:relative;display:inline-block;background:linear-gradient(135deg,var(--bronze-soft),var(--bronze));
  color:#fff;text-decoration:none;font-weight:600;padding:15px 30px;border-radius:999px;
  box-shadow:0 10px 26px rgba(154,112,56,.34)}
.btn:hover{filter:brightness(1.06)}
.cta .tel{display:block;margin-top:16px;color:var(--bronze-glow);font-family:Lora,Georgia,serif;font-size:1.25rem;text-decoration:none;position:relative}
.note{font-size:.92rem;color:var(--ink-soft);font-style:italic;margin:1.5em 0}

/* Figure (ilustrace + popisek) */
.fig{margin:2em 0}
.fig img{width:100%;height:auto;display:block;border-radius:16px;background:#FBFAF7;border:1px solid var(--line)}
.fig figcaption{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fig .cap{font-size:.95rem;color:var(--ink-soft);line-height:1.5;padding-left:14px;border-left:3px solid var(--line)}
.fig .cap.l{border-left-color:#8aa39c}
.fig .cap.r{border-left-color:var(--bronze)}
.fig .cap b{color:var(--ink);font-family:Lora,Georgia,serif}
@media(max-width:560px){.fig figcaption{grid-template-columns:1fr}}

/* FAQ */
.faq{margin-top:1.6em}
.faq .q{font-family:Lora,Georgia,serif;font-weight:600;color:var(--ink);margin-top:1.15em}

/* ═══════════════════════════════════════════════════════════════════
   POHYB (obsluhuje blog-motion.js)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bronzová nit = ukazatel čtení. Sedí na spodní hraně hlavičky. ── */
.read-thread{position:absolute;left:0;right:0;bottom:-1px;height:3px;overflow:hidden;pointer-events:none}
.read-thread i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--bronze-soft),var(--bronze),var(--petrol))}

/* ── Vynořování obsahu při scrollu ── */
.vynor{opacity:0;transform:translateY(14px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,.7,.3,1)}
.vynor.je-videt{opacity:1;transform:none}


/* ── Kdo má v systému vypnuté animace, dostane statiku ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .vynor{opacity:1;transform:none;transition:none}
  .read-thread i{transition:none}
  .card{transition:none}
}

/* Footer */
.site-foot{margin-top:44px;position:relative;color:#cfe0da;padding:38px 22px;text-align:center;font-size:.92rem;
  background:linear-gradient(180deg,var(--petrol-deep),var(--petrol-abyss))}
.site-foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--bronze),transparent);opacity:.55}
.site-foot a{color:var(--bronze-glow)}
.site-foot .legal{max-width:640px;margin:12px auto 0;color:#9db6af;font-size:.82rem}
@media(max-width:560px){body{font-size:18px}.head-right .head-hide{display:none}}