/* master.css — исправленный полный файл (убраны белые полосы между блоками)
   Палитра:
   --forest: #A7AF81
   --sand:   #E8DABA
   --purple: #492A39
   --text:   #3D2E23
   --accent: #987A56
*/

/* ========== Переменные и базовая настройка ========== */
:root{
  --forest: #A7AF81;
  --sand:   #E8DABA;
  --purple: #492A39;
  --text:   #3D2E23;
  --accent: #987A56;

  --maxw: 1100px;
  --gap: 20px;
  --radius: 12px;

  --shadow: 0 12px 30px rgba(73,42,57,0.08);
  --shadow-soft: 0 8px 22px rgba(73,42,57,0.06);
}

/* ========== RESET ========== */
/* Сбрасываем возможные внешние отступы у элементов по умолчанию */
*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0;}
/* Однотонный фон страницы — чтобы не было "пробелов" белого при смене секций */
body{
  font-family: "Lora", Georgia, serif;
  color: var(--text);
  background: var(--sand);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* контейнер */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* Делать секции без внешних margin'ов — чтобы не было просветов между секциями */
section{
  margin: 0;                 /* убираем внешние отступы (предотвращаем collapse) */
  padding-block: 40px;       /* вертикальные внутренние отступы */
  box-sizing: border-box;
}

/* Заголовки — контролируемые отступы (чтобы не "вылазили") */
h1,h2,h3,h4,p{
  margin: 0;
  padding: 0;
}
h1{ margin-bottom: 14px; }
h2{ margin-bottom: 12px; font-family: "Merriweather", serif; color:var(--purple); font-size:28px; }
.lead{ margin-bottom: 18px; color:#6b584f; }

/* ссылки */
a{ color:inherit }
a:hover{ text-decoration:underline }

/* скрытый для accessibility */
.sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ========== TOPBAR ========== */
.topbar{
  background: rgba(232,218,186,0.98);
  position: sticky;
  top:0;
  z-index:110;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.topbar .wrap{ display:flex; align-items:center; gap:12px; padding:12px 0; }
.brand{ text-decoration:none; color:var(--purple); font-family:"Playfair Display", serif; font-weight:700; font-size:20px; }
.mini-nav{ margin-left:18px; display:flex; gap:14px; flex:1; }
.mini-nav a{ color:var(--text); text-decoration:none; padding:6px 8px; border-radius:8px; }

.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--purple) }
.logo-img{ height:56px; width:auto; display:block; }
.logo-text{ font-family:"Playfair Display", serif; font-weight:700; font-size:20px; color:var(--purple) }
/* ========== HERO / PROFILE ========== */
/* Убираем padding-block у секции, если нужно больше/меньше — можно скорректировать */
.hero-profile{
  position:relative;
  overflow:hidden;
  display:flex;
  gap:36px;
  align-items:flex-start;
  padding: 40px 20px;
  min-height:420px;

  /* фон: градиент поверх фото — cover */
  background:
    linear-gradient(180deg, rgba(232,218,186,0.14), rgba(232,218,186,0.06)),
    url("img/hero_bg_from_logo.png") center/cover no-repeat;
  background-clip: border-box;
}

/* размытие/волна сверху — плавный переход от header */
.hero-profile::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-90px; height:220px;
  background: url("img/forest_wave_blur.svg") center top / cover no-repeat;
  filter: blur(10px);
  z-index:0;
  opacity:0.95;
  pointer-events:none;
}

/* паттерн листьев поверх */
.hero-profile::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("img/leaves_pattern_from_logo.svg");
  background-repeat: repeat;
  background-size: 220px 220px;
  opacity:0.14;
  z-index:1;
  pointer-events:none;
}

/* контент поверх слоёв фона */
.hero-left, .hero-right{ position:relative; z-index:2; }

