/* photo_invite.css — рекламный блок «Был на мероприятии? Размести свои лучшие
   фото!» (СТРОКА-РАЗМЕСТИ-ФОТО-1, тег PHOTO-INVITE-BANNER, 12.10.2026).

   Блок стоит на четырёх страницах — главная, Афиша, Фото, Новости. Разметка
   одна: smarty/templates/include/photo_invite_v2.tpl; данные — lib/photoinvitelib.php.

   ОДИН РЯД: .cb-pi-strip не переносится (flex-wrap: nowrap) и на узких экранах
   прокручивается по горизонтали. Кадры одной высоты, подписи — в title.
   Капс-лок не используем (правило: капс только в заголовках разделов).

   Файл новый, поэтому ?v= у ссылки — свежий (правило 11а); дальше метку
   обновляет общий фильтр версий lib/assetslib.php (KESh-ASSETY-1). */

.cb-pi {
  background: #eaf8fd;
  padding: 26px 0 30px;
}

/* ПРИЗЫВ-ФОТО-И-QR-1 (тег PHOTO-INVITE-QR, 13.10.2026): QR гостевого механизма.
   У него СВОЯ колонка сетки: строка с кнопкой и ряд миниатюр стоят как были,
   но код ничего не перекрывает (проверено при ширинах 1440…768 px —
   перекрытых миниатюр 0). На экранах ≤760 px QR не нужен: та же ссылка есть в
   кнопке, поэтому он скрыт и сетка становится обычной. */
.cb-pi-with-qr {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 16px;
}

.cb-pi-with-qr .cb-pi-qr {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.cb-pi-with-qr .cb-pi-head {
  grid-column: 2;
  grid-row: 1;
}

.cb-pi-with-qr .cb-pi-strip {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.cb-pi-qr {
  display: block;
  text-decoration: none;
}

.cb-pi-qr-code svg {
  display: block;
  width: 120px;
  max-width: 100%;
  height: auto;
}

.cb-pi-qr-note {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: #6d7c85;
  margin-top: 4px;
}

.cb-pi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.cb-pi-title {
  display: block;
  font-family: 'Proxima Nova Bold';
  font-size: 22px;
  line-height: 1.25;
  color: #1b1b1b;
  text-decoration: none;
  max-width: 720px;
}

.cb-pi-title:hover {
  color: #00aeef;
}

.cb-pi-action {
  flex: 0 0 auto;
  display: inline-block;
  font-family: 'Proxima Nova Bold';
  font-size: 14px;
  line-height: 1;
  color: #ffffff;
  background: #00aeef;
  border-radius: 20px;
  padding: 12px 22px;
  text-decoration: none;
  white-space: nowrap;
}

.cb-pi-action:hover {
  background: #0099d2;
  color: #ffffff;
}

.cb-pi-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.cb-pi-item {
  flex: 0 0 auto;
  display: block;
  width: 120px;
  height: 80px;
  overflow: hidden;
  border-radius: 4px;
  background: #d8e6ee;
}

.cb-pi-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cb-pi-item:hover img {
  opacity: 0.85;
}

@media (max-width: 760px) {
  .cb-pi {
    padding: 18px 0 22px;
  }
  .cb-pi-head {
    display: block;
    margin-bottom: 14px;
  }
  .cb-pi-title {
    font-size: 18px;
  }
  .cb-pi-action {
    margin-top: 12px;
  }
  .cb-pi-strip {
    gap: 8px;
  }
  .cb-pi-item {
    width: 96px;
    height: 64px;
  }
  /* QR на телефоне не нужен: ту же страницу открывает сама кнопка. На узких
     экранах места мало — код убираем, сетка возвращается к одному столбцу и
     блок выглядит ровно так же, как без QR. */
  .cb-pi-qr {
    display: none;
  }
  .cb-pi-with-qr {
    display: block;
  }
  .cb-pi-with-qr .cb-pi-strip {
    min-width: 0;
  }
}