/**
 * Program Related Events — the list wrapper and heading fallback only.
 *
 * The divider, column count, spacing and heading appearance are Elementor
 * controls; they emit more specific selectors and so override the fallbacks
 * below. No default border is set here — "Divider style" defaults to solid in
 * the panel, so the line an editor sees comes from that control, not this file.
 */

.irpp-related-events__heading {
	margin: 0 0 1.25rem;
	padding-top: 0.75rem;
	border-top: 3px solid #231F20;
	font-size: 1.25rem;
}

/*
 * Grid rather than block flow, so "Columns" can lay the events out two or more
 * to a row the way the theme template did. The gap is the space below each
 * item's divider; the space above it is the item's own padding-bottom.
 */
.irpp-related-events__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: start;
}

.irpp-related-events__item {
	min-width: 0;
}

/*
 * --- Built-in row ---
 *
 * Only present when no library template was picked. Every value here is also an
 * Elementor control in the "Event row" style section; those emit more specific
 * selectors and so win.
 */

.irpp-related-events__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Image column then text. The spans are laid out by grid, so they need display. */
.irpp-related-events__card {
	display: grid;
	grid-template-columns: 283px 1fr;
	gap: 2.5rem;
	align-items: center;
}

/* An event with no featured image gets the full width rather than a blank gap. */
.irpp-related-events__card--no-image {
	grid-template-columns: 1fr;
}

/*
 * This is the box the Aspect ratio and Height controls size, not the <img> --
 * sizing the image would leave this wrapper at its own auto height, so it could
 * end up taller or shorter than the picture inside it.
 */
.irpp-related-events__image {
	display: block;
	width: 100%;
	min-width: 0;
}

/*
 * height: 100% resolves to auto while the box has no definite height, so an
 * uncropped image still sets its own proportions. Once Aspect ratio or Height
 * gives the box a real height, this is what lets object-fit act on it.
 */
.irpp-related-events__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.irpp-related-events__body {
	display: block;
	min-width: 0;
}

.irpp-related-events__badge {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.3rem 0.6rem;
	border: 2px solid #940027;
	color: #231F20;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.irpp-related-events__title {
	display: block;
	font-size: 1.4rem;
	line-height: 1.3;
}

.irpp-related-events__link:hover .irpp-related-events__title,
.irpp-related-events__link:focus-visible .irpp-related-events__title {
	text-decoration: underline;
}

.irpp-related-events__date {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	color: #505158;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.irpp-related-events__date-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.irpp-related-events__date-icon svg {
	width: 1.1em;
	height: 1.1em;
}