/* левая колонка */
.hero-left{ width:320px; display:flex; flex-direction:column; gap:18px; align-items:center; }
.photo-wrap{ width:100%; max-width:320px; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:#efe6da; }
.master-photo{ width:100%; height:auto; display:block; object-fit:cover; aspect-ratio:3/4; }

/* быстрые контакты */
.contact-quick{ width:100%; background: rgba(255,255,255,0.95); padding:14px; border-radius:12px; text-align:center; box-shadow:var(--shadow-soft); }
.contact-line{ display:block; color:var(--purple); text-decoration:none; margin:6px 0; font-weight:700; }

/* Telegram */
.tg-block{ margin-top:8px; text-align:center; }
.tg-link{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; background:var(--purple); color:var(--sand); border-radius:12px; text-decoration:none; font-weight:700; box-shadow:0 8px 20px rgba(73,42,57,0.12); }
.tg-note{ margin:8px 0 0 0; font-size:13px; color:#6b574f; }

/* правая колонка */
.hero-right{ flex:1; color:var(--purple); padding:8px 0; }
.master-name{ font-family:"Merriweather", serif; font-size: clamp(28px, 4vw, 40px); margin-bottom:8px; color:var(--purple); }
.master-title{ font-family:"Playfair Display", serif; color:#3b212e; font-weight: 700; margin-bottom:12px; font-size:16px; }

/* описание мастера */
.master-about{ background: rgba(255,255,255,0.95); padding:18px; border-radius:12px; box-shadow:var(--shadow-soft); }
.master-about h2{ margin-bottom:8px; color:var(--purple); font-family:"Playfair Display", serif; }
.master-about p{ margin:0 0 12px 0; color:#5a4b42; }

/* meta list */
.meta-list{ display:flex; gap:12px; flex-wrap:wrap; list-style:none; padding:0; margin:12px 0 0 0; }
.meta-list li{ background:#f8efe4; padding:8px 12px; border-radius:10px; color:#6b574f; font-weight:600; }

/* ========== Услуги ========== */
.services-section{ padding-top:40px; padding-bottom:40px; background:transparent; }
.services-grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.service-card{ background:linear-gradient(180deg,#fff,#fbf7f3); border-radius:12px; padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.service-card-icon{ width:56px; height:56px; object-fit:contain; }

/* ========== Ресурсы ========== */
.resources{ padding-top:40px; padding-bottom:40px; background:transparent; }
.resources-list{ padding-left:18px; }

/* ========== Отзывы (карусель) ========== */
.reviews{ padding-top:40px; padding-bottom:40px; background: transparent; }
.review-carousel{ margin-bottom:12px; }

/* ========== Каркас карусели (scroll-snap) ========== */
.carousel { 
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.carousel-btn{
  background: rgba(255,255,255,0.96);
  border: none;
  width:44px; height:44px; border-radius:8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.carousel-track-wrap{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  width: 100%;
  scrollbar-width: none; /* Firefox */
  display: block;
}
.carousel-track-wrap::-webkit-scrollbar{ display:none; }
.carousel-track{
  display:flex;
  gap:16px;
  padding:8px 0;
  margin:0;
  list-style:none;
  align-items: stretch; /* чтобы слайды имели одинаковую высоту контейнера */
}
.carousel-slide{
  flex: 0 0 100%;
  box-sizing: border-box;
  scroll-snap-align: center;
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center; /* центрируем по вертикали */
  padding: 8px 16px;
}
.carousel-media {
  width: 100%;
  max-width: 980px;          /* максимальная ширина изображения в слайде */
  max-height: calc(70vh);    /* ограничение высоты: подстраивается под экран */
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.98); /* светлый фон вокруг скриншотов */
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  overflow: hidden;
}
.carousel-media img,
.carousel-slide img {
  display:block;
  width: auto;           /* авто — чтобы не искажать длинные/узкие картинки */
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* важная часть — показываем весь кадр */
  border-radius: 6px;
}
/* width:100%; height:100%; */
.carousel-slide img{  object-fit:cover; border-radius:12px; display:block; box-shadow:var(--shadow); }
.slide-caption{ margin-top:10px; color:#5a4b42; font-weight:600; text-align:center; }
.carousel-dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.carousel-dots .dot{ width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0.12); border:none; cursor:pointer; }
.carousel-dots .dot.active{ background:var(--purple); transform:scale(1.05); }

/* reviews image size override */
.review-carousel .carousel-slide img{ height:420px; border-radius:10px; object-fit:cover; }

/* reviews text */
.reviews-text{ margin-top:14px; background:#fff; padding:12px; border-radius:10px; box-shadow:var(--shadow-soft); }

/* ========== Контакты ========== */
.contact{ padding-top:40px; padding-bottom:40px; }
.contact-grid{ display:grid; grid-template-columns: 1fr 420px; gap:18px; }
.contact-card, .socials-card{ background:#fff; padding:18px; border-radius:12px; box-shadow:var(--shadow); }
.tg-inline{ color:var(--purple); text-decoration:underline; font-weight:700; }
.btn-tg{ display:inline-block; margin-top:8px; background:var(--purple); color:var(--sand); padding:10px 14px; border-radius:12px; text-decoration:none; }

/* Footer */
.site-footer{ background: var(--purple); color:var(--sand); padding:18px 0; }
.site-footer a{ color:var(--sand); text-decoration:none }

/* ========== Адаптив ========== */

@media (max-width:1024px){
  .hero-profile{ flex-direction:column; gap:18px; padding-top:28px; padding-bottom:28px; min-height:auto; background-position:center top; }
  .contact-grid{ grid-template-columns: 1fr; }
  .review-carousel .carousel-slide img{ height:300px; }
  .mini-nav{ display:none; }
  .carousel-media{ max-width:760px; max-height:60vh; padding:6px; }
}
@media (max-width:720px){
  .wrap{ padding:0 14px; }
  .master-name{ font-size:22px; }
  .review-carousel .carousel-slide img{ height:220px; }
  .carousel-media{ max-width:520px; max-height:55vh; }
  .carousel-btn{ width:38px; height:38px; }
}
@media (max-width:420px){
  .wrap{ padding:0 12px; }
  .carousel-btn{ width:38px; height:38px; font-size:16px; }
  .review-carousel .carousel-slide img{ height:180px; }
  .contact-quick{ padding:10px; }
  .carousel-media{ max-width:360px; max-height:50vh; padding:6px; }
}

/* ========== Утилиты ========== */
.hidden{ display:none !important; }