/* ===========================================================
File: /assets/css/category-dorim-tales.css
説明: 物語 – Tales カテゴリページ専用スタイル
      - ヒーロー下に slick のドットを中央配置
      - slick-theme.css の .slick-active を上書きしない（色/不透明度は未指定）
=========================================================== */

/* Tales カテゴリページ専用: 固定幅を解除（ヒーローを全幅で使うため） */
.container.dorim-tales {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* 内側ラッパ：コンテンツ領域の最大幅と左右余白 */
.tales-content-wrap,
.category-posts {  /* 既存構造に合わせ簡易ラッパも許容 */
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
}

/* =====================================
   Tales Hero（Slickスライダー・16:9）
   ※ ドットはヒーロー「下」に出し、中央寄せ
===================================== */
.category-hero {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto 12px;  /* ドットが下に来るのでマージンは少し詰める */
  overflow: hidden;
  border-radius: 12px;
}

.category-hero-slider { width: 100%; }

.category-hero-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.category-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px;
}

/* --- ドットナビ（下・中央寄せ／他CSSの干渉を避けて明示） --- */
.dorim-tales .category-hero .slick-dots{
  position: static;         /* 画像上に重ねない */
  bottom: auto;
  left: auto;
  transform: none;
  display: block;
  width: 100%;
  padding: 0;
  margin: 8px 0 16px;       /* 画像下に間隔 */
  list-style: none;         /* 箇条書きマーカー除去 */
  text-align: center;       /* ★ 中央寄せ */
}

.dorim-tales .category-hero .slick-dots li{
  display: inline-block;
  margin: 0 6px;
}

.dorim-tales .category-hero .slick-dots li button{
  padding: 0;
}

/* ここでは“形状”だけ指定し、色/不透明度は slick-theme.css に委ねる */
.dorim-tales .category-hero .slick-dots li button:before{
  font-size: 10px;
  line-height: 20px;
  /* color / opacity は指定しない（.slick-active の視覚差を殺さない） */
}

/* ---------- 見出し ---------- */
.section-title {
  margin: 18px 0 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ---------- 記事カード ---------- */
.category-articles-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
  justify-content: start;
  gap: 16px;
  margin-top: 10px;
}

.category-article-card {
  background: #fff;
  border: 1px solid #e9e9ef;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.category-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  border-color: #e3e3ee;
}

.category-article-card .thumb{
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f6f7fb;
}

.category-article-card .thumb.ph{
  background: linear-gradient(180deg,#f7f8fc,#eff2f8);
}

.category-article-card .category-article-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-article-card .meta{
  padding: 12px 14px 14px;
}

.category-article-card .title{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-article-card .title a{
  color: inherit;
  text-decoration: none;
}

.category-article-card .title a:hover{
  text-decoration: underline;
}

.category-article-card .excerpt{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 0件メッセージ */
.category-articles-empty{
  border: 1px dashed #e3e3ee;
  border-radius: 12px;
  padding: 16px;
  background: #fafafe;
  color: #555;
}

/* ページネーション */
.category-articles-more{
  margin: 16px 0 8px;
  text-align: right;
}

.category-articles-more .page-numbers{
  display: inline-block;
  min-width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  margin-left: 4px;
  padding: 0 8px;
  border: 1px solid #e1e1ea;
  border-radius: 8px;
  text-decoration: none;
  background: #fff;
  font-size: 14px;
}

.category-articles-more .page-numbers.current{
  background: #111;
  color: #fff;
  border-color: #111;
}

.category-articles-more .page-numbers:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

@media (max-width: 720px){
  .category-articles-list{
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
}