/*
 * patterns/upcoming-events.css — "Upcoming Events"
 * Markup: wp-content/themes/fcs/patterns/upcoming-events.php
 * Root:   .fcs-upcoming-events
 *
 * The Upcoming Events band (Figma 10148:9546): a centred heading over a
 * three-event core Query Loop. It is drawn as Multicolumn's bare-column
 * arrangement, and the card is the same card as Latest News's, restated here
 * under this root because pattern CSS never reaches across into another
 * pattern's classes.
 *
 * THE PROSE UNDERLINE IS UNSET FOR EVERY LINK HERE
 * ------------------------------------------------
 * The pattern lands inside .wp-block-post-content, so components/links.css
 * gives each link the prose treatment: an underline drawn as a background-image
 * gradient plus 2px of padding-bottom, which `text-decoration: none` cannot
 * remove. It is unset once, for all links in the section, below.
 */

/* Section ------------------------------------------------------------- */

/*
 * Section padding is NOT declared here for Medium and Large — the editor owns
 * those from the sidebar's Dimensions panel. Small is pinned in
 * layout/spacing.css. See CLAUDE.md § "Section padding".
 *
 * overflow: hidden catches the mobile slider's off-screen cards, which escape
 * the track on purpose (see Slider below).
 */
.fcs-upcoming-events {
	overflow: hidden;
}

.fcs-upcoming-events a:not( .wp-element-button ) {
	background-image: none;
	padding-bottom: 0;
}

/* Header -------------------------------------------------------------- */

/*
 * Heading → 40px → cards, the Multicolumn rhythm. The header runs the full
 * container and centres rather than being constrained, as in Multicolumn.
 *
 * The doubled class raises specificity to (0,2,0). Core's layout rules —
 * `:root :where( .is-layout-flow ) > *` and the constrained twin — are (0,1,0)
 * because :root counts, and they print after the theme's stylesheets, so a
 * single class ties and loses.
 *
 * Figma has the heading alone; the 8px step is there for an eyebrow an editor
 * adds above it, matching Multicolumn's eyebrow → heading gap.
 */
.fcs-upcoming-events__header.fcs-upcoming-events__header {
	margin-block-end: 40px;
	text-align: center;
}

.fcs-upcoming-events__header.fcs-upcoming-events__header > * {
	margin-block: 0;
}

.fcs-upcoming-events__header.fcs-upcoming-events__header > * + * {
	margin-block-start: 8px;
}

/* Grid ---------------------------------------------------------------- */

/*
 * DERIVED — there is no mobile or tablet design for this band.
 *
 *   Small   slider     one card with the next peeking in, dots below — the
 *                      Multicolumn and Latest News behaviour. Mounted by
 *                      assets/js/query-slider.js; the 1-column grid here is only
 *                      the no-JS fallback
 *   Medium  2 columns  the third card wraps under the first two
 *   Large   3 columns  Figma: 3 cards in the 1240px container, 20px gap
 *
 * The grid is written here rather than with post-template's Grid layout,
 * because core's grid collapses at its own 600px breakpoint and cannot express
 * the 768/1024 pair. The default layout adds is-layout-flow and a block-gap
 * margin to each <li> — reset below, or it would offset every row.
 */
.fcs-upcoming-events .fcs-upcoming-events__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( min-width: 768px ) {
	.fcs-upcoming-events .fcs-upcoming-events__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1024px ) {
	.fcs-upcoming-events .fcs-upcoming-events__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

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

.fcs-upcoming-events .fcs-upcoming-events__grid > li {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.fcs-upcoming-events .fcs-upcoming-events__grid > li > * {
	margin-block: 0;
}

/*
 * Image → 20px → title → 8px → date → 8px → text. Figma 10148:9561: the title
 * and text are one stack with an 8px gap, 20px under the image; the date line
 * joins that stack.
 */
.fcs-upcoming-events .fcs-upcoming-events__grid .fcs-upcoming-events__title {
	margin-block-start: 20px;
}

.fcs-upcoming-events .fcs-upcoming-events__grid .fcs-upcoming-events__meta,
.fcs-upcoming-events .fcs-upcoming-events__grid .fcs-upcoming-events__text {
	margin-block-start: 8px;
}

/*
 * An event with no excerpt binds an empty paragraph; drop it so it does not
 * leave its 8px behind.
 */
.fcs-upcoming-events .fcs-upcoming-events__grid .fcs-upcoming-events__text:empty {
	display: none;
}

/* The 4:3 ratio and 12px radius are block attributes on the featured image. */
.fcs-upcoming-events .fcs-upcoming-events__media {
	width: 100%;
}

.fcs-upcoming-events .fcs-upcoming-events__media img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/*
 * Type comes from theme.json's h4 element. The link takes the heading's colour
 * and moves to the link colour on hover — DERIVED, Figma has no hover state.
 */
.fcs-upcoming-events .fcs-upcoming-events__title a {
	color: inherit;
	text-decoration: none;
}

.fcs-upcoming-events .fcs-upcoming-events__title a:hover,
.fcs-upcoming-events .fcs-upcoming-events__title a:focus-visible {
	color: var( --wp--preset--color--link );
}

.fcs-upcoming-events .fcs-upcoming-events__empty {
	margin: 0;
	text-align: center;
}

/* Slider (Small only) -------------------------------------------------- */

/*
 * query-slider.js mounts Splide on .fcs-upcoming-events__query below 768px,
 * wrapping the post <ul> in an injected .splide__track. Everything here is
 * scoped to .is-active, which Splide adds once mounted, so the un-mounted grid
 * (no JS, the editor canvas, Medium and up) is untouched. Mirrors the Small
 * slider in patterns/latest-news.css, restated under this root.
 *
 * The track stays overflow: visible so the next card peeks past it — the peek
 * is the swipe affordance, there are no arrows. The section clips it instead.
 */
.fcs-upcoming-events__query.is-active .splide__track {
	overflow: visible;
}

/*
 * The grid rule above is (0,2,0); this is (0,3,0), so the mounted list becomes
 * the single non-wrapping row Splide translates. Splide spaces the slides with
 * its own inline margin, so the grid gap goes.
 */
.fcs-upcoming-events__query.is-active .fcs-upcoming-events__grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
}

/* Splide sets each slide's width inline; this stops flex shrinking it. */
.fcs-upcoming-events__query.is-active .fcs-upcoming-events__grid > li {
	flex: 0 0 auto;
}

/*
 * Pagination dots — the link blue Figma uses on light bands. This band is
 * always on the light surface, so the colour is fixed. The list and item resets
 * undo the post-content list styling it lands in.
 */
.fcs-upcoming-events .splide__pagination {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	width: 100%;
	margin: 0;
	margin-block-start: var( --wp--preset--spacing--30 );
	padding: 0;
	list-style: none;
}

.fcs-upcoming-events .splide__pagination li {
	margin: 0;
}

.fcs-upcoming-events .splide__pagination__page {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var( --wp--preset--color--link );
	border-radius: var( --wp--preset--border-radius--pill );
	background: transparent;
	opacity: 0.6;
	transition:
		background-color var( --fcs-transition ),
		opacity var( --fcs-transition );
}

.fcs-upcoming-events .splide__pagination__page.is-active {
	background: var( --wp--preset--color--link );
	opacity: 1;
}