/**
 * @file
 * prev-next-scroll-widget用スタイル
 * Slickを使わず、CSS scroll-snapによるネイティブスワイプスクロール
 */

.prev-next-scroll-widget {
  position: relative;
}

/* スクロールトラック */
.prev-next-scroll-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  padding: 0 4px 12px;
  /* スクロールバーを細く */
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.prev-next-scroll-track::-webkit-scrollbar {
  height: 6px;
}

.prev-next-scroll-track::-webkit-scrollbar-track {
  background: transparent;
}

.prev-next-scroll-track::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

/* 各アイテム */
.prev-next-scroll-item {
  scroll-snap-align: center;
  flex: 0 0 auto;
  /* PC: 4アイテム表示相当 */
  width: calc(25% - 12px);
  width: 160px;
}

.prev-next-scroll-item .feature-panellist-photo {
  margin-bottom: 0.8rem;
}

.prev-next-scroll-item .feature-panellist-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 18 / 11;
  object-fit: cover;
}

  /* 閲覧中の記事ハイライト */
/*.prev-next-scroll-item.is-current {*/
/*  border: 2px solid #0073bb;*/
/*  border-radius: 4px;*/
/*}*/
.prev-next-scroll-item.is-current {
  background-color: #ffdede;
}
.prev-next-scroll-item {
  padding: 0.5rem;
}
.prev-next-scroll-item.is-current .feature-panellist-box {
  background-color: rgba(0, 115, 187, 0.03);
}

.prev-next-scroll-item h3.feature-panellist-title {
  display: -webkit-box;
  font-weight: 800;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
font-size: 0.875rem;
}

.prev-next-scroll-item .feature-panellist-date {
  font-size: 0.8rem;
  color: #8e9193;
  font-weight: 400;
}

.prev-next-scroll-item .feature-panellist-icon {
  display: inline-flex;
}

.prev-next-scroll-item .feature-panellist-icon img {
  height: auto;
}

.feature-panellist-box-bottom li.list-group {
    padding: 0 .6rem 0 0;
    border: none;
    display: contents;
}

.feature-panellist-box-bottom li.list-group a {
  font-size: .8rem;;
  padding-right: .4rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.feature-panellist-box-bottom li.list-group a:hover {
  text-decoration: underline;
}


.prev-next-scroll-item .feature-panellist-box-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  -webkit-box-align: baseline;
  align-items: baseline;
}

/* 矢印ボタン */
.prev-next-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  z-index: 10;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  background: #454545;
  color: #FFF;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: opacity 0.2s, box-shadow 0.2s;
  opacity: 0.8;
}

.prev-next-scroll-arrow:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.prev-next-scroll-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}

.prev-next-scroll-arrow--prev {
  left: -16px;
}

.prev-next-scroll-arrow--next {
  right: -16px;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .prev-next-scroll-widget {
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
  }
  .prev-next-scroll-item {
    width: calc(50% - 8px);
    max-width: 150px;
  }
  .prev-next-scroll-item h3.feature-panellist-title {
    -webkit-line-clamp: 4;
  }
  .prev-next-scroll-arrow {
    display: none; /* モバイルではスワイプ操作のみ */
  }
}

@media (max-width: 480px) {
  .prev-next-scroll-item {
    width: calc(80% - 8px);
  }
}