/* ======================================================
   public_cards.css
   ------------------------------------------------------
   役割：
     フクオカギルド公開一覧ページの
     スマホ用ミニカード表示を管理する。

   対象：
     ・3行ミニカード
     ・詳細アコーディオン
     ・詳細を見る / 閉じる
     ・詳細項目のラベルと値

   注意：
     ・共通骨格は public_base.css
     ・PCテーブルは public_tables.css
     ・色・背景画像は public_theme.css
====================================================== */


/* ======================================================
   ① ミニカード一覧
====================================================== */

.fg-mini-card-list {
    display: grid;
    gap: 10px;
}


/* ======================================================
   ② ミニカード本体
====================================================== */

.fg-mini-card {
    padding: 10px 12px;

    border: 1px solid #d0d5dd;
    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 1px 3px rgba(16, 24, 40, 0.08);
}


/* ======================================================
   ③ カードタイトル
====================================================== */

.fg-mini-card-title {
    margin: 0 0 4px;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;

    color: #101828;
}


/* ======================================================
   ④ カード2行目・3行目
====================================================== */

.fg-mini-card-line {
    margin: 2px 0;

    font-size: 0.92rem;
    line-height: 1.35;

    color: #344054;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ======================================================
   ⑤ 詳細アコーディオン全体
====================================================== */

.fg-mini-card-details {
    margin-top: 10px;
    padding-top: 8px;

    border-top: 1px solid #eaecf0;
}


/* ======================================================
   ⑥ 詳細を見るバー
====================================================== */

.fg-mini-card-details summary {
    display: block;

    width: 100%;

    padding: 9px 10px;

    border-radius: 8px;

    background: #f2f4f7;
    color: #344054;

    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;

    list-style: none;
}


/* 標準マーカーを非表示 */
.fg-mini-card-details summary::-webkit-details-marker {
    display: none;
}


/* 独自三角 */
.fg-mini-card-details summary::before {
    content: "▶";

    display: inline-block;

    margin-right: 6px;

    font-size: 0.75rem;
}


/* 開いたとき */
.fg-mini-card-details[open] summary::before {
    content: "▼";
}


/* ホバー */
.fg-mini-card-details summary:hover {
    background: #e4e7ec;
}


/* ======================================================
   ⑦ 開いた詳細エリア
====================================================== */

.fg-mini-card-details[open] {
    padding: 8px;

    border-radius: 10px;

    background: #f9fafb;
}


/* 開いたときのバー */
.fg-mini-card-details[open] summary {
    background: #e4e7ec;
}


/* ======================================================
   ⑧ 詳細を見る / 閉じる 切替
====================================================== */

.fg-detail-label-close {
    display: none;
}

.fg-mini-card-details[open] .fg-detail-label-open {
    display: none;
}

.fg-mini-card-details[open] .fg-detail-label-close {
    display: inline;
}


/* ======================================================
   ⑨ 詳細リスト
====================================================== */

.fg-mini-card-detail-list {
    display: grid;

    gap: 6px;

    margin: 10px 0 0;
    padding: 2px 4px 4px;

    font-size: 0.9rem;
}


/* ======================================================
   ⑩ 詳細1行
====================================================== */

.fg-mini-card-detail-row {
    display: grid;

    grid-template-columns:
        88px
        minmax(0, 1fr);

    gap: 8px;

    padding: 3px 0;
}


/* ======================================================
   ⑪ 詳細ラベル
====================================================== */

.fg-mini-card-detail-row dt {
    color: #667085;

    font-weight: 700;
}


/* ======================================================
   ⑫ 詳細値
====================================================== */

.fg-mini-card-detail-row dd {
    min-width: 0;

    margin: 0;

    color: #101828;

    overflow-wrap: anywhere;
}


/* ======================================================
   ⑬ 詳細内リンク
====================================================== */

.fg-mini-card-detail-row dd a {
    overflow-wrap: anywhere;
}


/* ======================================================
   ⑭ 狭いスマホ
   ------------------------------------------------------
   ラベル幅を少し縮め、
   値側の表示領域を確保する。
====================================================== */

@media (max-width: 420px) {

    .fg-mini-card {
        padding:
            10px
            10px;
    }

    .fg-mini-card-detail-row {
        grid-template-columns:
            78px
            minmax(0, 1fr);

        gap: 7px;
    }

}