@use '../utilities/main_utilities' as *;

/* Cards is a row */
/* Best to do this with grid, but there's less browser support... */
.card{
    /* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
    border: rems(1px) solid $color-tertiary;
    border-radius: $border-radius;
    // box-shadow: $box-shadow $color-tertiary;
    // padding: rems(24px);
    background: $color-background;
    
    // display: block !important; /* Unset row/col default */
    display: flex !important;
    flex-direction: column;

    @include color-scheme(dark) {
        border-color: $color-tertiary--dark;
        // box-shadow: $box-shadow $color-tertiary--dark;
        background: $color-background--dark;
    }
}
.card:hover {
    box-shadow: $box-shadow $color-primary;
    border-color: $color-primary;

    @include color-scheme(dark) {
        border-color: $color-primary--dark;
        box-shadow: $box-shadow $color-primary--dark;
    }
}

.row--cards{
    align-items: stretch; /* For cards to be "same height", requires the height 100% on card */
}
.row--cards .card{
    height: 100%; /* To make multiple cards next to each other 'same' height */
}

.card__header, .card__body, .card__footer{
    padding: rems(24px);
}
.card__header{
    background-color: $color-secondary;
}
.card__image{}
.card__image--top{}
.card__title{
    font-size: rems(26px);
}
.card__body{
    height: 100%; // Fill up the space of a card that's stretched
}
.card__text{}
* + .card__text{
    margin-top: rems(10px);
}
.card__footer{
    margin-top: auto; // Be at bottom of flexed card
    background-color: $color-primary;
}