/**
 * playbills: loaded only on pages that show it.
 *
 * Split out of the shared stylesheets by bin/split-css.py; loaded by
 * inc/feature-styles.php when something on the page has the class.
 */

/* ---------- From blocks.css ---------- */
/* ---------- A production history ------------------------------------------ *
 *
 * Sixteen shows going back to 2012, and photographs for only the last six.
 * A list of titles is what the import left behind and reads like a filing
 * cabinet; a theatre programme is the one page on this site that should look
 * like something. So each show becomes a playbill: the year set large as the
 * thing you scan by, the title in the display face, and the seasons that have
 * a gallery lifted above the ones that do not.
 * ------------------------------------------------------------------------- */

.cong-playbills {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

/*
 * The card is the list item, addressed as the list item.
 *
 * This used to key off a `cong-playbill` class on the <li>, and the markup
 * only ever carried `has-gallery` — so `position: relative` never applied,
 * and the stretched link below resolved `inset: 0` against the page instead
 * of the card. Six invisible anchors covered the whole Theatre page, and
 * hovering anywhere on it offered somebody's SmugMug gallery.
 *
 * A structural selector cannot come adrift from the markup the way a class
 * can. This is the third time in this stylesheet that an absolutely
 * positioned element has gone looking for a containing block and found the
 * viewport; it is always worth checking which ancestor is positioned.
 */
.cong-playbills > li {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.3rem;
	padding: var(--wp--preset--spacing--30);
	min-block-size: 9.5rem;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

/* A marquee light down the edge, in the church's olive. */
.cong-playbills > li::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 4px;
	background: var(--wp--preset--color--sky-mid);
}

.cong-playbill__year {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 900;
	line-height: 1;
	/* Sky, not the paler sky-mid: quiet, but still readable (3:1 at this size). */
	color: var(--wp--preset--color--sky);
	font-variant-numeric: tabular-nums;
}

.cong-playbill__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.cong-playbill__link,
.cong-playbill__quiet {
	margin-block-start: auto;
	padding-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cong-playbill__quiet {
	/* Muted by colour alone: faded with opacity as well, it fell below what
	   can be read (2.5:1). */
	color: var(--wp--preset--color--ink-muted);
}

/*
 * A season you can still look at.
 *
 * The six with galleries carry the church's colours and lift on hover; the
 * ten without stay quiet, so the eye lands on the ones that lead somewhere
 * rather than on whichever happens to be first.
 */
.cong-playbills > li.has-gallery {
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.cong-playbills > li.has-gallery::before {
	background: var(--wp--preset--color--lime);
}

.cong-playbills > li.has-gallery .cong-playbill__year {
	color: var(--wp--preset--color--leaf);
}

.cong-playbills > li.has-gallery:hover,
.cong-playbills > li.has-gallery:focus-within {
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-2px);
}

/* The whole card is the target once there is somewhere to go. */
.cong-playbill__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cong-playbills > li.has-gallery {
		transition: none;
	}
	.cong-playbills > li.has-gallery:hover,
	.cong-playbills > li.has-gallery:focus-within {
		transform: none;
	}
}

/*
 * The productions with photo galleries, as photo tiles: the show's picture
 * across the top of the card, then the year, the title and the way to the
 * photos. Smaller than the old site's alternating rows, but the same feel —
 * the theatre is a visual ministry and its history should look like it.
 */
.cong-playbills--photos {
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	margin-block-end: var(--wp--preset--spacing--40);
}

.cong-playbills > li.has-photo {
	padding: 0 0 var(--wp--preset--spacing--30);
	gap: 0.2rem;
	min-block-size: 0;
}

.cong-playbills > li.has-photo::before {
	display: none;
}

.cong-playbill__photo {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-block-end: var(--wp--preset--spacing--20);
}

.cong-playbills > li.has-photo > :not(img) {
	margin-inline: var(--wp--preset--spacing--30);
}

.cong-playbills > li.has-photo .cong-playbill__year {
	font-size: var(--wp--preset--font-size--xl);
}

/* The shows without a picture start on a row of their own, so a plain box is
   never stretched to the height of a photograph beside it. */
.cong-playbills--photos > li.has-photo + li:not(.has-photo) {
	grid-column-start: 1;
}