@charset "UTF-8";
/**
 * top_ribbon.css — витрина «Топ» (единый компонент для персон, мест и коллективов).
 *
 * Владислав, 23.09.2026: «Топ персон не тот дизайн. Плашка чёрная, фото крупнее,
 * прокрутка другая (зелёный бегунок). Для коллективов / Мест — также делаем».
 *
 * Разметку рисует smarty/templates/include/top_ribbon_v2.tpl, поведение —
 * assets/templates/clubber/js/top_ribbon.js, данные готовит каждый раздел
 * (user/persons.php, place/index.php, collective/index.php).
 *
 * Что здесь:
 *   .cb-top-ribbon            — тёмная плашка на всю ширину (фон раздела #191919,
 *                               тот же цвет, что у .verydarkgray-bkg в simple.css);
 *   .cb-top-ribbon-item       — карточка фиксированной ширины: пять карточек и
 *                               краешек шестой видны в 1170 px обёртки;
 *   .cb-top-ribbon-image      — крупное фото 208 × 230;
 *   .cb-top-ribbon-type/name  — тип мелким серым, имя белым;
 *   .cb-top-ribbon-info       — счётчики (глаз — посетители, комментарий);
 *   .cb-top-ribbon-arrow      — стрелки по краям;
 *   .cb-top-ribbon-bar/thumb  — своя горизонтальная прокрутка: тёмная дорожка,
 *                               зелёный бегунок (#03a94a, как .strongreencyan-bkg),
 *                               ползунок можно тащить мышью;
 *   на телефоне — свайп, размеры карточек уменьшаются.
 */

/* ------------------------------------------------------------------ плашка */
.cb-top-ribbon {
  position: relative;
  background-color: #191919;
  padding: 30px 0 22px;
  margin: 0 0 0;
}

.cb-top-ribbon-inner {
  position: relative;
}

/* ------------------------------------------------------------------ шапка */
.cb-top-ribbon-head {
  display: table;
  width: 100%;
  margin-bottom: 22px;
}

.cb-top-ribbon-title {
  display: table-cell;
  vertical-align: middle;
  font-family: 'Proxima Nova Condensed Bold';
  font-size: 34px;
  line-height: 38px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .01em;
}

/* необязательная подпись справа от заголовка (например «20 мест») */
.cb-top-ribbon-count {
  display: inline-block;
  margin-left: 14px;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 20px;
  text-transform: none;
  color: #8d8d8d;
  vertical-align: 3px;
}

/* ------------------------------------------------------------------ лента */
.cb-top-ribbon-viewport {
  position: relative;
  overflow: hidden;
}

.cb-top-ribbon-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  will-change: transform;
}

.cb-top-ribbon-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 208px;
  margin: 0 18px 0 0;
}

.cb-top-ribbon-image {
  display: block;
  width: 208px;
  height: 230px;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: #242424;
}

.cb-top-ribbon-image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 30%;
     object-position: 50% 30%;
}

/* нет фото — показываем первую букву названия, как в карточках коллективов */
.cb-top-ribbon-stub {
  display: block;
  width: 100%;
  height: 100%;
  font-family: 'Proxima Nova Bold';
  font-size: 72px;
  line-height: 230px;
  text-align: center;
  color: #3d3d3d;
  text-transform: uppercase;
  text-decoration: none;
}

