/*
 * .card — shadcn-style card composition
 *
 * Sub-parts: .card-header, .card-title, .card-description, .card-content, .card-footer
 *
 * Recommended structure:
 * <article class="card">
 *     <header class="card-header">
 *         <h3 class="card-title">Title</h3>
 *         <p class="card-description">Description</p>
 *     </header>
 *     <div class="card-content">Content</div>
 *     <footer class="card-footer">Footer</footer>
 * </article>
 */

.card {
    background-color: var(--color-card);
    color: var(--color-card-foreground);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    padding: var(--space-6);
}

.card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-card-foreground);
    margin: 0;
}

.card-description {
    font-size: var(--text-sm);
    color: var(--color-muted-foreground);
    line-height: var(--leading-normal);
    margin: 0;
}

.card-content {
    padding: var(--space-6);
    padding-top: 0;
}

.card-header + .card-content {
    padding-top: 0;
}

/* When card is content-only (no header), reset top padding */
.card > .card-content:first-child {
    padding-top: var(--space-6);
}

.card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
    padding-top: 0;
    border-top: 1px solid transparent; /* reserves space; set 'border-top-color: border' to show divider */
}

.card-footer.card-footer-divider {
    border-top-color: var(--color-border);
    padding-top: var(--space-4);
    margin-top: var(--space-2);
}

/* ─── Compact variant ──────────────────────────────── */
.card-sm .card-header,
.card-sm .card-content,
.card-sm .card-footer {
    padding: var(--space-4);
}

.card-sm .card-header + .card-content,
.card-sm .card-content + .card-footer {
    padding-top: 0;
}

/* ─── Action row inside header (e.g. title + button) */
.card-header-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.card-header-row .card-title,
.card-header-row .card-description {
    flex: 1;
}