/* ===========================================================================
   Concurs gallery — «Условия жизни»
   Каркас: секция aspect-ratio 1470/600 → внутри grid auto 1fr.
   Слева — навигация, справа — скролящийся masonry на CSS columns.
   =========================================================================== */

.concurs {
  width: 100%;
}

.concurs__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  aspect-ratio: 1300 / 600;   /* пропорция и высота — на самом компоненте */
  min-height: 0;              /* чтобы 1fr-ячейка могла скроллиться */
}

/* ── Левая навигация ─────────────────────────────────────────────────── */
.concurs__nav {
  align-self: start;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
}

.concurs__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.concurs__nav-btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: #1a1a1a;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .18s ease;
}

.concurs__nav-btn:hover,
.concurs__nav-btn.is-active {
  color: #0a64d6;
}

.concurs__nav-btn.is-active {
  font-weight: 600;
}

.concurs__nav-btn[disabled] {
  color: #1a1a1a;
  cursor: default;
  text-decoration: none;
  opacity: .85;
}

/* ── Правый скролл-контейнер + masonry ───────────────────────────────── */
.concurs__gallery {
  position: relative;
  height: 100%;
  min-height: 0;                  /* грид-ячейка должна уметь сжиматься */
  overflow-y: auto;
  overscroll-behavior: contain;   /* на границах отдаём скролл странице */
  -webkit-overflow-scrolling: touch;
}

/* CSS Grid — бентогрид. База (большие экраны, ~2560) — 6 колонок.
   Высота строки и гэп — в переменных, крутятся под макет/брейкпоинт. */
.concurs__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: var(--concurs-row, 220px);
  grid-auto-flow: dense;
  gap: var(--space-s);
}

.concurs__card {
  margin: 0;                      /* сброс дефолтного margin у <figure> */
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #eee;
  /* по умолчанию 1×1 */
}

/* Бенто-паттерн, повтор каждые 12 карточек (большой тайл чередует сторону) */
.concurs__card:nth-child(12n + 1),    /* 2 шир × 1 */
.concurs__card:nth-child(12n + 2),
.concurs__card:nth-child(12n + 6),
.concurs__card:nth-child(12n + 7),
.concurs__card:nth-child(12n + 8),
.concurs__card:nth-child(12n + 12) {
  grid-column: span 2;
}
.concurs__card:nth-child(12n + 3),    /* 2 шир × 2 выс */
.concurs__card:nth-child(12n + 11) {
  grid-column: span 2;
  grid-row: span 2;
}
/* 12n+4, 12n+5, 12n+9, 12n+10 — остаются 1×1 */


.concurs__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* кадрируется под ячейку бенто */
  border-radius: inherit;
}

.concurs__card-title {
  position: absolute;
  inset: 0 0 auto 0;             /* подпись сверху */
  margin: 0;
  padding: 18px 22px 56px;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  text-transform: uppercase;
  pointer-events: none;
}

/* Чуть приглушаем скроллбар контейнера */
.concurs__gallery::-webkit-scrollbar { width: 8px; }
.concurs__gallery::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 8px; }

/* ── Колонки по брейкпоинтам (desktop-first, под Bricks) ─────────────── */
@media (max-width: 1477px) {     /* L — стандартный десктоп ~1470 → бенто на 4 */
  .concurs__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) {      /* планшет портрет → 2 колонки */
  .concurs__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Мобилка: обычный поток, без скролла-в-скролле ───────────────────── */
@media (max-width: 767px) {
  .concurs__inner {
    display: block;
    aspect-ratio: auto;
  }
  .concurs__nav {
    display: none;             /* навигация завязана на внутренний скролл — на моб. скрываем */
  }
  .concurs__gallery {
    height: auto;
    overflow: visible;
  }
  .concurs__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }
  .concurs__card {
    grid-column: auto !important;   /* сброс бенто-span'ов */
    grid-row: auto !important;
    border-radius: 16px;
  }
  .concurs__card img {
    height: auto;                   /* натуральная высота, без кадрирования */
    object-fit: fill;
  }
  .concurs__card-title {
    padding: 12px 14px 40px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .concurs__card-title { font-size: 12px; }
}