/* news.css */

.news-archive {
    margin: 0;
    padding: 114px 20px 100px;
}

.news-archive__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0 0 24px;
}

.news-archive__heading-icon {
    display: block;
    width: 74.367px;
    height: 63.623px;
}

.news-archive__heading-text {
    margin: 0;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 43px;
    letter-spacing: 1.92px;
}

.news-archive__filters {
    gap: 13px;
    margin: 0 0 43px;
}

.news-archive__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 37px;
    /* フォントの上下の空きが均等でなく上が広く見えるため、視覚的に中央に見えるよう
       padding-bottomだけ2px足して調整する */
    padding: 0 20px 2px;
    border: none;
    border-radius: 4.5px;
    background: #17bae5;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* 画面遷移せず、クリックしたタブだけその場でアクティブ(グレー)にする */
.news-archive__filter.is-active {
    background: #444;
}

.news-archive__grid {
    max-width: 900px;
    margin: 0 auto;
}

.news-archive__grid .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* .news-cardはカルーセル用（隣接カードと線を共有する前提）で左ボーダーが無いため、
   各行の先頭カードだけ左端の線を補う。フィルターで表示が絞り込まれると
   DOM上のnth-childでは先頭判定がズレるため、表示中の要素だけを見てJS側で
   .is-row-startクラスを付け直す方式にしている（main.js参照） */
.news-archive__grid .news-card.is-row-start {
    border-left: 1px solid #000;
}

.news-archive__grid .wp-block-post-template > :nth-child(5n+1) .news-card__media {
    background: #f7d12c;
}

.news-archive__grid .wp-block-post-template > :nth-child(5n+2) .news-card__media {
    background: #ff8e00;
}

.news-archive__grid .wp-block-post-template > :nth-child(5n+3) .news-card__media {
    background: #00adae;
}

.news-archive__grid .wp-block-post-template > :nth-child(5n+4) .news-card__media {
    background: #fd7aae;
}

.news-archive__grid .wp-block-post-template > :nth-child(5n+5) .news-card__media {
    background: #0070bc;
}

.news-archive__empty {
    margin: 0;
    padding: 40px 0;
    text-align: center;
    font-size: 18px;
}

.news-archive__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 60px;
}

/* wp:query-pagination-numbersが数字たちを1つのdivでラップしているため、
   そのラッパー自体もflexにしないと中の数字が縦に積まれてしまう */
.news-archive__pagination .wp-block-query-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 20px;
}

.news-archive__pagination .page-numbers {
    display: inline-block;
    padding: 0;
    color: #a9a9a9;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 27.593px;
    font-weight: 700;
    text-decoration: none;
}

/* フィルター表示中のページネーションはJSでbutton要素を組み立てるため、
   ブラウザ標準のボタン装飾（枠線・背景・フォント）を打ち消す */
.news-archive__pagination button.page-numbers {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.news-archive__pagination .page-numbers.current {
    position: relative;
    color: #212121;
}

.news-archive__pagination .page-numbers.current::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    background: #212121;
}

/* アイコン素材は元が下向き矢印(22.074×11.037)で、Figma上-90deg回転させて右向きにしている。
   回転させても配置スペースが正しく確保されるよう、外側の大きさは回転後の見た目(11.037×22.074)
   にし、実際にマスク画像を持つ疑似要素だけを元のサイズで中央配置してから回転する */
.news-archive__pagination .news-archive__pagination-next {
    position: relative;
    display: block;
    width: 11.037px;
    height: 22.074px;
    font-size: 0;
}

.news-archive__pagination .news-archive__pagination-next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22.074px;
    height: 11.037px;
    background-color: #212121;
    -webkit-mask-image: url('../../images/icon-pagination-arrow.svg');
    mask-image: url('../../images/icon-pagination-arrow.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transform: translate(-50%, -50%) rotate(-90deg);
}

/* 「戻る」矢印は「次へ」と同じ素材を左右反転（90deg回転）させたもの。
   2ページ目以降でのみWPが自動的に表示する */
.news-archive__pagination .news-archive__pagination-prev {
    position: relative;
    display: block;
    width: 11.037px;
    height: 22.074px;
    font-size: 0;
}

