/* SoraKai — компактные жанры и прокручиваемые постеры на главной.
   Файл подключается ПОСЛЕ genres.css, cards.css, responsive.css и posters.css.
   Не меняет стили каталога, карточки манги и сайдбара. */

/* Жанры: меньше, но оставляем зазор сверху, чтобы неон не обрезался. */
.homepage .genres-bar {
  gap: 8px;
  margin-top: 12px;
  padding: 8px 6px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.homepage .genres-bar::-webkit-scrollbar { display: none; }
.homepage .genre-pill {
  flex: 0 0 auto;
  gap: 8px;
  min-height: 42px;
  padding: 5px 11px 5px 8px;
  border-radius: 10px;
}
.homepage .genre-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
}
.homepage .genre-icon svg { width: 15px; height: 15px; }
.homepage .genre-label { font-size: 11px; }
.homepage .genre-pill:hover { transform: translateY(-1px); }

/* Горизонтальная карусель: размер теперь зависит от ширины карточки,
   а не от количества колонок CSS-grid. */
.homepage .sorakai-carousel {
  position: relative;
  min-width: 0;
}
.homepage .sorakai-carousel .popular-grid,
.homepage .sorakai-carousel .update-grid {
  display: grid;
  grid-template-columns: none;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 170px;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 1px 2px 5px;
}
.homepage .sorakai-carousel .popular-grid::-webkit-scrollbar,
.homepage .sorakai-carousel .update-grid::-webkit-scrollbar { display: none; }
.homepage .sorakai-carousel .manga-card,
.homepage .sorakai-carousel .update-card {
  min-width: 0;
  scroll-snap-align: start;
}
/* Сохраняем утверждённую вертикальную форму и бейджи обложек. */
.homepage .sorakai-carousel .manga-cover-wrap,
.homepage .sorakai-carousel .update-image-wrap {
  height: auto;
  aspect-ratio: 2 / 3;
}
.homepage .sorakai-carousel .manga-cover,
.homepage .sorakai-carousel .update-image-wrap > a { width: 100%; height: 100%; }
.homepage .sorakai-carousel .manga-cover img,
.homepage .sorakai-carousel .update-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* Стрелки в стилистике главного баннера. */
.homepage .sorakai-carousel__arrow {
  position: absolute;
  top: 43%;
  z-index: 5;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 155, 255, .42);
  border-radius: 12px;
  background: rgba(8, 12, 27, .88);
  color: #f5f0ff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .38), 0 0 16px rgba(135, 67, 252, .18);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .18s, border-color .18s, box-shadow .18s, opacity .18s;
}
.homepage .sorakai-carousel__arrow svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.homepage .sorakai-carousel__arrow--prev { left: 7px; }
.homepage .sorakai-carousel__arrow--next { right: 7px; }
.homepage .sorakai-carousel__arrow:hover:not(:disabled),
.homepage .sorakai-carousel__arrow:focus-visible {
  background: rgba(88, 43, 176, .95);
  border-color: #b68cff;
  box-shadow: 0 0 22px rgba(129, 68, 254, .38);
}
.homepage .sorakai-carousel__arrow:focus-visible {
  outline: 2px solid #d9c0ff;
  outline-offset: 2px;
}
.homepage .sorakai-carousel__arrow:disabled { opacity: .22; pointer-events: none; box-shadow: none; }

@media (max-width: 1050px) {
  .homepage .sorakai-carousel .popular-grid,
  .homepage .sorakai-carousel .update-grid { grid-auto-columns: 156px; gap: 14px; }
}
@media (max-width: 790px) {
  .homepage .genres-bar { gap: 7px; }
  .homepage .genre-pill { min-height: 40px; padding: 5px 10px 5px 8px; }
  .homepage .genre-icon { width: 23px; height: 23px; flex-basis: 23px; }
  .homepage .genre-icon svg { width: 14px; height: 14px; }
  .homepage .sorakai-carousel .popular-grid,
  .homepage .sorakai-carousel .update-grid { grid-auto-columns: 148px; gap: 13px; }
}
@media (max-width: 540px) {
  .homepage .genre-pill { min-height: 39px; gap: 7px; padding: 4px 9px 4px 7px; }
  .homepage .genre-label { font-size: 10px; }
  .homepage .sorakai-carousel .popular-grid,
  .homepage .sorakai-carousel .update-grid { grid-auto-columns: minmax(0, 42vw); gap: 12px; }
  .homepage .sorakai-carousel__arrow { width: 33px; height: 33px; border-radius: 10px; }
  .homepage .sorakai-carousel__arrow svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage .genre-pill,
  .homepage .sorakai-carousel__arrow { transition: none; }
}