/* ############################################################################
   ## 
   ##  Content Collections - Extended - Cards
   ##
   ##  - Critical Rendering Path: Optional
   ##
   ######################################################################### */

/* 
    Cards (Base)
*/

.cards {
    display: inline-block;
    width: 100%; /* For IE11, which we still support. */
    --cards-gutters: var(--site-gutters);
}

    /*
        Calculate variables
    */

    .cards.gutters-none {
        --cards-gutters: 0;
    }

    .cards.gutters-thinnest {
        --cards-gutters: var(--site-gutters-thinnest);
    }

    .cards.gutters-thinner {
        --cards-gutters: var(--site-gutters-thinner);
    }

    .cards.gutters-thin {
        --cards-gutters: var(--site-gutters-thin);
    }

    .cards.gutters-thick {
        --cards-gutters: var(--site-gutters-thick);
    }

    .cards.gutters-thicker {
        --cards-gutters: var(--site-gutters-thicker);
    }

    .cards.gutters-thickest {
        --cards-gutters: var(--site-gutters-thickest);
    }

    /*
        Layout
    */

    .cards .paging {
    }

    .cards .content {
        display: flex;
        flex-wrap: wrap;
        gap: var(--cards-gutters);
        justify-content: flex-start;
        margin-bottom: var(--site-card-margin-bottom);
        width: 100%;
    }
    
        .cards.cards-start .content { justify-content: start; }
        .cards.cards-center .content { justify-content: center; }
        .cards.cards-end .content { justify-content: end; }
        .cards.cards-space-around .content { justify-content: space-around; }
        .cards.cards-space-between .content { justify-content: space-between; }
        .cards.cards-space-evenly .content { justify-content: space-evenly; }

        .cards .item {
            position: relative;
            box-sizing: border-box;
            width: calc(33.33% - calc(var(--cards-gutters) * 0.6666)); /* Up to 4 decimal spaces because a more accurate calculation is required at large sizes. */
            margin: 0;
            overflow: hidden;
            background: var(--site-card-bg);
            border: var(--site-card-border);
            border-radius: var(--site-card-border-radius);
            box-shadow: var(--site-card-shadow);
            transition: var(--site-card-transition);
        }

            .cards .item:hover,
            .cards .item:focus {
                /* color: var(--site-card-hover-text-color);
                background: var(--site-card-hover-bg);
                border: var(--site-card-hover-border);
                box-shadow: var(--site-card-hover-shadow); */
            }

            .cards .item > .thumbnail {
                position: relative;
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 !important;
                box-sizing: border-box;
                text-align: center;
                overflow: hidden;
                transition: var(--site-card-transition-image);
            }

                .cards .item > .thumbnail img {
                    display: block;
                    min-width: 100%;
                    min-height: 100%;
                    max-width: 100% !important;
                    transition: var(--site-card-transition-image);
                    border-radius: 0; /* Don't inherit this setting. */
                }

                .cards .item > .thumbnail a {
                }

                    .cards .item > .thumbnail a img {
                        /* When the "link thumbnails" option is enabled images are inside an anchor tag. */
                    }

            .cards .item > .text {
                display: flex;
                flex-flow: wrap;
                box-sizing: border-box;
                width: 100%;
                padding: var(--site-card-padding);
                color: var(--site-card-text-color);
            }

                .cards .item > .text > * {
                    width: 100%; /* Make flex items behave more like blocks. */
                }

                .cards .item > .text a {
                }

                    .cards .item > .text a:link {
                        color: var(--site-card-link-color);
                    }

                    .cards .item > .text a:hover,
                    .cards .item > .text a:focus {
                        color: var(--site-card-link-color-hover) !important;
                        /* background: var(--site-card-link-bg-hover) !important; */
                        text-decoration: underline !important;
                    }

                    .cards .item > .text a:visited {
                        color: var(--site-card-link-color);
                    }

                .cards .item > .text .title {
                    margin-top: 0;
                }

                    .cards .item > .text .title::after {
                        /* Attach the arrow/caret to the title rather than the link so we don't interfer with the link covering the content space. */
                        /*
                        content: "\f054";
                        display: inline;
                        vertical-align: middle;
                        font-family: var(--site-icon-font-family);
                        font-weight: var(--site-icon-font-weight);
                        color: var(--site-link-color);
                        */
                    }

                    .cards .item > .text .title a {
                        display: inline;
                        margin: 0;
                    }

                        .cards .item > .text .title a:hover {
                        }

                    .cards .item.title-before-thumbnail > .title {
                        margin: 0;
                        padding: var(--site-card-padding);
                    }

                .cards .item > .text .publish-info {
                    display: inline-block;
                    width: 100%; /* Otherwise it does odd things in .masonry views */
                    box-sizing: border-box;
                    /*order: -1;*/ /* Make sure it's first in the flex wrap .text box */
                }

                    .cards .item > .text .publish-info * {
                    }

                .cards .item > .text .date {
                }

                .cards .item > .text .summary {
                    height: 100%; /* Pushes it up under the heading in the flex layout, otherwise flex chooses some random height layouts in some conditions. */
                    line-height: var(--site-text-line-height); 
                }

                    .cards .item > .text .summary .span-read-more {
                        display: block;
                        margin-top: var(--site-margin-thin);
                    }
                                
                .cards .item > .text > :last-child {
                    margin-bottom: 0 !important;
                }

    .cards .content-none {
        margin: 0 0 var(--site-box-margin-bottom);
    }

    /* We need to override containers and articles with specified column 
    widths to use card gutters instead of site gutters */
    .containers[class*=cols-].cards .content,
    .articles[class*=cols-].cards .content {
        gap: var(--cards-gutters);
    }

        .containers.cols-4.cards .content .item,
        .articles.cols-4.cards .content .item {
            width: calc(25% - calc(var(--cards-gutters) * 0.75));
        }

        .containers.cols-5.cards .content .item,
        .articles.cols-5.cards .content .item {
            width: calc(20% - calc(var(--cards-gutters) * 0.8));
        }

        .containers.cols-6.cards .content .item,
        .articles.cols-6.cards .content .item {
            width: calc(16.667% - calc(var(--cards-gutters) * 0.833));
        }

    /*
        Simple Cards
    */

    .cards.cards-simple {
    }

        .cards.cards-simple .content {
        }

        .cards.cards-simple .item {
            background: var(--site-card-simple-bg);
            border: var(--site-card-simple-border);
            box-shadow: var(--site-card-simple-shadow);
        }

            .cards.cards-simple .item .text {
                padding: var(--site-card-padding);
            }

                .cards.cards-simple .item .text .title {
                }

                    .cards.cards-simple .item .text .title a {
                    }

                .cards.cards-simple .item .text .publish-info {
                }

                .cards.cards-simple .item .text .date {
                }

                .cards.cards-simple .item .text .summary {
                }

        .cards.cards-simple .item:hover {
            background: var(--site-card-simple-hover-bg);
            border: var(--site-card-simple-hover-border);
            box-shadow: var(--site-card-simple-hover-shadow);
        }

            .cards.cards-simple .item:hover > .text {
                color: var(--site-card-simple-hover-text-color);
            }

            .cards.cards-simple .item:hover a:link {
                color: var(--site-card-simple-hover-link-color);
                background: var(--site-card-simple-hover-link-bg);
                text-decoration: underline;
            }

    /*
        Plain Cards
    */

    .cards.cards-plain {
    }

        .cards.cards-plain .content {
        }

            .cards.cards-plain .item {
                background-color: transparent;
                border: 0;
                box-shadow: none;
            }

                .cards.cards-plain .item:hover {
                    background-color: transparent;
                    border: 0;
                    box-shadow: none;
                }

                .cards.cards-plain .item .text {
                    padding: var(--site-padding-thin);
                    color: var(--site-card-plain-text-color);
                }

                .cards.cards-plain .item > .text a {
                }

                    .cards.cards-plain .item > .text a:link {
                        color: var(--site-card-plain-link-color);
                    }

                    .cards.cards-plain .item > .text a:hover,
                    .cards.cards-plain .item > .text a:focus {
                        color: var(--site-card-plain-link-color-hover) !important;
                        background: var(--site-card-plain-link-bg-hover) !important;
                    }

                    .cards.cards-plain .item > .text a:visited {
                        color: var(--site-card-plain-link-color);
                    }

    /*
        Dark Cards
    */

    .cards.cards-dark {
    }

        .cards.cards-dark .item {
            background-color: var(--site-color-ui-mid-dark);
        }

            .cards.cards-dark .item:hover,
            .cards.cards-dark .item:focus {
                background-color: var(--site-color-ui-mid);
            }

            .cards.cards-dark .item > .text {
                color: var(--site-color-white);
            }

                .cards.cards-dark .item > .text a {
                }

                    .cards.cards-dark .item > .text a:link {
                        color: var(--site-color-white);
                        text-decoration: none;
                    }

                    .cards.cards-dark .item > .text a:hover {
                        color: var(--site-color-white) !important;
                    }

                    .cards.cards-dark .item > .text a:visited {
                        color: var(--site-color-white);
                    }

            .cards.cards-dark .item > .thumbnail {
            }

                .cards.cards-dark .item > .thumbnail img {
                }

                .cards.cards-dark .item > .thumbnail img[src*=".svg"] {
                    filter: invert(98%) sepia(5%) saturate(2909%) hue-rotate(206deg) brightness(117%) contrast(100%); /* White */
                }
                
    /*
        Smaller Cards
    */

    .cards.cards-smaller,
    body.Template_onecol1 .cards,
    body.Theme_FullWidth .cards {
    }

        .cards.cards-smaller .item,
        body.Template_onecol1 .cards .item,
        body.Theme_FullWidth .cards .item {
            width: calc(25% - calc(var(--cards-gutters) * 0.75));
            font-size: var(--site-font-size-small);
        }

    /*
        Cards in Columns Blocks
    */

    div.cols-2 .cards .item {
        width: calc(50% - calc(var(--cards-gutters) * 0.5));
    }

    div.cols-3 .cards .item,
    div.cols-4 .cards .item,
    div.cols-5 .cards .item,
    div.cols-6 .cards .item {
        width: 100%;
    }

    /*
        Fixed Width Cards
    */

    .cards.cards-120 .item { width: 120px !important; }
    .cards.cards-120 .item .text { padding: var(--site-padding-thinner); }
    .cards.cards-150 .item { width: 150px !important; }
    .cards.cards-150 .item .text { padding: var(--site-padding-thinner); }
    .cards.cards-180 .item { width: 180px !important; }
    .cards.cards-180 .item .text { padding: var(--site-padding-thin); }
    .cards.cards-210 .item { width: 210px !important; }
    .cards.cards-210 .item .text { padding: var(--site-padding-thin); }
    .cards.cards-240 .item { width: 240px !important; }
    .cards.cards-280 .item { width: 280px !important; }
    .cards.cards-320 .item { width: 320px !important; }
    .cards.cards-360 .item { width: 360px !important; }
    .cards.cards-400 .item { width: 400px !important; }
    .cards.cards-480 .item { width: 480px !important; }
    .cards.cards-560 .item { width: 560px !important; }
    .cards.cards-640 .item { width: 640px !important; }
    .cards.cards-720 .item { width: 720px !important; }
    .cards.cards-800 .item { width: 800px !important; }

    /*
        Padded Cards
    */

    .cards[class*=cards-padded] {
        --cards-image-padding: var(--site-padding);
        --cards-text-padding: var(--site-padding);
    }

        .cards.cards-padded-thinnest {
            --cards-image-padding: var(--site-padding-thinnest);
            --cards-text-padding: var(--site-padding-thinnest);
        }

        .cards.cards-padded-thinner {
            --cards-image-padding: var(--site-padding-thinner);
            --cards-text-padding: var(--site-padding-thinner);
        }

        .cards.cards-padded-thin {
            --cards-image-padding: var(--site-padding-thin);
            --cards-text-padding: var(--site-padding-thin);
        }

        .cards.cards-padded-thick {
            --cards-image-padding: var(--site-padding-thick);
            --cards-text-padding: var(--site-padding-thick);
        }

        .cards.cards-padded-thicker {
            --cards-image-padding: var(--site-padding-thicker);
            --cards-text-padding: var(--site-padding-thicker);
        }

        .cards.cards-padded-thickest {
            --cards-image-padding: var(--site-padding-thickest);
            --cards-text-padding: calc(var(--site-padding-thickest) / 2) var(--site-padding-thickest) var(--site-padding-thickest);
        }

        .cards[class*=cards-padded] .item {
        }

            .cards[class*=cards-padded] .item .thumbnail {
                border-radius: var(--site-card-padded-thumbnail-border-radius);
            }

                .cards[class*=cards-padded] .item .thumbnail img {
                }

            .cards[class*=cards-padded] .item .thumbnail {
                /* Why margin and not padding? Because otherwise many of the advanced image handling rules will move the image outside the box. */
                width: calc(100% - calc(var(--cards-image-padding) * 2)) !important;
                max-width: calc(100% - calc(var(--cards-image-padding) * 2)) !important;
                margin: var(--cards-image-padding) var(--cards-image-padding) 0 !important;
                border-radius: var(--site-border-radius-medium);
            }

            .cards[class*=cards-padded] .item .text {
                padding: var(--cards-text-padding);
            }

    /*
        Overlay the date on the image
    */

    .cards.date-overlay {
    }

        .cards.date-overlay .item .text {
            position: relative;
        }

            .cards.date-overlay .item .text .publish-info {
                /* Note: Won't work well when there's no thumbnail, it'll disappear outside the .card box boundary */
                /*position: absolute;
                left: 0;
                top: -48px;
                background-color: rgba(255,255,255,0.75);*/
                font-size: var(--site-font-size-small);
                font-weight: bold;
                line-height: var(--site-text-line-height);
                padding: 0;
                margin-bottom: var(--site-margin-thin);
                order: -1;
            }

                .cards.date-overlay .item .text .publish-info .date::before {
                    display: none;
                }

            .cards[class*=cards-padded].date-overlay .item .text .publish-info {
                padding-left: calc(var(--cards-padding) + 15px);
            }

                .cards.date-overlay .item .text .publish-info * {
                    color: var(--site-spot-colot-14);
                }

