$palette-color1: #222;
$palette-color2: #333;
$palette-color3: #0073aa;
$palette-color4: #00a0d2;

.nooz-pagination {
    color: #777;
    display: flex;
    justify-content: center;
    margin-top: calc(1rem * 2);
    &__nav {
        margin: calc(1rem / 2);
    }
    &__nav-link {
        color: inherit;
        display: block;
        font-size: 0.8em;
        font-weight: 400;
        line-height: 1;
        padding: 0.5rem 1rem;
        &:visited {
            color: inherit;
        }
        &:active,
        &:focus,
        &:hover {
            color: $palette-color4;
            text-decoration: none;
        }
    }
}

.nooz-taxonomy {
    margin: 0;
    padding-bottom: calc(1rem * 2);
    &__title {
        display: none;
    }
    &__terms {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    &__term {
        margin: calc(1rem / 2);
        margin-bottom: 0;
    }
    &__term-link {
        color: #999;
        display: block;
        font-size: 0.8em;
        font-weight: 400;
        line-height: 1.2;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        &:visited {
            color: #999;
        }
        &:active,
        &:focus,
        &:hover {
            color: $palette-color4;
            text-decoration: none;
        }
    }
    &--post-types &__term-link {
        border: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &:hover {
            background-color: #eee;
        }
    }
    .active &__term-link {
        color: $palette-color4;
        text-decoration: none;
    }
    &--post-types .active &__term-link {
        background-color: $palette-color3;
        border-bottom: 1px solid $palette-color3;
        color: #fff;
    }
}

.nooz-view {
    max-width: inherit;
}

.nooz-posts {
    display: grid;
    place-content: center;
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
    grid-gap: calc(16px * 2);
}

.nooz-post {
    background-color: #ddd;
    border-radius: 16px;
    box-shadow: 0 3px 3px rgba(#000, 0.3);
    font-size: 16px;
    color: #333;
    overflow: hidden;
    position: relative;
    &--dark {
        background-color: #222;
        color: #fdfdfd;
    }
    &:before {
        content: "";
        display: block;
        padding-top: calc((4/3) * 100%);
        width: 100%;
    }
    &__link {
        bottom: 0;
        color: inherit;
        display: flex;
        flex-direction: column;
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        text-decoration: none;
        top: 0;
        &:visited {
            color: inherit;
        }
        &:active,
        &:focus,
        &:hover {
            color: inherit;
            text-decoration: none;
        }
    }
    &__body {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        overflow: hidden;
        padding: 1rem;
    }
    &__action {
        padding: 1rem;
        padding-top: 0;
        z-index: 1;
    }
    &__action-button {
        background-color: $palette-color2;
        border: 0;
        border-radius: 16px;
        color: #fff;
        display: inline-block;
        font-size: 0.7em;
        font-weight: 600;
        line-height: 1;
        margin: 0;
        padding: 0.5rem 1rem;
        transition: all 0.2s linear;
        transition-property: background-color;
    }
    &__link:hover &__action-button {
        background-color: $palette-color4;
    }
    &__preview {
        position: relative;
        z-index: 1;
    }
    &__preview-background {
        background: transparent url() no-repeat center;
        background-size: cover;
        height: 0;
        overflow: hidden;
        padding-top: calc((3/4) * 100%);
        position: relative;
    }
    &__preview-image {
        display: none;
        height: 100%;
        left: 50%;
        max-width: none;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
    }
    &__heading {
        font-size: 0.8em;
        font-weight: 600;
        line-height: 1.2;
        margin: 0;
        transition: all 0.2s linear;
        transition-property: color;
    }
    &__link:hover &__heading {
        color: $palette-color4;
    }
    &__excerpt {
        font-size: 0.7em;
        line-height: 1.2;
    }
    &__source {
        color: #777;
        font-size: 0.7em;
        font-weight: 500;
    }
    &--dark &__source {
        color: #666;
    }
    &__datetime {
        color: #777;
        font-size: 0.7em;
    }
    &__meta {
        color: #666;
        font-size: 0.7em;
    }
    &--dark &__meta {
        color: #ccc;
    }
    &__meta-venue {
        font-weight: 600;
        display: block;
    }
}

.nooz-release {
    &__subheadline,
    &__body,
    &__boilerplate,
    &__contact,
    &__ending {
        margin-bottom: 15px;
    }
}
.nooz-dateline {
    display: block;
    margin-bottom: 15px;
    &__separator {
        display: none;
    }
    .nooz-release--combine-dateline & {
        display: inline;
        margin-bottom: 0;
        &__separator {
            display: inline;
        }
    }
}