/* ############################################################################
   ## 
   ##  Content Collections - Extended - Postcards (extends Cards)
   ##
   ##  - Critical Rendering Path: Optional
   ##
   ######################################################################### */

.cards.postcards {
}

    .cards.postcards .item {
        min-height: 200px;
        background: var(--site-postcard-bg); /* Might be different to .thumbnail depending on the design and the kind of images used. */
        border-radius: var(--site-postcard-border-radius);
    }

        .cards.postcards .item::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 10px;
            background: var(--site-link-color);
        }

        .cards.postcards .item:hover::after {
            transition: 400ms ease-in-out all;
            bottom: 0;
        }

        .cards.postcards .item .thumbnail {
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--site-postcard-bg);
        }

            .cards.postcards .item .thumbnail img {
                opacity: var(--site-postcard-image-opacity);
                border-radius: 0; /* Don't inherit this setting. */
            }

        .cards.postcards .item:hover .thumbnail img {
            opacity: var(--site-postcard-hover-image-opacity);
            transition: var(--site-postcard-transition);
        }

        /*
        .cards.postcards .item .thumbnail::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,36,61,0.75);
        }
        */

        .cards.postcards .item .thumbnail img {
            position: absolute;
            top: -50%;
            right: -50%;
            left: -50%;
            bottom: -50%;
            min-width: 100%;
            min-height: 100%;
            max-width: none;
            max-height: none;
            width: auto;
            height: auto;
            margin: auto;
        }

        .cards.postcards .item .thumbnail a {
        }

            .cards.postcards .item .thumbnail a img {
            }
                
        .cards.postcards .item .text {
            position: absolute;
            bottom: 0;
            display: table-cell !important;
            float: none;
            /*height: 100% !important;*/
            padding: var(--site-padding-thin);
            vertical-align: middle !important;
            color: var(--site-postcard-text-color);
            background: none;
        }

            .cards.postcards .item .text .title {
                margin-bottom: 0;
                line-height: 100%;
                text-shadow: 1px 1px 1px rgba(0,0,0,0.75);
            }

                .cards.postcards .item .text .title a {
                    position: relative;
                    display: inline-block;
                    box-sizing: border-box;
                    width: 100%;
                    padding-right: 1em;
                }

                    .cards.postcards .item .text .title a:link {
                        color: var(--site-postcard-link-color);
                        text-decoration: none !important;
                    }

                    .cards.postcards .item .text .title a:visited {
                        color: var(--site-postcard-link-color);
                        text-decoration: none;
                    }

                    .cards.postcards .item .text .title a::before {
                        content: "\f054";
                        display: inline-block;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        left: auto;
                        vertical-align: middle;
                        margin-right: 0.25em;
                        color: var(--site-postcard-link-color);
                        font-family: var(--site-icon-font-family);
                        font-weight: var(--site-icon-font-weight);
                    }

                /* This doesn't work for now, we've got too much going on with the title and the link... */
                /*
                .cards.postcards .item .text .title a::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    z-index: 1
                }
                */

            .cards.postcards .item .text .publish-info,
            .cards.postcards .item .text .summary {
                display: none;
            }
                
    .cards.postcards .item:hover {
    }

        .cards.postcards .item:hover::after {
            transition: 400ms ease-in-out all;
            bottom: 0;
        }

        .cards.postcards .item:hover .thumbnail img {
            opacity: var(--site-postcard-hover-image-opacity);
            transition: var(--site-postcard-transition);
        }

        .cards.postcards .item:hover .text .title a:link,
        .cards.postcards .item .text .title a:hover,
        .cards.postcards .item .text .title a:focus {
            /*color: var(--site-postcard-hover-link-color) !important;
            background: var(--site-postcard-hover-link-bg) !important;*/
        }

    .cards.postcards.postcards-bright {
    }

        .cards.postcards.postcards-bright .item {
            border-width: var(--site-border-width);
            border-color: var(--site-color-ui-light);
            border-style: solid;
        }

            .cards.postcards.postcards-bright .item .text {
                background-color: var(--site-color-white);
            }

                .cards.postcards.postcards-bright .item .text .title {
                    font-size: var(--site-h3-font-size);
                    text-shadow: none;
                }

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

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

                    .cards.postcards.postcards-bright .item .text .title a:hover,
                    .cards.postcards.postcards-bright .item .text .title a:focus {
                        color: var(--site-card-link-color);
                    }

            .cards.postcards.postcards-bright .item .thumbnail {
                opacity: 1;
            }

                .cards.postcards.postcards-bright .item .thumbnail img {
                    opacity: 1;
                }

    .cards.postcards .item:hover::after {
        transition: 200ms ease-in-out all;
        bottom: -5px;
    }

        .cards.postcards.postcards-bright .item:hover .text .title a:link,
        .cards.postcards.postcards-bright .item .text .title a:hover {
            color: var(--site-card-link-color) !important;
            background: transparent !important;
            text-decoration: underline !important;
        }