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

/*
    Tiles
    - To do: Code layout below needs work
*/

.tiles {
    position: relative;
    width: 100%;
    margin-bottom: var(--site-box-margin-bottom);
}

    .tiles:last-child {
        margin-bottom: 0;
    }

    .tiles .paging {
    }

    .tiles .content {
    }

    .tiles .item {
        position: relative;
        overflow: hidden;
        margin-bottom: var(--site-box-margin-bottom);
        color: var(--site-tile-text-color);
        background: var(--site-tile-bg);
        border-radius: var(--site-tile-border-radius);
    }

        .tiles .item:hover {
            background: var(--site-tile-hover-bg);
        }

.tiles .item:last-child {
    margin-bottom: 0 !important;
}

.tiles .item .thumbnail:not(.original) {
    position: absolute;
    display: inline-block !important;
    padding: 0 !important;
    width: var(--site-thumbnail-small-width);
    height: 100%;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
}

.tiles .item .thumbnail.default {
}

.tiles .item .thumbnail.original {
    width: auto;
    padding: 0 !important;
}

    .tiles .item .thumbnail.original img {
        max-width: none !important;
        max-height: none !important;
    }
        
.tiles .item .thumbnail.micro {
    margin: var(--site-padding-thin);
    width: var(--site-thumbnail-micro-width);
    height: var(--site-thumbnail-micro-width);
    border-radius: var(--site-card-padded-thumbnail-border-radius);
}

.tiles .item .thumbnail.tiny {
    margin: var(--site-padding-thin);
    width: var(--site-thumbnail-tiny-width);
    height: var(--site-thumbnail-tiny-width);
    border-radius: var(--site-card-padded-thumbnail-border-radius);
}

.tiles .item .thumbnail.small {
    width: var(--site-thumbnail-small-width);
    height: 100%;
}

.tiles .item .thumbnail.medium {
    width: var(--site-thumbnail-medium-width);
    height: 100%;
}

.tiles .item .thumbnail.large {
    width: var(--site-thumbnail-large-width);
    height: 100%;
}

.tiles .item .thumbnail.huge {
    width: var(--site-thumbnail-huge-width);
    height: 100%;
}

.tiles .item .thumbnail.mega {
    width: var(--site-thumbnail-mega-width);
    height: 100%;
}

.tiles .item .thumbnail a {
}

.tiles .item .thumbnail:not(.original) img,
.tiles .item .thumbnail:not(.original) a img {
    position: absolute;
    top: -10000em;
    right: -10000em;
    left: -10000em;
    bottom: -10000em;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100%;
    min-height: 100%;
    margin: auto;
    zoom: 0.5;
}

@media all and (-ms-high-contrast:none) {
    /* IE only */

    .tiles .item .thumbnail img,
    .tiles .item .thumbnail a img {
        position: static;
    }
}

