@charset "UTF-8";

/* ==========================================================================
   Events List Page (p-events-)
   イベント一覧ページ専用スタイル
   グリッド・カード・ページネーションは contents_list.css の既存クラスを流用
   ========================================================================== */

/* メインラッパー: 垂直余白＋背景 */
.p-events-main {
    padding: 40px 0 80px;
    background: var(--color-white);
}

/* 内部コンテナ: セクション間の余白をflex gapで制御 */
.p-events-main .c-gi-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* セクション共通 */
.p-events-section {
    display: flex;
    flex-direction: column;
}

/* 1段目: 開催予定 — gap PC 32px / SP 16px */
.p-events-section--upcoming {
    gap: 32px;
}

/* 2段目: 過去開催 — gap 32px（流用元 p-list-main と統一） */
.p-events-section--past {
    gap: 32px;
}

/* セクション見出し（mypage.css の p-top-section-heading を踏襲） */
.p-events-section .p-top-section-heading {
    font-size: var(--font-size-heading);
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
    margin: 0;
}

/* 件数 + ページネーション ラッパー */
.p-events-pagination-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 表示件数 */
.p-events-count {
    font-size: 16px;
    text-align: right;
    color: var(--color-text);
}

/* グリッドの margin-bottom を打ち消し（gap で余白制御するため） */
.p-events-section .p-list-grid {
    margin-bottom: 0;
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */
@media screen and (max-width: 767px) {
    .p-events-main {
        padding: 24px 0;
    }

    .p-events-section--upcoming {
        gap: 16px;
    }

    .p-events-section .p-top-section-heading {
        font-size: 16px;
    }

    .p-events-count {
        font-size: 13px;
    }

    .p-events-section--past {
        gap: 16px;
    }

}