/* =========================================================
   JWL — blog.php / blog_detail.php styles
   （news.css を土台に、サムネイル付きカードグリッドを追加）
   ========================================================= */

/* ---------- 一覧: カードグリッド ---------- */
.blog-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(18px, 3vw, 32px);
}

.blog-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.blog-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.blog-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.blog-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  overflow: hidden;
}
.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.04); }

.blog-card-noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: .18em;
  font-size: 1.4rem;
  color: var(--text-3);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .05), transparent 70%),
    var(--bg-2);
}

.blog-card-body {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.blog-card-title {
  font-family: var(--font-jp);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  margin: 2px 0 0;
  transition: color .2s;
}
.blog-card:hover .blog-card-title { color: var(--accent-3); }
.blog-card-summary {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 詳細: ヒーロー画像・本文 ---------- */
.blog-detail-hero-img {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: clamp(24px, 4vw, 40px);
  background: var(--bg-2);
}
.blog-detail-hero-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 本文内の要素（外部HTMLをサニタイズして表示） */
.blog-detail-article img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1.4em 0;
}
.blog-detail-article figure { margin: 1.6em 0; }
.blog-detail-article figcaption {
  font-size: .82rem;
  color: var(--text-3);
  text-align: center;
  margin-top: .6em;
}
.blog-detail-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: .9rem;
}
.blog-detail-article th,
.blog-detail-article td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
}
.blog-detail-article th { background: var(--surface-2); }
.blog-detail-article pre {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .85rem;
  line-height: 1.7;
  margin: 1.4em 0;
}
.blog-detail-article code {
  font-family: var(--font-mono);
  font-size: .88em;
}

/* トップページ News セクションの導線（お知らせ一覧 / ブログ） */
.news-head-links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* トップページ最上部の「最新のブログ」バンド（3カラム固定・整然と） */
.blog-latest .news-head { margin-bottom: clamp(24px, 4vw, 40px); }
.blog-latest-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .blog-latest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-latest-grid { grid-template-columns: 1fr; } }

/* トップ「最新のブログ」: 見出しと下部CTA */
.blog-latest-title { margin-bottom: clamp(28px, 4vw, 44px); }
.blog-latest-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}

/* 「ブログ」のグラデ文字で下端（グの払い）が切れる対策:
   background-clip:text の背景ボックスを少し下に拡張して descender を覆う。
   負のマージンでレイアウトは不変に保つ。 */
.blog-latest-title { line-height: 1.4; }
.blog-latest-title .grad-text {
  display: inline-block;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* トップのブログ帯は導入用なので上下の余白を詰める。
   さらに直後の Philosophy の上余白も縮め、空白の間延びを解消（次コンテンツを早く見せる）。 */
.blog-latest {
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: clamp(32px, 4.5vw, 56px);
}
#blog + .philosophy {
  padding-top: clamp(40px, 6vw, 72px);
}