/* page-blog.css — Extracted from style.css (P2-A 2026-09-02) — is_home() priority 102 deps [cocoon-child-style]
 * Source: style.css 582-606 + 727-1278 — .blog-page / .blog-card* / .blog-list / .blog-pagination* / .blog-filter* / .blog-section* / .blog-page-inner / .blog-no-posts
 * Unmodified move: selectors/values untouched per Phase2 P2-2 principle
 * Remaining in style.css: h3(1.3rem)/7-tier/global
 */

.blog-page {
  scroll-behavior: smooth;
}

/* サイドバー非表示 */
body.blog-page #sidebar,
body.blog-page .sidebar,
body.blog-page aside#sidebar {
  display: none !important;
}

body.blog-page #main,
body.blog-page .main {
  width: 100% !important;
  float: none !important;
}

body.blog-page #content {
  width: 100% !important;
  max-width: 100% !important;
}

body.blog-page .article {
  width: 100% !important;
}
.blog-page .blog-page-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

/* ページタイトル */
/* home.php で #main 直下に置くため、外幅は固定ページの .entry-title と自然に一致する */
.blog-page-title {
  font-size: 1.6em;
  color: var(--color-main); /* 藤色deep */
  border-bottom: 2px solid var(--color-sky); /* 空色base */
  padding: 0.5em 0.8em 0.3em;
  margin-top: 16px; /* 固定ページの .entry-title と同等 */
  /* タイトル→ナビバー間の余白: 固定ページと統一（8pxグリッドの 32px） */
  margin-bottom: 32px;
  line-height: 1.25; /* 固定ページと統一 */
}

/* セクション */
.blog-section {
  /* ナビバー→最初の見出し間を 2rem に統一 */
  margin: 2rem 0;
}

/* セクション見出し */
.blog-section-title {
  font-size: 1.4em;
  color: var(--color-main);
  border-bottom: 2px solid var(--color-sky);
  padding: 0.5em 0.8em 0.3em;
  margin-bottom: 0.5em;
  text-align: left;
}

/* セクション見出しアイコン（ブログ） */
.blog-section-icon {
  font-size: 0.85em;
  color: var(--color-main); /* 藤色deep: 文字色と同じ */
  margin-right: 0.3em;
  vertical-align: middle;
}

/* フィルターツールバー */
.blog-filter-bar {
  margin-bottom: 1.5em;
}

.blog-filter-row {
  display: flex;
  flex-wrap: nowrap; /* 折り返しを禁止（折りたたみ展開時もフィルターバーの高さを維持） */
  align-items: center;
  gap: 1em;
  padding: 0.8em 1em;
  background-color: var(--color-bg-fuji); /* fuji tint */
  border: 1px solid var(--color-fuji); /* 藤色base */
  border-radius: 8px; /* site-standard 8px unify 2026-09-05 */
}

/* 年別フィルター */
.blog-filter-year {
  display: flex;
  flex-wrap: nowrap; /* 折り返しを禁止（折りたたみ展開時も1行に収める） */
  gap: 0.3em;
  align-items: center;
}

/* 折りたたみ領域 */
.blog-filter-extra {
  display: inline-flex;
  gap: 0.3em;
  align-items: center;
}

/* plan 1788751836138: PC帯 collapsed既定（クラス主導・視覚差分ゼロ）
   基底 inline-flex は展開が既定のため、inline display:none のみに依存すると
   cleanupでinline除去後に extra表示＋▶◀同時表示へフォールバックする。
   .blog-page スコープ(0,2,0)で基底(0,1,0)に勝ち、768/834帯の !important 則には負けるため帯域を汚さない。
   print/media不変。no-JS時は home.php の inline display:none が効く。 */
.blog-page .blog-filter-extra {
  display: none;
}
.blog-page .blog-filter-extra.is-open {
  display: inline-flex;
}
.blog-page .blog-filter-expand {
  display: inline-flex;
}
.blog-page .blog-filter-expand.is-hidden {
  display: none;
}
/* close は expand を兼ねるため後勝ちで既定非表示。開状態は is-hidden 除去で表示 */
.blog-page .blog-filter-close {
  display: none;
}
.blog-page .blog-filter-close:not(.is-hidden) {
  display: inline-flex;
}

