/* ===================================
   イベント詳細ページのスタイル
   single-events.php 用

   カラートークン（shop-detail.css・イベントカードと統一）
   #8b4513  primary（ブラウン）
   #5c3317  primary-dark
   #d4a373  accent（キャメル）
   #f9f3ed  bg-warm
   #e0d5c9  border

   更新: ACFエクスポート（acf-export-2026-02-23.json）に準拠

   セクション構成:
   1.  イベントヘッダー（バッジ・タイトル・アイキャッチ）
   2.  イベント基本情報ボックス（日時・定員・価格・会場・状況）
   3.  予約ボタン（状態別スタイル）
   3.5 募金百貨店プロジェクト（赤い羽根共同募金）
   4.  イベント説明・提供内容
   5.  メニュー・ドリンク詳細（本格版/ミニ切り替え）
   6.  参加店舗一覧
   7.  会場情報・アクセス（iframe地図）
   8.  FAQリンクボックス
   9.  ページ下部CTA
   10. パンくずリスト
   11. レスポンシブ対応
   =================================== */




/* -----------------------------------
   1. イベントヘッダー
   ----------------------------------- */
.event-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 1rem;
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
}

/* イベント種別バッジ（共通スタイル） */
.event-type-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: bold;
    margin-bottom: 1rem;
    background-color: #e9ecef;
    color: #495057;
}

/*
 * イベント種別ごとのバッジカラー
 * PHP側で日本語 → 英語スラッグに変換し、CSSクラスとして出力しています。
 * 対応表:
 *   アフタヌーンティ・本格版 → .event-type-at-full
 *   アフタヌーンティ・ミニ   → .event-type-at-mini
 *   スイーツビュッフェ       → .event-type-sweets-buffet
 *   お菓子ビュッフェ         → .event-type-okashi-buffet
 *   企業コラボ               → .event-type-corporate
 *   特別企画                 → .event-type-special
 */
.event-type-at-full {
    background-color: #5c3317;
    color: #ffffff;
}

.event-type-at-mini {
    background-color: #d4a373;
    color: #ffffff;
}

.event-type-sweets-buffet {
    background-color: #e91e8c;
    color: #ffffff;
}

.event-type-okashi-buffet {
    background-color: #ff69b4;
    color: #ffffff;
}

.event-type-corporate {
    background-color: #2e7d32;
    color: #ffffff;
}

.event-type-special {
    background-color: #6a1b9a;
    color: #ffffff;
}

/* フォールバック（マップに未登録の種別が追加された場合） */
.event-type-default {
    background-color: #e9ecef;
    color: #495057;
}

/* イベントタイトル */
.event-title {
    font-size: 2rem;
    line-height: 1.4;
    margin: 1rem 0;
    color: #2c3e50;
}

/* アイキャッチ画像 */
.event-featured-image {
    margin-top: 2rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.event-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}


/* -----------------------------------
   2. イベント基本情報ボックス
   ----------------------------------- */
