Template:UI/workshops library/styles.css

/* TemplateStyles for {{UI/workshops_library}} — curated Workshops
   directory. Sections: header (heading + lead + stats) and a
   responsive card grid that wraps N copies of
   {{UI/upcoming_events_featured/card}}.

   The cards themselves are styled by
   Template:UI/upcoming_events_featured/styles.css (image fill +
   overlay + body + status badge); we only style the wrapper and
   the grid here.

   Sanitizer constraints (MW 1.44.5 / css-sanitizer 5.5.0): same as
   the other library templates — var() in `background`, `color`,
   `border` shorthand only; geometry stays literal. */

.workshops-library {
	margin: 0 0 2em 0;
}

.workshops-library-lead {
	font-size: 1.05rem;
	color: var(--labki-text-muted, #5a6a7a);
	margin: 0 0 1em 0;
	max-width: 60em;
}

.workshops-library-stats {
	margin-bottom: 1.5em;
}

/* Responsive card grid — explicitly 2 columns at desktop, 1 column
   on narrow screens via the media query below. The earlier
   `auto-fit, minmax(280px, 1fr)` looked reasonable on paper but had
   a nasty edge case: with a single result, auto-fit collapses
   trailing tracks and the 1fr lone card stretches to the full grid
   width — a 4:3 card at 1200px viewport renders ~900px tall, far
   too dominant on the page.

   Fixed 2-column layout also matches the user-facing model better:
   workshops are big-ticket items, two-up reads as "browse a
   collection" rather than a grid of small thumbnails.

   gap stays literal (16px) per the geometry-stays-literal sanitizer
   constraint documented in upcoming_events_featured/styles.css. */
.workshops-library-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 1em;
}

@media (max-width: 720px) {
	.workshops-library-grid {
		grid-template-columns: 1fr;
	}
}

/* The featured-card template wraps each instance in
   .wiki-events-featured (a flex container). Inside the grid we
   collapse that wrapper to grid-cell size so the card fills its
   cell. Without this the cards inherit the flex parent's sizing,
   which can stretch them oddly when the column count changes. */
.workshops-library-grid .wiki-events-featured {
	display: block;
	width: 100%;
}

.workshops-library-empty {
	padding: 1.5em;
	color: var(--labki-text-muted, #5a6a7a);
	font-style: italic;
	text-align: center;
	background: var(--labki-bg-subtle, #f4f6f8);
	border-radius: 4px;
	grid-column: 1 / -1;
}