/* ============================================================
   ОБЩИЕ СТИЛИ — Наталия Поспешинская, массаж и остеопрактика
   Светлая палитра: молочный, кремовый, мягко-жёлтый
   ============================================================ */
:root{
  --bg:#fbf7ef; --bg-2:#f5ecd9; --cream:#fff8e7;
  --yellow:#f4d35e; --yellow-soft:#fbe6a2; --gold:#caa64a;
  --text:#4a3a1f; --text-soft:#7a6a4e;
  --shadow:0 10px 30px rgba(202,166,74,.12), 0 2px 8px rgba(74,58,31,.06);
  --shadow-lg:0 20px 60px rgba(202,166,74,.18), 0 4px 16px rgba(74,58,31,.08);
  --radius:22px; --radius-sm:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--text); background:var(--bg);
  line-height:1.65; overflow-x:hidden; min-height:100vh;
  display:flex; flex-direction:column;
}
body::before, body::after{
  content:""; position:fixed; pointer-events:none; z-index:-1;
  width:55vmax; height:55vmax; border-radius:50%;
  filter:blur(120px); opacity:.55;
}
body::before{top:-20vmax; left:-15vmax; background:radial-gradient(circle, #fbe6a2 0%, transparent 70%)}
body::after{bottom:-20vmax; right:-15vmax; background:radial-gradient(circle, #fff3c9 0%, transparent 70%)}

h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif; font-weight:600; color:var(--text); letter-spacing:.2px; line-height:1.15}
h1{font-size:clamp(2rem,4.6vw,3.2rem); margin:0 0 .4em; line-height:1.1}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem); margin:0 0 .6em; line-height:1.15}
h3{font-size:1.25rem; margin:0 0 .4em}
p{margin:0 0 1em}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--text)}
.container{max-width:1180px; margin:0 auto; padding:0 24px; width:100%}
main{flex:1}

/* ---------- НАВИГАЦИЯ ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:rgba(255,248,231,.78);
  border-bottom:1px solid rgba(202,166,74,.15);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto}
.brand{display:flex; align-items:center; gap:12px; font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:600; color:var(--text)}
.brand-mark{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,#fff3c9,#f4d35e);
  display:grid; place-items:center; box-shadow:var(--shadow); font-size:1.1rem;
}
.nav-links{display:flex; gap:6px; flex-wrap:wrap}
.nav-links a{
  padding:9px 14px; border-radius:999px;
  color:var(--text); font-weight:500; font-size:.92rem; transition:.25s;
}
.nav-links a:hover, .nav-links a.active{background:var(--yellow-soft); color:var(--text)}
.nav-toggle{display:none; background:none; border:0; font-size:1.6rem; cursor:pointer; color:var(--text)}

/* ---------- HERO / PAGE-HEAD ---------- */
.hero{padding:80px 0 60px; display:grid; gap:50px; grid-template-columns:1.1fr .9fr; align-items:center}
.hero-text .badge{
  display:inline-block; padding:6px 14px; border-radius:999px;
  background:var(--cream); border:1px solid rgba(202,166,74,.25);
  font-size:.85rem; color:var(--text-soft); margin-bottom:20px; box-shadow:var(--shadow);
}
.hero-text h1 span{background:linear-gradient(90deg,#caa64a,#f4d35e); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-text p.lead{font-size:1.1rem; color:var(--text-soft); max-width:540px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:24px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px; font-weight:600; cursor:pointer; border:0; font-size:.98rem; transition:.25s; text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#f4d35e,#caa64a); color:#3a2e15; box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); color:#3a2e15}
.btn-ghost{background:var(--cream); color:var(--text); border:1px solid rgba(202,166,74,.3)}
.btn-ghost:hover{background:var(--yellow-soft); color:var(--text)}
.hero-photo{position:relative; justify-self:center; width:100%; max-width:420px; aspect-ratio:4/5; border-radius:36px; overflow:hidden; background:var(--cream); box-shadow:var(--shadow-lg); border:6px solid #fff}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block}
.hero-photo::after{content:""; position:absolute; inset:auto -10% -10% auto; width:60%; height:60%; border-radius:50%; background:radial-gradient(circle, rgba(244,211,94,.45), transparent 70%); filter:blur(30px); pointer-events:none}

.page-head{padding:70px 0 20px; text-align:center}
.page-head .badge{display:inline-block; padding:6px 14px; border-radius:999px; background:var(--cream); border:1px solid rgba(202,166,74,.25); font-size:.85rem; color:var(--text-soft); margin-bottom:18px; box-shadow:var(--shadow)}

/* ---------- СЕКЦИИ / КАРТОЧКИ ---------- */
section{padding:50px 0; scroll-margin-top:90px}
.section-title{text-align:center; margin-bottom:14px}
.section-sub{text-align:center; color:var(--text-soft); margin:0 auto 50px; max-width:680px}
.card{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(202,166,74,.18);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px; transition:.3s;
}
.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px)}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start}
.edu-list{margin:0; padding-left:20px}
.edu-list li{margin-bottom:8px; color:var(--text-soft); font-size:.96rem}

