/* listings.css — T3-1: /listings/ 一覧カード改善
   ロード条件: lhchild_is_listings_archive() → /listings/ のみ
   スコープ: .hp-listing--view-block（一覧カード）のみ
   ルール: 購入・予約・決済・アカウント・メッセージ導線は不変
           .hp-listing__actions / .hp-listing__footer .hp-attribute には触れない
           実データ（価格・サービス説明・CTA文言）はコードへ埋め込まない
   ブランドトークン: tokens.css の :root 変数経由のみ（!important 禁止）
   ========================================================================== */

/* ── Card base ── */
.hp-listing--view-block {
    background-color: var(--c-paper);
    border-color: var(--c-border);
    border-radius: var(--r-sm);       /* 3px → 8px（brand token） */
    box-shadow: var(--shadow-sm);     /* warm-tinted shadow */
    transition:
        box-shadow var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.hp-listing--view-block:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--c-border-soft);
}

/* ── Image: corner radius を card に合わせる ── */
.hp-listing--view-block .hp-listing__image img {
    border-top-left-radius: calc(var(--r-sm) - 1px);
    border-top-right-radius: calc(var(--r-sm) - 1px);
}

/* ── Title ── */
.hp-listing--view-block .hp-listing__title {
    font-size: var(--fs-sm);          /* 15px（brand type scale） */
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-ink);
}

.hp-listing--view-block .hp-listing__title a {
    color: inherit;
    text-decoration: none;
}

.hp-listing--view-block .hp-listing__title a:hover {
    color: var(--c-accent);
}

/* ── Category links ── */
.hp-listing--view-block .hp-listing__categories a {
    color: var(--c-text-mute);
    font-size: var(--fs-xs);          /* 13px */
    text-decoration: none;
}

.hp-listing--view-block .hp-listing__categories a:hover {
    color: var(--c-accent);
}

/* ── Footer divider ── */
.hp-listing--view-block .hp-listing__footer {
    border-top-color: var(--c-border-soft);
}

/* ── Created date ── */
.hp-listing--view-block .hp-listing__created-date {
    color: var(--c-text-dim);
    font-size: var(--fs-xs);
}

/* ── Featured badge（親テーマの黄色バッジを温存しつつ radius 整合） ── */
.hp-listing--view-block .hp-listing__featured-badge {
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

/* ══════════════════════════════════════════════════════════════
   Dark mode — Phase 6 (/listings/ ダーク版「黒一色」修正)
   ──────────────────────────────────────────────────────────────
   hivetheme body{background:#fff} + カード内ハードコード dark text
   (rgba(15,23,39,…) / rgba(7,36,86,…)) がダーク面と重なり判読不可。
   page-id-161 = HivePress listings archive ページ固有スコープ。
   ══════════════════════════════════════════════════════════════ */

/* ページ背景（hivetheme が #fff ハードコード → /listings/ ダーク時に上書き） */
html[data-theme="dark"] body.page-id-161 {
    background-color: #0a0f1a;
}

/* カード境界・影（--c-paper は tokens.css で #0F1626 に切り替え済み） */
html[data-theme="dark"] .hp-listing--view-block {
    border-color: var(--c-border, #2A3550);
    box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] .hp-listing--view-block:hover {
    border-color: rgba(255, 138, 101, .3);
    box-shadow: var(--shadow-md);
}

/* 投稿日・作成日（親テーマ: rgba(15,23,39,.45) → 暗暗で不可視） */
html[data-theme="dark"] .hp-listing--view-block .hp-listing__created-date {
    color: var(--c-text-dim, #6F7A93);
}

/* 属性テキスト strong（親テーマ: rgba(15,23,39,.85) → ほぼ黒） */
html[data-theme="dark"] .hp-listing--view-block .hp-listing__attributes--secondary .hp-listing__attribute strong {
    color: var(--c-ink-mute, #95A0BA);
}

/* 属性アイコン（親テーマ: rgba(7,36,86,.35) → 暗い紺） */
html[data-theme="dark"] .hp-listing--view-block .hp-listing__attributes--secondary .hp-listing__attribute i {
    color: var(--c-text-dim, #6F7A93);
}

/* アクションアイコン（フォロー・比較等、親テーマ: rgba(7,36,86,.25)） */
html[data-theme="dark"] .hp-listing--view-block .hp-listing__actions--primary .hp-listing__action i {
    color: rgba(255, 255, 255, .3);
}
html[data-theme="dark"] .hp-listing--view-block .hp-listing__actions--primary .hp-listing__action:hover i,
html[data-theme="dark"] .hp-listing--view-block .hp-listing__actions--primary .hp-listing__action[data-state=active] i {
    color: var(--c-accent, #FF8A65);
}