.cb-top-ribbon-type {
  font-family: 'Proxima Nova Regular';
  font-size: 13px;
  line-height: 18px;
  color: #8d8d8d;
  margin-bottom: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* значок профиля/типа перед подписью типа */
.cb-top-ribbon-type .icon-type-small {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: -4px;
}

.cb-top-ribbon-name {
  height: 40px;
  overflow: hidden;
  font-family: 'Proxima Nova Bold';
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  color: #fff;
}

.cb-top-ribbon-name a {
  color: #fff;
}

.cb-top-ribbon-name a:hover {
  color: #03a94a;
}

.cb-top-ribbon-info {
  margin-top: 6px;
  font-size: 0;
}

.cb-top-ribbon-counter {
  display: inline-block;
  margin-right: 14px;
  font-family: 'Proxima Nova Regular';
  font-size: 14px;
  line-height: 20px;
  color: #bdbdbd;
}

.cb-top-ribbon-counter .ico {
  margin-right: 5px;
  vertical-align: -3px;
}

/* Значки счётчиков объявлены здесь, а не берутся со страницы: витрина — общая,
   а разделы подключают разные наборы стилей (у коллективов, например, нет
   common-places.css). Спрайт i/s.png и i/s-full.png — один и тот же файл. */
.cb-top-ribbon .ico-eye-white {
  background-image: url('i/s.png');
  background-position: 0 -129px;
  width: 24px;
  height: 12px;
}

.cb-top-ribbon .ico-comment-white {
  background-image: url('i/s.png');
  background-position: -65px -95px;
  width: 19px;
  height: 18px;
}

.cb-top-ribbon .ico-people2-light-gray {
  background-image: url('i/s.png');
  background-position: -148px -80px;
  width: 21px;
  height: 20px;
}

/* ------------------------------------------------------------------ стрелки */
.cb-top-ribbon-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background-color: rgba(25, 25, 25, .72);
  text-decoration: none;
  -webkit-transition: background-color .15s ease, border-color .15s ease;
  transition: background-color .15s ease, border-color .15s ease;
}

.cb-top-ribbon-arrow:hover {
  border-color: #03a94a;
  background-color: rgba(3, 169, 74, .22);
}

.cb-top-ribbon-prev { left: -8px; }
.cb-top-ribbon-next { right: -8px; }

.cb-top-ribbon-arrow-ico {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -6px 0 0 -4px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}

.cb-top-ribbon-prev .cb-top-ribbon-arrow-ico {
  margin-left: -5px;
  border-width: 6px 9px 6px 0;
  border-color: transparent #fff transparent transparent;
}

/* у края ленты стрелка гаснет */
.cb-top-ribbon-arrow-off,
.cb-top-ribbon-arrow-off:hover {
  border-color: rgba(255, 255, 255, .08);
  background-color: rgba(25, 25, 25, .4);
}

.cb-top-ribbon-arrow-off .cb-top-ribbon-arrow-ico {
  border-left-color: #5a5a5a;
}

.cb-top-ribbon-prev.cb-top-ribbon-arrow-off .cb-top-ribbon-arrow-ico {
  border-left-color: transparent;
  border-right-color: #5a5a5a;
}

/* ------------------------------------------------------------------ прокрутка */
.cb-top-ribbon-bar {
  position: relative;
  height: 6px;
  margin-top: 24px;
  border-radius: 3px;
  background-color: #2f2f2f;
  cursor: pointer;
}

.cb-top-ribbon-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  min-width: 48px;
  border-radius: 3px;
  background-color: #03a94a;
  cursor: pointer;
  -webkit-transition: background-color .15s ease;
  transition: background-color .15s ease;
}

.cb-top-ribbon-thumb:hover,
.cb-top-ribbon-bar-drag .cb-top-ribbon-thumb {
  background-color: #04c257;
}

/* лента помещается целиком — прокрутка и стрелки не нужны */
.cb-top-ribbon-noscroll .cb-top-ribbon-bar,
.cb-top-ribbon-noscroll .cb-top-ribbon-arrow {
  display: none;
}

/* ------------------------------------------------------------------ узкий экран */
@media (max-width: 1240px) {
  .cb-top-ribbon { padding: 24px 0 18px; }
  .cb-top-ribbon-title { font-size: 28px; line-height: 32px; }
  .cb-top-ribbon-item,
  .cb-top-ribbon-image { width: 184px; }
  .cb-top-ribbon-image { height: 204px; }
}

@media (max-width: 900px) {
  .cb-top-ribbon-item,
  .cb-top-ribbon-image { width: 150px; }
  .cb-top-ribbon-image { height: 168px; margin-bottom: 10px; }
  .cb-top-ribbon-name { height: 36px; font-size: 14px; line-height: 18px; }
  .cb-top-ribbon-title { font-size: 24px; line-height: 28px; }
  .cb-top-ribbon-arrow { width: 38px; height: 38px; margin-top: -19px; }
  .cb-top-ribbon-prev { left: 0; }
  .cb-top-ribbon-next { right: 0; }
  .cb-top-ribbon-bar { margin-top: 16px; }
}