@import "/styles/layers/components/cards.css" layer(page);
@import "/styles/layers/components/byline.css" layer(page);
@import "/styles/layers/components/tags.css" layer(page);

@layer page {
	body.thinks-page {
		--thinks-page-message-box-background-color: var(--color-light-gray-3);
		--thinks-page-message-box-foreground-color: var(--color-dark-gray-1);
	}

	@media (prefers-color-scheme: dark) {
		body.thinks-page {
			--thinks-page-message-box-background-color: var(--color-dark-gray-1);
			--thinks-page-message-box-foreground-color: var(--color-light-gray-1);
		}
	}

	body.thinks-page,
	body.thinks-page > header {
		background-color: var(--landmark-header-background-color-shaded);
		color: var(--landmark-header-foreground-color-shaded);
	}

	.thinks-page .message-box {
		background-color: var(--thinks-page-message-box-background-color);
		color: var(--thinks-page-message-box-foreground-color);
	}

	.pub {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		gap: 0;
		font-style: italic;
		justify-content: space-between;
	}

	ul .card img {
		border-radius: 15px;
		height: auto;
		padding-block: var(--card-image-padding-block);
		width: 100%;
	}

	.thinks-page article > * {
		grid-column: col-one / span 12;
	}

	.thinks-page article > .cards {
		display: grid;
		grid-column: col-one / span 16;
		grid-template-columns: subgrid;
		margin-block: 0 var(--space-l);
	}

	.thinks-page article > .cards h2 {
		font-size: var(--step-3);
		font-weight: 550;
	}

	.thinks-page article > .cards .cards-filter {
		grid-column: col-one / span 17;
	}

	.thinks-page article > .cards > ul {
		display: grid;
		column-gap: 1rem;
		row-gap: 1rem;
		grid-column: col-one / span 17;
		list-style-type: none;
	}

	/* triple column */
	.cards > ul {
		grid-template-columns: repeat(3, 33%);
	}

	/* double column */
	@media (width < 125rem) and (width >= 60rem) {
		.cards > ul {
			grid-template-columns: repeat(2, 50%);
		}

		.thinks-page article > .cards > ul > li:first-child {
			column-gap: 2rem;
			display: grid;
			grid-column: span 2;
			grid-template-columns: 53% 45%;
			row-gap: 0;
			grid-template-areas:
				"image header"
				"image blurb"
				"image content"
				"byline readMore"
			;
		}

		.thinks-page .card:first-child {
			grid-column: cards-start / cards-end;
		}

		.thinks-page .card:first-child header {
			margin-block: var(--space-l) 0;
		}
	}

	/* double column */
	@media (width < 90rem) {
		.thinks-page article > * {
			grid-column: col-one / span 16;
		}
	}

	/* single column */
	@media (width < 60rem) {
		.cards > ul {
			grid-template-columns: [cards-start] 1fr [cards-end];
		}
	}

}