/* <Card /> — lm-card-* convention. Consumes the global token spine, but every
   reference carries its ORIGINAL value as the fallback, so the card renders
   identically with NO global stylesheet loaded (the catalog's hard rule).
   '' = elevated; outlined = 1px border, no shadow. */

.lm-card {
    display: flex;
    flex-direction: column;
    background: var(--lm-background-color, #fff);
    border-radius: var(--lm-radius-lg, 10px);
    overflow: hidden;
    font: 14px/1.45 system-ui, sans-serif;
    color: var(--lm-font-color, #1f2937);
    box-sizing: border-box;
    box-shadow: var(--lm-shadow, 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08));
    transition:
        box-shadow var(--lm-duration, 0.15s) var(--lm-ease, ease),
        transform var(--lm-duration, 0.15s) var(--lm-ease, ease);
}

.lm-card[data-variant='outlined'] {
    box-shadow: none;
    border: 1px solid var(--lm-border-color, #e4e4e7);
}

/* Clickable surface: hover lift + pointer (focus ring is the central one) */
.lm-card.lm-card-clickable {
    cursor: pointer;
}

.lm-card.lm-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--lm-shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.14), 0 2px 12px rgba(0, 0, 0, 0.1));
}

.lm-card.lm-card-clickable[data-variant='outlined']:hover {
    box-shadow: var(--lm-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
}

/* Media: top image, full width, cover (height comes from imageheight) */
.lm-card .lm-card-media {
    display: block;
    width: 100%;
    object-fit: cover;
}

/* Header: optional avatar beside the title/subtitle column */
.lm-card .lm-card-header {
    display: flex;
    align-items: center;
    gap: var(--lm-space-3, 12px);
    padding: var(--lm-space-4, 16px) var(--lm-space-4, 16px) 0;
}

.lm-card .lm-card-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.lm-card .lm-card-headings {
    flex: 1 1 auto;
    min-width: 0;
}

.lm-card .lm-card-title {
    font-size: 15px;
    font-weight: 600;
}

.lm-card .lm-card-subtitle {
    font-size: 13px;
    color: var(--lm-font-grayout, #6b7280);
}

/* Content: body text, then children */
.lm-card .lm-card-content {
    padding: var(--lm-space-4, 16px);
    color: var(--lm-font-color, #374151);
}

.lm-card .lm-card-text {
    margin: 0;
}

.lm-card .lm-card-text + * {
    margin-top: var(--lm-space-2, 8px);
}

/* Actions: footer row, right-aligned text buttons */
.lm-card .lm-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--lm-space-1, 4px);
    padding: var(--lm-space-2, 8px);
    margin-top: auto;
}

.lm-card .lm-card-action {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--lm-radius, 6px);
    padding: var(--lm-space-1, 4px) 10px;
    font: 600 13px/1 system-ui, sans-serif;
    letter-spacing: 0.02em;
    color: var(--lm-main-color, #2563eb); /* primary — the default */
    cursor: pointer;
    transition: background var(--lm-duration, 0.15s) var(--lm-ease, ease);
}

/* One hover rule for every color: tint derives from the action's own color */
.lm-card .lm-card-action:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.lm-card .lm-card-action[data-color='secondary'] {
    color: var(--lm-font-grayout, #6b7280);
}

.lm-card .lm-card-action[data-color='success'] {
    color: var(--lm-color-success, #16a34a);
}

.lm-card .lm-card-action[data-color='error'] {
    color: var(--lm-color-danger, #dc2626);
}

.lm-card .lm-card-action[data-color='warning'] {
    color: var(--lm-color-warning, #d97706);
}