/* ---------- БЛОКИ (аккордеон) ---------- */
.blocks{display:grid; gap:18px}
.block{
  background:rgba(255,255,255,.75);
  border:1px solid rgba(202,166,74,.2);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:.3s;
}
.block:hover{box-shadow:var(--shadow-lg)}
.block-head{display:flex; align-items:center; gap:16px; padding:22px 26px; cursor:pointer; user-select:none}
.block-head .icon{width:46px; height:46px; border-radius:14px; flex:0 0 auto; background:linear-gradient(135deg,#fff3c9,#fbe6a2); display:grid; place-items:center; font-size:1.4rem; box-shadow:inset 0 0 0 1px rgba(202,166,74,.2)}
.block-head .title{flex:1; font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:600}
.block-head .chev{transition:.3s; color:var(--gold); font-size:1.3rem}
.block.open .chev{transform:rotate(180deg)}
.block-body{max-height:0; overflow:hidden; transition:max-height .5s ease; border-top:1px solid transparent}
.block.open .block-body{max-height:8000px; border-top-color:rgba(202,166,74,.18)}
.block-body-inner{padding:24px 26px 28px}

.subblocks{display:grid; gap:14px}
.subblock{background:var(--cream); border:1px solid rgba(202,166,74,.18); border-radius:var(--radius-sm); overflow:hidden}
.subblock-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; font-weight:600; color:var(--text); gap:12px}
.subblock-head .chev{color:var(--gold); transition:.3s}
.subblock.open .chev{transform:rotate(180deg)}
.subblock-body{display:none; padding:8px 20px 22px}
.subblock.open .subblock-body{display:block; animation:fade .35s}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.desc{color:var(--text-soft); font-size:.97rem; background:rgba(255,255,255,.6); padding:14px 18px; border-radius:12px; border-left:3px solid var(--yellow)}
.media-title{font-family:'Playfair Display',serif; font-size:1.05rem; margin:18px 0 10px; color:var(--text)}

/* ---------- ГАЛЕРЕИ ---------- */
.media-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.media-item{position:relative; border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow); cursor:pointer; aspect-ratio:4/3; transition:.3s}
.media-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.media-item img, .media-item video{width:100%; height:100%; object-fit:cover; display:block}
.media-item .play{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,transparent,rgba(74,58,31,.25)); color:#fff; font-size:2.5rem; pointer-events:none; text-shadow:0 2px 8px rgba(0,0,0,.3)}
.media-item .caption{position:absolute; left:10px; right:10px; bottom:10px; background:rgba(255,248,231,.92); color:var(--text); padding:6px 10px; border-radius:8px; font-size:.82rem; font-weight:500; text-align:center}
.media-item .del{position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.9); border:0; cursor:pointer; display:none; font-size:1rem; color:#b00; font-weight:700; box-shadow:var(--shadow)}
body.edit-mode .media-item .del{display:grid; place-items:center}
.add-media{display:none; align-items:center; justify-content:center; border:2px dashed rgba(202,166,74,.5); border-radius:14px; aspect-ratio:4/3; color:var(--text-soft); font-size:.95rem; cursor:pointer; background:rgba(255,255,255,.5); text-align:center; padding:10px}
body.edit-mode .add-media{display:flex}
.add-media:hover{background:var(--yellow-soft); color:var(--text)}

