/* Structural layout, plus typography/color defaults matching the events-calendar page's Featured
   cards. Colors, spacing, and radius remain controlled via Elementor's Style tab (see
   TheaterShowsWidget::register_*_style_controls()) and win the cascade there when set - these
   values are duplicated here for the same reason as every other widget's CSS in this plugin: a
   widget instance placed by JSON, never opened and saved once through the visual editor, would
   otherwise render with no typography/color at all.

   Layout: a plain uniform grid of same-size cards (2 per row by default, Columns is a Style
   control), exactly like assets/featured-events.css. It used to switch to a hero card + stacked
   column at 3+ shows, which looked wrong with the shows' chosen photos (2026-09-25). */

/* Without an explicit width the widget's own Elementor wrapper shrink-to-fits its content inside
   whatever flex row it's placed in, which collapses the grid below to a sliver. Same fix as
   today-schedule.css. */
.elementor-widget-licm-theater-shows {
	width: 100%;
	flex: 1 1 100%;
}

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

.licm-theater-shows__grid .licm-theater-shows__card {
	height: 320px;
}

/* Full-bleed background-image card, whole card is the link (matches .licm-featured__card in
   assets/featured-events.css exactly, per Anton's 2026-09-11 request) - text-decoration/color
   reset since it's an <a>, and the box-shadow + lift on hover is the affordance that signals
   it's clickable now that there's no visible button doing that job (see the note in
   featured-events.css for where the 400ms lift came from). */
.licm-theater-shows__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%;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.4s ease;
}

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

/* z-index:-1 needs the card's own z-index:0 (not just position:relative) to establish its own
   stacking context, or the negative z-index escapes to an ambiguous ancestor context instead of
   staying scoped under this card - see the identical, fully-worked-out note on
   .licm-featured__card::before in assets/featured-events.css. Same gradient stops too. */
.licm-theater-shows__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(180deg, #1E28551F 47%, #191D31 72%);
	pointer-events: none;
}

.licm-theater-shows__badge,
.licm-theater-shows__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;
}

/* Pinned to the card's top-right corner, 24px in (matching the card padding). The badge is NOT
   pinned - it sits in the card's normal flow above the title. */
.licm-theater-shows__time {
	position: absolute;
	top: 24px;
	right: 24px;
}

.licm-theater-shows__title {
	margin: 0;
	color: #FFFFFF;
}

/* 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-theater-shows__title.licm-theater-shows__title {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.8px;
}

.licm-theater-shows__empty {
	opacity: 0.7;
}

/* Two columns down to tablet, one on phones - same as assets/featured-events.css. !important is
   required, not belt-and-suspenders: Elementor's own per-element generated CSS for
   card_padding/grid_card_height (Style tab controls) is scoped to
   ".elementor-element-XXXXX .licm-theater-shows__X", which outranks a plain class selector on
   specificity alone regardless of source order or media query - see the identical, confirmed-live
   note in assets/featured-events.css. */
@media (max-width: 1024px) {
	.licm-theater-shows__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.licm-theater-shows__grid {
		grid-template-columns: 1fr;
	}

	.licm-theater-shows__grid .licm-theater-shows__card {
		height: 260px !important;
	}

	.licm-theater-shows__card {
		padding: 20px !important;
	}

	.licm-theater-shows__time {
		top: 20px !important;
		right: 20px !important;
	}

	.licm-theater-shows__title.licm-theater-shows__title {
		font-size: 28px;
	}
}