/* =========================
   ФОНТЫ
========================= */
@font-face{
  font-family:'Tisa Sans Pro';
  src:url('/static/fonts/TisaSansPro-Regular.woff2') format('woff2'),
      url('/static/fonts/TisaSansPro-Regular.woff') format('woff'),
      url('/static/fonts/TisaSansPro-Regular.ttf') format('truetype'),
      url('/static/fonts/TisaSansPro-Regular.eot') format('embedded-opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =========================
   ПЕРЕМЕННЫЕ / БАЗА
========================= */
:root{
  --cream:#fdf8f4;
  --text:#111;
  --accent:#f4afa0;
  --accent-2:#e2ede8;
  --rail:#e43d3d;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:12px;
  --container:1200px;
  --container-narrow:1140px;
  --shadow-1:0 2px 12px rgba(0,0,0,.04);
  --shadow-2:0 8px 24px rgba(0,0,0,.08);
  --shadow-3:0 20px 40px rgba(0,0,0,.12);
  --clip: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px),
                  calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:'Tisa Sans Pro',sans-serif !important;
}

/* =========================
   КОНТЕЙНЕРЫ
========================= */
.container-1200{
  max-width:var(--container);
  margin:0 auto;
  height:60%;
  display:flex;
  align-items:center;
  padding:0;
}
.container-1140{
  max-width:var(--container-narrow);
  width:100%;
  margin:0 auto;
}
.page-container1{
  max-width:var(--container-narrow);
  margin:0 auto;
  background:var(--cream);
  min-height:400px;
}
.main-container{
  width:var(--container);
  min-height:100vh;
  margin:0 auto;
  background:var(--cream);
  border-radius:15px;
  clip-path:var(--clip);
  padding:24px;
}

/* =========================
   ХЕДЕР / НАВИГАЦИЯ
========================= */
.header{
  width:100%;
  height:250px;
  background:url('/static/img/hbg.png') center/cover no-repeat;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  height:120px;
}
.logo{flex:0 0 auto}
.logo img{height:150px;width:auto;display:block}

.nav{
  flex:1 1 auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:32px;
  white-space:nowrap;
}
.nav-item{position:relative}
.nav-item::after{
  content:"";
  position:absolute; top:100%; left:0;
  width:100%; height:10px;
}
.nav-link{
  background:none; border:0; cursor:pointer;
  padding:10px 0; border-radius:10px;
  font:500 20px/1.2 'Tisa Sans Pro',sans-serif;
  color:var(--text);
}

/* Выпадающее меню */
.dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  display:none;
  flex-direction:column;
  min-width:220px;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  box-shadow:var(--shadow-2);
  padding:8px;
  gap:4px;
  z-index:20;
}
.dropdown a{
  display:block;
  padding:8px 10px;
  text-decoration:none;
  color:var(--accent);
  border-radius:8px;
}
.nav-item:hover .dropdown,
.nav-item:hover::after,
.dropdown:hover{display:flex}

