/* =====================================================
   INTERESTING INNOVATION - BLOG（挑戦日記一覧）
   style.css → sub.css の後に読み込む。記事カードは style.css の .post / .tags を流用し、
   一覧用の縦型カード（.post--card）と 3 列グリッド（.blog-list__grid）をここで定義する。
   ブログ詳細（/blog/detail/）の「Latest Post」もこの CSS を共用する。
   基準幅: PC 1920 / TB 768 / SP 393（1rem = 基準幅で 10px）
   ===================================================== */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 見出し帯の切り抜き写真（焼き魚。Figma "46 2" 907x362 @574,316 / -0.8°） ---------- */
.blog-head__img { position: absolute; left: 50%; margin-left: -12.4rem; top: 19.1rem; width: 24.8rem; z-index: 2; } /* ビールのイラスト（縦長なので幅を詰めて、下端は元の位置に合わせる） */
.blog-head__img.reveal { transform: translateY(3rem); }
.blog-head__img.reveal.is-visible { transform: none; }

/* ---------- イントロ（居酒屋の価値の底上げに挑戦中） ---------- */
.blog-intro { margin-top: 33.5rem; text-align: center; }
.blog-intro__ttl { font-size: 12.8rem; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.blog-intro__en { margin-top: 2.4rem; font-size: 2.4rem; font-weight: 500; line-height: 1; color: var(--black); }

/* ---------- 記事一覧（3 列 × 3 行） ---------- */
.blog-list { margin-top: 16rem; padding: 0 20rem; }
.blog-list__grid { display: grid; grid-template-columns: repeat(3, 47.4rem); gap: 7.2rem 4.8rem; margin: 0; padding: 0; list-style: none; }
/* カードはグリッドが見えた時点でまとめて発火し、--d で列ごとにずらす */
.blog-list__grid.reveal { opacity: 1; transform: none; filter: none; }
.blog-list__grid.reveal .post { opacity: 0; transform: translateY(4rem); filter: blur(.4rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; transition-delay: var(--d, 0s); }
.blog-list__grid.reveal.is-visible .post { opacity: 1; transform: none; filter: none; }

/* 縦型カード: 写真 474x317 → 32 → タイトル 18px（2 行）/ 抜粋 14px #333（3 行）/ タグ + 日付 */
.post--card .post__link { flex-direction: column; align-items: stretch; }
.post--card .post__img { width: 100%; aspect-ratio: 474 / 317; }
.post--card .post__body { width: auto; margin: 3.2rem 0 0; }
.post--card .post__title { font-size: 1.8rem; -webkit-line-clamp: 2; min-height: 0; }
.post--card .post__excerpt { margin-top: 1.6rem; font-size: 1.4rem; font-weight: 500; line-height: 1.6; color: var(--dark); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* Figma: baseStyle/#33 */
.post--card .post__meta { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin-top: 2.4rem; }
.post--card .tags { margin-top: 0; }
.post--card .post__date { margin-top: 0; font-size: 1.6rem; font-weight: 400; flex: none; }

/* =====================================================
   TB / SP 共通（〜1199px）
   ===================================================== */
@media (max-width: 1199px) {
  .blog-head__img { position: relative; left: auto; top: auto; width: 26%; margin: 0 auto 0; } /* SP: パンくず無し。見出しのすぐ下から */
  .blog-head__img.reveal, .blog-head__img.reveal.is-visible, .blog-head__img { transform: none; }
  .blog-head__img.reveal:not(.is-visible) { transform: translateY(3rem); }

  .blog-intro { margin-top: 4.8rem; padding: 0 var(--pad-x); }
  .blog-intro__ttl { font-size: 3.95rem; line-height: 1.2; white-space: normal; }
  .blog-intro__en { margin-top: 1.2rem; font-size: 1.3rem; line-height: 1.4; }

  .blog-list { margin-top: 4.8rem; padding: 0 var(--pad-x); }
  .blog-list__grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .post--card .post__body { margin-top: 1.6rem; }
  .post--card .post__title { font-size: 1.5rem; }
  .post--card .post__excerpt { margin-top: 1rem; font-size: 1.3rem; }
  .post--card .post__meta { margin-top: 1.6rem; }
  .post--card .post__date { font-size: 1.3rem; }
}

/* =====================================================
   TB のみ（768〜1199px）
   ===================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .blog-head__img { width: 56%; margin-top: 1.6rem; } /* TB: パンくず無し */

  .blog-intro { margin-top: 8rem; }
  .blog-intro__ttl { font-size: 7.5rem; }
  .blog-intro__en { margin-top: 1.6rem; font-size: 2.1rem; }

  .blog-list { margin-top: 8rem; }
  .blog-list__grid { grid-template-columns: repeat(2, 1fr); gap: 4.8rem 3.2rem; }
  .post--card .post__body { margin-top: 2.4rem; }
  .post--card .post__title { font-size: 1.8rem; }
  .post--card .post__excerpt { margin-top: 1.2rem; font-size: 1.5rem; }
  .post--card .post__meta { margin-top: 2rem; }
  .post--card .post__date { font-size: 1.5rem; }
}
@media (max-width: 767px) { .pager { margin-bottom: 4.8rem; } } /* SP: ページ送りと下の波（フッター）のあいだに余白 */
@media (max-width: 767px) { .blog-head__img { width: 84%; left: 5%; margin-top: 3.2rem; } } /* SP: 魚は他ページのヒーロー画像と同じく見出しの下から帯の外まで大きく */
@media (min-width: 768px) and (max-width: 1199px) { .blog-head__img { width: 70%; margin-top: 2.4rem; } } /* TB: 同上 */