/*
Theme Name: BallSpot Child
Template: generatepress
Author: Ball Spot Dev Team
Description: 子テーマ。ACF出力とカスタマイズ専用。
Version: 1.0
Text Domain: ballspot-child
*/

/* =========================================
   共通：見出し・セクション余白
   ========================================= */

h2 {
    font-size: 1.4em;
    margin-top: 1.2em;
    border-left: 4px solid #14547C;
    padding-left: 8px;
}

section {
    margin-bottom: 2em;
}

/* =========================================
   Spot 共通：メイン写真レイアウト
   ========================================= */

/* メイン写真を中央＆レスポンシブに表示 */
.spot-article__header img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* メイン写真コンテナの下方向の余白をゼロに */
.spot-article__header {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* スポット詳細メイン画像の min-height を解除 */
body .spot-article-featured-image {
    min-height: 0 !important;
    height: auto !important;
}

/* 箱崎川第二公園（postid-491）専用：#3 の上余白だけ統一 */
body.postid-491 #spot-section-3 {
    margin-top: 24px !important;
    padding-top: 0 !important;
}

/* =========================================
   #3 使用可能ボール　共通レイアウト（div + flex）
   PHP: ballspot_render_section_3_balls() 用
   ※ここが「PC 基本値（タブレット含む）」
   ========================================= */

/* セクション全体 */
#spot-section-3.spot-section-balls {
    margin: 2.5rem 0;
    padding: 0;
    background: #f7f9fc;
}

/* カード本体（白い箱） */
#spot-section-3 .bs-ball-card {
    max-width: 900px;          /* ★PCでのカード全体の最大幅 */
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #dde3ec;
    overflow: hidden;
}

/* ヘッダー行（使用可能ボール／推奨度の行） */
#spot-section-3 .bs-ball-card-header {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.6rem;    /* ★ヘッダー行の上下左右余白（PC 基本値） */
    background: #f7f9fc;
    border-bottom: 1px solid #dde3ec;
    font-weight: 600;
    font-size: 0.95rem;        /* ★ヘッダーの文字サイズ（PC 基本値） */
    color: #556070;
}

/* 見出し 左：使用可能ボール（ボール名カラムと同じ幅） */
#spot-section-3 .bs-ball-card-header-title {
    flex: 0 0 260px;           /* ★ボール名カラムの幅（星の開始位置をまとめて動かす） */
    text-align: center;        /* ★ヘッダー左テキストの中央揃え */
}

/* 見出し 右：推奨度（残りの幅） */
#spot-section-3 .bs-ball-card-header-rating {
    flex: 1 1 auto;
    text-align: center;        /* ★ヘッダー右テキストの中央揃え */
}

/* リスト全体（サッカー〜ラケット） */
#spot-section-3 .bs-ball-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 各行（サッカー〜ラケット：1行分） */
#spot-section-3 .bs-ball-item {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.6rem;    /* ★サッカー〜ラケット行の上下左右余白（PC 基本値） */
    border-bottom: 1px solid #e5e9f2;
}

#spot-section-3 .bs-ball-item:last-child {
    border-bottom: none;
}

/* 左側：ボールアイコン＋ボール名 ------------------------------ */
#spot-section-3 .bs-ball-item-left {
    display: flex;
    align-items: center;
    gap: 0.7rem;               /* ★アイコンとボール名の間隔 */
    flex: 0 0 260px;           /* ★ボール名カラムの幅（PC 基本値） */
}

/* ボールアイコン枠（全種目共通） */
#spot-section-3 .bs-ball-icon {
    width: 2.0rem;             /* ★ボールアイコンのサイズ（PC 基本値） */
    height: 2.0rem;
    position: relative;
    flex-shrink: 0;
    border: none;
    background: none;
}

