/* ============================================================
   familign. blog.css
   - お知らせ・ブログ一覧ページ（/blog/）固有のスタイル
   - common.css（フォント・変数・リセット・背景・ヘッダー・
     ドロワー・フッター等）を先に読み込んでからこのファイルを読み込む
   ============================================================ */

/* Blog一覧ページはTOPページの.news__listと同じ3カラム画像グリッドを
   使うため、コンテンツ幅もTOPと同じ（1400px）にする。works.css等と
   同じ考え方で、.main--lowerによる--container-widthの上書き（980px）を
   ページ単位で再上書きする */
.main--blog {
    --container-width: 140rem;
}

/* ============================================================
   Blog Lead（リード文）
   ============================================================ */
.blog-lead__text {
    position: relative;
    color: var(--color-text-sub);
    text-align: center;
}

/* ============================================================
   Blog List（記事一覧）
   - マークアップ・クラス名はTOPページの.news__listをそのまま使い回す。
     見た目のスタイルもTOP（index.css）のものと同一なので、Astro化する際は
     このブロックをTOP側と共有の1ファイル（例：news-list.css）に
     まとめられる
   ============================================================ */
.news__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.6rem, 1rem + 2vw, 3rem);
}

.news__item {
    overflow: hidden;
}

.news__item-image {
    margin-bottom: 0.3em;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: .45rem solid #fff;
}

.news__item-image img{
    width: auto;
    height: 100%;
    object-fit: cover;
}

.news__item-date,
.news__item-text {
    padding-inline: .2em;
}

.news__item-date {
    margin-bottom: 0.1em;
    font-size: .95em;
    color: var(--color-text-sub);
    line-height: 1.5;
}

.news__item-text {
    margin-block: 0em 1.2em;
    font-size: 1.1em;
    line-height: 1.6;
}

@media (max-width: 48em) {
    .news__list {
        grid-template-columns: 1fr;
    }
}

/* CTA直前セクションの余白調整（works.css等と同じ考え方） */
.main section + .cta {
    margin-top: -3em;
}

@media (max-width: 48em) {
    .main section + .cta {
        margin-top: -8em;
    }
}