/* SaraHome — Shared Card Styles (§R-N+26xx Wave 3.1)
   對位 framework rule §R-N+62 KISS + §R-N+146 後寫後贏 + §R-N+25xx plan precedent:
   必須 link 喺 style.css 之後, mobile.css 之前
   對位 §R-N+26xx Wave 3.1 : 統一 6+ card 變種 closure

   §R-N+26xx Wave 3.1 (2026-08-26) — 共享 .card base class
   - 為 card_macro 提供 base styling
   - 不破壞現有 .about-card / .legal-section / .plan-card / .stat-card /
     .subscription-card / .admin-list-item / .error-suggestions classes
   - 純新增, 對位 §R-N+73 anti-fraud (唔重定義已有 CSS class) */

/* === Shared card base (used by tags/_card_macros.html) === */
.card {
    background: var(--sarahome-v3-surface-card);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-md, 12px);
    padding: 1.25rem 1.4rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover {
    box-shadow: 0 2px 12px var(--sarahome-v3-shadow-color-medium);
    border-color: var(--sarahome-v3-border-dark);
}

/* Card variants 對位 §R-N+25xx  (card pattern 統一) */

/* Default variant — white surface + 1px border */
.card-default {
    background: var(--sarahome-v3-surface-card);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-md, 12px);
    padding: 1.25rem 1.4rem;
}

/* Accent variant — 加左 4px accent bar (對位 agent-section 嘅 ::before 根因) */
.card-accent {
    background: var(--sarahome-v3-surface-card);
    border: 1px solid var(--sarahome-v3-border);
    border-left: 4px solid var(--sarahome-v3-color-accent);
    border-radius: var(--sarahome-v3-radius-md, 12px);
    padding: 1.25rem 1.4rem;
}

/* Warm variant — warm accent (對位 dashboard 警示 card) */
.card-warm {
    background: var(--sarahome-v3-surface-card);
    border: 1px solid var(--sarahome-v3-border);
    border-left: 4px solid var(--sarahome-v3-color-warm);
    border-radius: var(--sarahome-v3-radius-md, 12px);
    padding: 1.25rem 1.4rem;
}

/* Card header — icon + title row (對位 §R-N+25xx legal-section-header pattern) */
.card-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--sarahome-v3-border);
}

.card-icon {
    color: var(--sarahome-v3-color-accent);
    flex-shrink: 0;
}

.card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sarahome-v3-color-fg);
    line-height: 1.4;
}

/* Card body content (typography inheritance) */
.card p {
    margin: 0.5rem 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--sarahome-v3-color-fg);
}

.card p:first-child {
    margin-top: 0;
}

.card p:last-child {
    margin-bottom: 0;
}

.card ul {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.card li {
    margin: 0.375rem 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--sarahome-v3-color-fg);
}

.card li::marker {
    color: var(--sarahome-v3-color-accent);
}

.card a {
    color: var(--sarahome-v3-color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.card a:hover {
    color: var(--sarahome-v3-color-accent-aa);
}

/* Mobile responsive — 對位 §R-N+25xx legal-section mobile  */
@media (max-width: 768px) {
    .card,
    .card-default,
    .card-accent,
    .card-warm {
        padding: 1rem 1.125rem;
        border-radius: var(--sarahome-v3-radius-sm, 8px);
    }

    .card-title {
        font-size: 1rem;
    }

    .card p,
    .card li {
        font-size: 0.875rem;
    }
}