/* 背景画像としてアイコンを描画 */
#spot-section-3 .bs-ball-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 種目ごとのアイコン画像 ---------------------------------------- */
#spot-section-3 .bs-icon-soccer::before {
    background-image: url('https://ballspot.jp/wp-content/uploads/soccer.png');
}
#spot-section-3 .bs-icon-baseball-soft::before {
    background-image: url('https://ballspot.jp/wp-content/uploads/softball.png');
}
#spot-section-3 .bs-icon-baseball-hard::before {
    background-image: url('https://ballspot.jp/wp-content/uploads/hardball.png');
}
#spot-section-3 .bs-icon-tennis::before {
    background-image: url('https://ballspot.jp/wp-content/uploads/tennis.png');
}
#spot-section-3 .bs-icon-basketball::before {
    background-image: url('https://ballspot.jp/wp-content/uploads/basketball.png');
}
#spot-section-3 .bs-icon-bat::before {
    background-image: url('https://ballspot.jp/wp-content/uploads/bat.png');
}
#spot-section-3 .bs-icon-racket::before {
    background-image: url('https://ballspot.jp/wp-content/uploads/racket.png');
}

/* ボール名テキスト */
#spot-section-3 .bs-ball-label {
    font-size: 0.95rem;        /* ★サッカー〜ラケット行の文字サイズ（PC 基本値） */
    color: #222a3a;
}

/* 右側：星の列 ---------------------------------------------------- */
#spot-section-3 .bs-ball-item-right {
    flex: 1 1 auto;            /* ★星カラムの幅（残り全部） */
    display: flex;
    align-items: center;
    justify-content: center;   /* ★星の中央揃え（推奨度カラムの中央に合わせる） */
}

/* 星（共通） ------------------------------------------------------ */
#spot-section-3 .bs-stars {
    display: inline-flex;
    gap: 0.12rem;              /* ★星アイコン同士の間隔（PC 基本値） */
    font-size: 1.05rem;        /* ★星アイコンの大きさ（PC 基本値） */
}

#spot-section-3 .bs-stars span {
    line-height: 1;
}

#spot-section-3 .bs-star-full  { color: #f5b301; }
#spot-section-3 .bs-star-empty { color: #c9d0dd; }

/* ハーフスター（半分だけ塗る） */
#spot-section-3 .bs-star-half {
    position: relative;
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    overflow: hidden;
    color: #c9d0dd;            /* 下地（空スター色） */
}

#spot-section-3 .bs-star-half > span {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;                /* ★塗る幅。40〜60%で微調整可 */
    height: 100%;
    overflow: hidden;
    color: #f5b301;
    line-height: 1;
}

/* ==================================================================
   スマホ専用（〜768px） #3 使用可能ボール
   ================================================================== */

@media (max-width: 768px) {

    /* カードの左右余白（スマホ全体での余白感） */
    #spot-section-3 .bs-ball-card {
        margin: 0 3rem;        /* ★ここを狭めると画面端に近づく */
    }

    /* ヘッダー行（使用可能ボール／推奨度）の高さ・左右余白 */
    #spot-section-3 .bs-ball-card-header {
        padding: 0.5rem 2.1rem;   /* ★上・下・左・右の余白（スマホ用） */
        font-size: 0.9rem;
    }

    /* サッカー〜ラケット行の高さ・左右余白 */
    #spot-section-3 .bs-ball-item {
        padding: 0.3rem 1.1rem;   /* ★ここを 0.3〜0.5 で調整：上下の縦幅に効く */
    }

    /* ボール名カラム（左側）の幅：スマホ時の星の開始位置 */
    #spot-section-3 .bs-ball-card-header-title,
    #spot-section-3 .bs-ball-item-left {
        flex-basis: 170px;     /* ★ここを増減すると「星の開始位置（左からの距離）」が変わる */
        text-align: left;
    }

    /* ボールアイコン（スマホ用サイズ） */
    #spot-section-3 .bs-ball-icon {
        width: 1.3rem;         /* ★スマホでのボールアイコンサイズ */
        height: 1.3rem;
        margin-left: 0.5rem;   /* ★スマホ専用：アイコン全体の左余白 */
        margin-right: 0.3rem;
	}

    /* サッカー〜ラケット行：ボール名の文字サイズ＆行間 */
    #spot-section-3 .bs-ball-label {
        font-size: 0.85rem;    /* ★スマホ用の文字サイズ */
        line-height: 1.1;
    }

    /* 星アイコン（スマホ用サイズ・余白） */
    #spot-section-3 .bs-stars {
        font-size: 0.9rem;     /* ★スマホ用の星アイコンの大きさ */
        gap: 0.08rem;
        line-height: 1;
    }

    /* 星カラム（右側）の中央揃え（スマホ） */
    #spot-section-3 .bs-ball-item-right {
        justify-content: center;
    }
}

