/**
 * =================================================================
 * ファイル名: responsive.css
 * 場所: /keirin-event-suite/public/css/responsive.css
 * =================================================================
 *
 * レスポンシブデザイン用のスタイルシート
 * - 992pxをブレークポイントとして、PCとモバイルの表示を切り替えます。
 */

/* ==========================================================================
   1. Tablet & Desktop Layout (992px以上)
   ========================================================================== */
@media screen and (min-width: 992px) {
    .kes-container {
        flex-direction: row;
    }

    .kes-sidebar {
        display: block; /* PCではサイドバーを表示 */
    }

    .kes-footer-racers, #kes-racer-sheet {
        display: none; /* PCではフッター選手一覧とボトムシートを非表示 */
    }
}


/* ==========================================================================
   2. Mobile Layout (991px以下)
   ========================================================================== */
@media screen and (max-width: 991px) {

    /* レイアウト */
    /* SP表示用のpadding調整 */
    #content.l-content {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .kes-container {
        flex-direction: column;
        padding: 15px 10px; /* SP表示用に左右のpaddingを調整 */
        gap: 20px;
    }

    /* PC用のサイドバーは非表示に */
    .kes-sidebar {
        display: none;
    }

    /* SP用のフッター選手一覧を表示 */
    .kes-footer-racers {
        display: block;
    }

    /* メインコンテンツの最下部が、固定フッターに隠れてしまわないように
       bodyの末尾にフッターの高さ分（＋余白）のパディングを追加する */
    body.single-league {
        padding-bottom: 100px;
    }

    /* ヘッダー */
    .kes-header {
        padding: 30px 15px;
        margin-bottom: 20px;
    }

    .kes-header h1 {
        font-size: 2rem; /* スマホでは少し小さく */
    }

    /* 記事カードグリッド */
    .kes-related-news-grid {
        /* 1列表示にする */
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* レースカード: タブレット以下で2→1列へ */
    .kes-race-body {
        display: grid; /* グリッドレイアウトを適用 */
        grid-template-columns: 1fr !important;
        grid-template-areas:
            'entry'
            'result'
            'payout'
            'video' !important;
        gap: 16px; /* カード間の余白を追加 */
    }

    .kes-race-section-card.section-video {
        grid-area: video !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: initial !important; /* `center`を打ち消す */
    }

    .kes-race-section-card.section-entry {
        grid-area: entry;
        justify-self: center;
        width: 100%;
        max-width: none;
    }
    .kes-race-section-card,
    .kes-tt-results-container,
    .kes-race-program-container {
        width: 100%; /* モバイルでは幅を100%に */
        padding: 1rem 5px; /* パディングを調整 */
        box-sizing: border-box;
    }

    /* レース結果テーブルのモバイル表示調整 */
    .kes-result-table {
        font-size: 0.8rem; /* 全体のフォントサイズを少し小さく */
        table-layout: auto; /* 幅の自動調整を有効に */
    }

    .kes-result-table th,
    .kes-result-table td {
        padding: 6px 4px; /* パディングを詰める */
        white-space: nowrap; /* セル内での改行を禁止 */
    }

    /* 各列の幅をパーセンテージで指定 */
    .kes-result-table th:nth-child(1), .kes-result-table td:nth-child(1) { width: 12%; } /* 着順 */
    .kes-result-table th:nth-child(2), .kes-result-table td:nth-child(2) { width: 15%; } /* 車番 */
    .kes-result-table th:nth-child(3), .kes-result-table td:nth-child(3) { width: 33%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 選手名 */
    .kes-result-table th:nth-child(4), .kes-result-table td:nth-child(4) { width: 20%; } /* 上がり */
    .kes-result-table th:nth-child(5), .kes-result-table td:nth-child(5) { width: 20%; } /* 着差 */

    .kes-result-table td:nth-child(5) {
        font-size: 0.7rem; /* 着差の文字サイズをさらに小さく */
    }

    /* 出走表テーブルのSP表示調整 */
    .kes-entry-table {
        table-layout: fixed;
        width: 100%;
        font-size: 0.8rem;
    }

    .kes-entry-table th,
    .kes-entry-table td {
        padding: 6px 2px; /* 横方向のパディングを詰める */
        text-align: center;
        vertical-align: middle;
    }

    .kes-entry-table th:nth-child(1), .kes-entry-table td:nth-child(1) { width: 14%; } /* 車番 */
    .kes-entry-table th:nth-child(2), .kes-entry-table td:nth-child(2) { width: 36%; text-align: left; } /* 選手名 */
    .kes-entry-table th:nth-child(3), .kes-entry-table td:nth-child(3) { width: 18%; } /* 府県 */
    .kes-entry-table th:nth-child(4), .kes-entry-table td:nth-child(4) { width: 16%; font-size: 0.75rem; } /* 期別 */
    .kes-entry-table th:nth-child(5), .kes-entry-table td:nth-child(5) { width: 16%; font-size: 0.75rem; } /* 年齢 */
}
}

/* ==========================================================================
   3. Small Mobile Layout (480px以下)
   ========================================================================== */
@media screen and (max-width: 480px) {
    .kes-header h1 {
        font-size: 1.8rem;
    }

    .kes-section-title {
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   4. Calendar Layout (768px以下)
   ========================================================================== */
@media screen and (max-width: 768px) {
    #kes-calendar-container {
        padding: 0.5rem;
    }

    #kes-calendar-container .fc-header-toolbar {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 10px 0;
    }

    #kes-calendar-container .fc-toolbar-title {
        font-size: 1.25rem;
    }

    #kes-calendar-container .fc-daygrid-day-number {
        font-size: 0.8em;
        padding: 4px;
    }

    #kes-calendar-container .fc-event {
        font-size: 0.75em;
    }

    #kes-calendar-container .fc-day-today {
        background: rgba(247, 107, 28, 0.1);
    }
}