/*
 * ===================================
 * UTKCard.uss
 * 카드 컴포넌트 스타일
 * ===================================
 */

/* ===================================
   Base Container
   =================================== */

.utk-card {
    flex-direction: column;
    border-radius: var(--radius-l);
    overflow: hidden;
}

/* ===================================
   Variants
   =================================== */

.utk-card--elevated {
    background-color: var(--color-bg-elevated);
}

.utk-card--outlined {
    background-color: var(--color-bg-panel);
    border-width: var(--border-width);
    border-color: var(--color-border);
}

.utk-card--filled {
    background-color: var(--color-btn-normal);
}

/* ===================================
   Clickable State
   =================================== */

.utk-card--clickable {
    cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
    transition-duration: var(--anim-fast);
    transition-property: background-color;
}

.utk-card--clickable:hover {
    background-color: var(--color-btn-hover);
}

.utk-card--clickable:active {
    background-color: var(--color-btn-pressed);
}

/* ===================================
   Image Container
   =================================== */

.utk-card__image {
    height: 160px;
    background-size: cover;
    background-position: center;
}

/* ===================================
   Header
   =================================== */

.utk-card__header {
    flex-direction: column;
    padding: var(--space-l);
    padding-bottom: 0;
}

/* ===================================
   Title
   =================================== */

.utk-card__title {
    font-size: var(--font-size-h3);
    color: var(--color-text-primary);
    -unity-font-style: bold;
    margin-bottom: var(--space-xs);
}

/* ===================================
   Subtitle
   =================================== */

.utk-card__subtitle {
    font-size: var(--font-size-body2);
    color: var(--color-text-secondary);
}

/* ===================================
   Content
   =================================== */

.utk-card__content {
    padding: var(--space-l);
}

/* ===================================
   Actions
   =================================== */

.utk-card__actions {
    flex-direction: row;
    justify-content: flex-end;
    padding: var(--space-m) var(--space-l);
    border-top-width: var(--border-width);
    border-top-color: var(--color-border);
}