/**
 * Works index: the four facets the `[natalie_work_archive]` shortcode prints — Series, Year,
 * Medium, Substrate.
 *
 * Series and year are image-led: each term is one card carrying a work from that term as its
 * featured image, with the term name laid over the picture in the same treatment as the Fancy
 * Lady Industries hub (see fli-history-page.css), so the index can be browsed by eye and the
 * tile stays a picture rather than a picture with a caption under it. Medium and substrate stay
 * ruled text rows with their counts, because a thumbnail per technical term would say less
 * than the term name does. The shortcode prints the four sections full width in one flow, in
 * that order, so this sheet lays out the two kinds of list and nothing page-wide.
 *
 * Every role here uses only the shortcode's own classes, and the sheet is enqueued on the Works
 * page alone (`is_page( 'works' )` in the plugin): no rule names a page ID, so the page can be
 * recreated with a new ID — as a replay onto production does — without losing its layout. The
 * term names, counts where they are shown, and archive links are untouched.
 */

/* Series and year: one card per term. */
.natalie-work-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Below the 1035px content box's comfortable three-up width, then one card per row. */
@media (max-width: 900px) {
	.natalie-work-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.natalie-work-archive-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The card is one target, and the term name is laid over the picture. */
.natalie-work-archive-card {
	position: relative;
	display: block;
	color: #1a1a1a;
	text-decoration: none;
	transition: color 120ms ease;
}

/* Never cropped: the artwork's own proportions are part of what the tile is showing. */
.natalie-work-archive-card img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The Fancy Lady Industries hub treatment: the destination is legible over the picture before
 * the click, as white text on a scrim, with a shadow so it holds over a light area of the
 * artwork. The overlay must not swallow the click, hence pointer-events: none.
 */
.natalie-work-archive-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
	pointer-events: none;
	transition: background-color 120ms ease;
}

/*
 * The hub's caption size, so the two indexes read as one treatment: 32px, 3px tracking. The
 * line height is the one deliberate difference — the hub centres four-digit years, these
 * tiles also carry the longest series title, which wraps.
 */
.natalie-work-archive-name {
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 3px;
}

/* Hover and focus deepen the scrim and underline the label: the tile answers the pointer
   without recolouring white type over a photograph, which the pink never survived. Pink is
   still the site's hover cue on the text lists and the card's own focus ring. */
.natalie-work-archive-card:hover .natalie-work-archive-overlay,
.natalie-work-archive-card:focus .natalie-work-archive-overlay {
	background: rgba(0, 0, 0, 0.55);
}

.natalie-work-archive-card:hover .natalie-work-archive-name,
.natalie-work-archive-card:focus .natalie-work-archive-name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A term with no illustration at all: the bordered text card, carrying the same label. */
.natalie-work-archive-card-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 96px;
	padding: 14px 16px;
	border: 1px solid #eaeaea;
}

.natalie-work-archive-card-text:hover,
.natalie-work-archive-card-text:focus {
	color: #f70e6b;
}

/*
 * A keyboard visitor sees no hover, so the card gets a real ring. The theme resets `a:focus`
 * to `outline: 0`, which is why this is stated here rather than left to the UA; the outline
 * traces the whole card, picture included, so the target is unmistakable.
 */
.natalie-work-archive-card:focus-visible {
	outline: 2px solid #f70e6b;
	outline-offset: 4px;
}

/* Medium and substrate: the ruled text rows, below the two image grids. */
.natalie-work-archive-section {
	margin: 0 0 36px;
}

.natalie-work-archive-section h2 {
	margin: 0 0 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eaeaea;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #505050;
}

/* The theme's `ul { margin: 0 0 1.5em 3em }` plus the UA's list padding is the 85px indent. */
.natalie-work-archive-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.natalie-work-archive-list li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 6px 0;
	border-bottom: 1px solid #f4f4f4;
}

.natalie-work-archive-list li:last-child {
	border-bottom: 0;
}

/* The link fills the row, so the whole line is the click target and the count is pushed right. */
.natalie-work-archive-list li a {
	flex: 1;
	color: #1a1a1a;
	text-decoration: none;
	transition: color 120ms ease;
}

.natalie-work-archive-list li a:hover,
.natalie-work-archive-list li a:focus {
	color: #f70e6b;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.natalie-work-archive-count {
	color: #999;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}