/*
    Responsive Cards
*/

@media screen and (max-width: 1200px) {

    .cards.stack-medium .content {
    }

        .cards.stack-medium .item {
            width: 100%;
        }

}

@media screen and (min-width: 901px) {

    div.cols-3 .cards .item,
    div.cols-4 .cards .item,
    div.cols-5 .cards .item,
    div.cols-6 .cards .item {
        box-sizing: border-box;
        width: 100%;
    }

}

@media screen and (max-width: 900px) {

    .cards .item,
    .cards.cards-smaller .item {
        width: calc(50% - calc(var(--cards-gutters) * 0.5));
    }

    .cards.gutters-none .item,
    .cards.cards-smaller.gutters-none .item {
        width: 50%;
    }

    .cards.stack-small .content {
    }

        .cards.stack-small .item {
            width: 100%;
        }

    .containers.cols-4.cards .content .item,
    .articles.cols-4.cards .content .item {
        width: calc(33% - calc(var(--cards-gutters) * 0.75));
    }

}

@media screen and (max-width: 600px) {

    .cards .content {
    }

        .cards .item {
            width: 100%;
        }


    .containers[class*=cols-].cards .content .item,
    .articles[class*=cols-].cards .content .item {
        width: calc(50% - calc(var(--cards-gutters) * 0.5));
    }
}

@media screen and (max-width: 375px) {

    .containers[class*=cols-].cards .content .item,
    .articles[class*=cols-].cards .content .item  {
        width: 100%;
    }
}

/*
    Legacy IE support because it can't handle complex variables
    - Advanced layout helpers not available
    - Multiple gutter widths not available
*/

@media all and (-ms-high-contrast:none) {

    /* IE10 & 11 */

    .cards .content { }
    .cards .content .item { width: calc(33.33% - 10px); margin-right: 15px; margin-bottom: 15px; }
    .cards .content .item:nth-child(3n-0) { margin-right: 0; }
    .cards.smaller .content .item { width: calc(25% - 15px); margin-right: 15px; }
    .cards.smaller .content .item:nth-child(4n-0) { margin-right: 0; }
    div.cols-2 .cards .item { width: calc(50% - 7.5px); margin-right: 15px !important;}
    div.cols-2 .cards .item:nth-child(2n-0)  { margin-right: 0 !important; }
    /* To do: Padded cards, date overlay */
    
    /* IE11 Only */

    *::-ms-backdrop, .foo {}
}

@media all and (-ms-high-contrast:none) and (max-width: 900px) {

    .cards .item,
    .cards.cards-smaller .item {
        width: calc(50% - 15px);
    }

}