/* 例: knowledge.css (news.cssをベースに) */

/* フィルタリングナビゲーション */
.filters .category-nav {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}
.filters .category-nav a {
    text-decoration: none;
    color: #555;
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 20px;
    transition: background-color 0.3s;
}
.filters .category-nav a:hover,
.filters .category-nav a.active {
    background-color: #007bff; /* ブランドカラーを使用 */
    color: white;
}

/* 記事グリッド (news.css の .latest-articles .article-list を流用) */
.article-grid-section .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
/* ... (個々の記事の画像やテキストのスタイルも news.css から流用) ... */

/* knowledge.css または about.css に追記 */

/* 記事一覧のグリッド設定（横並びを確保） */
.article-grid-section .article-grid {
    display: grid;
    /* 3列で均等に並べる設定 */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-top: 40px;
}

/* 🔴 最も重要: 画像コンテナに高さを指定 */
.article-item .article-image {
    /* 例: 記事カードの画像を縦180pxにする */
    height: 180px; 
    
    /* 画像をコンテナいっぱいに広げ、はみ出た部分を切り抜く */
    background-size: cover; 
    /* 画像を中央に配置 */
    background-position: center; 
    /* リンクの下部に少しマージンを設ける */
    margin-bottom: 10px; 
}

/* その他の記事アイテムのスタイル */
.article-item a {
    /* リンク全体がブロック要素として機能するように */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
}