.news-archive__pagination .news-archive__pagination-prev::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22.074px;
    height: 11.037px;
    background-color: #212121;
    -webkit-mask-image: url('../../images/icon-pagination-arrow.svg');
    mask-image: url('../../images/icon-pagination-arrow.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* ボタン自体の見た目（角丸ピル・枠線・ホバー等）はcomponents/button.cssの
   .pill-button（＋.pill-button--dark）を共用する。ここではこのページ固有の
   サイズだけ、news-single.cssの.news-single__back .pill-buttonと揃えて上書きする */
.news-archive__back {
    margin-top: 60px;
}

.news-archive__back .pill-button {
    width: 230px;
    height: 62px;
}

/* 782px〜1279px：PC版(1366px基準)のサイズ感をvwでそのまま縮小 */
@media (max-width: 1279px) {
    .news-archive {
        padding: 8.346vw 1.464vw 7.321vw;
    }

    .news-archive__heading {
        gap: 1.757vw;
        margin-bottom: 1.757vw;
    }

    .news-archive__heading-icon {
        width: 5.445vw;
        height: 4.658vw;
    }

    .news-archive__heading-text {
        font-size: 3.514vw;
        line-height: 3.148vw;
        letter-spacing: 0.141vw;
    }

    .news-archive__filters {
        gap: 0.952vw;
        margin-bottom: 3.148vw;
    }

    .news-archive__filter {
        height: 2.709vw;
        padding: 0 1.464vw 0.146vw;
        border-radius: 0.329vw;
        font-size: 1.611vw;
    }

    .news-archive__grid {
        max-width: 65.88vw;
    }

    .news-archive__grid .wp-block-post-template {
        gap: 5.125vw 0;
    }

    .news-archive__empty {
        padding: 2.928vw 0;
        font-size: 1.318vw;
    }

    .news-archive__pagination {
        gap: 1.464vw;
        margin-top: 4.392vw;
    }

    .news-archive__back {
        margin-top: 4.392vw;
    }

    .news-archive__back .pill-button {
        width: 16.837vw;
        height: 4.539vw;
    }

    .news-archive__pagination .page-numbers {
        font-size: 2.02vw;
    }

    .news-archive__pagination .news-archive__pagination-next {
        width: 0.808vw;
        height: 1.616vw;
    }

    .news-archive__pagination .news-archive__pagination-next::before {
        width: 1.616vw;
        height: 0.808vw;
    }

    .news-archive__pagination .news-archive__pagination-prev {
        width: 0.808vw;
        height: 1.616vw;
    }

    .news-archive__pagination .news-archive__pagination-prev::before {
        width: 1.616vw;
        height: 0.808vw;
    }
}

/* 375px(Figmaスマホ実測値)基準：782pxまでvwで滑らかに拡大縮小する。
   602〜782pxはヘッダーがまだposition:fixedのまま（下のheader.css参照）で
   通常フロー上は高さ0扱いのため、ヘッダー実高さ(51px)+隙間(22px)のフルオフセットを
   ここで確保する。600px以下でヘッダーがstickyに変わった時の分は
   下の@media(max-width:600px)で隙間分だけに減らす */
@media (max-width: 782px) {
    .news-archive {
        padding: 19.467vw 4.267vw 17.511vw;
    }

    .news-archive__heading {
        gap: 2.913vw;
        margin-bottom: 4.634vw;
    }

    .news-archive__heading-icon {
        width: 14.844vw;
        height: 12.699vw;
    }

    .news-archive__heading-text {
        font-size: 8vw;
        line-height: 8.081vw;
        letter-spacing: normal;
    }

    .news-archive__filters {
        gap: 2.115vw;
        margin-bottom: 7.434vw;
    }

    .news-archive__filter {
        height: 5.899vw;
        padding: 0 1.586vw 0.533vw;
        border-radius: 0.708vw;
        font-size: 3.525vw;
    }

    .news-archive__grid {
        max-width: 80vw;
    }

    .news-archive__grid .wp-block-post-template {
        grid-template-columns: 1fr;
        gap: 4vw 0;
    }

    /* Figmaのスマホデザインでは、カードは3列グリッドの縮小版ではなく
       PC版と同じ実寸(300px)の1カラム表示。隣接カードと線を共有しないレイアウトなので
       .is-row-startに関係なく全カードに左ボーダーを付ける */
    .news-archive__grid .news-card {
        width: 80vw;
        border-left: 1px solid #000;
    }

    .news-archive__grid .news-card__media {
        height: 61.333vw;
    }

    .news-archive__grid .news-card__media:not(:has(img))::after {
        width: 66.667vw;
        height: 48vw;
        border-radius: 8.533vw;
        background-size: 37.333vw auto;
    }

    .news-archive__grid .news-card__photo {
        width: 66.667vw;
        height: 48vw;
    }

    .news-archive__grid .news-card__photo img {
        width: 66.667vw;
        height: 48vw;
        border-radius: 8.533vw;
    }

    .news-archive__grid .news-card__body {
        min-height: 41.333vw;
        padding: 2.667vw 3.467vw;
    }

    .news-archive__grid .news-card__meta {
        margin-bottom: 1.6vw;
    }

    .news-archive__grid .news-card__date {
        font-size: 4.267vw;
    }

    .news-archive__grid .news-card__badge {
        padding: 0.533vw 2.667vw 1.067vw;
        border-radius: 0.8vw;
        font-size: 4vw;
        line-height: 5.067vw;
    }

    .news-archive__grid .news-card__title {
        margin: 0 0 2.133vw;
        font-size: 4.8vw;
        line-height: 6.667vw;
    }

    .news-archive__grid .news-card__tags {
        gap: 2.133vw;
    }

    .news-archive__grid .news-card__tags a {
        border-radius: 0.8vw;
        padding: 0.267vw 2.133vw;
        font-size: 4vw;
        line-height: 5.867vw;
    }

    .news-archive__empty {
        padding: 10.667vw 0;
        font-size: 4.8vw;
    }

    .news-archive__pagination {
        gap: 4.363vw;
        margin-top: 9.067vw;
    }

    .news-archive__back {
        margin-top: 9.067vw;
    }

    .news-archive__back .pill-button {
        width: 48.267vw;
        height: 11.733vw;
    }

    .news-archive__pagination .page-numbers {
        font-size: 5.926vw;
    }

    .news-archive__pagination .page-numbers.current::after {
        bottom: 0.533vw;
    }

    .news-archive__pagination .news-archive__pagination-next,
    .news-archive__pagination .news-archive__pagination-prev {
        width: 2.37vw;
        height: 4.741vw;
    }

    .news-archive__pagination .news-archive__pagination-next::before,
    .news-archive__pagination .news-archive__pagination-prev::before {
        width: 4.741vw;
        height: 2.37vw;
    }
}

/* 600px以下：header.css側でヘッダーがposition:stickyに切り替わり、
   通常フロー上の高さ(51px)を持つようになるため、上のpaddingからその分を差し引き
   隙間(22px)だけ残す */
@media (max-width: 600px) {
    .news-archive {
        padding-top: 5.867vw;
    }
}