.event-info-box {
    background: #ffffff;
    border: 2px solid #8b4513;
    border-radius: 8px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 情報グリッド（2列レイアウト。項目数が多い場合も自動で折り返し） */
.event-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* 各情報項目 */
.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 情報ラベル（「開催日」「第1部」「定員」等） */
.info-label {
    font-size: 0.875rem;
    font-weight: bold;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 情報値 */
.info-value {
    font-size: 1.25rem;
    color: #2c3e50;
    font-weight: 600;
}

/* 価格は特に大きく強調 */
.info-value.price {
    font-size: 1.5rem;
    color: #8b4513;
}

/*
 * 募集状況の色分け
 * PHP側で日本語 → 英語スラッグに変換しています。
 * 対応表:
 *   募集開始前 → .status-upcoming
 *   募集中     → .status-open
 *   満席       → .status-full
 *   受付終了   → .status-closed
 *   開催済み   → .status-past
 */
.status-open {
    color: #28a745;
    font-weight: 700;
}

.status-full {
    color: #dc3545;
    font-weight: 700;
}

.status-upcoming {
    color: #ff8f00;
}

.status-closed {
    color: #6c757d;
}

.status-past {
    color: #9e9e9e;
    font-style: italic;
}

.status-default {
    color: #495057;
}


/* -----------------------------------
   3. 予約ボタン（状態別スタイル）
   ----------------------------------- */
.booking-button-container {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

/* 予約ボタン共通（.btn-booking はリンク・ボタン両方に使用） */
.btn-booking {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
}

.btn-primary {
    background: linear-gradient(135deg, #8b4513 0%, #d4a373 100%);
    color: #ffffff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 69, 19, 0.4);
    color: #ffffff;
    text-decoration: none;
}

.btn-large {
    min-width: 280px;
}

/* 無効状態のボタン（満席・募集開始前・受付終了・開催済み） */
.btn-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 50px;
    border: none;
    background-color: #adb5bd;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.7;
    min-width: 280px;
}

/* 予約注意書き */
.booking-note {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.6;
}


/* -----------------------------------
   3.5 募金百貨店プロジェクトセクション
   赤い羽根共同募金のブランドカラー（赤）を基調に、
   信頼感と社会貢献の姿勢を訴求するデザインです。
   ACFの is_bokin フィールドが ON のときのみ表示されます。
   ----------------------------------- */
.bokin-section {
    margin: 2rem 0 3rem;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #c62828;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.1);
}

.bokin-inner {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 2rem;
}

.bokin-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.bokin-content {
    flex: 1;
}

.bokin-title {
    font-size: 1rem;
    font-weight: 700;
    color: #b71c1c;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.bokin-message {
    font-size: 0.925rem;
    color: #4e342e;
    line-height: 1.7;
    margin: 0 0 0.75rem 0;
}

/* 任意の補足テキスト（bokin_note フィールド） */
.bokin-note {
    font-size: 0.85rem;
    color: #6d4c41;
    background: rgba(198, 40, 40, 0.06);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin: 0 0 0.75rem 0;
    line-height: 1.6;
}

.bokin-link {
    display: inline-block;
    font-size: 0.85rem;
    color: #c62828;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.bokin-link:hover {
    color: #b71c1c;
    text-decoration: underline;
}


/* -----------------------------------
   4. イベント説明・提供内容
   ----------------------------------- */

/* 各セクション共通の背景・余白 */
.event-description,
.event-content-detail,
.event-menu-detail,
.event-shops,
.venue-information {
    margin: 3rem 0;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
}

/* 各セクション見出し共通 */
.event-description h2,
.event-content-detail h2,
.event-menu-detail h2,
.event-shops h2,
.venue-information h2 {
    font-size: 1.75rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid #8b4513;
}

/* 提供内容テキスト（textarea → nl2br 出力） */
.content-detail {
    line-height: 1.8;
    color: #333;
}


/* -----------------------------------
   5. メニュー・ドリンク詳細
      （本格版 / ミニ で表示内容が切り替わる）
   ----------------------------------- */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.menu-item {
    background: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.menu-item h3 {
    font-size: 1.1rem;
    color: #5c3317;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0e6dc;
}

.menu-item p {
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* ポットサービス茶葉リスト（本格版） */
.tea-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tea-list li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: #555;
    line-height: 1.6;
}

/* 茶葉アイコン */
.tea-list li::before {
    content: "🍵";
    position: absolute;
    left: 0;
    top: 0.5rem;
    font-size: 0.9rem;
}

/* ワンドリンクリスト（ミニ） */
.drink-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drink-list li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: #555;
    line-height: 1.6;
}

/* ドリンクアイコン */
.drink-list li::before {
    content: "☕";
    position: absolute;
    left: 0;
    top: 0.5rem;
    font-size: 0.9rem;
}


/* -----------------------------------
   6. 参加店舗一覧
   ----------------------------------- */
.shops-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.shop-item {
    background: #ffffff;
    border: 1px solid #e0d5c9;
    border-radius: 24px;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s ease;
}

.shop-item:hover {
    background: #f9f3ed;
    border-color: #8b4513;
    box-shadow: 0 2px 6px rgba(139, 69, 19, 0.15);
}

.shop-name {
    font-size: 0.95rem;
    color: #5c3317;
    font-weight: 600;
}


/* -----------------------------------
   7. 会場情報・アクセス（iframe地図）
   ----------------------------------- */
.venue-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.venue-address {
    color: #6c757d;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Google Maps iframe の外枠 */
.venue-map {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 1rem;
}

.venue-map iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}


/* -----------------------------------
   8. FAQリンクボックス
   ----------------------------------- */
.event-faq-link {
    margin: 3rem 0;
}

.faq-box {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 2rem;
    border-radius: 8px;
}

.faq-box h3 {
    color: #e65100;
    margin-bottom: 0.5rem;
}

.faq-box p {
    margin: 1rem 0;
    color: #5d4037;
    line-height: 1.6;
}

.btn-secondary {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: #ff9800;
    color: #ffffff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #e65100;
    color: #ffffff;
    transform: translateY(-2px);
    text-decoration: none;
}


/* -----------------------------------
   9. ページ下部CTA
   ----------------------------------- */
.event-booking-bottom {
    margin: 4rem 0 2rem;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #8b4513 0%, #d4a373 100%);
    border-radius: 12px;
    text-align: center;
}

.cta-message {
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* CTA内の予約ボタンは白ベースに反転 */
.event-booking-bottom .btn-booking {
    background: #ffffff;
    color: #8b4513;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.event-booking-bottom .btn-booking:hover {
    background: #fff8f0;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}


/* -----------------------------------
   10. レスポンシブ対応
   ----------------------------------- */
@media (max-width: 768px) {
    .event-title {
        font-size: 1.5rem;
    }

    .event-info-grid {
        grid-template-columns: 1fr;
    }

    .menu-grid {
        grid-template-columns: 1fr;
    }

    .btn-large,
    .btn-disabled {
        min-width: auto;
        width: 100%;
    }

    .event-info-box,
    .event-description,
    .event-content-detail,
    .event-menu-detail,
    .event-shops,
    .venue-information {
        padding: 1.5rem;
    }

    .venue-map iframe {
        height: 280px;
    }

    .event-booking-bottom {
        padding: 2rem 1.5rem;
    }

    .bokin-inner {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.25rem 1.5rem;
    }

    .bokin-icon {
        font-size: 1.75rem;
    }
}


/* -----------------------------------
   10. パンくずリスト
       shop-detail.css と同一の設計。
       ラッパークラスのみ .event-breadcrumb に変更。
   ----------------------------------- */
.event-breadcrumb {
    padding: 0.75rem 0;
    margin-bottom: 0;
}

/* 独自実装（フォールバック）のスタイル */
.event-breadcrumb .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    color: #6c757d;
}

.event-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
}

.event-breadcrumb .breadcrumb-link {
    color: #8b4513;
    text-decoration: none;
    transition: color 0.2s ease;
}

.event-breadcrumb .breadcrumb-link:hover {
    color: #5c3317;
    text-decoration: underline;
}

.event-breadcrumb .breadcrumb-separator {
    color: #e0d5c9;
    font-size: 0.9rem;
    user-select: none;
}

.event-breadcrumb .breadcrumb-current {
    color: #6c757d;
    font-weight: 600;
    /* 長いタイトルは省略 */
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cocoon のパンくずが出力される場合の上書き調整 */
.event-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
}


/* -----------------------------------
   11. レスポンシブ対応
   ----------------------------------- */
@media (max-width: 768px) {
    .event-title {
        font-size: 1.5rem;
    }

    .event-info-grid {
        grid-template-columns: 1fr;
    }

    .menu-grid {
        grid-template-columns: 1fr;
    }

    .btn-large,
    .btn-disabled {
        min-width: auto;
        width: 100%;
    }

    .event-info-box,
    .event-description,
    .event-content-detail,
    .event-menu-detail,
    .event-shops,
    .venue-information {
        padding: 1.5rem;
    }

    .venue-map iframe {
        height: 280px;
    }

    .event-booking-bottom {
        padding: 2rem 1.5rem;
    }

    .bokin-inner {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.25rem 1.5rem;
    }

    .bokin-icon {
        font-size: 1.75rem;
    }
}