////
///
/// Card Component Classes
/// ===========================================================================
///
/// CSS classes for card-based UI components.
/// All functionality is defined in mixins - classes only include them.
///
/// @group Classes.BodyMolecules
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Use
// ============================================================================

@use "../../../dev" as *;
@use "../../../mixins" as *;

// ============================================================================
// Base Card Classes
// ============================================================================

/// Base card styles
.card {
    @include card--base;
    border-radius: var(--corner_radius_03);
}

/// Card with shadow
.card--elevated {
    @include card--elevated;
}

/// Card with hover effect
.card--interactive {
    @include card--interactive;
}

/// Flat card (no border)
.card--flat {
    @include card--flat;
}

/// Outlined card
.card--outlined {
    @include card--outlined;
}

// ============================================================================
// Card Parts
// ============================================================================

/// Card header
.card__header {
    @include card--header;
}

/// Card body
.card__body {
    @include card--body;
}

/// Card footer
.card__footer {
    @include card--footer;
}

/// Card image
.card__image {
    @include card__image;
}

/// Card image at top
.card__image--top {
    @include card__image--top;
}

/// Card title
.card__title {
    @include card__title;
}

/// Card subtitle
.card__subtitle {
    @include card__subtitle;
}

/// Card text
.card__text {
    @include card__text;
}

/// Card actions (button container)
.card__actions {
    @include card__actions;
}

// ============================================================================
// Card Sizes
// ============================================================================

/// Small card padding
.card--size-sm {
    .card__header,
    .card__body,
    .card__footer,
    .card__actions {
        @include card--size-sm;
    }
}

/// Medium card padding
.card--size-md {
    .card__header,
    .card__body,
    .card__footer,
    .card__actions {
        @include card--size-md;
    }
}

/// Large card padding
.card--size-lg {
    .card__header,
    .card__body,
    .card__footer,
    .card__actions {
        @include card--size-lg;
    }
}

// ============================================================================
// Card Layouts
// ============================================================================

/// Horizontal card
.card--horizontal {
    @include card--horizontal;

    .card__image {
        width: q(200);
        height: auto;
        aspect-ratio: auto;
        flex-shrink: 0;
    }

    .card__content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }
}

// ============================================================================
// Card Grid
// ============================================================================

/// Card grid container
.card-grid {
    @include card-grid;
}

/// Card grid with 2 columns
.card-grid--2 {
    @include card-grid-columns(2);
}

/// Card grid with 3 columns
.card-grid--3 {
    @include card-grid-columns(3);
}

/// Card grid with 4 columns
.card-grid--4 {
    @include card-grid-columns(4);
}