/* ==================================================================
   PC専用（769px〜） #3 使用可能ボール
   ================================================================== */

@media (min-width: 769px) {

    /* ヘッダー行の余白・フォント（PC専用調整） */
    #spot-section-3 .bs-ball-card-header {
        padding: 0.9rem 1.6rem;
        font-size: 0.95rem;
        text-align: center;
    }

    /* ヘッダー行テキストの中央揃え（PC専用） */
    #spot-section-3 .bs-ball-card-header-title,
    #spot-section-3 .bs-ball-card-header-rating {
        text-align: center;
    }

    /* サッカー〜ラケット行の余白（PC専用調整） */
    #spot-section-3 .bs-ball-item {
        padding: 0.9rem 1.6rem;
    }

    /* ボール名カラム（左側の幅） */
    #spot-section-3 .bs-ball-item-left {
        flex-basis: 260px;
    }

    /* ボールアイコン：PC用サイズ＆余白 */
    #spot-section-3 .bs-ball-icon {
        width: 2.0rem;
        height: 2.0rem;
        margin-left: 0;
    }

    /* サッカー〜ラケット行の文字サイズ（PC専用） */
    #spot-section-3 .bs-ball-label {
        font-size: 0.95rem;
        line-height: 1.2;
    }

    /* 星カラム（右側）のサイズ・位置（PC専用） */
    #spot-section-3 .bs-ball-item-right {
        flex: 1 1 auto;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* 星アイコン（PC専用サイズ） */
    #spot-section-3 .bs-stars {
        font-size: 1.05rem;
        gap: 0.12rem;
    }
}

/* =======================================================
   Spot 詳細ページ全体：PC 2カラム＋センタリング
   ======================================================= */

/* PC でのみ 2カラム＋幅1050px固定を適用 */
@media (min-width: 1025px) {

    /* ① 記事全体（タイトル＋写真＋2カラム）を包む箱を
       幅 1050px で中央寄せにする */
    body.single-spot .spot-article {
        width: 1050px;
        max-width: 1050px;
        margin: 0 auto;          /* 左右均等に中央寄せ */
        padding: 0;
        box-sizing: border-box;
        display: block;
    }

    /* ② その中で 2カラムレイアウトを組む */
    .spot-layout {
        display: grid;

        /* 左：右 = 2.6 : 1 の比率で、
           カラム間に 30px の溝をあける */
        grid-template-columns:
            minmax(0, 2.6fr)      /* 左カラム：本文 */
            minmax(300px, 1fr);   /* 右カラム：サイド（最小300px） */

        column-gap: 30px;         /* 左右カラムの間隔（中央の縦溝） */
        align-items: flex-start;
    }

    /* 左右カラム共通：中身がはみ出さないようにする */
    .spot-layout__main,
    .spot-layout__side {
        min-width: 0;
    }

    /* 右カラム内で使うカードデザイン（共通） */
    .spot-side-block {
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #dde3ec;
        padding: 1.2rem 1.4rem;
        margin-bottom: 1.5rem;
    }

    .spot-side-block__title {
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 0.8rem;
        border-left: 4px solid #14547C;
        padding-left: 0.5rem;
    }
}