/* =========================================================
    File: pagination.css
    Description: ページネーション（番号）および「もっと見る」ボタンのラッパー
    2026 Tokenized Version
   ========================================================= */

/* --- 全体のラッパー --- */
.c-pagination-wrapper {
    margin-top: var(--wan-s-10);    /* 40px */
    margin-bottom: var(--wan-s-5); /* 20px */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* =========================================================
    パターンA：番号のページネーション
   ========================================================= */
.c-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--wan-s-2); /* 8px: ボタン同士の間隔 */
}

/* 共通の数字・矢印ボタンのスタイル */
.c-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;  /* タッチターゲット：トークン外の固定値ですが、PCの標準として維持 */
    height: 44px;
    font-size: var(--wan-f-size-sm); /* 14px (15pxに近いトークンを適用) */
    font-weight: var(--wan-f-weight-bold);
    color: var(--wan-color-text);
    background-color: var(--wan-color-white);
    border: 1px solid var(--wan-color-border);
    border-radius: var(--wan-r-md); /* 8px: 少し丸みを持たせる */
    text-decoration: none;
    transition: all var(--wan-motion-base) ease;
}

/* ホバー時のスタイル（PC用） */
@media (hover: hover) {
    .c-pagination a.page-numbers:hover {
        background-color: var(--wan-color-bg-orange); /* ほんのりオレンジ */
        border-color: var(--wan-color-brand);
        color: var(--wan-color-brand);
    }
}

/* 現在いるページ（アクティブ状態） */
.c-pagination .page-numbers.current {
    background-color: var(--wan-color-brand);
    border-color: var(--wan-color-brand);
    color: var(--wan-color-white);
    pointer-events: none; /* クリックできないようにする */
}

/* 省略記号（...）のスタイル */
.c-pagination .page-numbers.dots {
    background-color: transparent;
    border: none;
    color: var(--wan-color-text-muted);
    width: auto;
    padding: 0 var(--wan-s-1);
    pointer-events: none;
}

/* 前へ・次へ（＜ ＞）の調整 */
.c-pagination .prev,
.c-pagination .next {
    font-size: var(--wan-f-size-sm);
}


/* =========================================================
    パターンB：「もっと見る」ボタンのエリア
   ========================================================= */
.c-load-more {
    width: 100%;
    max-width: var(--wan-sidebar-width); /* 320px: 広がりすぎない制限 */
    margin: 0 auto;
}

.c-load-more button:disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
}

/* =========================================================
    レスポンシブ（スマホ向け調整）
   ========================================================= */
@media screen and (max-width: 768px) {
    .c-pagination-wrapper {
        margin-top: var(--wan-s-7-5); /* 30px */
    }
    
    .c-pagination {
        gap: 1.5; /* トークンにないため計算、または var(--wan-s-1-5) 相当 */
        gap: 6px; 
    }
    
    .c-pagination .page-numbers {
        width: var(--wan-s-10); /* 40px: 最小限のタップ領域をキープ */
        height: var(--wan-s-10);
        font-size: var(--wan-f-size-xs); /* 12px: スマホでは少し小さめに */
    }
}