/* gaming-setup ブログ専用スタイル。
   ヘッダー/フッター等サイト共通CSSは ../styles.css を利用するため、ここには書かない。 */

/* 記事メタ情報（公開日・分類・読了目安） */
.post-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:0 0 32px;padding-bottom:18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.post-meta time{color:var(--accent-2)}

/* この記事を共有 */
.share-box{margin:8px 0 48px;padding:24px;background:var(--panel-2);border:1px solid var(--line)}
.share-box h2{font-family:var(--sans);font-weight:700;font-size:1rem;margin:0 0 14px;color:var(--ink);padding:0;border:0}
.share-box h2:before{content:none}
.share-box p{margin:0;display:flex;gap:12px;flex-wrap:wrap}
.share-box a{display:inline-block;padding:8px 16px;border:1px solid var(--accent-2);color:var(--accent-2);text-decoration:none;font-size:.82rem}
.share-box a:hover{background:var(--accent-2);color:#04120f}

/* Amazon(a8.net)テキストバナー */
.amazon-banner{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--accent);overflow:hidden}
.amazon-banner a{display:block;padding:16px 18px;color:var(--body);text-decoration:none;font-size:.82rem;line-height:1.6}
.amazon-banner a:hover{color:var(--ink);background:var(--panel)}

/* ブログ一覧: 3カラムカードグリッド（モバイルは1カラム） */
.blog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.blog-cards .blog-card{background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.blog-cards .blog-card>a{display:block;color:inherit;text-decoration:none}
.blog-cards .card-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--panel)}
.blog-cards .card-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.blog-cards .card-body{padding:18px 20px 22px}
.blog-cards .card-body time{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--accent-2);margin-bottom:8px}
.blog-cards .card-body h3{font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.6;margin:0 0 10px;color:var(--ink)}
.blog-cards .card-body p{font-size:.82rem;line-height:1.7;margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-cards .blog-card:hover h3{color:var(--accent-2)}

@media(max-width:800px){
  .blog-cards{grid-template-columns:1fr}
}