// ============================================================================
// Card Header, Footer, and Layout Components
// Bootstrap-compatible card extensions
// ============================================================================

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

// ============================================================================
// Mixins
// ============================================================================

// Card header (Bootstrap-compatible extension)
@mixin card_extended__header {
    padding: q(12) q(16);
    margin-bottom: 0;
    background-color: var(--color_fill_02);
    border-bottom: q(1) solid var(--color_border_01);

    &:first-child {
        border-radius: calc(var(--primitive-corner-radius-02) - q(1))
            calc(var(--primitive-corner-radius-02) - q(1)) 0 0;
    }
}

// Card footer (Bootstrap-compatible extension)
@mixin card_extended__footer {
    padding: q(12) q(16);
    background-color: var(--color_fill_02);
    border-top: q(1) solid var(--color_border_01);

    &:last-child {
        border-radius: 0 0 calc(var(--primitive-corner-radius-02) - q(1))
            calc(var(--primitive-corner-radius-02) - q(1));
    }
}

// Card image overlays
@mixin card__img_overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: q(16);
    border-radius: calc(var(--primitive-corner-radius-02) - q(1));
}

// Card image caps
@mixin card__img--top {
    border-top-left-radius: calc(var(--primitive-corner-radius-02) - q(1));
    border-top-right-radius: calc(var(--primitive-corner-radius-02) - q(1));
}

@mixin card__img--bottom {
    border-bottom-left-radius: calc(var(--primitive-corner-radius-02) - q(1));
    border-bottom-right-radius: calc(var(--primitive-corner-radius-02) - q(1));
}

// Horizontal card (Bootstrap-compatible extension)
@mixin card_extended--horizontal {
    flex-direction: row;

    > .card__img,
    > img {
        width: auto;
        max-width: 40%;
        object-fit: cover;
        border-radius: calc(var(--primitive-corner-radius-02) - q(1)) 0 0
            calc(var(--primitive-corner-radius-02) - q(1));
    }
}

// Card groups - cards in a row with equal width
@mixin card_group {
    display: flex;
    flex-flow: row wrap;

    > .card {
        flex: 1 0 0%;
        margin-bottom: 0;

        + .card {
            margin-left: 0;
            border-left: 0;
        }

        &:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;

            .card__img--top,
            .card__header {
                border-top-right-radius: 0;
            }

            .card__img--bottom,
            .card__footer {
                border-bottom-right-radius: 0;
            }
        }

        &:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;

            .card__img--top,
            .card__header {
                border-top-left-radius: 0;
            }

            .card__img--bottom,
            .card__footer {
                border-bottom-left-radius: 0;
            }
        }
    }
}

// Card deck - cards with gaps
@mixin card_deck {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(q(280), 1fr));
    gap: q(16);

    > .card {
        margin-bottom: 0;
    }
}

// Card columns - masonry-like layout
@mixin card_columns {
    column-count: 3;
    column-gap: q(16);
    orphans: 1;
    widows: 1;

    > .card {
        display: inline-block;
        width: 100%;
        margin-bottom: q(16);
    }

    @media (max-width: 768px) {
        column-count: 2;
    }

    @media (max-width: 480px) {
        column-count: 1;
    }
}

// Card color variants
@mixin card--primary {
    background-color: var(--color_accent_primary);
    border-color: var(--color_accent_primary);
    color: var(--color_text_on_accent);
}

@mixin card--success {
    background-color: color-mix(
        in srgb,
        var(--color_log_success) 15%,
        var(--color_fill_01)
    );
    border-color: var(--color_log_success);
}

@mixin card--warning {
    background-color: color-mix(
        in srgb,
        var(--color_log_warning) 15%,
        var(--color_fill_01)
    );
    border-color: var(--color_log_warning);
}

@mixin card--danger {
    background-color: color-mix(
        in srgb,
        var(--color_log_error) 15%,
        var(--color_fill_01)
    );
    border-color: var(--color_log_error);
}

@mixin card--info {
    background-color: color-mix(
        in srgb,
        var(--color_log_info) 15%,
        var(--color_fill_01)
    );
    border-color: var(--color_log_info);
}

// Card outline variants
@mixin card--outline-primary {
    background-color: transparent;
    border-color: var(--color_accent_primary);
}

@mixin card--outline-success {
    background-color: transparent;
    border-color: var(--color_log_success);
}

@mixin card--outline-warning {
    background-color: transparent;
    border-color: var(--color_log_warning);
}

@mixin card--outline-danger {
    background-color: transparent;
    border-color: var(--color_log_error);
}

@mixin card--outline-info {
    background-color: transparent;
    border-color: var(--color_log_info);
}