/* ==========================================================================
   works.css — Genva Craft

   The works list (masonry by default, bento as a block style), the fixed
   three-column grid used under a single work, and the card they share.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.work-card > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.work-card > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.work-card .work-card__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.work-card .work-card__title {
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

.work-card .work-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.work-card .work-card__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.work-card .work-card__meta {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--secondary);
}

/* The excerpt block adds a "more" link after the text; the card is already a
   link, so it is not needed. */
.work-card .work-card__meta .wp-block-post-excerpt__more-text {
	display: none;
}

/* Tags as small outlined badges ("Sold", "Made to order"). Text, not colour,
   carries the meaning. */
.work-card .work-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

.work-card .work-card__badges a {
	display: inline-block;
	padding: 0.15em 0.7em;
	border: 1px solid var(--wp--preset--color--secondary);
	line-height: 1.6;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.work-card .work-card__badges .wp-block-post-terms__separator {
	display: none;
}

/* --------------------------------------------------------------------------
   Masonry (default)

   CSS columns, so each photograph keeps its own height. No :nth-child is
   involved, so the hidden preview <li> the site editor inserts into the post
   template (CLAUDE.md rule 21) does not shift anything. Reading order runs
   down each column.
   -------------------------------------------------------------------------- */

.works-list.wp-block-post-template:not(.is-style-bento) {
	display: block;
	column-count: 2;
	column-gap: var(--wp--preset--spacing--40);
}

@media (width >= 900px) {

	.works-list.wp-block-post-template:not(.is-style-bento) {
		column-count: 3;
		column-gap: var(--wp--preset--spacing--60);
	}
}

.works-list.wp-block-post-template:not(.is-style-bento) > li {
	break-inside: avoid;
	margin-block-start: 0;
	margin-block-end: var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------------------------
   Bento (block style)

   A cycle of five on three columns with no holes: 1 = 2x2, 2-4 = 1x1,
   5 = 2x1. On two columns only the first of each cycle spans the width.
   Photos are cropped to their tile.

   Counting uses :nth-child(... of :not([style*="display: none"])) so the
   hidden preview <li> in the site editor is skipped (CLAUDE.md rule 21). The
   plain form stays first for browsers without "of S".
   -------------------------------------------------------------------------- */

.works-list.wp-block-post-template.is-style-bento {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(14rem, auto);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.works-list.is-style-bento > li {
	display: flex;
	margin: 0;
}

.works-list.is-style-bento .work-card {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.works-list.is-style-bento .work-card__photo {
	flex: 1;
	min-height: 10rem;
}

.works-list.is-style-bento .work-card__photo a,
.works-list.is-style-bento .work-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.works-list.is-style-bento > li:nth-child(5n + 1) {
	grid-column: span 2;
}

@media (width >= 900px) {

	.works-list.wp-block-post-template.is-style-bento {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: minmax(16rem, auto);
		gap: var(--wp--preset--spacing--60);
	}

	.works-list.is-style-bento > li:nth-child(5n + 1) {
		grid-row: span 2;
	}

	.works-list.is-style-bento > li:nth-child(5n + 5) {
		grid-column: span 2;
	}
}

@supports selector(:nth-child(1 of li)) {

	.works-list.is-style-bento > li:nth-child(5n + 1),
	.works-list.is-style-bento > li:nth-child(5n + 5) {
		grid-column: auto;
		grid-row: auto;
	}

	.works-list.is-style-bento > li:nth-child(5n + 1 of :not([style*="display: none"], [style*="display:none"])) {
		grid-column: span 2;
	}

	@media (width >= 900px) {

		.works-list.is-style-bento > li:nth-child(5n + 1 of :not([style*="display: none"], [style*="display:none"])) {
			grid-row: span 2;
		}

		.works-list.is-style-bento > li:nth-child(5n + 5 of :not([style*="display: none"], [style*="display:none"])) {
			grid-column: span 2;
		}
	}
}

/* --------------------------------------------------------------------------
   Fixed grid (under a single work, and the front page sections)

   3 columns from 900px, 2 below. Kept in CSS because the column count
   changes with the viewport, which core's grid layout cannot do.
   -------------------------------------------------------------------------- */

.works-grid.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

@media (width >= 900px) {

	.works-grid.wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}
}

/* The flow layout puts a top margin on every li but the first; on a grid
   that would drop all but the first card. */
.works-grid.wp-block-post-template > li {
	margin-block-start: 0;
}

.works-grid .work-card__photo img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Category filter and pagination
   -------------------------------------------------------------------------- */

.cat-filter {
	margin-bottom: var(--wp--preset--spacing--60);
}

.cat-filter .cat-filter__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
}

.cat-filter .cat-filter__list a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.cat-filter .cat-filter__list a:hover,
.cat-filter .cat-filter__list .current-cat > a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.works .pagination {
	margin-top: var(--wp--preset--spacing--70);
	font-family: var(--font-latin);
	font-size: var(--wp--preset--font-size--label);
	gap: var(--wp--preset--spacing--40);
}

.works .pagination a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.works .pagination .current {
	color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.works__empty {
	text-align: center;
	color: var(--wp--preset--color--secondary);
}