/* src/components/basic/XWUICard/XWUICard.css */
/**
 * XWUICard Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/container/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-card {
    display: flex;
    flex-direction: column;
    /* Card surface - themed via --bg-card (defined per theme in styles/theme/colors/*.css).
       Falls back to --bg-primary then white for robustness. */
    background: var(--bg-card, var(--bg-primary, #ffffff));
    color: var(--text-primary, #212529);
    border-radius: var(--radius-container, var(--radius-lg, 12px));
    overflow: hidden;
    transition: transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
        box-shadow var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
        background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
}

/* Variants */
.xwui-card-default {
    border: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color, #dee2e6));
}

.xwui-card-outlined {
    border: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color, #dee2e6));
    /* Outlined still has the themed card surface (not transparent), so content stays readable
       regardless of the page background. */
    background: var(--bg-card, var(--bg-primary, #ffffff));
}

.xwui-card-elevated {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.xwui-card-filled {
    background: var(--bg-secondary, #f8f9fa);
    border: none;
}

/* Hover and clickable states */
.xwui-card-hoverable:hover {
    background: var(--bg-card-hover, var(--bg-card, var(--bg-primary, #ffffff)));
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

/* Tactile feedback - drop the lift and ease the shadow back down while the
   card is actually being pressed, so clicking reads as pressing something
   rather than just releasing the hover. */
.xwui-card-clickable.xwui-card-hoverable:active {
    transform: translateY(0);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.xwui-card-clickable {
    cursor: pointer;
    /* Containing block for the hit area below. */
    position: relative;
}

.xwui-card-clickable:focus {
    outline: none;
    box-shadow: var(--shadow-xs);
}

/*
 * Whole-card hit area (clickable / href). A SIBLING of the card's content
 * that covers it, never a wrapper: a role=button root named itself from every
 * descendant string, flattened the title heading, and nested any control
 * placed in the card. Same pattern as XWUICardX's .xwui-card-x-hit. `inset`
 * is direction-neutral, so RTL needs nothing extra.
 */
.xwui-card-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.xwui-card-hit:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent-primary));
    outline-offset: calc(var(--focus-ring-width, 2px) * -2);
}

/*
 * Controls inside a clickable card sit above the hit area so they stay their
 * own targets. Zero specificity (every part inside :where) so a caller's own
 * positioning of those controls always wins over this. A nested card's hit
 * area is excluded: it keeps its own layer inside its own card.
 */
:where(.xwui-card-clickable) :where(
    a[href], button, input, select, textarea, summary, label,
    [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"],
    [role="checkbox"], [role="switch"], [contenteditable="true"]
):where(:not(.xwui-card-hit)) {
    position: relative;
    z-index: 2;
}

/* Cover */
.xwui-card-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.xwui-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Header */
.xwui-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

/* Header layout when tags are inline (tagsPosition: 'header') - titled content at the inline start, tags pushed to the inline end (flow-relative, so it mirrors in RTL). */
.xwui-card-header.xwui-card-header-with-tags {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm, 0.75rem);
    flex-wrap: wrap;
}
.xwui-card-header.xwui-card-header-with-tags .xwui-card-titled {
    flex: 1 1 auto;
    min-width: 0;
}
.xwui-card-tags-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 0.25rem);
    align-items: center;
    flex: 0 0 auto;
}

/* When the title is rendered via XWUIItem (title is an ItemConfig),
   drop any default margins and let the item's own sizing control the height. */
.xwui-card-title-item {
    min-width: 0;
}
.xwui-card-title-item .xwui-item {
    margin: 0;
}

.xwui-card-title-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    flex-wrap: wrap;
}

.xwui-card-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
}

.xwui-card-badge {
    display: inline-flex;
    align-items: center;
}

.xwui-card-subtitle {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
}

/* Body */
.xwui-card-body {
    flex: 1;
    color: var(--text-primary, #212529);
    line-height: 1.5;
}

/* Footer */
.xwui-card-footer {
    border-block-start: var(--border-card-width, var(--border-width-regular, 1.5px)) var(--border-card-style, solid) var(--border-card-color, var(--border-color, #dee2e6));
    margin-block-start: auto;
}

.xwui-card-footer.xwui-card-footer-borderless {
    border-block-start: none;
}

.xwui-card-footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 0.25rem);
    align-items: center;
}

/* Padding variants */
.xwui-card-padding-none .xwui-card-header,
.xwui-card-padding-none .xwui-card-body,
.xwui-card-padding-none .xwui-card-footer {
    padding: 0;
}

.xwui-card-padding-small .xwui-card-header,
.xwui-card-padding-small .xwui-card-body,
.xwui-card-padding-small .xwui-card-footer {
    padding: var(--spacing-sm, 0.75rem);
}

.xwui-card-padding-medium .xwui-card-header,
.xwui-card-padding-medium .xwui-card-body,
.xwui-card-padding-medium .xwui-card-footer {
    padding: var(--spacing-md, 1rem);
}

.xwui-card-padding-large .xwui-card-header,
.xwui-card-padding-large .xwui-card-body,
.xwui-card-padding-large .xwui-card-footer {
    padding: var(--spacing-lg, 1.5rem);
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */