.convocation-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 360px, 1fr ) );
	gap: 1.5rem;
}

/* Card */
.convocation-grid__card {
	display: flex;
	position: relative;
	flex-direction: column;
	border: 1px solid black;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--natural);
}

.convocation-grid__card::before {
	content: "";
	position: absolute;
	height: 100%;
	width: 10px;
	background-color: black;
	left:0;
	top: 0;
}

/* Holds the four card groups — title, schedule, location, action — as direct
   children. This gap is the only thing spacing them apart, and each group below
   declares its own type styles rather than inheriting from a shared wrapper. */
.convocation-grid__card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	padding: 2rem;
}

/* 1. Title — Merriweather and the heading letter-spacing come from the global
   h2 styles; only the size and color are dialed back for card scale. */
.convocation-grid__card-name {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--bulldog-red);
}

/* 2. Date & time — set tight against each other, so they share a group and read
   as one block. */
.convocation-grid__card-schedule {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-transform: uppercase;
}

.convocation-grid__card-schedule > p {
	margin: 0;
	letter-spacing: 0.05em;
}

/* 3. Location */
.convocation-grid__card-location {
	margin: 0;
	font-family: var(--wp--preset--font-family--merriweather);
	font-size: var(--wp--preset--font-size--medium);

}

/* 4. Action — the group wrapper needs no styles of its own; card-body centers
   it and supplies the gap.

   This "More Info" link is raw markup from render.php, never a real core/button
   block instance, so WordPress's per-block theme.json styles (which only print
   for blocks actually present in a page's content) never reach it — it was
   inheriting just the generic button element defaults. Match theme.json's
   core/button block style ("styles.blocks.core/button") by hand so it looks
   like every other default button on the site. */
.convocation-grid .wp-block-button__link {
	border-radius: 2px;
	box-shadow: var(--wp--preset--shadow--dark-red);
	padding: 0.5rem 1rem;
	font-style: normal;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}