/**
 * Pattern: Upcoming Events (Home band)  (patterns/upcoming-events.php)
 *
 * Figma source: node 6:22 — Home "Events band". Full-bleed Deep Petrol band,
 * centered Sky-Cyan "Upcoming Events" eyebrow, white H2, the
 * [blg_upcoming_events layout="featured" count="2"] 2-up grid (styled in
 * event-card-2up.css — this pattern's sibling partial), and a centered
 * "View All Events" pill: Sky Cyan fill, PETROL text (not white — a one-off
 * button treatment scoped to this pattern only, see §CTA below).
 *
 * This band used to share card-grid.css's `.kd-card-grid-section` classes with
 * patterns/card-grid.php + patterns/card-grid-query.php. Re-scoped to its own
 * `.blg-upcoming-events*` classes (this file) so this pattern owns its look
 * independently — zero edits to card-grid.css, zero risk to those two
 * (separately-owned) patterns. One pattern = one CSS partial.
 */

/* ── Band ─────────────────────────────────────────────────────────────────── */

.blg-upcoming-events {
	padding-block: var(--blg-space-xl) !important; /* 64px top + bottom */
	text-align: center;
}

/* ── Eyebrow — Sky Cyan, Raleway Black, +8% tracking, uppercase (morning-r6:
   unified to .kd-split__eyebrow's exact family/weight spec site-wide — Alain's
   picked "Why B Local" weight — accent color kept here since the band is
   dark, not the primary-blue used on light bands). Was Inter/600. ───────── */

.blg-upcoming-events__eyebrow {
	/* Type comes from the shared `.kd-eyebrow` rule (global.css). Only the
	   colour and rhythm are this pattern's: Sky Cyan, because this eyebrow sits
	   on the Deep Petrol events band. */
	line-height: 1.43;
	color: var(
		--blg-color-accent
	); /* Sky Cyan (--wp--preset--color--accent alias) */
	margin: 0 0 var(--blg-gap-tight); /* 8px eyebrow → heading */
}

/* ── Heading — white, Raleway ExtraBold, Figma H2 (32px) ─────────────────── */

.blg-upcoming-events__heading {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-h2-section) !important; /* shared section scale */
	line-height: var(--blg-lh-h2-section);
	margin: 0 0 var(--blg-space-lg); /* 40px heading → grid */
}

/* ── CTA — "View All Events": Sky Cyan pill, PETROL text (Figma 6:22 exactly —
   the only place this accent/contrast pairing is used; scoped to this
   pattern's own class, not a new global button variant).

   BUG FOUND IN VERIFICATION (live computed-style check on _pattern-lab): the
   original 2-class selector (`.blg-upcoming-events__cta .wp-block-button__link`)
   LOST to global.css's default filled-button rule
   (`.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
   .wp-block-button__link`, which carries 4 class-selectors of specificity —
   each :not() counts its argument). Computed bg rendered Georgia Blue
   (--blg-color-primary), not Sky Cyan. Same trap already documented in
   cta-band.css/hero-home.css for their own button overrides — matching their
   fix: scope through the actual `.wp-block-button` element + this modifier
   class so the selector reaches the same 4-class weight and wins on source
   order (patterns/*.css enqueues after global.css). ─────────────────────── */

.blg-upcoming-events__cta-wrap {
	margin-top: var(--blg-space-lg); /* 40px grid → button */
}

.blg-upcoming-events
	.wp-block-button.blg-upcoming-events__cta
	.wp-block-button__link {
	background-color: var(--blg-color-accent); /* Sky Cyan */
	color: var(--blg-color-contrast); /* Deep Petrol */
	border-color: var(--blg-color-accent);
}

.blg-upcoming-events
	.wp-block-button.blg-upcoming-events__cta
	.wp-block-button__link:hover,
.blg-upcoming-events
	.wp-block-button.blg-upcoming-events__cta
	.wp-block-button__link:focus-visible {
	background-color: color-mix(
		in srgb,
		var(--blg-color-accent) 85%,
		var(--blg-color-base)
	);
	border-color: color-mix(
		in srgb,
		var(--blg-color-accent) 85%,
		var(--blg-color-base)
	);
	color: var(--blg-color-contrast);
}

/* ── Tablet (≤1024px) ─────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
}

/* ── Phone (≤768px) ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.blg-upcoming-events {
		padding-block: var(--blg-space-lg) !important; /* 40px */
	}
}