/*
 * ブログ (info.coekar.com/blog/) 固有のスタイル。
 * css/terms.css と同じく <link> で直接読み込む (bundle:css の連結対象には入れない)。
 * deploy.yml の content hash リネームは自動で効く。
 *
 * 記事本文は Markdown を <Content /> で描画するため Astro の scoped style が届かない。
 * グローバルなクラス (.blog-body 配下) で組む。
 *
 * 設計方針:
 *   軸は 1 本 — ヘッダー・一覧・記事本文をすべて同じ列 (.blog-column / 44rem) に置く。
 *     以前はヘッダーが 44rem 中央寄せ、一覧が max-width-content で左端が 2 本あり、
 *     縦のリズムが崩れていた。
 *   仕切りは面と hairline — design.md「装飾的なグラデや影でメリハリを作らず、
 *     面の切り替えそのものを仕切りにする」に従い、ヘッダーの弱いグラデ地を外した。
 *   色は semantic role のみ。--gold は「成果」に予約されているのでブログ本文では使わない。
 */

/* 全面で共有する単一の列。左端をここに揃える。 */
.blog-column {
  max-width: 44rem;   /* 和文で約 70 字。走査にも通読にも耐える幅 */
  margin: 0 auto;
}

.blog-page {
  background: var(--canvas);
}

/* --- ヘッダー (記事 / 一覧で共用) ------------------------------------------ */

.blog-article-header,
.blog-index-header {
  /* 80px = 固定 nav 高。下は hairline まで詰め、一覧側の上余白と二重にしない */
  padding: calc(80px + var(--space-2xl)) var(--space-md) var(--space-xl);
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}

.blog-article-header-inner {
  max-width: 44rem;
  margin: 0 auto;
}

/* Latin の区分ラベル (BLOG)。字間を開けて小さく置く。 */
.blog-eyebrow {
  margin: 0 0 var(--space-sm);
  color: var(--ink-mute);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 和文のカテゴリ名。Latin 用の字間 (0.12em) をそのまま当てると間延びするので、
   字間を詰めてわずかに大きくする。 */
.blog-eyebrow--category {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.blog-article-header h1,
.blog-index-header h1 {
  margin: 0 0 var(--space-md);
  color: var(--ink);
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  line-height: 1.4;
  letter-spacing: 0;
}

.blog-lede {
  max-width: 38rem;   /* リードは本文列より短く畳んで、視線の折返しを楽にする */
  margin: 0;
  color: var(--ink-mid);
  font-size: 1.0625rem;
  line-height: 1.9;
}

/* --- 署名 (E-E-A-T) ------------------------------------------------------ */

.blog-byline {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
  color: var(--ink-mid);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.blog-byline p {
  margin: 0 0 0.25rem;
}

.blog-byline-label {
  display: inline-block;
  min-width: 5em;
  color: var(--ink-mute);
  font-size: 0.8125rem;
}

.blog-byline-scope {
  color: var(--ink-mute);
  font-size: 0.8125rem;
}

.blog-byline-dates {
  color: var(--ink-mute);
  font-size: 0.8125rem;
}

/* --- 一覧 ---------------------------------------------------------------- */

.blog-index-list {
  padding: 0 var(--space-md) var(--space-4xl);
  background: var(--canvas);
}

.blog-index-empty {
  color: var(--ink-mute);
}

/* 枠線カードではなく hairline 区切りの列。記事が増えても密度が変わらない。 */
.blog-entry-list {
  display: flex;
  flex-direction: column;
}

.blog-entry {
  position: relative;
  padding: var(--space-lg) 0;
}

/* 開始の罫線はヘッダー側の border-bottom が担う。1 件目にも border-top を引くと、
   近接した水平線が 2 本並んで線が濁る。区切りは項目「間」にだけ引く。 */
.blog-entry + .blog-entry {
  border-top: 1px solid var(--hairline);
}

.blog-entry:last-child {
  border-bottom: 1px solid var(--hairline);
}

.blog-entry-meta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  color: var(--ink-mute);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* カテゴリは分類のラベルであってリンクではない。青にすると押せると読まれる。 */
.blog-entry-category {
  color: var(--ink-mute);
}

.blog-entry-title {
  margin: 0 0 0.5rem;
  font-size: 1.3125rem;
  line-height: 1.55;
  letter-spacing: 0;
}

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

/* 行全体をクリック領域にする。見出しリンクがアクセシブルネームを持つので、
   ラッパを <a> にして見出しを飲み込むより構造が素直になる。 */
.blog-entry-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.blog-entry-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.blog-entry-title a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.blog-entry-description {
  max-width: 38rem;
  margin: 0;
  color: var(--ink-mid);
  font-size: 1rem;
  line-height: 1.85;
}

/* --- 記事本文 ------------------------------------------------------------ */

.blog-content-section {
  padding: var(--space-2xl) var(--space-md) var(--space-4xl);
  background: var(--canvas);
}

.blog-article {
  max-width: 44rem;
  margin: 0 auto;
}

.blog-body h2 {
  /* 近接の原則: 見出しは前セクションから遠く、自分の本文に近く */
  margin: var(--space-2xl) 0 var(--space-md);
  color: var(--ink);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: 0;
}

.blog-body h2:first-child {
  margin-top: 0;
}

.blog-body h3 {
  margin: var(--space-xl) 0 var(--space-sm);
  color: var(--ink);
  font-size: 1.1875rem;
  line-height: 1.5;
}

.blog-body p,
.blog-body li {
  color: var(--ink-mid);
  font-size: 1.0625rem;
  line-height: 1.9;
}

.blog-body p {
  margin: 0 0 var(--space-md);
}

.blog-body ul,
.blog-body ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.5rem;
}

.blog-body li {
  margin: 0 0 0.5rem;
}

.blog-body a:not(.cta-btn) {
  color: var(--primary);
  text-underline-offset: 0.2em;
}

.blog-body blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  color: var(--primary);
  font-size: 1.0625rem;
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
}

/* 表は狭幅で横スクロールさせる (本文列を破壊しない) */
.blog-body table {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-md);
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.blog-body th,
.blog-body td {
  padding: 0.625rem 0.875rem;
  color: var(--ink-mid);
  text-align: left;
  border: 1px solid var(--outline);
}

.blog-body th {
  color: var(--ink);
  background: var(--canvas-soft);
  font-weight: 700;
}

/* --- 出典 / 位置づけ / 著者 ---------------------------------------------- */

.blog-sources {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--outline);
}