/* フィルターボタン共通 */
.blog-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-height: 34px;
  padding: 0.2em 0.72em; /* 左右をさらに20%増（0.6em → 0.72em） */
  min-width: 3.74em; /* 3.12em の 20%増 */
  line-height: 1;
  border: 1px solid var(--color-fuji); /* 藤色base */
  border-radius: 8px; /* site-standard 8px unify 2026-09-05 */
  background-color: #ffffff;
  color: var(--color-main); /* 藤色deep */
  font-size: 0.8em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 折りたたみボタン（開く/閉じる） */
.blog-filter-expand {
  background-color: var(--color-fuji-tint);
}

.blog-filter-btn:hover {
  background-color: var(--color-fuji-tint);
}

.blog-filter-btn.active {
  background-color: var(--color-fuji-mid, #7369A0);
  color: #ffffff;
  border: 2px solid var(--color-fuji-mid, #7369A0);
}

/* 検索入力（一体型: input + 虫眼鏡アイコン） */
.blog-filter-search {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.blog-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.blog-page .blog-search-input {
  padding: 0.2em 2em 0.2em 0.5em; /* 右側にアイコン分の余白を確保 */
  border: 1px solid var(--color-fuji); /* 藤色base */
  border-radius: 8px; /* site-standard 8px unify 2026-09-05 */
  font-size: 0.8em;
  width: 160px;
  height: 34px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-page .blog-search-input:focus {
  border-color: var(--color-main);
  outline: 2px solid var(--color-fuji-mid);
  outline-offset: 2px;
  box-shadow: none;
}

/* 検索ボタン（虫眼鏡アイコン: 入力欄の右側に重ねて一体化） */
.blog-page .blog-search-submit {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: none;
  border-radius: 0 6px 6px 0; /* site-standard 8px unify 2026-09-05: 外側input 8px - inset 2px */
  background-color: transparent;
  color: var(--color-fuji-deep); /* 藤色deep */
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.blog-page .blog-search-submit:hover {
  color: var(--color-main);
  background-color: var(--color-fuji-tint);
}

.blog-page .blog-search-submit svg {
  display: block;
  width: 14px;
  height: 14px;
}



.blog-section-desc {
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 1.5em;
  padding: 0.8em 1em;
  background-color: var(--color-bg-fuji); /* fuji tint */
  border-radius: 8px; /* site-standard 8px unify 2026-09-05 */
}

/* 2026-08-30 plan 1788097138531: 分類ラベル リボン/バッジ化 — desc 内の独立バッジ */
/* 2026-08-30 plan 1788097662899: リボンと本文を同サイズ(⑤説明 0.95→0.9→0.875)へ同期 */
.blog-section-desc-label {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: 0.28em 0.6em;
  border-radius: 8px; /* site-standard 8px unify 2026-09-05 */
  background-color: var(--color-fuji-mid, #7369A0);
  color: #ffffff;
  margin-bottom: 0.6em;
  vertical-align: middle;
}

.blog-section-desc-body {
  display: block;
  line-height: 1.6;
  font-size: 0.95rem;
}





/* 記事リスト（2カラムグリッド） — per_page=4 前提 2列×2行で外形を固定（plan 1788184818804） */
/* Phase6 (1788220801056) : 768px以下は css/responsive-768.css で 1列×4行 320pxへ切替。height/gap は対で管理するため値は触らない */
.blog-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 250px);
  grid-auto-rows: 250px;
  gap: 1.2em;
  height: calc(250px * 2 + 1.2em); /* min-heightではなくheightで固定 — 1〜4枚で不変 */
  min-height: calc(250px * 2 + 1.2em);
  align-items: stretch;
  margin-bottom: 1.5em;
}

.blog-card {
  height: 250px;
  min-height: 250px;
  max-height: 250px;
  flex: none;
  max-width: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 8px;
  background-color: #ffffff;
  transition: box-shadow 0.3s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* plan 1788441452706: 白カードhover統一トークンA（影＋浮きのみ・枠維持） */
@media (hover: hover) {
  .blog-card:hover {
    box-shadow: 0 4px 16px rgba(31, 32, 65, 0.12);
    transform: translateY(-2px);
    border-color: var(--color-border, #DCE6EE);
  }
  .blog-card:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(31, 32, 65, 0.10);
  }
}

.blog-card:focus-visible {
  outline: 2px solid var(--color-fuji-deep, #5F568E);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: none;
  }
  .blog-card:hover,
  .blog-card:active {
    transform: none;
    box-shadow: 0 1px 3px rgba(31, 32, 65, 0.06);
  }
}

@media print {
  .blog-card:hover,
  .blog-card:active {
    transform: none;
    box-shadow: none;
  }
}

/* 上ブロック: サムネイル + タイトル
   30:70比率 + 高さ中央揃え（タイトル行数非依存） + 上下左右余白均等
   thumb 30% / title 70%（gap 1emを0.5emずつ按分で 100% - gap に収める）
   旧: 120px固定/地表揃い → 新: コンテンツ高+paddingで均等、align-items:centerでthumbを垂直中央 */
.blog-card-top {
  display: flex;
  gap: 1em;
  padding: 1em;
  padding-right: 2.0em;
  position: relative;
  align-items: center; /* thumb を高さ中央に — タイトル行数に非依存 */
  box-sizing: border-box;
  min-height: auto; /* 108/120を撤廃し上下余白をpaddingのみに依存させ視覚均等を担保 */
}

/* サムネイル — 額縁（外枠 + 極薄影）: 画像本体を覆わない装飾
   fix: タイトル行数で枠サイズが変わらないよう stretch を無効化し、
   画像解像度(16:9)に同期したアスペクトで枠を画像に密着させる
   30:70計画: 120px固定 → calc(30% - 0.5em) 可変（gap按分でoverflow防止） */
.blog-card-thumb {
  flex: 0 0 calc(30% - 0.5em);
  width: calc(30% - 0.5em);
  max-width: calc(30% - 0.5em);
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  align-self: center; /* 高さ中央揃え — 親 align-items:center でも明示 */
  border-radius: 6px;
  border: 1px solid var(--color-border, #DCE6EE);
  background: var(--color-bg-light, #F3FAFD);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(46, 52, 64, 0.06);
}

.blog-card-thumb a {
  display: block;
  line-height: 0;
  height: 100%;
}

.blog-card-thumb img,
.blog-card .blog-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.blog-card:hover .blog-card-thumb {
  box-shadow: 0 2px 8px rgba(95, 86, 142, 0.08);
}

/* タイトルエリア — 30:70計画: flex:1 → calc(70% - 0.5em) 可変、高さ中央は align-self:center */
.blog-card-title-area {
  flex: 0 0 calc(70% - 0.5em);
  width: calc(70% - 0.5em);
  max-width: calc(70% - 0.5em);
  min-width: 0;
  align-self: center; /* Plan3代替: 親がflex-startでも中央維持。center親では冗長だが可読性のため残置 */
}
/* 下ブロック: 抜粋テキスト */
.blog-card-bottom {
  margin-top: auto;
  background-color: var(--color-bg-fuji); /* fuji tint */
  padding: 0.8em 1em;
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 0.3em;
  font-size: 0.85em;
}

.blog-card-category {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: bold;
}

/* カテゴリ別のバッジ色（各セクションのテーマカラーに対応） */
#tech .blog-card-category {
  background-color: var(--color-sky-tint);
  color: var(--color-sky-deep);
}

#activity .blog-card-category {
  background-color: var(--color-fuji-tint);
  color: var(--color-fuji-deep);
}

#free .blog-card-category {
  background-color: var(--color-jade-tint);
  color: var(--color-jade-deep);
}

.blog-card-date {
  color: #888;
}

.blog-card-title {
  /* font-size は下部 7階層セクションで一元管理（2026-08-30 plan 1788097138531 で 1.1em レガシーを撤廃） */
  margin: 0 0 0.3em 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.6em; /* fix: タイトル1行時の thumb 浮き上がりを解消（2行基準 1.8*2=3.6em に合わせる）。2行時は既に3.6em超のため不変、1行時のみ引き上げて thumb 中央Yを2行基準に一致。em維持でフォント/ズーム追従、デスクトップのみ有効（モバイルは縦積み） */
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  hanging-punctuation: allow-end;
}

.blog-card-title a {
  color: var(--color-main);
  text-decoration: none;
}

.blog-card-title a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* 2026-08-30: サムネイル hover/focus でタイトル色連動（Q1-Q4合意: サムネのみ・完全同一・focus連動） */
.blog-card-thumb:hover ~ .blog-card-title-area .blog-card-title a,
.blog-card-thumb:focus-within ~ .blog-card-title-area .blog-card-title a {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* 2026-08-31 plan 1788183107745: カード全体 hover/focus でタイトル色連動（上位互換） */
.blog-card:hover .blog-card-title a,
.blog-card:focus-within .blog-card-title a {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* 2026-08-31 rework 1788183871933: chevronは上白エリア(.blog-card-top)内のみ縦中央 — 下抜粋は右端フル表示 */
.blog-card-top .top-card-aff--iconOnly {
  position: absolute;
  right: 0.9em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-fuji-deep, #5F568E);
  transition: transform .18s ease, color .18s ease;
}

.blog-card:hover .blog-card-top .top-card-aff--iconOnly,
.blog-card:focus-within .blog-card-top .top-card-aff--iconOnly {
  color: var(--color-accent, #2B6B58);
  transform: translate(0.18em, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card-top .top-card-aff--iconOnly {
    transition: none;
    transform: translateY(-50%) !important;
  }
  .blog-card:hover .blog-card-top .top-card-aff--iconOnly,
  .blog-card:focus-within .blog-card-top .top-card-aff--iconOnly {
    transform: translateY(-50%) !important;
  }
}

.blog-card-excerpt {
  color: var(--color-text, #3E3A4A);
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(0.95rem * 1.7 * 3); /* plan 1788184818804: 短い抜粋でもbottom高さを揃える */
}

/* ページネーションラッパー（ページネーションあり: 3列グリッドで中央固定） */
.blog-pagination-wrapper.has-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8em;
  margin: 1.5em 0;
}

/* ページネーションなし（1ページのみ）は従来どおり flex 中央寄せ */
.blog-pagination-wrapper:not(.has-pagination) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  margin: 1.5em 0;
}

/* ページネーション */
.blog-pagination {
  grid-column: 2;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9em;
}

/* 記事総件数表示 */
.blog-pagination-count {
  grid-column: 3;
  justify-self: start;
  font-size: 0.85em;
  color: var(--color-main);
  white-space: nowrap;
  min-width: 11em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ページ番号ボタン共通 */
.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.3em 0.8em;
  margin: 0 0.2em;
  border: 1px solid var(--color-border);
  border-radius: 8px; /* site-standard 8px unify 2026-09-05 */
  text-decoration: none;
  color: var(--color-main);
  transition: background-color 0.2s ease;
}

.blog-pagination a:hover {
  background-color: var(--color-fuji-tint);
}

.blog-pagination .current {
  background-color: var(--color-fuji-mid, #7369A0);
  color: #ffffff;
  border: 1px solid var(--color-fuji-mid, #7369A0);
}

/* 省略記号（dots） */
.blog-pagination .page-numbers.dots {
  border: none;
  background: none;
  color: var(--color-main);
  opacity: 0.5;
  cursor: default;
  padding: 0.3em 0.2em;
  font-size: inherit;
}

.blog-pagination .page-numbers.dots:hover {
  background: none;
}

/* 無効化された前へ/次へボタン（1ページ目・最終ページで常時表示するための非リンク表示） */
.blog-pagination .disabled {
  color: var(--color-main);
  background-color: #f5f5f5;
  border-color: var(--color-border);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.blog-pagination .disabled:hover {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

/* モバイル対応: 768px以下で件数表示を非表示（横溢れ防止） */


/* 390px以下: ページネーション折返し */


/* 投稿がない場合 */
.blog-no-posts {
  color: #888;
  text-align: center;
  padding: 2em;
}