/* Grid  ----------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--wp--style--block-gap) * 4);
}
@media all and (min-width: 48rem) {
	.grid {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--wp--style--block-gap) * 4) var(--wp--style--block-gap);
    }
}
@media all and (min-width: 64rem) {
	.grid.has-4-columns {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Grid: Card  ----------------------------------------------- */

.card {
    border-block-end: var(--nnn--style--border);
    font-size: var(--nnn--style--font-size-14);
    line-height: 1.5em;
    padding-block-end: 0.75rem;
    transition: border 500ms ease;
}
.card:hover {
    border-block-end: 1px solid var(--wp--preset--color--gray-light);
}
.card .card--title,
.card .card--type,
.card .card--date {
    transition: color 500ms ease;
}
.card .card--title {
    font-weight: 400;
}
.card:hover .card--title {
    color: var(--wp--preset--color--secondary);
}
.card .card--meta {
    color: var(--wp--preset--color--tertiary);
    display: flex;
    justify-content: space-between;
}
.card .card--date {
    font-family: var(--wp--preset--font-family--space-mono);
    font-size: var(--nnn--style--font-size-12);
}
.card:hover .card--type,
.card:hover .card--date {
    color: var(--wp--preset--color--primary);
}
.card--type span:after {
	content: ', '
}
.card--type span:nth-last-child(2):after {
	content: ' + '
}
.card--type span:last-child:after {
	content: ''
}

/* Grid: Thumbnail  ------------------------------------------ */

.card figure {
    background-color: var(--wp--preset--color--gray);
    clip-path: var(--nnn--polygon);
    margin-block-end: 0.75rem !important;
    padding: 1px;
    transition: background-color 500ms ease;
}
.card:hover figure {
    background-color: var(--wp--preset--color--gray-light);
}
.card figure > img {
    aspect-ratio: 16 / 9;
    clip-path: var(--nnn--polygon);
    display: block;
	height: auto;
    object-fit: cover;
    object-position: center;
	width: 100%;
}
.has-4-columns .card figure > img {
    aspect-ratio: 1 / 1;
}
.card figure img {
    transition: filter 500ms ease;
    filter: grayscale(100%);
}
.card:hover img {
    filter: grayscale(0%);
}
.card:first-child figure,
.card:first-child figure > img {
    clip-path: var(--nnn--polygon--start);
}
.card:last-child figure,
.card:last-child figure > img {
    clip-path: var(--nnn--polygon--end);
}

/* List  ----------------------------------------------------- */

.list {
    display: flex;
    flex-direction: column;
    font-size: var(--nnn--style--font-size-14);
    line-height: 1.75em;
}
.list-item a,
.list-header {
    clip-path: var(--nnn--polygon);
    display: flex;
    flex-direction: row;
    gap: var(--wp--style--block-gap);
    padding-block-end: 2px;
}
.list-header {
    background-color: var(--wp--preset--color--gray-dark);
    font-weight: 500;
}
.list-item a {
    background-color: transparent;
    color: var(--wp--preset--color--primary);
    transition: background-color 300ms ease;
}
.list-item a:hover{
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--background);
}
.list-item a:hover .list-item--title {
    color: var(--wp--preset--color--background);
}
.list-item--title,
.list-item--type,
.list-item--various,
.list-item--id {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 300ms ease;
}
.list-item--type,
.list-item--various,
.list-item--id {
    display: none;
}
.list-item--various span:after {
	content: ', '
}
.list-item--various span:nth-last-child(2):after {
	content: ' + '
}
.list-item--various span:last-child:after {
	content: ''
}
.list-item--title {
    padding-inline-start: 5px;
    width: calc(100% - 80px);
}
.list-item--date {
    padding-inline-end: 5px;
    text-align: right;
    width: 80px;
    transition: background-color 300ms ease;
}
.list-item .list-item--id,
.list-item .list-item--date {
    font-family: var(--wp--preset--font-family--space-mono);
    font-size: var(--nnn--style--font-size-12);
}
@media ( min-width: 64em ) {
    .list-item--type,
    .list-item--various,
    .list-item--id {
        display: block;
    }
    .list-item--title,
    .list-item--type {
        width: 25%;
    }
    .list-item--various,
    .list-item--id {
        width: calc(50% - 80px);
    }
    .list-item--date {
        width: 80px;
    }
}

/* Filter  --------------------------------------------------- */

.controls {
    display: flex;
    flex-direction: row;
    gap: var(--wp--style--block-gap);
    justify-content: center;
    padding-block-end: 0.75em;
}
.controls button {
    background-color: transparent;
    line-height: 1.5em;
}
.controls button span::before {
    content: ' ';
}
.controls button.active span::before {
    color: var(--wp--preset--color--accent);
    content: 'X';
}
.filter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(var(--wp--style--block-gap) / 2);
    justify-content: flex-start;
    width: 100%;
}
.layout {
    display: none;
}
@media ( min-width: 64em ) {
    .filters {
        width: 75%;
    }
    .layout {
        display: flex;
        flex-direction: row;
        gap: var(--wp--style--block-gap);
        justify-content: flex-end;
        width: 25%;
    }
    .controls .filters:only-child,
    .controls .layout:only-child {
        width: 100%;
    }
}