/**
 * Events archive: featured first card + backdrop (lp-featured-band /
 * lp-featured-grid conventions).
 *
 * On a post-template carrying the lp-featured-grid class, the first event
 * spans the full grid row. Because the events archive orders upcoming
 * events soonest-first, the first card is always the next event coming
 * up — the featured one. On desktop it lays out horizontally (photo
 * left, content right) over a blurred, dimmed copy of its own photo
 * bleeding to the band's edges (the launchpad/featured-backdrop block).
 *
 * The past view (`body.lp-events-past`, see inc/events-presentation.php)
 * gets none of this: every card is a plain grid card. Mobile keeps the
 * stacked cards everywhere.
 *
 * Loaded on the frontend AND the editor canvas (editor = frontend).
 */

/* Grid cards stay tidy: clamp excerpts to three lines. On the upcoming
   view the featured first card is exempt; on the past view every card is
   a plain grid card, so all of them clamp. */
.lp-featured-grid > .wp-block-post:not(:first-child) .wp-block-post-excerpt__excerpt,
body.lp-events-past .lp-featured-grid .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* Card titles and category lines read as card chrome, not body links —
   underline only on hover (page-content contexts underline content links
   by default, which gets noisy across a whole card grid; the extra
   .wp-block-group hop outranks that content rule). */
.lp-featured-grid .wp-block-group .wp-block-post-title a,
.lp-featured-grid .wp-block-group .wp-block-post-terms a {
	text-decoration: none;
}

.lp-featured-grid .wp-block-group .wp-block-post-title a:hover,
.lp-featured-grid .wp-block-group .wp-block-post-terms a:hover {
	text-decoration: none;
}

/* Whole card is the click target: the title link's hit area stretches over
   the card, and hover gives a subtle lift + deeper shadow as the cue.
   Cards carry no other links (excerpt "more" links are part of the same
   post), so the overlay steals nothing interactive. */
