/* ==========================================================================
   NOMADO — Секция «Nomado в лицах» (галерея, светлая/прозрачная)
   Masonry-мозаика: колонки с плитками разной высоты (плейсхолдеры под фото).
   ========================================================================== */

.gallery {
  --ink: #14100e;
  --muted: #6f645e;
  position: relative; padding: var(--nm-section-gap) var(--nm-gutter);
  width: 100vw; margin-inline: calc(50% - 50vw);
  background: #f2f0ee; color: var(--ink); overflow: hidden;
}
.gallery__inner { position: relative; z-index: 1; width: 100%; max-width: var(--nm-content);
  margin-inline: auto; padding-inline: 0; }

/* ------------------------------------------------------------- шапка */
.gallery__head { max-width: 940px; margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; }
.gallery__title {
  margin: 0 0 clamp(16px, 1.8vw, 24px); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; line-height: 1.0; font-size: clamp(2rem, 4.6vw, 3.7rem); color: var(--ink);
}
.gallery__title em { font-style: normal; color: var(--nm-orange); }
.gallery__lead { margin: 0; color: var(--muted); line-height: 1.68;
  font-size: clamp(.98rem, 1.15vw, 1.12rem); }

/* --------------------------------------------------- masonry-мозаика */
.gallery__grid { column-count: 4; column-gap: clamp(10px, 1.2vw, 18px); }
.gtile {
  break-inside: avoid; width: 100%; margin: 0 0 clamp(10px, 1.2vw, 18px);
  position: relative; overflow: hidden; border-radius: var(--nm-radius-md);
  border: 1px solid rgba(20, 16, 14, .08); display: grid; place-items: center;
  color: rgba(20, 16, 14, .3); aspect-ratio: 3 / 4;
  background: linear-gradient(158deg, #f2e5dd, #e7d2c7);
  transition: transform .4s cubic-bezier(.19, .9, .22, 1), box-shadow .4s ease, border-color .3s ease;
}
/* разная высота плиток */
.gtile:nth-child(3n) { aspect-ratio: 1 / 1; }
.gtile:nth-child(4n) { aspect-ratio: 4 / 5; background: linear-gradient(158deg, #ffd9c6, #f6b79a); }
.gtile:nth-child(5n) { aspect-ratio: 3 / 2; }
.gtile:nth-child(7n) { aspect-ratio: 5 / 6; background: linear-gradient(158deg, #ffe7db, #f3ccbb); }
.gtile svg { width: clamp(26px, 2.8vw, 40px); height: auto; }
.gtile:hover { transform: translateY(-4px); z-index: 2; border-color: rgba(242, 53, 0, .5);
  box-shadow: 0 26px 50px -26px rgba(20, 16, 14, .5); }
/* когда вставят настоящее фото */
.gtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.19, .9, .22, 1); }
.gtile:hover img { transform: scale(1.06); }

/* --------------------------------------------------- подпись */
.gallery__caption {
  margin: clamp(30px, 3.6vw, 52px) auto 0; text-align: center; max-width: 40ch;
  font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.3;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem); color: var(--ink);
}
.gallery__caption b { color: var(--nm-orange); font-weight: 800; }

/* ------------------------------------------------------------- появление */
.js .gallery [data-io] { opacity: 0; transform: translateY(24px); }
.js .gallery [data-io].io-in { opacity: 1; transform: none;
  transition: opacity .7s ease, transform .8s cubic-bezier(.19, .9, .22, 1); }
.js .gtile { opacity: 0; transform: translateY(20px) scale(.98); }
.js .gtile.io-in { opacity: 1; transform: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.19, .9, .22, 1); }

/* ------------------------------------------------------------- адаптив */
@media (max-width: 1080px) { .gallery__grid { column-count: 3; } }
@media (max-width: 720px)  { .gallery__grid { column-count: 2; } }

/* мобильные: горизонтальный слайдер (свайп + snap) вместо мозаики */
@media (max-width: 640px) {
  .gallery__grid {
    display: flex; column-count: initial; gap: 12px;
    /* без scroll-контейнера на старте (иначе NO_LCP) — скролл включаем классом .sc после load */
    overflow-x: clip; overflow-y: visible;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
    scroll-padding-inline: 0;
  }
  .gallery__grid.sc { overflow-x: auto; overflow-y: hidden; }
  .gallery__grid::-webkit-scrollbar { display: none; }
  .gtile {
    flex: 0 0 84%; width: 84%; margin: 0 !important;
    aspect-ratio: 3 / 4 !important;     /* единая высота слайдов (перекрываем inline) */
    scroll-snap-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .gallery [data-io], .js .gtile { opacity: 1; transform: none; }
}