/**
 * Pagination Design - Post Type別テーマカラー対応
 *
 * 無限スクロール無効時のページネーションデザイン
 * Clinic: primary (青)
 * Treatment: secondary (ピンク)
 * C-Column: success (緑)
 */

/* ========================================
   基本スタイル
======================================== */

.c-pagination-001 {
    margin: var(--wp--preset--spacing--2-xl) 0;
    padding: var(--wp--preset--spacing--base) 0;
}

.c-pagination-001__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--wp--preset--spacing--xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-pagination-001__item {
    margin: 0;
    padding: 0;
}

.c-pagination-001__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
    font-size: var(--wp--preset--font-size--base);
    font-weight: var(--wp--custom--font-weight--medium);
    color: var(--wp--preset--color--gray-darker);
    background: var(--wp--preset--color--white);
    border: var(--wp--custom--border--width--1) solid var(--wp--preset--color--gray-light);
    border-radius: var(--wp--custom--border--radius--md);
    text-decoration: none;
    transition:
        color var(--wp--custom--transition--duration--fast) var(--wp--custom--transition--timing-ease),
        background var(--wp--custom--transition--duration--fast) var(--wp--custom--transition--timing-ease),
        border-color var(--wp--custom--transition--duration--fast) var(--wp--custom--transition--timing-ease),
        transform var(--wp--custom--transition--duration--fast) var(--wp--custom--transition--timing-ease);
}

.c-pagination-001__link .material-symbols-outlined {
    font-size: 20px;
}

/* ========================================
   Clinic Archive (primary - 青)
======================================== */

body.post-type-archive-clinic .c-pagination-001__link:hover {
    color: var(--wp--preset--color--primary-dark);
    background: var(--wp--preset--color--primary-lightest);
    border-color: var(--wp--preset--color--primary-light);
    transform: translateY(-2px);
}

body.post-type-archive-clinic .c-pagination-001__link.is-current,
body.post-type-archive-clinic .c-pagination-001__link--current {
    color: var(--wp--preset--color--white);
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    font-weight: var(--wp--custom--font-weight--bold);
    cursor: default;
}

/* ========================================
   Treatment Archive (secondary - ピンク)
======================================== */

body.post-type-archive-treatment .c-pagination-001__link:hover {
    color: var(--wp--preset--color--secondary-dark);
    background: var(--wp--preset--color--secondary-lightest);
    border-color: var(--wp--preset--color--secondary-light);
    transform: translateY(-2px);
}

body.post-type-archive-treatment .c-pagination-001__link.is-current,
body.post-type-archive-treatment .c-pagination-001__link--current {
    color: var(--wp--preset--color--white);
    background: var(--wp--preset--color--secondary);
    border-color: var(--wp--preset--color--secondary);
    font-weight: var(--wp--custom--font-weight--bold);
    cursor: default;
}

/* ========================================
   C-Column Archive (success - 緑)
======================================== */

body.post-type-archive-c-column .c-pagination-001__link:hover {
    color: var(--wp--preset--color--success-dark);
    background: var(--wp--preset--color--success-lightest);
    border-color: var(--wp--preset--color--success-light);
    transform: translateY(-2px);
}

body.post-type-archive-c-column .c-pagination-001__link.is-current,
body.post-type-archive-c-column .c-pagination-001__link--current {
    color: var(--wp--preset--color--white);
    background: var(--wp--preset--color--success);
    border-color: var(--wp--preset--color--success);
    font-weight: var(--wp--custom--font-weight--bold);
    cursor: default;
}

/* ========================================
   前へ/次へボタン
======================================== */

.c-pagination-001__link--prev,
.c-pagination-001__link--next {
    gap: var(--wp--preset--spacing--4-xs);
}

/* ========================================
   レスポンシブ
======================================== */

@media (max-width: 768px) {
    .c-pagination-001 {
        margin: var(--wp--preset--spacing--xl) 0;
    }

    .c-pagination-001__list {
        gap: var(--wp--preset--spacing--4-xs);
    }

    .c-pagination-001__link {
        min-width: 40px;
        min-height: 40px;
        padding: var(--wp--preset--spacing--4-xs) var(--wp--preset--spacing--xs);
        font-size: var(--wp--preset--font-size--sm);
    }

    .c-pagination-001__link .material-symbols-outlined {
        font-size: 18px;
    }

    /* モバイルでは前へ/次へのテキストを非表示 */
    .c-pagination-001__link--prev,
    .c-pagination-001__link--next {
        min-width: 40px;
    }

    .c-pagination-001__link--prev span:not(.material-symbols-outlined),
    .c-pagination-001__link--next span:not(.material-symbols-outlined) {
        display: none;
    }
}