.lp-featured-grid > .wp-block-post > .wp-block-group {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lp-featured-grid > .wp-block-post .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

@media (hover: hover) {
	.lp-featured-grid > .wp-block-post > .wp-block-group:hover {
		box-shadow:
			0 1px 2px rgba(11, 36, 56, 0.08),
			0 12px 28px rgba(11, 36, 56, 0.16);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.lp-featured-grid > .wp-block-post > .wp-block-group:hover {
		transform: translateY(-4px);
	}
}

/* The backdrop exists only in the desktop featured treatment. */
.launchpad-featured-backdrop {
	display: none;
}

/* ── Phones: compact horizontal cards ─────────────────────────────────────
   Photo left (square, badge overlaid), title + meta right, no excerpt.
   The desktop media block below restores the stacked card. */
.lp-featured-grid > .wp-block-post > .wp-block-group {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	column-gap: 0.875rem;
	align-items: center;
	position: relative;
	padding: 0.625rem !important;
}

.lp-featured-grid > .wp-block-post .wp-block-post-featured-image {
	grid-column: 1;
	grid-row: 1 / 3;
	position: relative;
	height: 100%;
	min-height: 6.5rem;
	aspect-ratio: auto !important;
}

.lp-featured-grid > .wp-block-post .wp-block-post-featured-image a,
.lp-featured-grid > .wp-block-post .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto !important;
	object-fit: cover;
	border-radius: 10px !important;
}

/* Date badge rides the photo's top-left corner, slightly smaller. */
.lp-featured-grid > .wp-block-post > .wp-block-group > .wp-block-group:nth-child(2) {
	position: absolute;
	top: 1rem;
	left: 1rem;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 1;
}

.lp-featured-grid .launchpad-event-date--badge {
	padding: 0.375rem 0.5625rem;
}

.lp-featured-grid .launchpad-event-date--badge .launchpad-event-date__day {
	font-size: 1.125rem;
}

.lp-featured-grid > .wp-block-post > .wp-block-group > .wp-block-group:nth-child(3) {
	grid-column: 2;
	padding: 0 !important;
}

.lp-featured-grid > .wp-block-post .wp-block-post-title {
	font-size: 1rem !important;
}

.lp-featured-grid > .wp-block-post .wp-block-post-excerpt {
	display: none;
}

/* The page title lives inside the band, above the featured card. Over
   the dark backdrop (desktop, non-past views) it flips to light; on
   mobile and the past view the band is light and it inherits the
   default heading color. */
@media (min-width: 782px) {
	body:not(.lp-events-past) .lp-featured-band > .wp-block-heading,
	body:not(.lp-events-past) .lp-featured-band .wp-block-query-title {
		color: var(--wp--preset--color--base, #fff);
	}

	/* Bands without a tab row (e.g. News): a touch more air under the
	   title than the band's default gap, without opening the full
	   tab-row-sized slot the events archive has. */
	body:not(.lp-events-past) .lp-featured-band:not(:has(.launchpad-event-tabs)) > .wp-block-query {
		margin-top: 3rem;
	}
}

@media (min-width: 782px) {
	/* Restore the stacked card from the phone-only horizontal layout
	   (relative stays: it anchors the stretched title-link overlay). */
	.lp-featured-grid > .wp-block-post > .wp-block-group {
		display: block;
		position: relative;
		padding: 0 0 1.5rem !important;
	}

	.lp-featured-grid > .wp-block-post .wp-block-post-featured-image {
		position: static;
		height: auto;
		min-height: 0;
		aspect-ratio: 3/2 !important;
	}

	.lp-featured-grid > .wp-block-post .wp-block-post-featured-image a,
	.lp-featured-grid > .wp-block-post .wp-block-post-featured-image img {
		position: static;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		border-radius: 14px 14px 0 0 !important;
	}

	.lp-featured-grid > .wp-block-post > .wp-block-group > .wp-block-group:nth-child(2) {
		position: static;
		margin: -2rem 0 0 !important;
		padding: 0 0 0 1.25rem !important;
	}

	.lp-featured-grid .launchpad-event-date--badge {
		padding: 0.625rem 0.875rem;
	}

	.lp-featured-grid .launchpad-event-date--badge .launchpad-event-date__day {
		font-size: 1.5rem;
	}

	.lp-featured-grid > .wp-block-post > .wp-block-group > .wp-block-group:nth-child(3) {
		padding: 0 1.25rem !important;
	}

	.lp-featured-grid > .wp-block-post .wp-block-post-title {
		font-size: var(--wp--preset--font-size--large, 1.125rem) !important;
	}

	.lp-featured-grid > .wp-block-post .wp-block-post-excerpt {
		display: block;
	}

	body:not(.lp-events-past) .lp-featured-band {
		position: relative;
		isolation: isolate;
		overflow: clip;
	}

	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child {
		grid-column: 1 / -1;
		position: relative;
	}

	/* Blurred, dimmed copy of the featured photo, bleeding to the band's
	   edges behind the tabs and the featured card (the band clips it). */
	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child > .launchpad-featured-backdrop {
		display: block;
		position: absolute;
		z-index: -1;
		top: -26rem;
		bottom: calc(-0.5 * var(--wp--preset--spacing--large, 2rem));
		left: 50%;
		width: 100vw;
		transform: translateX(-50%) scale(1.1);
		background-size: cover;
		background-position: center;
		filter: blur(24px);
	}

	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child > .launchpad-featured-backdrop::after {
		content: "";
		position: absolute;
		inset: 0;
		background: color-mix(in srgb, var(--wp--preset--color--dark, #15191d) 60%, transparent);
	}

	/* The tabs sit on the dark backdrop here — lighten the pills. */
	body:not(.lp-events-past) .lp-featured-band .launchpad-event-tabs__tab {
		color: var(--wp--preset--color--base, #fff);
		border-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 50%, transparent);
	}

	body:not(.lp-events-past) .lp-featured-band .launchpad-event-tabs__tab:hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 18%, transparent);
	}

	body:not(.lp-events-past) .lp-featured-band .launchpad-event-tabs__tab[aria-current="page"] {
		background-color: var(--wp--preset--color--primary, #453edb);
		border-color: var(--wp--preset--color--primary, #453edb);
		color: var(--wp--preset--color--base, #fff);
	}

	/* Featured card: horizontal, photo left, content right. */
	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child > .wp-block-group {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--medium, 1.5rem);
		align-items: center;
		position: relative;
		/* The stacked card pads its bottom; here the photo owns the full
		   left edge, top to bottom. */
		padding-bottom: 0 !important;
	}

	/* Photo fills the left column top-to-bottom. The block inlines a 3/2
	   aspect ratio (hence the !important), and the image is taken out of
	   flow so its intrinsic height can't stretch the card — the content
	   column and the min-height set the row. */
	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child .wp-block-post-featured-image {
		grid-column: 1;
		grid-row: 1;
		position: relative;
		height: 100%;
		min-height: 340px;
		aspect-ratio: auto !important;
	}

	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child .wp-block-post-featured-image a,
	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child .wp-block-post-featured-image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto !important;
		object-fit: cover;
		/* The card's inline radius rounds the top corners; here the photo
		   owns the left edge instead. */
		border-radius: 14px 0 0 14px !important;
	}

	/* Badge row: pinned to the photo's top-left corner. */
	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child > .wp-block-group > .wp-block-group:nth-child(2) {
		position: absolute;
		top: 1rem;
		left: 1rem;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 1;
	}

	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child > .wp-block-group > .wp-block-group:nth-child(3) {
		grid-column: 2;
		grid-row: 1;
		margin: 1.5rem 0 !important;
		padding-right: 2rem !important;
	}

	/* Featured type scale — the preset font-size classes are !important,
	   so these overrides have to be too. */
	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--xxx-large, 2rem) !important;
	}

	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child .wp-block-post-excerpt {
		font-size: var(--wp--preset--font-size--large, 1.125rem) !important;
	}

	body:not(.lp-events-past) .lp-featured-band .lp-featured-grid > .wp-block-post:first-child .launchpad-event-date:not(.launchpad-event-date--badge) {
		font-size: 0.8125rem !important;
	}
}