.tiles .item .text {
    /* All text blocks in .tiles */
}

    /*
        Text and thumbnail relationships
    */

    .tiles .item.thumbs-original .text {
        /* Only when thumbnails are the original size. */
        padding: var(--site-padding-thin);
    }

    .tiles .item:not(.thumbs-original) .text {
        /* All preset thumbnail sizes. */
        box-sizing: border-box;
        display: inline-block;
        width: 100%;
        padding: var(--site-padding-thin) !important;
        padding-left: calc(var(--site-thumbnail-small-width) + var(--site-padding-thin)) !important;
    }

    .tiles .item.thumbs-default .text {
        color: var(--site-tile-text-color);
    }

    .tiles .item.thumbs-micro .text {
        min-height: var(--site-thumbnail-micro-width) ;
        padding-left: calc(var(--site-thumbnail-micro-width) + calc(var(--site-padding-thin) * 2)) !important;
    }

    .tiles .item.thumbs-tiny .text {
        min-height: var(--site-thumbnail-tiny-width) ;
        padding-left: calc(var(--site-thumbnail-tiny-width) + calc(var(--site-padding-thin) * 2)) !important;
    }

    .tiles .item.thumbs-small .text {
        min-height: var(--site-thumbnail-small-width) ;
        padding-left: calc(var(--site-thumbnail-small-width) + var(--site-padding-thin)) !important;
    }

    .tiles .item.thumbs-medium .text {
        min-height: var(--site-thumbnail-medium-width) ;
        padding-left: calc(var(--site-thumbnail-medium-width) + var(--site-padding-thin)) !important;
    }

    .tiles .item.thumbs-large .text {
        min-height: var(--site-thumbnail-large-width) ;
        padding-left: calc(var(--site-thumbnail-large-width) + var(--site-padding-thin)) !important;
    }

    .tiles .item.thumbs-huge .text {
        min-height: var(--site-thumbnail-huge-width) ;
        padding-left: calc(var(--site-thumbnail-huge-width) + var(--site-padding-thin)) !important;
    }

    .tiles .item.thumbs-mega .text {
        min-height: var(--site-thumbnail-mega-width);
        padding-left: calc(var(--site-thumbnail-mega-width) + var(--site-padding-thin)) !important;
    }

    .tiles .item.thumbs-tiny .text .title {
        /* Tiny thumbs are padded, nudge the title to behave more like it does with larger images in relation to the image. */
        margin-top: 10px;
    }

    .tiles .item.thumbs-small .text .title {
        /* Small thumbs are padded, nudge the title to behave more like it does with larger images in relation to the image. */
        margin-top: 10px;
    }

    .tiles .item.thumbs-micro .text .title {
        /* Micro thumbs are padded, nudge the title to behave more like it does with larger images in relation to the image. */
        margin-top: 10px;
    }

    /*
        Text block elements
    */

    .tiles .item .text a {
    }

        .tiles .item .text a:link {
            color: var(--site-tile-link-color);
        }

        .tiles .item .text a:hover,
        .tiles .item .text a:focus {
            color: var(--site-tile-link-color-hover) !important;
            background: var(--site-tile-link-bg-hover) !important;
        }

        .tiles .item .text a:visited {
            color: var(--site-tile-link-color);
        }

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

    .tiles .item .text .publish-info {
    }

        .tiles .item .text .publish-info .date {
        }

        .tiles .item .text .publish-info .author {
        }

    .tiles .item .text .summary {
        line-height: var(--site-text-line-height);
    }

        .tiles .item .text .summary .span-read-more {
            display: block;
            margin-top: 15px;
        }

        .tiles .item .text .summary :first-child {
            margin-top: 0;
        }

        .tiles .item .text .summary :last-child {
            margin-bottom: 0;
        }

.tiles.portrait {
}

    .tiles.portrait .item {
        min-height: 220px;
    }

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

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

    .tiles.cols-2 .item {
        box-sizing: border-box;
        margin-bottom: 0;
    }

}

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

/* 
    Make tiles behave like wide aspect cards when inside columns on medium screens (when columns aren't stacked).
    Tiles are wide and cards are tall, so use a shorter image layout to minimise layout weirdness with other content around the same spot.
*/

    .col .tiles .item .thumbnail:not(.original) {
        position: relative;
        width: 100% !important;
        height: auto;
    }

        .col .tiles .item .thumbnail:not(.original)::after {
            content: "";
            display: block;
            padding-top: calc(9 / 16 * 100%);
        }

    .col .tiles .item:not(.thumbs-original) .text {
        padding: var(--site-padding) !important;
    }
}

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

    /* Move to landscape size for tiles images so we can see more of the image as the card width gets thinner. To do: Could consider square or original height? */

    .col .tiles .item .thumbnail:not(.original)::after {
        padding-top: calc(3 / 4 * 100%);
    }

    .tiles .item:not(.thumbs-original) .text {
        padding: var(--site-padding) !important;
    }
}