/* =========================================================
   article-swiper.css
   - 記事スライダー用スタイル
   ========================================================= */

/* ラッパー */
.article-swiper-block {
  width: min(1200px, 92vw);
  margin-inline: auto;
}

.article-swiper-heading {
  margin-bottom: 1rem;
}

/* --- カードレイアウト --- */
.article-card {
  height: auto;
}

.article-card__inner {
  display: grid;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.article-card__inner:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* サムネイル比率（ショートコードから --thumb-ratio が渡される） */
.article-card__thumb {
  aspect-ratio: var(--thumb-ratio, 16/9);
  position: relative;
  overflow: hidden;
}

.article-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
	transition: transform 0.3s ease;
	will-change: transform;
}

.article-card:hover .article-card__img {
  transform: scale(1.08);
}

/* 本文エリア */
.article-card__body {
  padding: 12px 14px 16px;
}

.article-card__meta {
  display: flex;
  gap: 0.6em;
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 0.2em;
}

.article-card__date,
.article-card__cat,
.article-card__author {
  white-space: nowrap;
}

.article-card__title {
  font-size: clamp(14px, 2.6vw, 16px);
  line-height: 1.5;
  font-weight: 700;
  margin: 0.2em 0 0.4em;
}

.article-card__excerpt {
  font-size: 13px;
  line-height: 1.6;
  color: #555;
}

/* --- Swiper UI 調整 --- */
.article-swiper-block .swiper {
  padding-bottom: 50px;
  /* ページネーション分 */
}

.article-swiper-block .swiper-button-prev,
.article-swiper-block .swiper-button-next {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
}

.article-swiper-block .swiper-button-prev::after,
.article-swiper-block .swiper-button-next::after {
  font-size: 16px;
  color: #fff;
}

.article-swiper-block .swiper-pagination-bullet {
  opacity: 0.4;
  background: #000;
}

.article-swiper-block .swiper-pagination-bullet-active {
  opacity: 1;
}