/* Structural layout, plus typography defaults matching Michael's 2026-09-01 redesign (verified
   via live computed styles). Colors, spacing, and radius remain controlled via Elementor's Style
   tab (see FeaturedEventsWidget::register_*_style_controls()) and win the cascade there when set.
   The typography values are duplicated here because Elementor's Group_Control_Typography only
   ever emits CSS for a value actually present in a widget's saved settings - never from the
   control's own PHP-side default - so a widget instance placed by JSON, never opened and saved
   once through the visual editor, renders with no typography at all without this fallback. Card
   design itself is a full-bleed background-image card with content overlaid at the bottom-left,
   not a separate image-top/white-body-below card. Per 2026-09-03 client feedback all cards are
   the same size (2 per row by default) - there's no more large "hero" card. */

.licm-featured__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

/* The whole card is the link (per the 2026-09-03 client call: one action per card, view details
   and buy tickets from the event's own page, not a separate CTA button) - text-decoration/color
   reset since it's an <a> now, and the box-shadow + lift on hover is the affordance that replaces
   the removed button as the "this is clickable" signal. The translateY/400ms lift matches a
   hover effect Michael/Anton had added as page-specific Elementor Custom CSS scoped to a
   ".gridcards-cw" wrapper around the Upcoming Events grid on the live events-calendar page
   (post 1630) - per Anton's 2026-09-11 request that all four card types share one hover effect,
   it's brought in here (and into home-featured-event.css/theater-shows.css/events-grid.css) as a
   real plugin rule instead of a page-specific snippet that only covered one of the four. */
.licm-featured__card {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 12px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 320px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.4s ease;
}

.licm-featured__card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	transform: translateY(-1px);
}

/* Dark gradient over the photo so the white title/excerpt text stays legible regardless of the
   photo's own colors - matches Michael's design exactly (measured from the reference page's own
   Elementor "Background Overlay" pseudo-element). z-index:-1 is required: a position:absolute
   pseudo-element (even with no explicit z-index) paints ABOVE any normal-flow static sibling
   regardless of DOM order - positioned descendants form their own paint layer on top of in-flow
   block content - so without this the gradient hid the title underneath it entirely. Negative
   z-index drops it below the card's own stacking context, under everything. This only works
   because the card itself has z-index:0 (not just position:relative), which is what actually
   makes it establish its OWN local stacking context - without that, a negative z-index child
   escapes to whatever the nearest ancestor stacking context happens to be (could be much further
   up the page) instead of staying scoped under this specific card. */
.licm-featured__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(180deg, #1E28551F 47%, #191D31 72%);
	pointer-events: none;
}

/* Pinned to the card's top-left corner, 40px from each edge - matches Michael's design (measured
   from the reference page) and the card's own default padding (see card_padding control), though
   the two aren't linked: an absolutely positioned child's containing block is the parent's
   PADDING box's outer edge, not inset by the padding itself (padding only affects normal-flow
   children), so top/left have to be set to the actual offset rather than 0. Independent of the
   title/excerpt block that stacks at the bottom via the card's own flex layout. Bigger + orange
   per the 2026-09-03 client call ("make the date a little bit bigger and... orange or
   something") - many visitors are grandparents, and this is one of the first things people scan
   a card for. #FF8300 is a literal value per that same feedback (not the kit's own
   --e-global-color-secondary variable, which didn't match). */
/* Date + time badges share one row pinned to the card's top edge - see .licm-events-grid__badges
   in assets/events-grid.css for why (flex-wrap instead of colliding on narrow cards). */
.licm-featured__badges {
	position: absolute;
	top: 24px;
	left: 24px;
	right: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px 12px;
}

/* Same pill spec as .licm-events-grid__date/__time in assets/events-grid.css. */
.licm-featured__date,
.licm-featured__time {
	display: inline-block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #21232C;
	background-color: #FFFFFF;
	padding: 6px 14px;
	border-radius: 12px;
}

.licm-featured__time {
	margin-left: auto;
}

.licm-featured__title {
	margin: 0;
}

/* Doubled selector to out-specificity the theme's global Elementor kit "h3" rule (one class +
   one type = 0,1,1), which otherwise wins over a plain single-class selector (0,1,0) regardless
   of load order. Currently matches the kit's own h3 default anyway, but pinning it here means a
   future change to the site-wide kit typography can't silently change this card's title too. */
.licm-featured__title.licm-featured__title {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.8px;
}

.licm-featured__excerpt {
	margin: 0;
}

.licm-featured__empty {
	opacity: 0.7;
}

@media (max-width: 1024px) {
	.licm-featured__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* !important is required, not just belt-and-suspenders: Elementor's own per-element generated CSS
   for card_padding/card_height (Style tab controls) is scoped to
   ".elementor-element-XXXXX .licm-featured__card", which outranks a plain class selector on
   specificity alone regardless of source order or media query - confirmed live, these rules were
   silently losing to the desktop defaults at mobile widths before !important was added. */
@media (max-width: 640px) {
	.licm-featured__card {
		height: 260px !important;
		padding: 20px !important;
	}

	.licm-featured__badges {
		top: 20px !important;
		left: 20px !important;
		right: 20px !important;
	}

	.licm-featured__time {
		margin-left: 0;
	}

	.licm-featured__grid {
		grid-template-columns: 1fr;
	}
}