/* ==========================================================================
   home.css — トップページ専用スタイル
   読み込み条件: is_home() || is_front_page()（functions.php で制御）

   セクション構成:
   1. 注目記事          (.p-featured)
   2. 記事カード        (.c-post-card)
   3. カテゴリーバナー  (.p-category-banner)
   4. 記事グリッド      (.p-post-grid)
   5. ページネーション  (.p-pagination)
   6. レスポンシブ対応
   ========================================================================== */


/* ==========================================================================
   1. メインビジュアル (.p-hero)
   ========================================================================== */

/*
 * .p-hero は #contents.p-home の直下に配置する。
 * #contents.p-home は max-width: none のためフルワイドになる。
 *
 * なぜ max-height + object-fit: cover を使うか:
 *   画像をそのままの比率で表示すると、PC の横長画面では縦に伸びすぎる。
 *   max-height で高さ上限を設けつつ、object-fit: cover でトリミング（中央基準）することで
 *   どんな縦横比の画像でも破綻なく表示できる。
 */
.p-hero {
  width: 100%;
  overflow: hidden; /* object-fit の clip が効くように */
}

.p-hero__img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  object-position: center; /* トリミング基準: 中央（縦方向は上半分が重要な画像が多いため）*/
  display: block; /* img はインライン要素なので下に余白が生じないよう block にする */
}

/* スマートフォンでは縦幅をやや小さく抑える（画面の半分以上を占めないように） */
@media (max-width: 767px) {
  .p-hero__img {
    max-height: 240px;
  }
}


/* ==========================================================================
   2. ページ全体のコンテナ
   ========================================================================== */

/*
 * #contents は base.css で padding・flex が設定されているが、
 * home.php はサイドバーなしのフルワイドレイアウトのため不要。
 * .p-home__main に padding を集約し、二重パディングを防ぐ。
 * セレクタ: #contents.p-home → 詳細度 (1,1,0)。base.css の #contents (1,0,0) より高い。
 */
#contents.p-home {
  display: block; /* base.css の flex を解除 */
  padding: 0;     /* base.css の padding を解除し .p-home__main に任せる */
  max-width: none; /* 制約は .p-home__main 側で行う */
}

.p-home__main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.p-home__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 4rem 0;
}


/* ==========================================================================
   3. 記事カード共通スタイル (.c-post-card)
   ========================================================================== */

.c-post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.c-post-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary-glow);
  transform: translateY(-2px);
}

/* サムネイル */
.c-post-card__thumb-link {
  display: block;
  overflow: hidden;
}

.c-post-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg);
}

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

.c-post-card:hover .c-post-card__img {
  transform: scale(1.05);
}

/* サムネイルなしのプレースホルダー */
.c-post-card__no-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(
    135deg,
    var(--color-border) 0%,
    var(--color-surface) 100%
  );
}

/* 本文エリア */
.c-post-card__body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1; /* 高さをカード全体に合わせてストレッチ */
}

/* カテゴリータグ
   なぜ #main-contents で詳細度を上げるか:
   base.css で `a:link, a:visited { color: var(--color-primary) !important }` が定義されている。
   a:visited の詳細度は (0,1,1) で、.c-post-card__cat の (0,1,0) より高い。
   !important 同士は詳細度で決まるため、こちらも (1,1,0) に上げて確実に勝つ。
   この ID セレクタ戦略は cards.css でも同様に使用している。 */
#main-contents .c-post-card__cat {
  color: var(--color-bg) !important;
}

.c-post-card__cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--color-primary);
  padding: 0.2em 0.7em;
  border-radius: 4px;
  text-decoration: none;
  align-self: flex-start;
  transition: opacity 0.15s ease;
}

.c-post-card__cat:hover {
  opacity: 0.85;
}

/* 記事タイトル */
.c-post-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
  /* 3行で末尾を省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 詳細度 (1,1,0) で a:visited (0,1,1) + !important を上回る */
#main-contents .c-post-card__title-link {
  color: var(--color-text) !important;
}

#main-contents .c-post-card__title-link:hover {
  color: var(--color-primary) !important;
}

.c-post-card__title-link {
  text-decoration: none;
  transition: color 0.15s ease;
}

/* メタ情報（日付） */
.c-post-card__meta {
  margin-top: auto; /* 本文が短くてもメタは下に固定 */
}

