/* styles/gallery.css — галерея-слайдер с симметричными вертикальными отступами
   • Десктоп: 4 карточки, одинаковая высота, стрелки у внутренних краёв контейнера
   • Мобайл: 1 карточка, стрелки снизу по центру
   • Симметричные отступы сверху/снизу: и у секции, и у трека (контейнера карточек)
   • Без «уезда» вправо, аккуратные внутренние отступы
   • Песочно‑оранжевая палитра, логика не изменена
   • Исправлено вылезание текста на мобиле: контейнеры не превышают ширину экрана
*/

/* ========== Переменные секции ========== */
.gallery-section {
  /* Контейнер страницы (внешние боковые поля секции) */
  --page-pad-x: clamp(14px, 5vw, 24px);

  /* Контейнер контента */
  --container-max: 1280px;    /* max-width для трека/контента */
  --section-pad-y: clamp(48px, 8vw, 90px); /* симметричные отступы секции сверху/снизу */

  /* Трек (внутренние отступы и сетка) */
  --grid-pad-x: 40px;         /* лево/право внутри трека */
  --grid-pad-y: 28px;         /* верх/низ внутри трека — симметрично */
  --gap: 16px;
  --columns: 4;               /* 4 карточки на десктопе */
  --card-radius: 18px;
  --btn-size: 46px;

  width: 100%;
  position: relative;
  padding: var(--section-pad-y) var(--page-pad-x); /* симметрично по вертикали */

  /* Тёплый песочный фон + мягкие «пятна» */
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(240, 196, 120, 0.08) 0%, rgba(240, 196, 120, 0) 60%),
    radial-gradient(55% 55% at 0% 100%, rgba(223, 139, 43, 0.08) 0%, rgba(223, 139, 43, 0) 65%),
    linear-gradient(135deg, #fff8f0 0%, #f6efe3 100%);
  overflow: hidden;
  overflow-x: hidden; /* защита от горизонтального скролла */
}

/* Декор секции */
.gallery-section::before,
.gallery-section::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.gallery-section::before {
  top: -140px; right: -120px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(199, 140, 67, 0.10) 0%, rgba(199, 140, 67, 0) 70%);
  border-radius: 50%;
  filter: blur(2px);
}
.gallery-section::after {
  bottom: -160px; left: -100px;
  width: 520px; height: 520px; opacity: 0.28;
  background:
    url("data:image/svg+xml,%3Csvg width='520' height='520' viewBox='0 0 520 520' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f6efe3' d='M150,150 Q300,-50 400,150 Q520,340 360,450 Q220,560 100,400 Q0,250 150,150 Z'/%3E%3C/svg%3E")
    no-repeat center/contain;
}

/* Заголовки */
.gallery-title {
  text-align: center;
  font-size: 2.6rem;
  font-weight: 800;
  background: linear-gradient(120deg, #5a4736, #a9793b, #e0b15a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  padding-inline: var(--page-pad-x); /* на мобиле защищает от прилипания к краям */
}
.gallery-subtitle {
  text-align: center;
  color: #6b635b;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  margin-bottom: 40px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  padding-inline: var(--page-pad-x); /* предотвращает горизонтальный выход текста */
}

/* ========== Горизонтальный слайдер ========== */
/* Трек: flex + scroll-snap. Отменяем masonry-колонки, задаём симметричный padding Y */
.gallery-grid {
  /* отмена masonry */
  columns: initial; column-count: initial; column-width: initial;

  position: relative;
  z-index: 1;
  display: flex;

  /* ВАЖНО: защита от переполнения на мобиле */
  box-sizing: border-box;     /* padding входит в ширину, не «раздувает» контейнер */
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;

  /* Симметричные отступы внутри трека */
  padding: var(--grid-pad-y) var(--grid-pad-x);

  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;

  scrollbar-width: none;       /* скрыть полосу (Firefox) */
}
.gallery-grid::-webkit-scrollbar { display: none; } /* скрыть полосу (WebKit) */

/* Карточка (слайд) — равные высоты, прилипание к началу */
.gallery-item {
  flex: 0 0 calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
  scroll-snap-align: start;

  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: #ffffff;
  border: 1px solid rgba(230, 210, 180, 0.7);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);

  /* одинаковая высота */
  --ratio: 4 / 3;
  aspect-ratio: var(--ratio);

  /* появление */
  transform: translateY(20px);
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    opacity 0.8s ease,
    border-color 0.3s ease;
  will-change: transform, opacity;
  cursor: zoom-in;
}
.gallery-item.visible { opacity: 1; transform: translateY(0); }

/* мягкая подсветка сверху */
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(70% 50% at 50% 0%, rgba(240, 184, 90, 0.12) 0%, rgba(240, 184, 90, 0) 60%);
  pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
}
.gallery-item:hover { box-shadow: 0 16px 40px rgba(199, 140, 67, 0.22); border-color: rgba(199, 140, 67, 0.28); }
.gallery-item:hover::after { opacity: 1; }

