@charset "UTF-8";

/* お知らせ・ブログの一覧専用（home.php・category.php のときだけ読み込む。Figma「下層 / お知らせ・ブログ一覧」PC 2041:1926 / SP 2041:3533）。記事カード・ページ送り・CTA は page.css */

/*
 * 一覧（Figma「02 COLUMN LIST」）
 * 絞り込み・PICKUP・記事カード・ページ送りを同じ間隔（SP 40px / PC 64px）で縦に並べる。中身の幅は PC で 1140px
 */
.topics {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 24px 20px 80px;
    background-color: var(--color-pale);
}

.topics > * {
    width: min(100%, 1140px);
    margin-inline: auto;
}

/* カテゴリーで絞り込むボタン（Figma「Category filter」）。今のページ（aria-current）は緑で塗る */
.topics__filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topics__filter-link {
    display: block;
    padding: 8px 16px;
    color: var(--color-green);
    background-color: var(--color-white);
    border: 1px solid #dde5df;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    /* Figma は 1 行の文字の高さが「normal」（SP 17px / PC 19px）。既定の 1.5 のままだとボタンが 4〜5px 高くなる */
    line-height: 17px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.topics__filter-link[aria-current="page"] {
    color: var(--color-white);
    background-color: var(--color-green);
    border-color: var(--color-green);
}

/*
 * SP・タブレット（〜1023px）は、車種のページの SP のページ内リンク（model-intro.css の .model-nav）と同じく 3 列のグリッドで全部を見せる
 * （2026-11-10 Chatwork「SP も SUZY と同じように」）。文字は中央。枠の色も SUZY の SP と同じ。
 * ボタンの高さ 56px と文字の大きさ 11〜12px（画面の幅に合わせる）は、よくあるご質問の SP のボタン（faq.css）と同じ（2026-11-10 Chatwork）。
 * 下向きの矢印はページ内リンクではないので付けない
 */
@media (max-width: 1023px) {
    .topics__filter-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 56px;
    }

    /* ボタンを段の高さいっぱいに伸ばす */
    .topics__filter-list > li {
        display: flex;
    }

    .topics__filter-link {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding: 0 2px;
        border-color: rgb(47 107 86 / 0.35);
        font-size: clamp(0.6875rem, 3.2vw, 0.75rem); /* 11〜12px */
        line-height: 16px;
        text-align: center;
    }
}

/*
 * SP のスクロール中の帯（components.css の .scroll-toc。車種のページの SP と同じ形）。
 * 一覧の中身の幅（.topics > *）を当てず、画面の端から端まで出す。
 * カテゴリーの一覧は別のページへのリンクなので、矢印は下向きではなく右向き
 */
.topics > .scroll-toc {
    width: auto;
    margin: 0;
}

.scroll-toc--topics .scroll-toc__link::after {
    margin-top: 0;
    transform: rotate(45deg);
}

/* PICKUP（Figma「Pickup」）。SP は写真が上、PC は写真が左 */
.pickup {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    box-shadow: 0 6px 8px rgb(0 0 0 / 0.1);
}

/*
 * 写真は記事へのリンク。マウスを乗せると、枠の中で写真が少し大きくなる（記事カードの写真と同じ動き。page.css の .column-card__thumb。
 * 2026-11-11 Chatwork「記事のアイテム内の画像と同じに」。11/10 の「浮かせる」動きから変更）
 */
.pickup__thumb {
    display: block;
    height: 210px;
    overflow: hidden;
    background-color: #e9efe9;
}

.pickup__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pickup__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 20px 28px;
    color: #333;
}

.pickup__label {
    color: var(--color-accent);
    font-family: var(--font-en);
    font-size: 0.75rem; /* 12px */
    font-weight: 800;
    letter-spacing: 3px;
    /* PICKUP・カテゴリー・日付は、Figma の 1 行の文字の高さ「normal」に合わせる（既定の 1.5 だと 1 行ごとに 3〜4px 高くなる） */
    line-height: 15px;
}

/* カテゴリーと日付は記事カードと共通の .post-meta / .post-category（components.css） */

.pickup__title {
    font-size: 1.25rem; /* 20px */
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 32px;
}

.pickup__excerpt {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    line-height: 26px;
}

