/* Structural layout, plus typography defaults matching Michael's design (verified via live computed styles). Colors, spacing, and radius remain controlled via Elementor's Style tab (see EventsGridWidget::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. Layout is a sidebar (filters, sticky) + grid (cards) - not a horizontal filter bar above the grid. */ /* Without an explicit width, this widget's own Elementor wrapper only shrink-to-fits its content inside whatever flex row it's placed in - same issue and same fix as .elementor-widget-licm-today-schedule in assets/today-schedule.css, since the AJAX pagination/filter swap (see assets/events-grid.js) can replace the results with a narrower set of cards than the initial server-render happened to have. */ .elementor-widget-licm-events-grid { width: 100%; flex: 1 1 100%; } .licm-events-grid-app__layout { display: flex; align-items: stretch; gap: 60px; } /* align-items:stretch above (not flex-start) makes this flex item's box match the results column's height instead of just its own (short) content height - the JS sticky logic in assets/events-grid.js needs that full height to know when to stop following the scroll and pin to the bottom instead. position:relative is the anchor for that JS's position:absolute fallback (see initStickySidebar()). */ .licm-events-grid-app__sidebar { flex: 0 0 300px; width: 300px; position: relative; } /* No CSS position:sticky here - see the long comment on initStickySidebar() in assets/events-grid.js for why plain CSS sticky doesn't reliably work on this page (a site-wide overflow-x:hidden rule on html/body has the side effect of making register as an ambiguous second scroll container) and why this is handled in JS instead. White box + radius matches the reference page's filter box (Michael's /events-calendar/ page). */ .licm-events-grid-app__sidebar-inner { width: 100%; background-color: #FFFFFF; border-radius: 12px; padding: 24px; box-sizing: border-box; } .licm-events-grid-app__main { flex: 1; min-width: 0; } .licm-events-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* 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 now, and the box-shadow transition is the hover affordance that replaces the removed button as the "this is clickable" signal. */ /* box-shadow + lift on hover: this used to only come from a page-specific Elementor Custom CSS rule (".gridcards-cw .licm-events-grid__item:hover", added directly on this page, post 1630) rather than from this plugin's own CSS - per Anton's 2026-09-11 request that all four card types (this grid, Featured, homepage, Theater Shows) share the same hover effect, it's now a real rule here too, so it's guaranteed regardless of whether that page-specific wrapper class still exists. */ .licm-events-grid__item { position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; background-size: cover; background-position: center; background-repeat: no-repeat; text-decoration: none; color: inherit; transition: box-shadow 0.2s ease, transform 0.4s ease; } .licm-events-grid__item: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 treatment as FeaturedEventsWidget's cards (shared component, see assets/featured-events.css for the reference measurement this was lifted from). z-index:-1 is required - see the detailed comment on .licm-featured__card::before for why a plain position:absolute pseudo-element otherwise paints above the static-flow .licm-events-grid__link content and hides the title underneath it, and for why the item itself needs z-index:0 (not just position:relative) for the negative z-index to actually stay scoped to this card. */ .licm-events-grid__item::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(180deg, #1E28551F 47%, #191D31 72%); pointer-events: none; } .licm-events-grid__link { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: inherit; } /* Pinned to the card's top-left corner, 40px from each edge - same technique (and same reasoning for why it's a hardcoded 40px rather than top:0/left:0) as .licm-featured__date, see assets/featured-events.css - independent of the title/location block that stacks at the bottom via .licm-events-grid__link's flex layout. Bigger + accent-colored per the 2026-09-03 client call - see the matching comment on .licm-featured__date for why this color/size. */ /* Date + time badges share one row pinned to the card's top edge (24px in, matching the card padding): date on the left, time on the right, with a gap between - and flex-wrap lets the time drop under the date, rather than the two colliding, whenever the card is too narrow for both (phones, narrow desktop columns). */ .licm-events-grid__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; } /* One pill spec shared by every card type's date + time (events grid, Featured, homepage Save the Date, Theater) - unified 2026-09-23 after they'd drifted apart: 17px bold uppercase, 0.5px tracking, 6px 14px padding, 12px radius, dark text on white. */ .licm-events-grid__date, .licm-events-grid__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; } /* The event's hours - a mirror image of the date pill, pushed to the right end of the badges row (or wrapping under the date if the card is too narrow). Shares the date pill's Elementor Style controls (see EventsGridWidget), so changing one changes both. */ .licm-events-grid__time { margin-left: auto; } .licm-events-grid__title, .licm-events-grid__location, .licm-events-grid__excerpt { margin: 0; } /* Clamped to two lines: cards are a fixed height (320px by default) with overflow hidden, and with no manual excerpt WordPress auto-trims ~55 words from the post body, which would otherwise push the title and date badges out of the card. */ .licm-events-grid__excerpt { margin-top: 8px; font-size: 16px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* 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-events-grid__title.licm-events-grid__title { font-size: 40px; font-weight: 700; letter-spacing: -0.8px; } .licm-events-grid__readmore { display: inline-block; } .licm-events-grid__empty { opacity: 0.7; } .licm-events-grid-app__results[aria-busy="true"] { opacity: 0.6; } .licm-events-grid__pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin-top: 2em; justify-content: center; } .licm-events-grid__page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; height: 2.2em; padding: 0 0.5em; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15); text-decoration: none; color: inherit; } .licm-events-grid__page-ellipsis { padding: 0 0.25em; opacity: 0.6; } .licm-events-grid__page-link.is-active { background: rgba(0, 0, 0, 0.85); color: #fff; border-color: transparent; } /* Filters sidebar - fields stack vertically to fit the narrow column, unlike a horizontal bar. */ .licm-events-grid__filters-heading { margin: 0 0 16px; } /* 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) and forces its 40px default here regardless of load order. */ .licm-events-grid__filters-heading.licm-events-grid__filters-heading { font-size: 28px; font-weight: 700; } .licm-events-grid__filters { display: flex; flex-direction: column; gap: 12px; } .licm-events-grid__filters select, .licm-events-grid__filters input[type="date"] { width: 100%; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 6px; background: #fff; color: inherit; font: inherit; box-sizing: border-box; } /* A visible "From"/"To" label above each date box - added 2026-09-22 because a native date input with nothing entered renders as a genuinely blank box on mobile, with none of the "mm/dd/yyyy" placeholder text some desktop browsers show by default. The