/*------------------------------------*\
    CARD
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

$card-background--primary: settings.$ds_colour__background--primary !default;
$card-background--secondary: settings.$ds_colour__background--secondary !default;

$card-outline-width: 0.0625rem;

// Deprecated - use $card-background--secondary
$card-grey-background-color: settings.$ds_colour__background--secondary !default;

.ds_card {
    @include helpers.ds_small-size;
    background: $card-background--primary;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0; 
    position: relative;

    &::before {
        background-color: transparent;
        content: '';
        outline: $card-outline-width solid settings.$ds_colour__border;
        outline-offset: #{$card-outline-width * -1};   
        pointer-events: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1;
    }

    .ds_icon {
        color: settings.$ds_colour__brand;
    }

    &--navigation {
        @include helpers.ds_box-shadow;

        &::before {
            content: none;
        }

        .ds_icon {
            color: settings.$ds_colour__link;
            transition: color settings.$transition-out-time;

            @include helpers.ds_media-query-high-contrast {
                color: linktext !important;
            }
        }

        .ds_card__content-main,
        .ds_metadata--inline {
            transition: color settings.$transition-out-time;
        }

        &:hover {
            .ds_icon {
                color: settings.$ds_colour__link--hover;
            }

            .ds_card__content-main,
            .ds_metadata--inline {
                color: settings.$ds_colour__text;
            }
        }

    }

    &__media {
        img {
            display: block;
        }
    }

    &__content {
        @include helpers.ds_last-child-no-margin;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: 100%;
        padding: 1rem;

        &-header {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;

            .ds_icon {
                height: 2.5rem;
                max-width: 2.5rem;
                width: auto;

                @include helpers.ds_media-query(medium){
                    height: 3rem;
                    max-width: 3rem;
                    width: auto;
                }
            }

            .ds_tag {
                @include helpers.ds_small-size;
            }
        }

        &-main {
            @include helpers.ds_last-child-no-margin;
            color: settings.$ds_colour__text--secondary;

            &:not(:first-child) {
                padding-top: 0.5rem;
            }

            // Override components when placed inside a .ds_card
            .ds_button-group {
                margin-top: 1rem;
            }
        }

        &-footer {
            @include helpers.ds_last-child-no-margin;
            align-self: end;

            &:not(:first-child) {
                padding-top: 1rem;
            }
        }
    }

    &__title {
        @include helpers.ds_h3-size;
        width: 100%;

        // Override styling applied to heading margins
        &,
        &:not(:first-child) {
            margin: 0;
        }
    }

    &--background-secondary {
        background-color: $card-background--secondary;
    }


    &__link {
        display: inline-block;
    }

    &__link--cover:after {
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
    }


}

// Horizontal card layout (default is vertical)
@mixin ds_card--horizontal {
    flex-direction: row;

    .ds_card__media {
        flex: 1 0 auto;
        width: max(calc(100% / 3), 8rem);
        max-width: max(calc(100% / 3), 8rem);

        &--narrow {
            width: max(calc(100% / 3), 6rem);
            max-width: max(calc(100% / 3), 6rem);
        }

        &--wide {
            width: 50%;
            max-width: 50%;
        }

        // Increase size above small width
        // [1] 350px is largest width of a card in a 3 col grid
        @include helpers.ds_media-query(small) {
            width: min(50%, 21.875rem); //[1]
            max-width: min(50%, 21.875rem);

            &--narrow {
                width: min(calc(100% / 3), 21.875rem); //[1]
                max-width: min(calc(100% / 3), 21.875rem);
            }

            &--wide {
                width: calc(300% / 4);
                max-width: calc(300% / 4);
            }
        }

        // Cover variant overrides aspect box
        &--cover {
            .ds_aspect-box {
                height: 100%;
            }
        }
    }

    .ds_card__content {
        flex-grow: 1;
        height: auto;
    }
}

// Card is always horizontal
.ds_card--horizontal {
    @include ds_card--horizontal;
}

// Card is horizontal at viewport sizes up to small breakpoint 30rem(480px
// Use this when you want horizontal rather than stacked at mobile sizes
.ds_card--horizontal-small {
    @include helpers.ds_media-query(small-down) {
        @include ds_card--horizontal;
    }
}

// Card container for container queries
.ds_card-container {
    container-name: ds_card-container;
    container-type: inline-size;

    .ds_card {
        height: 100%;
    }
}

// When a card container is wider than small breakpoint 30rem(480px) with 2rem(32px) gutters
@container ds_card-container (min-width: 28rem) {
    .ds_card {
        @include ds_card--horizontal;
    }
}

// Card grid
.ds_card-grid {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    @include helpers.ds_responsive-spacing(4, "gap");

    // Default grid behaviour
    // 3 columns @ xlarge
    // 3 columns @ large
    // 3 columns @ medium
    // 1 column @ small
    // 1 column @ fluid
    @include helpers.ds_media-query(medium) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    // 2 columns @ medium
    &--medium-2 {
        @include helpers.ds_media-query(medium-to-large) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    // Narrow gap variant
    &--narrow {
        gap: settings.$grid-gap-x--narrow settings.$grid-gap-y--narrow;
    }

    // Set all cards to have a minimum height of 200px
    &--min-height {
        @include helpers.ds_media-query(medium) {
            .ds_card {
                min-height: 11rem;
            }
        }
    }
}

// Add block margins to grid
.ds_card-grid-container {
    @include helpers.ds_block-margins;
}

// DEPRECATED - use ds_card--background-secondary instead
.ds_card--grey {
    background-color: $card-background--secondary;
}

// this needs special treatment for its focus state because filter: drop-shadow interferes with
// the ::after pseudoelement we use to make the whole card clickable
.ds_card__link--cover:focus {
    filter: none;
    outline: none;
    box-shadow:
        0 0 0 round(settings.$ds_focus__outline-width, 1px) settings.$ds_colour__link--focus__outline,
        0 round(settings.$ds_focus__shadow-width, 1px) 0 round(settings.$ds_focus__outline-width, 1px) settings.$ds_colour__link--focus__shadow;
}