/* 「詳細を見る」は共通のボタン（.button。base.css）。ここでは置き場所の余白だけを決める */
.pickup__button {
    margin-top: 6px;
}

/* 記事カードの並び（Figma「Article grid（3列）」/ SP「Article list（1列）」） */
.topics__list {
    display: grid;
    gap: 32px;
}

.topics__empty {
    text-align: center;
}

/* フッターの山は、CTA の下の余白（SP 120px / PC 180px）に重ねる（Figma: CTA の上に山が乗る。TOP の top.css と同じ） */
.site-footer {
    margin-top: 0;
}

@media (hover: hover) {
    .topics__filter-link:not([aria-current]):hover {
        opacity: 0.85;
    }

    .pickup__thumb:hover img {
        transform: scale(1.05);
    }
}

@media (min-width: 768px) {
    .topics__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }
}

@media (min-width: 1024px) {
    .topics {
        gap: 64px;
        padding: 40px 70px 120px;
    }

    /*
     * PC はカテゴリーのボタンをスクロールしてもヘッダーの下に固定して出す（2026-11-10 Chatwork「インナーリンクも浮かせられますか」。
     * よくあるご質問の PC と同じ。Figma は固定なし）。後ろの記事が透けないよう、画面の端から端まで地色を敷いて上下に 12px の余白を足す
     * （固定していないときの間隔は Figma のままになるよう、余白の分を負の margin で戻す）。SP は 3 列 × 2 段で画面を覆うので固定しない
     */
    .topics > .topics__filter {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height));
        z-index: 10;
        width: auto;
        margin: -12px -70px;
        padding: 12px 70px;
        background-color: var(--color-pale);
    }

    /*
     * 貼り付いている間（main.js の is-stuck）は 48px に縮める（よくあるご質問と同じ。faq.css。2026-11-12 Chatwork。Figma 783:65）。
     * 上下の余白 6px + ボタン 36px。縮めた分は下の margin で足し、後ろの記事が動かないようにする
     */
    .topics > .topics__filter.is-stuck {
        margin-bottom: 13px;
        padding-block: 6px;
    }

    .topics > .topics__filter.is-stuck .topics__filter-link {
        padding-block: 7.5px;
    }

    .topics__filter-list {
        justify-content: center;
        gap: 12px;
    }

    /*
     * 高さはよくあるご質問の PC のボタンと同じ 49px（2026-11-10 Chatwork。Figma は 45px）。
     * 文字もよくあるご質問と同じく、1280px 以上は 16px、1024〜1279px は 14px（components.css の .faq__nav-link。下の @media）
     */
    .topics__filter-link {
        padding: 14px 28px;
        font-size: 1rem; /* 16px */
        line-height: 19px;
    }

    .pickup {
        flex-direction: row;
        align-items: center;
        box-shadow: 0 8px 8px rgb(0 0 0 / 0.1);
    }

    /* Figma 783:77: 写真（600×400）の上下に 52px の白い余白（カードの高さ 504px。本文が長いときは本文に合わせて伸びる） */
    .pickup__thumb {
        flex-shrink: 0;
        width: min(600px, 52.6%);
        height: auto;
        margin-block: 52px;
        aspect-ratio: 3 / 2;
    }

    .pickup__body {
        flex: 1;
        min-width: 0;
        gap: 20px;
        padding: 40px 56px;
    }

    .pickup__label {
        font-size: 0.875rem; /* 14px */
        line-height: 17px;
    }

    .pickup__title {
        font-size: 1.75rem; /* 28px */
        letter-spacing: 1px;
        line-height: 44px;
    }

    .pickup__excerpt {
        font-size: 1rem; /* 16px */
        line-height: 32px;
    }

    /* PC の幅は Figma「詳細を見る」どおり 280px（共通のボタンの最小幅 398px より狭い） */
    .pickup__button {
        width: 280px;
        min-width: 0;
        margin-top: 8px;
    }

    .topics__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 56px 30px;
    }
}

/* 1024〜1279px（1280px の画面をブラウザで 125% に拡大したときなど）は、よくあるご質問のボタンと同じ 14px（2026-11-10 Chatwork） */
@media (min-width: 1024px) and (max-width: 1279px) {
    .topics__filter-link {
        font-size: 0.875rem; /* 14px */
    }
}