/* =================================================================
 * c-pagination — ページネーション共通コンポーネント
 * Figma: 5824:96686（Wireframe-20「ページネーション」canonical / 配置と仕様の正）
 *        4844:218001（標準コンポーネント sub-page）
 *
 *  - .c-pagination      … 一覧ページ用（矢印ボタン＋ページ番号 / Figma V1）
 *  - .c-pagination-nav  … 詳細ページ用（前の記事／次の記事 / Figma V2）
 *
 * 矢印ボタン（.c-pagination__arrow）は両者で共有。値はすべて tokens.css 経由。
 * ================================================================= */

/* ---------- 共有：矢印ボタン（44×44 円形） ---------- */
.c-pagination__arrow {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 44rem;
    height: 44rem;
    border-radius: 22rem;
    background-color: var(--color-key);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.c-pagination__arrow--disabled {
    /* Figma: Neutral 04 @ 88% */
    background-color: color-mix(in srgb, var(--color-neutral-04) 88%, transparent);
    pointer-events: none;
}

.c-pagination__arrow-icon {
    position: absolute;
    inset: 0;
    background-color: var(--color-white);
    /* SVG は 44×44 viewBox 内に 17×14 の矢印が中央配置されている。
       contain で 1:1 描画し、矢印を Figma 通りの 17×14 で見せる
       （mask-size を 17×14 にすると viewBox ごと縮み矢印が極小になる）。 */
    -webkit-mask: url("/img/common/icons/pagination-arrow.svg") no-repeat center / contain;
            mask: url("/img/common/icons/pagination-arrow.svg") no-repeat center / contain;
}

.c-pagination__arrow--prev .c-pagination__arrow-icon {
    transform: scaleX(-1);
}

/* hover（Figma）: 円 BG → Light_Orange02、矢印 → Key。
   V1=独立リンク矢印 / V2=リンク内の矢印。disabled は span のため :hover 非対象。 */
a.c-pagination__arrow:hover,
a.c-pagination-nav__link:hover .c-pagination__arrow {
    background-color: var(--color-light-orange-02);
}
a.c-pagination__arrow:hover .c-pagination__arrow-icon,
a.c-pagination-nav__link:hover .c-pagination__arrow-icon {
    background-color: var(--color-key);
}

a.c-pagination__arrow:focus-visible {
    outline: 2rem solid var(--color-key);
    outline-offset: 4rem;
}

/* =========================================================
 * V1：一覧ページ用（矢印＋ページ番号）
 * ========================================================= */
.c-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24rem;
    width: 100%;
    margin-top: 40rem;
}

/* news 一覧のように下部余白が必要なページ向けの修飾子 */
.c-pagination--mb-lg {
    margin-bottom: 96rem;
}

.c-pagination__numbers {
    display: inline-flex;
    align-items: center;
    gap: 8rem;
}

.c-pagination__page {
    display: flex;
    width: 44rem;
    height: 44rem;
    align-items: center;
    justify-content: center;
    padding: 10rem;
    box-sizing: border-box;
    background-color: var(--color-white);
    border: 1px solid var(--color-bg-02);
    border-radius: 22rem;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.c-pagination__page:not(.c-pagination__page--current):hover {
    /* Figma hover: BG Light_Orange02 ＋ 文字 Key ＋ 枠なし */
    background-color: var(--color-light-orange-02);
    border-color: transparent;
}
.c-pagination__page:not(.c-pagination__page--current):hover .c-pagination__page-text {
    color: var(--color-key);
}

.c-pagination__page:focus-visible {
    outline: 2rem solid var(--color-key);
    outline-offset: 2rem;
}

.c-pagination__page-text {
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14rem;
    line-height: 1.5;
    letter-spacing: 0.14rem;
    text-align: center;
    color: var(--color-neutral-01);
}

.c-pagination__page--current .c-pagination__page-text {
    color: var(--color-key);
}

@media (max-width: 1023.98px) {
    .c-pagination {
        margin-top: 32rem;
    }
}

/* =========================================================
 * V2：詳細ページ用（前の記事／次の記事）
 * ========================================================= */
.c-pagination-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20rem;
    width: 100%;
}

.c-pagination-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 16rem;
}

.c-pagination-nav__item--prev {
    flex: 1 1 auto;
    min-width: 0;
}

.c-pagination-nav__item--next {
    flex: 0 0 auto;
}

.c-pagination-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 16rem;
    text-decoration: none;
    color: inherit;
}

a.c-pagination-nav__link:focus-visible {
    outline: 2rem solid var(--color-key);
    outline-offset: 4rem;
    border-radius: 4rem;
}

.c-pagination-nav__label {
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14rem;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--color-neutral-01);
}

.c-pagination-nav__link--disabled .c-pagination-nav__label {
    color: var(--color-neutral-03);
}

/* hover（Figma）: ラベル文字 → Key（矢印は共有ルールで Light_Orange02 化） */
a.c-pagination-nav__link:hover .c-pagination-nav__label {
    color: var(--color-key);
}

@media (max-width: 1023.98px) {
    .c-pagination-nav {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .c-pagination-nav__item--prev {
        flex: 0 0 auto;
    }
}