/*
|--------------------------------------------------------------------------
| Matec Component: Card
|--------------------------------------------------------------------------
| Contenedor visual reutilizable para widgets, listados y paneles.
|--------------------------------------------------------------------------
*/

.mtc-card {
    position: relative;

    display: grid;
    gap: var(--mtc-space-md);

    padding: var(--mtc-space-lg);

    border: 1px solid var(--mtc-color-border-subtle);
    border-radius: var(--mtc-radius-lg);

    background: var(--mtc-color-card-bg);
    color: var(--mtc-color-text);

    box-shadow: var(--mtc-shadow-xs);

    transition:
        background-color var(--mtc-transition-fast),
        border-color var(--mtc-transition-fast),
        box-shadow var(--mtc-transition-fast),
        transform var(--mtc-transition-fast);
}

.mtc-card:hover {
    background: var(--mtc-color-card-hover-bg);
    border-color: var(--mtc-color-border-strong);
    box-shadow: var(--mtc-shadow-md);
}

.mtc-card--interactive {
    cursor: pointer;
}

.mtc-card--interactive:hover {
    transform: translateY(-2px);
}

.mtc-card--flat {
    box-shadow: none;
}

.mtc-card--compact {
    padding: var(--mtc-space-md);
    border-radius: var(--mtc-radius-md);
}

.mtc-card--strong {
    background: var(--mtc-color-surface-strong);
}

.mtc-card--brand {
    background: var(--mtc-color-primary);
    color: var(--mtc-color-text-inverse);
    border-color: transparent;
}

.mtc-card--accent {
    background: var(--mtc-color-accent);
    color: var(--mtc-color-cta-contrast);
    border-color: transparent;
}

/*
|--------------------------------------------------------------------------
| Card parts
|--------------------------------------------------------------------------
*/

.mtc-card__media {
    position: relative;

    overflow: hidden;

    margin: calc(var(--mtc-space-lg) * -1) calc(var(--mtc-space-lg) * -1) 0;

    border-radius: var(--mtc-radius-lg) var(--mtc-radius-lg) 0 0;
    background: var(--mtc-color-skeleton);
}

.mtc-card--compact .mtc-card__media {
    margin: calc(var(--mtc-space-md) * -1) calc(var(--mtc-space-md) * -1) 0;
    border-radius: var(--mtc-radius-md) var(--mtc-radius-md) 0 0;
}

.mtc-card__media img,
.mtc-card__image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}

.mtc-card__header,
.mtc-card__body,
.mtc-card__footer {
    display: grid;
    gap: var(--mtc-space-sm);
}

.mtc-card__title {
    margin: 0;

    color: var(--mtc-color-heading);

    font-family: var(--mtc-font-family-heading);
    font-size: var(--mtc-font-size-xl);
    font-weight: var(--mtc-font-weight-bold);
    line-height: var(--mtc-line-height-tight);
}

.mtc-card__subtitle {
    margin: 0;

    color: var(--mtc-color-text-soft);

    font-size: var(--mtc-font-size-sm);
    line-height: var(--mtc-line-height-snug);
}

.mtc-card__text {
    margin: 0;

    color: var(--mtc-color-text-soft);

    font-size: var(--mtc-font-size-sm);
    line-height: var(--mtc-line-height-base);
}

.mtc-card__footer {
    padding-top: var(--mtc-space-sm);
    border-top: 1px solid var(--mtc-color-divider);
}

/*
|--------------------------------------------------------------------------
| Card links
|--------------------------------------------------------------------------
*/

.mtc-card a:not(.mtc-button):not(.mtc-btn) {
    color: var(--mtc-color-link);
    text-decoration: none;
}

.mtc-card a:not(.mtc-button):not(.mtc-btn):hover {
    color: var(--mtc-color-link-hover);
    text-decoration: underline;
}