/* ===========================================================================
   UPCOMING-EVENTS — News & Events page mid-section (3-up, hand-picked)
   Centered "Upcoming Events" terracotta H2 + intro paragraph, then a 3-column
   event-card grid. Each card: image with asymmetric 0/50/0/50 corners +
   primary-teal serif title (semibold) + body + terracotta-accent CTA.

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

   --- FIGMA MEASUREMENTS (Sprint 1 / News-Events — Sasha-provided 2026-06-12) ---
   Container:  1200 × 696 px (incl. section heading + intro + 3-card row)
               3 cards × 384 wide + 2 gaps × 24 = 1200 px

   Per card:
     Image:    384 × 212 px (Figma rectangles 370–374 × 212; normalized to 384)
               background #F5F5F5, border-radius 0 50px 0 50px (asymmetric)
     Title:    Source Serif Pro Semibold 28/36, primary teal #00557A
     Body:     Mr Eaves XL Modern Regular 18/28, primary teal
     Button:   Padding 13/24/12, filled terracotta #C6401C, white label,
               Mr Eaves Heavy 14/14 weight 800 +6% UPPER. Width hugs label.

   Gaps within card:
     Image → title:   32 px
     Title → body:    12 px
     Body  → button:  32 px (button anchored to card bottom via margin-top:auto)

   NOT IN FIGMA — proposed pending Sasha review:
     - Hover state: darken to accent-text on hover (160ms ease)
     - <1024px responsive — 2-up then 1-up stack
   --- END MEASUREMENTS --- */

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

.hodc-upcoming-events__heading {
	font-family: var(--wp--preset--font-family--source-serif-pro);
	font-size: 42px;
	line-height: 52px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 24px;
	text-align: center;
}

/* Intro reads as body copy at 18/28 — bumped to 24/36 per #9901826020 to
 * sit noticeably above the body-copy ramp and match the page-intro
 * news-events lead's p-large treatment. */
.hodc-upcoming-events__intro {
	font-family: var(--wp--preset--font-family--mr-eaves-xl-modern);
	font-size: 24px;
	line-height: 36px;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	max-width: 720px;
	margin: 0 auto 64px;
}

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

/* The wp:post-template <ul> is the actual 3-column grid. Lock column gap to
   24 px per Figma and remove default <ul> spacing. */
.hodc-upcoming-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-gap: 24px;
	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-upcoming-events__list > .wp-block-post {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	align-self: stretch;
}

/* Image — 384 × 212 light-neutral placeholder with asymmetric 0/50/0/50
   corners. Override is-style-asymmetric-radius if it differs; the
   border-radius lives on the wrapper so background + img both clip. */
.hodc-upcoming-events__photo {
	margin: 0 0 32px;                          /* 32 px gap image → title */
	width: 100%;
	aspect-ratio: 384 / 212;
	background-color: var(--wp--preset--color--surface-neutral); /* #F5F5F5 */
	border-radius: 0 50px 0 50px !important;
	overflow: hidden;
}
.hodc-upcoming-events__photo a,
.hodc-upcoming-events__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* Title — Source Serif Pro Semibold 28/36, primary teal. */
.hodc-upcoming-events__title {
	margin: 0 0 12px;                          /* 12 px gap → body */
	font-family: var(--wp--preset--font-family--source-serif-pro);
	font-weight: 600;
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
}
.hodc-upcoming-events__title a {
	color: inherit;
	text-decoration: none;
}
.hodc-upcoming-events__title a:hover {
	text-decoration: underline;
}

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

/* "Learn More" CTA — wp:read-more block renders as a single <a class="...">.
   Style as a filled-terracotta button per Figma. margin-top: auto pulls it to
   the bottom of the flex column so the buttons sit at variable baselines
   matching content height (Figma shows different button tops per card). */
.hodc-upcoming-events__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--accent); /* #C6401C */
	color: var(--wp--preset--color--white);
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-weight: 800;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	transition: background-color 160ms ease;
}
.hodc-upcoming-events__cta:hover,
.hodc-upcoming-events__cta:focus-visible {
	background-color: var(--wp--preset--color--accent-text);
	color: var(--wp--preset--color--white);
	outline: none;
}

/* Mobile — NOT IN FIGMA. Stack 3-up → 2x then 1x as viewport shrinks. */
@media (max-width: 1024px) {
	.hodc-upcoming-events__list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 24px;
		row-gap: 48px;
	}
}

@media (max-width: 600px) {
	.hodc-upcoming-events__list {
		grid-template-columns: 1fr !important;
		row-gap: 40px;
	}
}