.c-post-card__date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ── 注目カードのオーバーライド ── */
.c-post-card--featured .c-post-card__title {
  font-size: 1.05rem;
  -webkit-line-clamp: 2;
}

.c-post-card--featured .c-post-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
}


/* ==========================================================================
   4. 注目記事セクション (.p-featured)
   ========================================================================== */

.p-featured {
  margin-bottom: 2.5rem;
}

.p-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}


/* ==========================================================================
   5. カテゴリーバナー (.p-category-banner)
   ========================================================================== */

.p-category-banner {
  margin-bottom: 2.5rem;
  padding: 1.75rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  /* アクセントカラーの微細なグロー枠でセクションを際立たせる */
  box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.08);
}

.p-category-banner__heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 1rem;
}

.p-category-banner__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.p-category-banner__link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45em 1em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px; /* ピル型 */
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.p-category-banner__link:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary-glow);
}

.p-category-banner__name {
  font-size: 0.85rem;
  font-weight: 500;
}

/* <a> の中の <span> は a:visited の color を inherit する。ID で詳細度を上げて打ち消す */
#main-contents .p-category-banner__name {
  color: var(--color-text) !important;
}

.p-category-banner__count {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  /* 記事数バッジ */
  background: var(--color-border);
  padding: 0.1em 0.5em;
  border-radius: 999px;
  min-width: 1.6em;
  text-align: center;
}


/* ==========================================================================
   6. 記事グリッド (.p-post-grid)
   ========================================================================== */

.p-post-grid {
  margin-bottom: 3rem;
}

.p-post-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}


/* ==========================================================================
   7. ページネーション (.p-pagination)
   ========================================================================== */

.p-pagination {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* WordPress が出力する .nav-links をスタイリング */
.p-pagination .nav-links {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.p-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  background: var(--color-surface);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.p-pagination .page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary-glow);
}

.p-pagination .page-numbers.current {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(88, 166, 255, 0.1);
  font-weight: 700;
  cursor: default;
}

.p-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}


/* ==========================================================================
   8. レスポンシブ対応
   ========================================================================== */

/* ── タブレット（〜 1024px）: 3カラム → 2カラム ── */
@media (max-width: 1024px) {
  .p-featured__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-post-grid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   9. 著者プロフィール (.p-author)
   ========================================================================== */

/*
 * #contents.p-home の外に配置するため、独立したセクションとしてスタイリングする。
 * 背景色・ボーダーでコンテンツエリアと視覚的に区切る。
 */
.p-author {
  border-top: 1px solid var(--color-border);
  padding:    3rem 1.5rem;
}

/* セクションタイトル */
.p-author__title {
  text-align:    center;
  font-size:     1.3rem;
  font-weight:   700;
  color:         var(--color-primary);
  margin:        0 0 2rem;
}

.p-author__inner {
  max-width:     640px; /* 記事本文と同じ読みやすい幅に揃える */
  margin:        0 auto;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           1.5rem;
  text-align:    center;
}

/* アバター画像ラッパー: 円形クリップのため正方形を保持する */
.p-author__avatar-wrap {
  flex-shrink: 0;
  width:       120px;
  height:      120px;
}

/*
 * アバター画像を円形にする。
 * border-radius: 50% は正方形の要素を円にする最も一般的な方法。
 * object-fit: cover でトリミングし、正方形でない画像も崩れずに表示できる。
 */
.p-author__avatar {
  width:         100%;
  height:        100%;
  border-radius: 50%;
  object-fit:    cover;
  display:       block;
  border:        3px solid var(--color-border);
}

.p-author__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 名前 */
.p-author__name {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--color-text);
  margin:      0;
}

/* 自己紹介 */
.p-author__bio {
  font-size:   0.9rem;
  color:       var(--color-text-muted);
  line-height: 1.8;
  margin:      0;
  text-align:  left; /* 本文は左寄せの方が読みやすい */
}


/* ── スマートフォン（〜 767px）: 1カラム縦積み ── */
@media (max-width: 767px) {
  .p-home__main {
    padding: 2rem 1rem;
  }

  .p-featured__grid {
    grid-template-columns: 1fr;
  }

  .p-post-grid__grid {
    grid-template-columns: 1fr;
  }

  .p-category-banner {
    padding: 1.25rem;
  }

  .p-category-banner__list {
    gap: 0.5rem;
  }
}