/* Контейнер всего слайдера */
.slider-wrapper {
position: relative; /* позволяет размещать кнопки поверх */
overflow: hidden;   /* скрываем то, что выходит за границы */
max-width: 100%;    /* растягивается на всю ширину контейнера */
margin-top: 40px;   /* отступ сверху */
border-radius: 12px;    /* скруглённые углы контейнера */
box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* по желанию — тень */
background: #fdf8ed;   /* светло-бежевый фон */
}


/* Двигающийся трек слайдов */
.slider-track {
display: flex; /* располагаем слайды в линию */
transition: transform 0.6s ease; /* плавное скольжение */
}

/* Один слайд с тремя изображениями */
.slide {
min-width: 100%; /* чтобы каждый слайд занимал 100% ширины */
display: flex;
justify-content: space-between; /* между картинками равное расстояние */
gap: 10px; /* отступ между фото */
}

/* Фото внутри слайда */
.slide img {
width: 32%; /* три фото в ряд + отступы */
border-radius: 12px 12px 0 0; /* только верхние углы скруглённые */
box-shadow: 0 -4px 15px rgba(0,0,0,0.15); /* тень только сверху */
}


/* Кнопки "вперёд" и "назад" */
.slider-btn {
position: absolute; /* позиционируются поверх */
top: 50%;
transform: translateY(-50%); /* выравнивание по центру по вертикали */
background: rgba(255, 235, 190, 0.8); /* полупрозрачный бежевый */
border: none;
font-size: 2em; /* размер стрелки */
padding: 10px 18px;
cursor: pointer;
z-index: 1;
color: #5b4224; /* коричневый цвет стрелки */
border-radius: 10px;
transition: background 0.3s; /* плавная смена фона при наведении */
}

.slider-btn:hover {
background: rgba(255, 215, 140, 1); /* фон кнопки при наведении */
}

.slider-btn.prev {
left: 10px; /* кнопка "назад" слева */
}
.slider-btn.next {
right: 10px; /* кнопка "вперёд" справа */
}

/* === Слайдер с описанием ========================================= */

/* Подпись под слайдером */
.slider-caption {
margin: 14px auto 10px; /* отступ сверху и снизу */
max-width: 1200px;
font-size: 1em;

color: var(--color-black-olive);
background: #f8f6f2; /* светло-бежевый фон */
padding: 10px 16px;
border-radius: 0px; /* можно записать как одно значение */
box-shadow: 0 4px 12px rgba(200, 162, 90, 0.08); /* мягкая тень */
position: relative;
transition: opacity 0.6s;
text-align: center;
overflow: hidden;

/* создаём маску для прозрачных краёв */
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
mask-repeat: no-repeat;
mask-size: 100% 100%;
}

.slider-caption:before {
/* content: "🕯️";  // иконка перед подписью (если нужно) */
position: absolute;
left: 15px;
top: 8px;
font-size: 1.2em;
}



/* === ряд из 3 изображений ============================================== */

/* 📸 Контейнер с фотографиями в один ряд */
.photo-row {
display: flex; /* флекс-контейнер */
justify-content: space-between; /* равномерный отступ между фото */
gap: 10px; /* дополнительный отступ между элементами */
margin-top: 20px; /* отступ сверху от предыдущего блока */
}

/* 🖼 Сами изображения внутри галереи */
.photo-row img {
width: 32%; /* три изображения по ширине строки */
border-radius: 12px; /* скругление углов */
box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* мягкая тень */
}


/* Контроль высоты картинок.
Чтобы все фото в ряду были ровные: */
.slide img,
.photo-row img {
object-fit: cover;
height: 200px;   /* или auto, если не хочешь обрезки */
}

/* ========================== Мобильная адаптация — всегда внизу ========================== */
@media (max-width: 768px) {
  .slider-wrapper {
    background: #fdf8ed;   /* светло-бежевый фон */
  }

  .slider-mobile .slide img {
  border-radius: 12px 12px 0 0; /* только верхние углы скруглённые */
  box-shadow: 0 -4px 15px rgba(0,0,0,0.15); /* тень только сверху */
  }

  .slider-caption {
margin: 6px auto 9px; /* отступ сверху и снизу */
font-size: 0.9em;
background: #f8f6f2; /* светло-бежевый фон */
}
}

@media (max-width: 768px) {
.slide img,
.photo-row img {
width: 100%;      /* каждая картинка в столбик */
}
.slide {
flex-direction: column;
align-items: center;
}
}

/* по умолчанию десктопный */
.slider-mobile { display: none; }

@media (max-width: 768px) {
.slider-desktop { display: none; }
.slider-mobile { display: block; }
}


@media (max-width: 768px) {
  .slider-mobile .slide img {
    width: 100%;
    height: auto;          /* авто-высота по пропорциям */
    max-height: 80vh;      /* ограничение, чтобы не съедало весь экран */
    object-fit: contain;   /* показываем целиком, без обрезки */
  }
}


@media (max-width: 768px) {

  /* Контейнер, который содержит слайдер */
  .slider-wrapper {
    scroll-snap-type: y proximity;  /* включает мягкий магнит при вертикальной прокрутке */
  }

  /* Сам слайдер, к которому "прилипает" экран */
  .slider-mobile {
    scroll-snap-align: start;       /* выравниваем верх блока по экрану */
    scroll-margin-top: 120px;       /* на каком расстоянии от верхнего края зафиксируется — регулируй под себя */
  }

  html, body {
    scroll-behavior: smooth;        /* плавная прокрутка */
    overscroll-behavior-y: contain; /* предотвращает "дёрганье" при прокрутке */
  }
}