/* =========================
   СЛАЙДЕР (hero)
========================= */
.slider-wrapper{margin:20px 0 40px}
.hero-slider{
  position:relative;
  width:100%;
  max-width:var(--container-narrow);
  margin:0 auto 24px;
  background:#000;
  height:500px;
  overflow:hidden;
  border-radius:16px;
}
.hero-track{display:flex;height:100%;transition:transform .3s ease}
.hero-slide{position:relative;display:block;height:500px}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-caption{
  position:absolute; left:16px; bottom:16px;
  background:rgba(0,0,0,.45); color:#fff;
  padding:8px 12px; border-radius:10px; font-weight:600;
}
.hero-empty{display:flex;align-items:center;justify-content:center;color:#777;background:#f1f1f1}
.hero-prev,.hero-next{
  position:absolute; top:50%; transform:translateY(-50%);
  height:44px; width:44px; border:0; border-radius:999px;
  background:rgba(255,255,255,.8); cursor:pointer;
  font-size:22px; line-height:1;
}
.hero-prev{left:12px}
.hero-next{right:12px}
.hero-prev:hover,.hero-next:hover{background:#fff}
.hero-dots{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; gap:8px; justify-content:center;
}
.hero-dot{
  width:10px; height:10px; border-radius:999px; border:0;
  background:rgba(255,255,255,.6); cursor:pointer;
}
.hero-dot.is-active{background:#fff}

/* =========================
   О НАС
========================= */
.about-section{
  margin:0; height:500px;
  display:flex; align-items:center;
}
.about-content{
  display:flex; align-items:center; gap:40px; width:100%;
}
.about-text{flex:1}
.about-image{flex:1; text-align:right}
.about-image img{
  height:400px; width:auto; border-radius:15px; object-fit:contain;
}

/* =========================
   СТУПЕНИ / ШАГИ
========================= */
.steps-section{
  min-height:1200px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:100px; text-align:center;
}
.steps-section2,.steps-section3{
  min-height:400px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:100px; text-align:center;
}
.steps-title{font-size:32px; line-height:1.2; text-align:center}

.step{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"text visual";
  align-items:center; justify-items:center; gap:40px;
}
.step:nth-child(even){grid-template-areas:"visual text"}
.step.step--odd{grid-template-areas:"text visual"}
.step.step--even{grid-template-areas:"visual text"}

.step-text{grid-area:text; text-align:center}
.step-text h2{margin:0 0 12px; font-size:28px; line-height:1.2}
.step-text p{margin:0; line-height:1.6}

.step-visual{
  grid-area:visual; display:flex; align-items:center; justify-content:center;
}
.step--odd .step-visual,
.step--even .step-visual{justify-content:center}
.step-visual img{
  max-width:100%; height:auto; max-height:140px; object-fit:contain; margin:0 auto;
}

/* =========================
   СЕТКА ПОСТОВ / КАРТОЧКИ
========================= */
.posts-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
.card{margin:0}
.card-link{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:28px 32px; background:#fff; border-radius:var(--radius-lg);
  text-decoration:none; color:inherit; box-shadow:var(--shadow-1);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card-link:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card-title{margin:0 0 6px; font-size:22px; line-height:1.3}
.card-meta{opacity:.6; font-size:14px}
.card-cover img,
.card-cover .avatar-fallback{
  width:120px; height:120px; border-radius:50%;
  object-fit:cover; display:block; background:#eee;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

/* =========================
   ФУТЕР
========================= */
.footer{
  width:100%; height:400px;
  background:url('/static/img/fbg.png') center/cover no-repeat;
  display:flex; align-items:center;
  font-family:'Tisa Sans Pro',sans-serif !important;
}
.site-footer{width:100%; height:100px; background:transparent; padding:20px 0; margin-top:40px}
.footer-inner{
  max-width:var(--container);
  margin:0 auto; background:transparent;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; padding:10px 0;
}
.footer-col a{
  display:block; margin:4px 0; text-decoration:none; color:var(--text);
}
.footer-col a:hover{text-decoration:underline}
.logo-col img{height:175px; width:auto}
.contacts-col p{margin:4px 0}

/* =========================
   КНОПКА-РЕЙЛ «СВЯЗАТЬСЯ»
========================= */
.contact-rail{
  position:fixed; top:50%; right:-260px; transform:translateY(-50%);
  width:308px; background:var(--rail); color:var(--text);
  display:flex; align-items:center;
  border-radius:16px 0 0 16px;
  box-shadow:var(--shadow-3);
  transition:right .3s ease;
  z-index:1000;
}
/* hover — только на девайсах с мышью */
@media (hover:hover){
  .contact-rail:hover{right:0}
}
/* открытие по клику */
.contact-rail[data-open="true"]{right:0}

.contact-rail__label{
  width:48px; height:180px;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:mixed;
  background:transparent; color:var(--text);
  border:0; border-radius:12px 0 0 12px; cursor:pointer;
  font-weight:700; letter-spacing:.08em;
}
.contact-rail__body{width:260px; padding:16px 18px}
.contact-rail__title{font-size:25px; margin-bottom:8px}
.contact-rail__phone{
  display:block; margin:6px 0; font-size:22px;
  text-decoration:none; color:inherit;
}
.contact-rail__phone:hover{text-decoration:underline}

/* =========================
   ДЕКОР-ФОН (PNG-СЛОИ)
========================= */
.background-layer{
  position:relative; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}
.background-layer .bg-item{position:absolute; max-width:600px; opacity:.8}
.background-layer .bg-item-flower1{position:absolute; max-width:200px; opacity:.8}
.background-layer .bg-item-flower2{position:absolute; max-width:400px; opacity:.8}
.background-layer .bg-item-flower3{position:absolute; max-width:600px; opacity:.8}
.background-layer .bg-item3{position:absolute; max-width:800px; opacity:.8}
.content{position:relative; z-index:2}

/* =========================
   УНИВЕРСАЛЬНАЯ ССЫЛКА
========================= */
.link{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  transition:color .2s ease, opacity .2s ease;
  cursor:pointer;
}
.link:hover{color:var(--accent-2); opacity:.95}
.link:focus-visible{outline:2px solid currentColor; outline-offset:3px; border-radius:4px}
.link::after{content:none !important}

/* =========================
   EMBED: Instagram
========================= */
.ig-embed .instagram-media{
  width:100% !important;
  max-width:540px;
  min-width:380px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}

/* =========================
   ПРОЧЕЕ
========================= */
.spacer{height:40px}

/* =========================
   АДАПТИВ <= 980px
========================= */
@media (max-width:980px){
  .posts-grid{grid-template-columns:1fr}
  .card-link{gap:16px; padding:16px 18px; border-radius:18px}
  .card-title{font-size:clamp(18px,4.8vw,20px)}
  .card-cover img,.card-cover .avatar-fallback{width:84px; height:84px}
}

/* =========================
   АДАПТИВ <= 900px
========================= */
@media (max-width:900px){
  .hero-slider{height:360px}
  .hero-slide{height:360px}
}

/* =========================
   МОБИЛЬНЫЙ ≤ 600px
========================= */
:root{
  --safe-left:env(safe-area-inset-left);
  --safe-right:env(safe-area-inset-right);
  --safe-bottom:env(safe-area-inset-bottom);
}
@media (max-width:600px){
  /* Контейнеры */
  .container-1200,.container-1140,.page-container1,.main-container{
    max-width:none;
    width:min(100% - 24px, var(--container-narrow));
    margin-left:max(12px, var(--safe-left));
    margin-right:max(12px, var(--safe-right));
  }
  .main-container{
    width:auto;
    border-radius:12px;
    clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px),
                      calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    padding:clamp(14px,4vw,20px);
  }

  /* Header */
  .header{height:160px; background-position:top center}
  .header-row{height:80px; gap:16px}
  .logo img{height:clamp(64px,10vh,92px)}

  /* Навигация — горизонтальный скролл; дропдауны по :focus-within */
  .nav{
    gap:16px; justify-content:flex-start; overflow-x:auto; padding:0 6px;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  }
  .nav > *{scroll-snap-align:start}
  .nav::-webkit-scrollbar{display:none}
  .nav-link{font:600 clamp(15px,3.8vw,17px)/1.2 'Tisa Sans Pro',sans-serif; padding:8px 0}

  .dropdown{
    position:fixed;
    left:max(12px, var(--safe-left));
    right:max(12px, var(--safe-right));
    top:120px;
    max-height:50vh; overflow:auto;
  }
  .nav-item:hover .dropdown{display:none}
  .nav-item:focus-within .dropdown{display:flex}

  /* Слайдер — мобильные улучшения */
  .hero-slider{
    height:clamp(250px,48vh,300px);
    border-radius:14px;
    touch-action:pan-y;
  }
  .hero-slide{height:100%}
  .hero-prev{left:calc(10px + var(--safe-left))}
  .hero-next{right:calc(10px + var(--safe-right))}
  .hero-dots{bottom:calc(10px + var(--safe-bottom)); gap:10px}
  .hero-prev,.hero-next{
    width:52px; height:52px; font-size:24px;
    background:rgba(255,255,255,.88);
    box-shadow:0 4px 14px rgba(0,0,0,.18);
  }
  .hero-prev:active,.hero-next:active{transform:translateY(-50%) scale(.96)}
  .hero-caption{
    left:calc(12px + var(--safe-left));
    right:calc(12px + var(--safe-right));
    bottom:calc(12px + var(--safe-bottom));
    padding:clamp(10px,2.8vw,14px) clamp(12px,3.6vw,16px);
    border-radius:12px;
    font-size:clamp(14px,3.8vw,18px);
    line-height:1.25;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    backdrop-filter:blur(4px);
  }

  /* О нас */
  .about-section{height:auto; padding:8px 0}
  .about-content{flex-direction:column; gap:16px}
  .about-image{text-align:center}
  .about-image img{height:clamp(220px,36vh,300px); width:auto}

  /* Шаги */
  .steps-section,.steps-section2,.steps-section3{gap:40px; min-height:auto}
  .steps-title{font-size:clamp(22px,6vw,26px)}
  .step{grid-template-columns:1fr; gap:16px}
  .step-text h2{font-size:clamp(20px,5.2vw,24px)}

  /* Футер */
  .footer{height:auto; padding:24px 0; background-position:center}
  .site-footer{height:auto; margin-top:24px; padding:8px 0}
  .footer-inner{flex-direction:column; align-items:flex-start; gap:12px}
  .logo-col img{height:120px}
  .contacts-col p{font-size:14px}

  /* Instagram */
  .ig-embed .instagram-media{min-width:auto; max-width:100% !important}

  /* Рейл контактов */
  .contact-rail{right:-240px; width:288px}
  .contact-rail__label{height:150px}
  .contact-rail__body{width:240px; padding:14px 16px}

  /* Скрываем крупные декоративные PNG на мобилке */
  .background-layer .bg-item-flower1,
  .background-layer .bg-item-flower2,
  .background-layer .bg-item-flower3,
  .background-layer .bg-item,
  .background-layer .bg-item3{display:none !important}
}

/* =========================
   ЛАНДШАФТ НИЗКИЙ (телефон)
========================= */
@media (max-height:480px) and (orientation:landscape){
  .header{height:120px}
  .hero-slider{height:clamp(220px,60vh,360px)}
  .hero-caption{-webkit-line-clamp:1; font-size:clamp(12px,2.6vw,14px)}
  .hero-prev,.hero-next{width:46px; height:46px; font-size:20px}
}

/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion:reduce){
  .hero-track,.card-link{transition:none}
}



/* ===== Burger (кнопка) ===== */
.burger{
  display:none;
  border:0;
  background:rgba(255,255,255,.9);
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  font-size:17px;
  font-weight:600;
  padding:0 25px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Tisa Sans Pro', sans-serif;
}

.burger:focus-visible{
  outline:2px solid #111;
  outline-offset:3px;
}
@media (max-width: 900px){
  .header .logo{
    display:none;
  }
}

/* ===== Mobile offcanvas ===== */
.mobile-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:998;
}
.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; width:min(86vw, 360px);
  background:#fff; box-shadow:-12px 0 40px rgba(0,0,0,.16);
  transform:translateX(100%); transition:transform .25s ease;
  z-index:999; display:flex; flex-direction:column;
}
.mobile-menu__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #f0f0f0;
}
.mobile-menu__logo img{ height:90px; width:auto }
.mobile-menu__close{
  border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer;
}
.mobile-menu__nav{ padding:8px 12px 24px; overflow:auto }
.mm-group{ border-bottom:1px solid #f3f3f3 }
.mm-group__btn{
  width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:14px 6px; background:transparent; border:0; cursor:pointer; font-size:18px;
}
.mm-group__chev{ transition:transform .2s ease }
.mm-group__btn[aria-expanded="true"] .mm-group__chev{ transform:rotate(180deg) }
.mm-group__body{ display:flex; flex-direction:column; gap:6px; padding:0 6px 12px 6px }
.mm-link{
  display:block; padding:10px 8px; text-decoration:none; color:#111;
  border-radius:10px;
}
.mm-link:hover{ background:#f7f7f7 }

/* Активное состояние (когда меню открыто) */
.mobile-backdrop[data-open="true"]{ opacity:1; pointer-events:auto }
.mobile-menu[data-open="true"]{ transform:translateX(0) }
.no-scroll{ overflow:hidden }
.mobile-backdrop{ z-index: 2999; }
.mobile-menu{ z-index: 3000; }
/* Показать бургер и спрятать десктоп-меню на мобилке */
@media (max-width: 900px){
  .burger{
     display:flex;
    position:fixed;            /* фиксируем кнопку */
    top:16px;                  /* расстояние сверху */
    right:16px;                /* прижимаем к правому краю */
    z-index:2000;              /* поверх всего */
    margin-left:0;             /* отменяем старое */
  }

  .nav{ 
    display:none; 
  }
}



.accordion {
  max-width: 1100px;
  margin: 40px auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  font-family: "Montserrat", sans-serif;
}

.accordion-item {
  border-bottom: 1px solid #eee;
}

.accordion-header {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  outline: none;
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s;
}

.accordion-header:hover {
  background: #f8f8f8;
}

.accordion-item.active .accordion-header {
  color: #e47a2e;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.3s ease;
  padding: 0 24px;
  background: #fffaf6;
}

.accordion-item.active .accordion-content {
  max-height: 1200px;
  padding: 16px 24px 24px;
}

.accordion-content p {
  margin: 0;
  line-height: 1.6;
}


.psychologist-card {
    flex-direction: column;      /* главное изменение */
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 40px;
  background: #fdf8f4;
  border-radius: 24px;
  padding: 60px 40px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  flex-wrap: wrap;
}

.psychologist-photo {
  flex: 0 0 220px;
  display: flex;
  justify-content: right;
  align-items: center;
}

.psychologist-photo img {
  width: 300px;
  height: 300px;
  border-radius: 30%;
  object-fit: cover;
  object-position: center;
  border: 5px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  background: #fff;
  display: block;
  margin-bottom: 32px;
  margin-right: 100px;
}

/* Инфо-блок */
.psychologist-info {
  flex: 1 1 400px;
  text-align: left;
}

.psychologist-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 16px;
  color: #222;
}
.psychologist-jobname {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 16px;
  color: #222;
}

.psychologist-summary {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: #444;
  border-left: 4px solid #E47A2E;
  padding-left: 20px;
  margin: 0;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}

/* 🌐 Адаптив */
@media (max-width: 768px) {
  .psychologist-card {
    flex-direction: column;
    padding: 40px 20px;
    text-align: center;
  }

  .psychologist-photo {
    flex: none;
    margin-bottom: 24px;
  }

  .psychologist-photo img {
    width: 180px;
    height: 180px;
  }

  .psychologist-name {
    font-size: 26px;
    text-align: center;
  }

  .psychologist-jobname {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 16px;
  color: #222;
  text-align: center;
  }

  .psychologist-summary {
    font-size: 16px;
    line-height: 1.6;
    border-left: none;
    padding-left: 0;
    background: none;
    box-shadow: none;
    text-align: center;
  }
}

/* === Фоновые PNG-слои (чисто и без дублей) === */
.background-layer{
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;              /* всегда за контентом */
}
.background-layer img{
  position: absolute;
  max-width: none;          /* не сжимать фон */
  pointer-events: none;
  z-index: -1;
}

/* --- фиксы переполнений на мобильных --- */

/* 1) Instagram: всегда ужимаем и запрещаем минимальную ширину */
.ig-embed .instagram-media{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;  /* убираем 380px без условий */
  display: block !important;
}

/* 2) .main-container: не вылезает на средних экранах и центрируется */
.main-container{
  width: min(100%, var(--container));  /* вместо жестких 1200px */
  margin-inline: auto;                 /* центр */
  box-sizing: border-box;
}

/* 3) Подрезаем горизонтальный скролл на всякий случай */
html, body{
  overflow-x: hidden;
}

/* 4) Кнопка-рейл не влияет на ширину макета */
.contact-rail{
  contain: paint;   /* изолируем от раскладки */
}