/* Structural layout, plus typography/color defaults matching Michael's "Save the Date!" homepage
   mockup (post 20). Colors, spacing, and radius remain controlled via Elementor's Style tab (see
   HomeFeaturedEventWidget::register_*_style_controls()) and win the cascade there when set - these
   values are duplicated here for the same reason as assets/featured-events.css: a widget instance
   placed by JSON, never opened and saved once through the visual editor, would otherwise render
   with no typography/color at all.

   Per Anton's 2026-09-11 request, this now matches the events-calendar page's Featured grid card
   (assets/featured-events.css) exactly - whole card is the link, no separate button, same white
   date badge/hover lift. Only the card's own height differs between the two pages. */

/* Outer/inner wrapper for the slide-with-scroll behavior (see assets/home-featured-event.js) -
   same pattern as .licm-events-grid-app__sidebar/-inner in assets/events-grid.css. The outer
   needs height:100% to actually fill the column's stretched height (Elementor containers default
   to align-items:stretch when unset, so the "Save the Date" column already matches the "Today at
   LICM" column's height at the container level - but a widget's own content doesn't inherit that
   automatically without height:100% chained all the way through the Elementor wrapper divs) and
   position:relative as the anchor for the JS's position:absolute end-of-scroll fallback. The
   inner has no explicit height of its own - it just wraps the card (whose own height is a
   separate Style-tab control) and is what actually gets position:fixed/absolute toggled while
   scrolling. */
.elementor-widget-licm-home-featured-event,
.elementor-widget-licm-home-featured-event > .elementor-widget-container {
	height: 100%;
}

.licm-home-featured {
	height: 100%;
	position: relative;
}

/* Whole card is the link (matches .licm-featured__card in assets/featured-events.css exactly,
   including the box-shadow + lift hover - see the note there for where the 400ms lift came
   from). */
.licm-home-featured__card {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 16px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 380px;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.4s ease;
}

.licm-home-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 text stays legible regardless of the photo's
   own colors - same technique, same gradient stops, and same z-index reasoning as
   .licm-featured__card::before in assets/featured-events.css. */
.licm-home-featured__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(180deg, #1E28551F 47%, #191D31 72%);
	pointer-events: none;
}

/* White pill, dark text - matches .licm-featured__date in assets/featured-events.css exactly. */
/* Date + time pills share one row pinned to the card's top edge (date left, time right, wrapping
   under the date if the card is too narrow) - same approach as .licm-events-grid__badges. */
.licm-home-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 styling as .licm-events-grid__date/__time in assets/events-grid.css, EXCEPT the text is
   14px (not 17px) and the side padding 12px (not 14px): this card is the narrowest of the four
   card types, and at 17px the date and time no longer fit on one row (2026-09-23). */
.licm-home-featured__date,
.licm-home-featured__time {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #21232C;
	background-color: #FFFFFF;
	padding: 6px 12px;
	border-radius: 12px;
}

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

.licm-home-featured__title {
	margin: 0;
}

/* Doubled selector to out-specificity the theme's global Elementor kit "h3" rule - same reasoning
   as .licm-featured__title.licm-featured__title in assets/featured-events.css. */
.licm-home-featured__title.licm-home-featured__title {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.8px;
	color: #FFFFFF;
}

.licm-home-featured__excerpt {
	margin: 0;
	color: #FFFFFF;
}

.licm-home-featured__empty {
	opacity: 0.7;
}

/* Matches the "What's Happening" section's own row-to-column stacking breakpoint (Elementor's
   default tablet breakpoint, set on the section's Elementor container) - once the two columns
   stack, there's no taller sibling to slide alongside, so the sticky behavior (and the height:100%
   it depends on) is turned off entirely; see the matching STICKY_BREAKPOINT check in
   assets/home-featured-event.js and the identical pattern for the events-calendar page's sidebar
   in assets/events-grid.css. */
@media (max-width: 1024px) {
	.elementor-widget-licm-home-featured-event,
	.elementor-widget-licm-home-featured-event > .elementor-widget-container,
	.licm-home-featured {
		height: auto;
	}
}

/* !important is required, not belt-and-suspenders: Elementor's own per-element generated CSS for
   card_height/card_padding (Style tab controls) is scoped to
   ".elementor-element-XXXXX .licm-home-featured__card", which outranks a plain class selector on
   specificity alone regardless of source order or media query - see the identical note in
   assets/featured-events.css, confirmed there via live testing. */
@media (max-width: 640px) {
	.licm-home-featured__card {
		height: 300px !important;
		padding: 20px !important;
	}

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

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

	.licm-home-featured__title.licm-home-featured__title {
		font-size: 28px;
	}
}