/* ============================================
   Upcoming Coalition Dinner — [pfk_upcoming_dinners]
   Scoped to .pfk-upcoming-dinner and .pfk-event-buttons

   Built from Figma node 2550:10213
   (Playing for Keeps Website Redev).

   The "Upcoming Dinners" heading in that frame is not part of this
   component — it lives in Avada alongside the shortcode.
============================================ */

.pfk-upcoming-dinner {
	/* Figma: 24px between the detail lines and the button row. */
	--pfk-upcoming-dinner-gap: var(--sp-5, 24px);

	/* Figma: 32px between buttons (274px + 32 = 306 offset). */
	--pfk-event-buttons-gap: 32px;

	display: flex;
	flex-direction: column;
	gap: var(--pfk-upcoming-dinner-gap);
	text-align: left;
}

/* ----------------------------------------
   Detail lines
   Figma: DIN 2014 Demi, 18px / 1.5, all four lines identical.
   Line height alone provides the spacing, so the gap is zero.

   These are divs rather than paragraphs so theme p margins can never
   creep in between the lines.
---------------------------------------- */
.pfk-upcoming-dinner__details {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pfk-upcoming-dinner__details > div {
	margin: 0;
	font-size: var(--fs-bigbody, 18px);
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: var(--awb-color5, #213163);
}

/* ----------------------------------------
   Button row
   The Avada fusion_button styling is authoritative and untouched; this
   only positions the buttons side by side per Figma.
---------------------------------------- */
.pfk-event-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--pfk-event-buttons-gap);
}

/*
 * The supplied fusion_button carries alignment="center" and
 * margin_bottom="var(--sp-3)". Inside this flex row the gap handles spacing,
 * so neutralize the wrapper margins to keep the row flush with Figma.
 * The button's own colors, padding, and typography are left alone.
 */
.pfk-event-buttons > * {
	margin: 0;
}

.pfk-event-buttons .fusion-button {
	margin-bottom: 0;
}

/* ----------------------------------------
   Responsive — IDG breakpoints
---------------------------------------- */

/* Mobile: buttons stack full width, matching the Figma
   alignment_small="left" on the supplied button. */
@media (max-width: 767px) {
	.pfk-event-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-3, 12px);
	}

	.pfk-event-buttons .fusion-button {
		width: 100%;
		justify-content: center;
	}
}