/* ── Секция «Галерея» ──────────────────────────────────────── */
.gallery { padding: var(--section-padding); background: var(--color-surface); }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 1024px) { .gallery__grid { grid-template-columns: repeat(4, 1fr); } }

/* Увеличенные ячейки — spans 2 cols (только desktop и мобильный) */
@media (max-width: 639px),
       (min-width: 1024px) {
  .gallery__item:nth-child(1),
  .gallery__item:nth-child(6) {
    grid-column: span 2;
  }
}

/* ── Планшет 640–1023px: большое+2 маленьких / 2 маленьких+большое ── */
@media (min-width: 640px) and (max-width: 1023px) {
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
  .gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; }
  .gallery__item:nth-child(3) { grid-column: 2; grid-row: 2; }
  .gallery__item:nth-child(4) { grid-column: 1; grid-row: 3; }
  .gallery__item:nth-child(5) { grid-column: 1; grid-row: 4; }
  .gallery__item:nth-child(6) { grid-column: 2; grid-row: 3 / 5; aspect-ratio: auto; }
}

/* На десктопе: items 2, 3 (row 1) и 4, 5 (row 2) растягиваются
   по высоте до span-2 соседей (1 и 6). Нижние границы выровнены. */
@media (min-width: 1024px) {
  .gallery__item:nth-child(2),
  .gallery__item:nth-child(3),
  .gallery__item:nth-child(4),
  .gallery__item:nth-child(5) {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* ── Элемент галереи ───────────────────────────────────────── */
.gallery__item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-2);
}

.gallery__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.gallery__item:hover .gallery__img { transform: scale(1.06); }

/* Оверлей */
.gallery__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 78, 131, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery__item:hover .gallery__overlay { opacity: 1; }

.gallery__overlay svg {
  width: 36px; height: 36px;
  stroke: #fff;
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Плейсхолдер */
.gallery__placeholder {
  width: 100%; height: 100%;
  background: var(--color-surface-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-body-s);
  font-weight: 600;
}

.gallery__placeholder svg {
  width: 32px; height: 32px;
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
}

/* ── Lightbox ──────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 16, 30, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__inner {
  position: relative;
  max-width: 1000px;
  max-height: 90vh;
  width: 100%;
}

.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,0.8);
}

.lightbox__close {
  position: absolute;
  top: -16px; right: -16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
}

.lightbox__close:hover { background: var(--color-border-light); }

.lightbox__close svg {
  width: 20px; height: 20px;
  stroke: var(--color-text-primary);
}

.lightbox__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(8,24,40,0.8);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
}

.lightbox__nav:hover { background: var(--color-primary); border-color: var(--color-cyan); }
.lightbox__nav svg { width: 20px; height: 20px; stroke: var(--color-text-primary); }

.lightbox__prev { left: -60px; }
.lightbox__next { right: -60px; }

@media (max-width: 640px) {
  .lightbox__prev { left: -var(--space-2); }
  .lightbox__next { right: -var(--space-2); }
}