/* ===========================================================================
   FEATURED-EVENTS-4UP — News & Events page hero strip
   4-column event-card grid below page-intro: image + terracotta serif title +
   body paragraph + filled-primary CTA per card. Cards stretch to equal height.

   Wired via wp:query → wp:post-template (hand-picked events). Each card is a
   <li class="wp-block-post">. CSS targets the new structure but keeps the
   __title / __copy / __photo / __cta classes that the post-template inner
   blocks carry as className attributes.

   --- FIGMA MEASUREMENTS (Sprint 1 / News-Events / Group 262 4249:1270) ---
   Container:  1201 × 459 px, 4 cards × 246 wide + 3 gaps × 72 = 1200 px
               Title: top 1235 (28 px below image bottom)
               Body:  top 1282 (19 px below title baseline)
               CTA:   top 1458 (32 px below body bottom, anchored to grid row bottom)

   Per card:
     Image:    246 × 168 px, background #F5F5F5 (placeholder, no radius)
     Title:    Source Serif Pro Regular 21/28, terracotta #C7401C, width 247
     Body:     Mr Eaves XL Modern Regular 18/24, primary teal, width 247
     Button:   Padding 13/24/12, filled primary teal #00557A, white label,
               Mr Eaves Heavy 12 +6% UPPER. Width hugs label content.

   --- END MEASUREMENTS --- */

.wp-block-group.hodc-featured-events-4up {
	background-color: var(--wp--preset--color--white);
	padding: 40px 24px 80px;
	box-sizing: border-box;
}

/* Grid wrapper around the wp:query block — center on the 1200 content rail. */
.hodc-featured-events-4up__grid {
	max-width: 1200px;
	margin-inline: auto;
}

/* The wp:post-template <ul> is the actual 4-column grid. WP core's
   is-layout-grid applies grid-template-columns inline; we just need to lock
   column gap to 72 px and remove default <ul> spacing. */
.hodc-featured-events-4up__list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-gap: 72px;
	row-gap: 0;
}

/* Each card = one <li class="wp-block-post">. Stretch to fill grid cell and
   become a flex column so the CTA anchors to the bottom of the card
   regardless of how long the title or body wraps. */
.hodc-featured-events-4up__list > .wp-block-post {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Image — 246 × 168 light-neutral placeholder, no radius. */
.hodc-featured-events-4up__photo {
	margin: 0 0 28px;                          /* 28 px gap image → title */
	width: 100%;
	max-width: 246px;
	aspect-ratio: 246 / 168;
	background-color: var(--wp--preset--color--surface-neutral); /* #F5F5F5 */
	border-radius: 0;
	overflow: hidden;
}
.hodc-featured-events-4up__photo a,
.hodc-featured-events-4up__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Title — Source Serif Pro Regular 21/28, terracotta. */
.hodc-featured-events-4up__title {
	margin: 0 0 19px;                          /* 19 px gap → body */
	font-family: var(--wp--preset--font-family--source-serif-pro);
	font-weight: 400;
	font-size: 21px;
	line-height: 28px;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent-text);
}
.hodc-featured-events-4up__title a {
	color: inherit;
	text-decoration: none;
}
.hodc-featured-events-4up__title a:hover {
	text-decoration: underline;
}

/* Body excerpt — Mr Eaves XL Modern Regular 18/24, primary teal. */
.hodc-featured-events-4up__copy {
	margin: 0 0 32px;                          /* 32 px gap → button */
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	color: var(--wp--preset--color--primary);
}
.hodc-featured-events-4up__copy p:last-child {
	margin: 0;
}

/* "Learn More" CTA — wp:read-more block renders as a single <a class="...">.
   Style it as a filled-primary teal button per Figma. margin-top: auto pulls
   it to the bottom of the flex column so all 4 buttons align horizontally
   regardless of card content height. */
.hodc-featured-events-4up__cta {
	margin-top: auto;                          /* anchor to bottom of card */
	align-self: flex-start;                    /* don't stretch full width */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px 12px;
	background-color: var(--wp--preset--color--primary); /* #00557A */
	color: var(--wp--preset--color--white);
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-weight: 800;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	transition: background-color 160ms ease;
}
.hodc-featured-events-4up__cta:hover,
.hodc-featured-events-4up__cta:focus-visible {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	outline: none;
}

/* Mobile — NOT IN FIGMA. Stack 4-up → 2x2 → 1x4 as viewport shrinks. */
@media (max-width: 1024px) {
	.hodc-featured-events-4up__list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 32px;
		row-gap: 48px;
	}
}

@media (max-width: 600px) {
	.hodc-featured-events-4up__list {
		grid-template-columns: 1fr !important;
		row-gap: 40px;
	}
	.hodc-featured-events-4up__photo {
		max-width: none;
	}
}