/* ==========================================================================
   Ovation — Art
   The public art collection (Community > CASA > Art). A white title band with
   breadcrumbs and filter pills, over a three-up grid of artwork cards.

   The comp is a wireframe in a green, round-cornered kit; this is the same
   layout in the site's own voice - navy and orange, square corners, the
   1.5px cool hairline every other card on the site uses.

   The grid and card (.o-art__grid / .o-art__card) are also drawn by the
   single artwork page, under "More Art at Ovation".
   ========================================================================== */

.o-art {
	background-color: var(--o-white);
	color: var(--o-ink);
}

/* --------------------------------------------------------------------------
   Title band
   -------------------------------------------------------------------------- */
.o-art__band {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0;
}

.o-art__band > .o-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--o-space-xl);
}

.o-art__heading {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 48rem;
}

.o-art__title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-bold);
	font-size: var(--o-fs-h1);
	line-height: 1.08;
	text-transform: uppercase;
}

.o-art__lede {
	margin: 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	line-height: 1.55;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Filter pills
   The events and articles pill: 2px navy outline, solid navy when active.
   -------------------------------------------------------------------------- */
.o-art__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-space-xs) 1rem;
}

.o-art__body .o-art__filters {
	margin-bottom: var(--o-space-xl);
}

.o-art__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--o-navy);
	border-radius: var(--o-radius-pill);
	background-color: var(--o-white);
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--o-transition),
		color var(--o-transition);
}

.o-art__pill:hover,
.o-art__pill:focus-visible,
.o-art__pill.is-active {
	background-color: var(--o-navy);
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Grid
   Three up, as the comp draws it. Fixed rather than auto-fit, so a wide
   screen never quietly becomes four columns.
   -------------------------------------------------------------------------- */
.o-art__body {
	padding-block: var(--o-space-xl) var(--o-section-y);
}

.o-art__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--o-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * One card. The title link's ::after stretches over the whole card, so the
 * card is the click target without nesting blocks inside a link or doubling
 * the tab stops with a second link on the photograph.
 */
.o-art__card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--o-rule-cool);
	background-color: var(--o-white);
	transition: border-color var(--o-transition);
}

.o-art__card:hover,
.o-art__card:focus-within {
	border-color: var(--o-navy);
}

/* The ovation-card crop's own 700 x 470, so no second rendition is needed. */
.o-art__card-media {
	aspect-ratio: 70 / 47;
	overflow: hidden;
	background-color: var(--o-ice);
}

.o-art__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--o-transition-slow);
}

.o-art__card:hover .o-art__card-img {
	transform: scale(1.04);
}

/* No photograph yet: the Ovation mark on navy, as the articles list does. */
.o-art__card-media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--o-navy);
	color: var(--o-white);
}

.o-art__card-logo {
	width: 45%;
	height: auto;
}

.o-art__card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.5rem 1.75rem 1.75rem;
}

.o-art__card-title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-h4);
	line-height: 1.27;
	text-transform: uppercase;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.o-art__card-link {
	color: inherit;
	text-decoration: none;
}

.o-art__card-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.o-art__card:hover .o-art__card-link {
	color: var(--o-orange);
}

/* The ring belongs round the card the link stretches over, not the text. */
.o-art__card-link:focus-visible {
	outline: none;
}

.o-art__card-link:focus-visible::after {
	outline: 2px solid var(--o-focus);
	outline-offset: 3px;
}

.o-art__card .o-art__byline {
	gap: 0.625rem;
	color: var(--o-ink-soft);
	font-size: 0.9375rem; /* 15 */
}

/* Two short items never need to stack, unlike the events line this borrows. */
.o-art__byline {
	flex-direction: row;
	align-items: center;
}

.o-art__byline .o-events__dot {
	display: block;
	width: 4px;
	height: 4px;
}

.o-art__card-location {
	margin: 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-small);
	line-height: 1.4;
}

.o-art__card-cta {
	margin-top: auto;
	padding-top: 0.75rem;
	color: var(--o-orange);
	font-size: var(--o-fs-small);
}

.o-art__card:hover .o-textlink__chevrons {
	transform: translateX(0.25em);
}

.o-art__empty {
	margin: 0;
	padding: var(--o-space-xl) var(--o-space-lg);
	border: 1.5px solid var(--o-rule-cool);
	color: var(--o-ink-soft);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	text-align: center;
}

.o-art__more {
	margin: var(--o-space-xl) 0 0;
	text-align: center;
}

.o-art__more .o-btn {
	color: var(--o-navy);
}

.o-art__more .o-btn:hover,
.o-art__more .o-btn:focus-visible {
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Narrower screens
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.o-art__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.o-art__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.o-art__band > .o-container {
		gap: var(--o-space-lg);
	}

	/*
	 * The pills scroll sideways rather than wrapping to several rows, running
	 * out to the screen edges so the cut-off pill shows there is more. The
	 * vertical padding keeps focus rings unclipped.
	 */
	.o-art__filters {
		flex-wrap: nowrap;
		align-self: stretch;
		margin-inline: calc(var(--o-gutter) * -1);
		padding: 4px var(--o-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.o-art__filters::-webkit-scrollbar {
		display: none;
	}

	.o-art__card-body {
		padding: 1.25rem;
	}
}

/* Motion is decoration here; respect a request to do without it. */
@media (prefers-reduced-motion: reduce) {
	.o-art__card-img {
		transition: none;
	}

	.o-art__card:hover .o-art__card-img,
	.o-art__card:hover .o-textlink__chevrons {
		transform: none;
	}
}