/* Изображение */
.gallery-item img {
  width: 100%; height: 100%;
  display: block; object-fit: cover;
  border-radius: var(--card-radius);
  transition: transform 0.6s ease, filter 0.6s ease;
  will-change: transform;
}
.gallery-item:hover img { transform: scale(1.06); filter: brightness(1.06) saturate(1.02); }

/* Drag-state */
.gallery-grid.is-dragging { scroll-snap-type: none; cursor: grabbing; }

/* ========== Стрелки ========== */
/* Десктоп: выравниваем по внутренним краям контейнера (с учётом page-pad и grid-pad-x) */
.gallery-slider__btn {
  position: absolute;
  z-index: 3;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  top: 50%;
  transform: translateY(calc(-20% - 96px)); /* поднимаем на 32px */
  background: linear-gradient(135deg, #df8b2b, #f0b85a);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 20px rgba(199, 140, 67, 0.35);
  cursor: pointer;
  user-select: none;
}
.gallery-slider__btn svg { width: 22px; height: 22px; fill: #fff; }
.gallery-slider__btn[aria-disabled="true"],
.gallery-slider__btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

/* Вычисляем внутренние края контейнера: page-pad + центральный зазор + grid-pad-x */
.gallery-slider__prev {
  left: calc(
    var(--page-pad-x) + clamp(0px, (100% - 2 * var(--page-pad-x) - var(--container-max)) / 2, 2000px) + var(--grid-pad-x)
  );
}
.gallery-slider__next {
  right: calc(
    var(--page-pad-x) + clamp(0px, (100% - 2 * var(--page-pad-x) - var(--container-max)) / 2, 2000px) + var(--grid-pad-x)
  );
}

/* ========== Адаптив ========== */
@media (max-width: 1024px) {
  .gallery-section { --grid-pad-x: 24px; --gap: 14px; }
}

@media (max-width: 768px) {
  .gallery-section {
    --page-pad-x: 16px;  /* гарантируем безопасные поля по краям экрана */
    --grid-pad-x: 16px;
    --grid-pad-y: 56px;  /* симметрично: сверху 56px и снизу 56px внутри трека, хватает места для стрелок */
    --gap: 12px;
    --columns: 1;
    --card-radius: 16px;
    --btn-size: 40px;
  }

  .gallery-title { font-size: 2rem; }
  .gallery-subtitle { font-size: 1rem; margin-bottom: 28px; }

  /* Стрелки снизу по центру, внутри симметричных отступов трека */
  .gallery-slider__btn {
    top: auto;
    bottom: calc(var(--grid-pad-y) / 2); /* визуально по центру нижней «подушки» */
    transform: translateY(0);
    background: linear-gradient(135deg, #f0b85a, #df8b2b);
    box-shadow: 0 8px 18px rgba(199, 140, 67, 0.28);
  }
  .gallery-slider__prev, .gallery-slider__next {
    left: 50%; right: auto;
  }
  .gallery-slider__prev { transform: translate(-50%, 0) translateX(calc(-1 * (var(--btn-size) / 2 + 8px))); }
  .gallery-slider__next { transform: translate(-50%, 0) translateX(calc(var(--btn-size) / 2 + 8px)); }

  .gallery-item, .gallery-item img { border-radius: var(--card-radius); }
}

@media (max-width: 480px) {
  .gallery-section {
    --page-pad-x: 14px; /* немного меньшее поле на очень узких экранах */
    --grid-pad-x: 12px;
    --grid-pad-y: 52px;
    --gap: 10px;
    --card-radius: 14px;
    --btn-size: 38px;
  }
  .gallery-item, .gallery-item img { border-radius: var(--card-radius); }
}

/* Предпочтение уменьшенного движения */
@media (prefers-reduced-motion: reduce) {
  .gallery-item, .gallery-item img { transition: none !important; }
}

/* ========== Лайтбокс ========== */
.gallery-lightbox {
  position: fixed; inset: 0;
  z-index: 9999; display: none;
  place-items: center;
  background: radial-gradient(100% 100% at 50% 50%, rgba(43, 31, 21, 0.86), rgba(43, 31, 21, 0.94));
  backdrop-filter: blur(4px);
}
.gallery-lightbox.is-open { display: grid; animation: glbFade 180ms ease-out; }
@keyframes glbFade { from { opacity: 0; } to { opacity: 1; } }

.gallery-lightbox__media {
  max-width: 92vw; max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  object-fit: contain; background: #1a120a;
}

.gallery-lightbox__btn {
  position: absolute; top: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #df8b2b, #f0b85a);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 20px rgba(199, 140, 67, 0.35);
  cursor: pointer; user-select: none;
}
.gallery-lightbox__btn:hover { transform: translateY(-2px); }
.gallery-lightbox__close { right: 16px; }
.gallery-lightbox__prev,
.gallery-lightbox__next { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.gallery-lightbox__prev { left: 16px; }
.gallery-lightbox__next { right: 16px; }
.gallery-lightbox__btn svg { width: 22px; height: 22px; fill: #fff; }

body.glb-no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox.is-open { animation: none; }
  .gallery-lightbox__btn:hover { transform: none; }
}