.blog-sources h2 {
  margin: 0 0 var(--space-sm);
  color: var(--ink);
  font-size: 1.0625rem;
}

.blog-sources ul {
  margin: 0;
  padding-left: 1.25rem;
}

.blog-sources li {
  margin-bottom: 0.375rem;
  color: var(--ink-mid);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.blog-source-publisher {
  margin-left: 0.5em;
  color: var(--ink-mute);
  font-size: 0.8125rem;
}

.blog-disclaimer {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--canvas-soft);
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
}

.blog-disclaimer-title {
  margin: 0 0 0.375rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.blog-disclaimer p {
  margin: 0;
  color: var(--ink-mid);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.blog-author-card {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--canvas);
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
}

.blog-author-name {
  margin: 0 0 0.25rem;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
}

.blog-author-role {
  margin: 0 0 var(--space-sm);
  color: var(--ink-mute);
  font-size: 0.875rem;
}

.blog-author-credentials {
  margin-left: 0.5em;
}

.blog-author-bio {
  margin: 0;
  color: var(--ink-mid);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.blog-author-link {
  margin: var(--space-sm) 0 0;
  font-size: 0.875rem;
}

/* --- 関連記事 ------------------------------------------------------------ */

.blog-related {
  padding: var(--space-3xl) 0;
  background: var(--canvas-soft);
}

.blog-related h2 {
  margin-bottom: var(--space-lg);
  color: var(--ink);
  font-size: 1.25rem;
}

.blog-related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.blog-related-list a {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--space-md);
  color: var(--ink);
  text-decoration: none;
  background: var(--canvas);
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
}

.blog-related-list span {
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* --- 狭幅 ---------------------------------------------------------------- */

@media (max-width: 860px) {
  .blog-article-header,
  .blog-index-header {
    padding: calc(80px + var(--space-xl)) var(--space-md) var(--space-xl);
  }

  .blog-content-section {
    padding: var(--space-xl) var(--space-md) var(--space-3xl);
  }

  .blog-body h2 {
    margin-top: var(--space-xl);
  }

  .blog-body h2:first-child {
    margin-top: 0;
  }

  .blog-related-list {
    grid-template-columns: 1fr;
  }

  .blog-related {
    padding: var(--space-2xl) 0;
  }
}