/* ---------- DEV STUB ---------- */
.dev-stub{text-align:center; padding:60px 20px; background:linear-gradient(135deg,#fff8e7,#fbe6a2); border-radius:var(--radius); box-shadow:var(--shadow); font-size:1.2rem; color:var(--text)}
.dev-stub .em{font-size:3rem; margin-bottom:12px}

/* ---------- КОНТАКТЫ ---------- */
.contacts-grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.contact-card{text-align:center}
.contact-card .em{font-size:2.2rem; margin-bottom:8px}
.contact-card a{font-weight:600; word-break:break-all}
.qr-row{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:36px}
.qr-card{text-align:center}
.qr-card img{width:200px; height:200px; object-fit:contain; border-radius:14px; background:#fff; padding:10px; box-shadow:var(--shadow)}

/* ---------- ФУТЕР ---------- */
footer{margin-top:60px; padding:36px 0; background:linear-gradient(180deg,transparent,rgba(244,211,94,.15)); border-top:1px solid rgba(202,166,74,.2); text-align:center; color:var(--text-soft); font-size:.92rem}
.socials{display:flex; gap:14px; justify-content:center; margin-bottom:18px}
.socials a{width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:var(--shadow); display:grid; place-items:center; transition:.25s}
.socials a:hover{transform:translateY(-3px); background:var(--yellow-soft); box-shadow:var(--shadow-lg)}
.socials svg{width:22px; height:22px; fill:var(--text)}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed; inset:0; z-index:1000; background:rgba(74,58,31,.85); display:none; align-items:center; justify-content:center; padding:30px}
.lightbox.show{display:flex; animation:fadein .25s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.lightbox-inner{max-width:min(92vw,1100px); max-height:90vh; position:relative}
.lightbox img, .lightbox video{max-width:100%; max-height:88vh; border-radius:14px; display:block; box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lightbox-close{position:absolute; top:-44px; right:0; background:#fff; border:0; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1.2rem; color:var(--text); box-shadow:var(--shadow)}

/* ---------- ПАНЕЛЬ РЕДАКТИРОВАНИЯ ---------- */
.edit-panel{position:fixed; bottom:18px; right:18px; z-index:200; display:flex; gap:8px; flex-wrap:wrap}
.edit-panel .btn{padding:10px 16px; font-size:.85rem}
[contenteditable="true"]{outline:2px dashed var(--yellow); outline-offset:3px; background:rgba(255,248,231,.7); border-radius:6px; transition:.2s}
[contenteditable="true"]:focus{outline-color:var(--gold); background:#fff}

/* ---------- АНИМАЦИИ ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:.7s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- REVIEWS HEADER ---------- */
.reviews-head{text-align:center; max-width:760px; margin:0 auto 32px}
.reviews-title{
  font-size:clamp(1.8rem,3.8vw,2.6rem);
  background:linear-gradient(135deg,var(--gold) 0%,var(--text) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin:14px 0 10px;
}
.reviews-stats{
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:22px;
}
.stat-pill{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:14px 22px; border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,248,231,.5));
  border:1px solid rgba(202,166,74,.25);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  min-width:140px;
}
.stat-pill .num{font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:600; color:var(--gold)}
.stat-pill .lbl{font-size:.82rem; color:var(--text-soft)}

/* ---------- MASONRY (отзывы / сертификаты) ---------- */
.masonry{
  column-count:4; column-gap:18px;
}
@media(max-width:1100px){.masonry{column-count:3}}
@media(max-width:780px){.masonry{column-count:2}}
@media(max-width:460px){.masonry{column-count:1}}
.masonry .m-item{
  break-inside:avoid; margin:0 0 18px;
  border-radius:18px; overflow:hidden;
  background:#fff; box-shadow:var(--shadow);
  position:relative; cursor:pointer;
  transition:.3s; display:block;
}
.masonry .m-item:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.masonry .m-item img{width:100%; height:auto; display:block}
.masonry .m-item .badge-tag{
  position:absolute; top:10px; left:10px;
  background:rgba(255,248,231,.92); color:var(--text);
  padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:600;
  box-shadow:var(--shadow);
}
.masonry .m-item .del{
  position:absolute; top:10px; right:10px; width:30px; height:30px;
  border-radius:50%; background:rgba(255,255,255,.95); border:0;
  cursor:pointer; display:none; font-size:1.05rem; color:#b00; font-weight:700;
  box-shadow:var(--shadow);
}
body.edit-mode .masonry .m-item .del{display:grid; place-items:center}

/* ---------- КАРТОЧКИ-ССЫЛКИ НА ПОДКАТЕГОРИИ ---------- */
.cat-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cat-card{
  display:block; text-decoration:none; color:var(--text);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(202,166,74,.2);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px 26px; transition:.3s; position:relative; overflow:hidden;
}
.cat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); color:var(--text)}
.cat-card .icon{width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,#fff3c9,#fbe6a2); display:grid; place-items:center; font-size:1.6rem; box-shadow:inset 0 0 0 1px rgba(202,166,74,.2); margin-bottom:16px}
.cat-card h3{margin:0 0 8px}
.cat-card p{color:var(--text-soft); font-size:.94rem; margin:0 0 14px}
.cat-card .arrow{color:var(--gold); font-weight:600; font-size:.95rem}

/* ---------- АДАПТИВ ---------- */
@media (max-width: 880px){
  .hero{grid-template-columns:1fr; padding:50px 0 30px}
  .hero-photo{max-width:320px}
  .about-grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-links{
    position:absolute; top:100%; right:14px; left:14px;
    background:var(--cream); border-radius:var(--radius); padding:14px;
    flex-direction:column; gap:4px; box-shadow:var(--shadow-lg); display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{width:100%}
}
@media (max-width: 520px){
  .container{padding:0 16px}
  .nav-inner{padding:12px 16px}
  section{padding:40px 0}
  .block-head{padding:18px 18px}
  .block-body-inner{padding:18px 18px 22px}
}