/*
 * BanBan 公開ページ共通スタイル
 *
 * ■ このファイルの役割
 *
 * 公開側（会員・ゲストが見る画面）の色・余白・角丸の置き場。
 * いまはイベント一覧のカードだけが使っているが、詳細ページ・受付フォーム・
 * notice も順次ここへ寄せる。
 *
 * ■ 守ること
 *
 * 1. **要素セレクタ（ul / img / a など）を単独で使わない。**
 *    テーマの見出しやリンクまで巻き込む。すべて .bb- 接頭辞を付ける。
 * 2. **文字色とフォントはテーマから継承する。**inherit / currentColor を使い、
 *    必要な箇所だけ指定する。テーマに何も押し付けない。
 * 3. **部品で色を直書きしない。**必ず var(--bb-pub-*) を通す。
 *    直書きすると、見た目を揃えるたびに全ファイルを書き換えることになる。
 * 4. テーマが何も当ててくれなくても崩れないこと（自己完結）。
 *
 * ■ 既存の公開CSS（application-form / event-detail / reception /
 *    login-custom / mypage）は今回触っていない。
 *    次のタスクで UI を調整するついでに、1本ずつここの変数へ寄せる。
 */

:root {
    /* 色 */
    --bb-pub-border: #e2e5e9;
    --bb-pub-muted: #6b7280;
    /* 種別ラベル。現行の一覧に合わせた淡い黄色＋濃い文字 */
    --bb-pub-accent: #F0EC73;
    --bb-pub-accent-fg: #333333;
    --bb-pub-thumb-bg: #ffffff;
    --bb-pub-surface: transparent;

    /* ── ここから詳細ページで使う分（TASK 015） ── */

    /* 面 */
    --bb-pub-surface-sub: #f5f5f5;      /* 受付終了・パスワード欄などの薄い面 */
    --bb-pub-surface-head: #f0f0f0;     /* 表のヘッダ */
    --bb-pub-surface-invert: #ffffff;

    /* 参加者リストの表の高さの上限。ページが何画面分にもならないように */
    --bb-pub-table-max-h: 70vh;

    /* 線 */
    --bb-pub-border-strong: #cccccc;    /* 入力欄など、はっきり見せたい線 */

    /* 文字 */
    --bb-pub-text: #333333;
    --bb-pub-text-sub: #555555;
    --bb-pub-text-invert: #ffffff;

    /* 役割の色
     *
     * ⚠️ Elementor のグローバル色を**フォールバック付きで**参照する。
     *    Elementor のサイトでは今までどおりテーマ色に追従し、
     *    それ以外のテーマではフォールバックが効く。
     *    **フォールバックを外すと、他テーマで色が消える。**
     *
     * ⚠️ 赤＝正会員・準会員／青＝ゲスト。意味を入れ替えない。 */
    --bb-pub-member: var(--e-global-color-primary, #C8000D);
    --bb-pub-guest: var(--e-global-color-accent, #43B3F0);
    --bb-pub-info: #3c5a9a;             /* テーブル番号のバッジ・イニシャル */
    --bb-pub-info-bg: #c8d8f0;
    --bb-pub-link: #0066cc;

    /* 済み・オン（授賞者の授与済みなど）
     *
     * ⚠️ 管理画面の `--bb-success` とは別物。あちらは banban-ui.css の
     *    管理画面用で、公開側は読み込まない。 */
    --bb-pub-success: #00a32a;
    --bb-pub-success-bg: #e8f5e9;

    /* 影。カードの浮き上がりに使う */
    --bb-pub-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* 警告 */
    --bb-pub-danger: #cc0000;
    --bb-pub-danger-bg: #fff5f5;
    --bb-pub-danger-border: #ffcccc;

    /* 余白 */
    --bb-pub-gap: 16px;
    --bb-pub-gap-sm: 8px;
    --bb-pub-pad-y: 16px;

    /* 形 */
    --bb-pub-radius: 6px;
    --bb-pub-radius-pill: 999px;

    /* 文字 */
    --bb-pub-fs-sm: 0.875rem;
    --bb-pub-fs-meta: 1rem;
    --bb-pub-fs-title: 1.25rem;
    --bb-pub-lh: 1.6;

    /* 一覧のサムネイル */
    --bb-pub-thumb-w: 160px;
    --bb-pub-thumb-ratio: 4 / 3;
}

/* ── イベント一覧 ── */

.bb-event-list {
    /* ⚠️ color と font-family は指定しない。テーマから継承させる */
    background: var(--bb-pub-surface);
    line-height: var(--bb-pub-lh);
}

.bb-event-list__note {
    color: var(--bb-pub-muted);
    margin: 0;
    padding: var(--bb-pub-pad-y) 0;
}

/* ⚠️ カード全体が <a>。文字色と下線はテーマに任せず、ここで打ち消す。
   そうしないとテーマのリンク色でカード全体が青くなる */
.bb-event-card {
    display: flex;
    align-items: flex-start;
    gap: var(--bb-pub-gap);
    padding: var(--bb-pub-pad-y) 0;
    border-bottom: 1px solid var(--bb-pub-border);
    color: inherit;
    text-decoration: none;
}

.bb-event-card:hover .bb-event-card__title,
.bb-event-card:focus .bb-event-card__title {
    text-decoration: underline;
}

.bb-event-card:last-child {
    border-bottom: 0;
}

/* ⚠️ 画像が無くても枠を残す。残さないとカードごとに高さが変わってガタつく */
.bb-event-card__thumb {
    flex: 0 0 var(--bb-pub-thumb-w);
    width: var(--bb-pub-thumb-w);
    background: var(--bb-pub-thumb-bg);
    /* ⚠️ 現行の一覧はサムネイルを枠線で囲っている。無いと画像が
       背景に溶けて、白いロゴのイベントで境目が分からなくなる */
    border: 1px solid var(--bb-pub-border);
    border-radius: var(--bb-pub-radius);
    overflow: hidden;
    /* インライン要素の行送りぶんの隙間を消す */
    line-height: 0;
}

/* ⚠️ **縦横比を決めるのは画像が無いときだけ。**
   画像があるのに 4:3 を強制すると、横長のロゴ（158×89）の下に
   余白が残る。枠が画像に合わせて縮むようにする。
   :empty が効くのは renderCard が画像なしのとき
   `<div class="bb-event-card__thumb"></div>` と隙間なく出すため。 */
.bb-event-card__thumb:empty {
    aspect-ratio: var(--bb-pub-thumb-ratio);
}

.bb-event-card__img {
    display: block;
    width: 100%;
    /* ⚠️ auto。100% にすると枠の高さに引き伸ばされ、画像の下に余白が出る */
    height: auto;
    max-width: 100%;
}

.bb-event-card__body {
    flex: 1 1 auto;
    min-width: 0;   /* ⚠️ 無いと長いタイトルで flex がはみ出す */
}

.bb-event-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bb-pub-gap);
    margin: 0 0 var(--bb-pub-gap-sm);
    font-size: var(--bb-pub-fs-meta);
    /* ⚠️ 現行の日付は薄いグレーではなく本文と同じ濃さの太字 */
    color: inherit;
}

.bb-event-card__kind {
    display: inline-block;
    padding: 4px 18px;
    border-radius: var(--bb-pub-radius-pill);
    background: var(--bb-pub-accent);
    color: var(--bb-pub-accent-fg);
    font-size: var(--bb-pub-fs-sm);
    line-height: 1.5;
    white-space: nowrap;
}

.bb-event-card__date {
    font-weight: bold;
    /* 桁を揃える。日付が縦に並ぶので揃っていないと読みにくい */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bb-event-list--empty {
    color: var(--bb-pub-muted);
}

.bb-event-card__title {
    margin: 0;
    font-size: var(--bb-pub-fs-title);
    font-weight: bold;
    line-height: 1.45;
}

/* 画面が狭いとき */
@media (max-width: 480px) {
    :root {
        --bb-pub-thumb-w: 96px;
        --bb-pub-gap: 12px;
        --bb-pub-fs-title: 1.0625rem;
        --bb-pub-fs-meta: 0.875rem;
    }
}