/*
 * Featured Event hero — layout only (Phase 4G premium hero). Deliberately
 * isolated from frontend-event-card.css: the hero is a distinct
 * presentation component, not a card variant — see DECISIONS.md,
 * Decision 025. Registered with frontend-event-card.css as a dependency
 * (Frontend\FeaturedEventRenderer::register_assets()) so this file can
 * rely on its :root design tokens (fonts, colors, CTA/badge tokens) and
 * reuse its .jdx-events-card-badge and .jdx-events-card-cta atomic classes
 * as-is in templates/featured-event.php.
 *
 * Cinematic full-bleed layout (Phase 4G): the existing media/content
 * siblings are layered via position/z-index rather than restructured —
 * .jdx-events-featured__media becomes a full-bleed absolutely-positioned
 * image layer (inset:0), a ::before pseudo-element on .jdx-events-featured
 * itself supplies the left-to-right readability gradient, and
 * .jdx-events-featured__content overlays both. No new DOM nodes were
 * needed for any of this. (The content column's width was originally
 * constrained to ~55% here; Decision 035/v0.2.25 widened it to span
 * nearly the full hero, with per-child max-width caps instead — see
 * .jdx-events-featured__content's own comment below.)
 *
 * Height strategy (v0.2.29): `aspect-ratio` combined with a fixed
 * `min-height: 280px` removed the browser's automatic content-based
 * minimum size (which only applies while min-height computes to `auto`),
 * so real content (a long title, rooms, description, pricing, CTAs)
 * could overflow the box's own resolved height with nothing to reconcile
 * the two — no clipping (nothing used overflow:hidden), but the
 * background/gradient layers and the next Elementor element on the page
 * both stopped at the box's too-short resolved height. Confirmed by live
 * DevTools measurement at a 1140px boxed Elementor container width.
 *
 * Fix: `aspect-ratio` removed entirely; `min-height` is now a
 * content-aware floor — `min-height: max(280px, 100cqi / 3.1)`, where
 * 100cqi is the query container's own full inline size (the same
 * .elementor-widget-container container-type:inline-size context
 * established below). height:auto (unchanged) still governs final size,
 * so content taller than the floor grows the box instead of overflowing
 * it. The /3.1 divisor is a first-pass estimate from the v0.2.29
 * reference design, pending live validation, same convention as every
 * other tuned value in this file.
 *
 * overflow:hidden is still NOT added. Deferred pending live confirmation
 * that the height fix alone makes the box's resolved height always
 * match its content across boxed/full-width/narrow Elementor containers,
 * and that it would not clip the title link's focus-visible ring (which
 * uses a positive outline-offset).
 *
 * Color architecture: the Featured badge and the accent used for Pricing
 * both reuse the *existing* CTA accent token chain
 * (--jdx-events-cta-primary-bg/-fg, already defined in
 * frontend-event-card.css's :root, already chained through Elementor's
 * --e-global-color-accent) rather than a new literal color — so a site's
 * own configured Global Accent Color (e.g. Sakura's champagne/gold)
 * applies automatically, and this file stays reusable across any future
 * client site exactly like the rest of this plugin (CLAUDE.md §5).
 *
 * Responsive architecture (Featured Event Responsive Stabilization,
 * v0.2.25 development cycle): the previous single viewport-only
 * `@media(max-width:780px)` rule has been replaced by CSS Container
 * Queries keyed to the component's own rendered width, not the browser
 * viewport — the root cause of the original defect was that an Elementor
 * column narrower than the viewport (e.g. a tablet-width container on a
 * wide desktop browser) still received the full wide-hero treatment,
 * producing content that could grow taller than the box's own computed
 * height and visually bleed above/below it (see the align-items note
 * below).
 *
 * The query container is Elementor's own, already-existing widget
 * wrapper (.elementor-widget-container), scoped to Featured Event
 * instances only via the widget-name class Elementor itself always adds
 * (.elementor-widget-jdx_featured_event) — no markup was added by this
 * plugin, and .jdx-events-featured is a genuine descendant of that
 * wrapper, so its own root-level responsive properties (display,
 * aspect-ratio, align-items, padding) can be restyled from @container
 * rules, which a query container can never do to itself.
 *
 * Three component-width tiers, expressed the same way this file's other
 * two responsive stylesheets in this plugin express their own tiers
 * (base rules = the widest/default tier, @container overrides layer
 * narrower behavior on top, in ascending narrowness):
 *   - WIDE   (effectively >= 960px component width): the base rules
 *     below — today's cinematic overlay hero, unchanged in spirit.
 *   - INTERMEDIATE (@container max-width:959.98px): same overlay
 *     concept, but the content column is never squeezed into the old
 *     fixed 55%/640px width, and the CTA row returns to normal flow.
 *   - NARROW (@container max-width:559.98px): the already-approved
 *     stacked mobile treatment, content-for-content identical to the
 *     previous @media(max-width:780px) block, merely re-anchored to
 *     container width instead of viewport width.
 * Thresholds are initial production values, tunable after live
 * validation — no other breakpoint exists in this file.
 *
 * align-items fix: .jdx-events-featured uses align-items:stretch (was:
 * center) so .jdx-events-featured__content's own height always matches
 * .jdx-events-featured's resolved height by definition — the image/gradient
 * layers (inset:0) then always cover exactly that same box. Content's own
 * vertical distribution within that box is justify-content:flex-start
 * (validation.38 Correction — see .jdx-events-featured__content's own
 * comment below for why centering was replaced). No overflow:hidden was
 * added anywhere — this is a real sizing fix, not a concealment one.
 *
 * No !important anywhere.
 *
 * Elementor styling flexibility (v0.2.29-validation.2): FeaturedEventWidget
 * gained Group_Control_Typography controls for Title, Room/Artist text,
 * and Pricing (Style tab, each paired with its existing/new Color
 * control), plus Normal/Hover Style controls for the More Info CTA, and
 * two Room Badge color controls — see that class's own docblock and
 * each control's own comment for the full rationale. No plain-CSS
 * selector or specificity scheme changed to accommodate this: every new
 * control reuses this file's already-established `{{WRAPPER}} ...`
 * scoping pattern, which already outranks every rule in this file on
 * pure specificity with no source-order dependency. Two existing
 * defaults did change in this same increment — Room/Artist text and
 * Pricing text font-size — see each rule's own comment for the
 * inspected (not assumed) reasoning.
 */

/* Scoped to Featured Event widget instances only, via the widget-name
 * class Elementor itself always adds to the .elementor-element wrapper
 * (FeaturedEventWidget::get_name() === 'jdx_featured_event') — never the
 * bare .elementor-widget-container, which every Elementor widget on the
 * page shares. No markup change: this wrapper is Elementor's own,
 * present identically on the frontend and inside the editor preview. */
.elementor-widget-jdx_featured_event > .elementor-widget-container {
	container-type: inline-size;
	container-name: jdx-events-featured;
}

/* WIDE hero geometry (v0.2.29, supersedes the v0.2.27 validation.1
 * aspect-ratio/min-height pair) — see this file's own top-of-file
 * docblock for the root-cause analysis. min-height is a content-aware
 * floor, not a fixed aspect-ratio; height:auto governs final size once
 * content exceeds it. The INTERMEDIATE tier's own now-dead
 * `aspect-ratio: auto` override (Increment 6C.1) has been deleted below
 * rather than left as a no-op; NARROW's `min-height: 0` is unaffected. */
.jdx-events-featured {
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: max(280px, 100cqi / 3.1);
	width: 100%;
	box-sizing: border-box;
	/* Deterministic literal fallback (not Elementor-chained), same
	 * rationale as the room-badge/status-badge tokens in
	 * frontend-event-card.css's :root: the hero must render as a solid,
	 * legible dark surface even when the event has no poster at all —
	 * see templates/featured-event.php's own conditional __media block. */
	background: #1a1a1a;
	color: #ffffff;
}

/* The readability gradient. Lives on .jdx-events-featured itself (not on
 * __media) so it renders even when __media doesn't exist in the DOM at
 * all (no poster, no status badge) — the hero is always legible.
 * pointer-events: none guarantees this layer can never intercept clicks
 * meant for the title link or CTA buttons above it. */
.jdx-events-featured::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.92) 0%,
		rgba(0, 0, 0, 0.75) 35%,
		rgba(0, 0, 0, 0.35) 60%,
		rgba(0, 0, 0, 0) 85%
	);
}

.jdx-events-featured__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Scoped selector (0,2,0), not the bare class (0,1,0): live DevTools
 * inspection confirmed Elementor's own `.elementor img { height: auto;
 * max-width: 100% }` (0,1,1) was winning against the bare class,
 * leaving height:100% crossed out and the image rendering at its
 * intrinsic aspect ratio — spilling far below the hero instead of
 * filling it. This ancestor-scoped selector outranks Elementor's rule
 * on pure specificity, no !important needed. */
.jdx-events-featured .jdx-events-featured__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Repositioned from the top-left corner (Phase 4B) to the top-right
 * (Phase 4G): the content column now also lives in the left portion of
 * the hero, and status badges pinned to the same corner would risk
 * overlapping it for events with enough content to push the (vertically
 * centered) content column upward. The right side sits over the more
 * visible part of the image, which is safe — the badge always carries
 * its own solid background (.jdx-events-card-badge), never depends on
 * what's behind it for legibility. */
.jdx-events-featured__badges {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
}

/* Sakura Event Logo watermark (Sakura Event Presentation Refinement) —
 * same subtle, non-interactive treatment as Event Grid's own
 * .jdx-events-card-logo (frontend-event-card.css). Deliberately placed
 * top-left, the opposite corner from .jdx-events-featured__badges above:
 * that badge was itself already moved to top-right in Phase 4G
 * specifically to stay clear of the hero's own left-aligned content
 * column, which leaves top-left free for this watermark with no
 * collision — see that rule's own comment. */
.jdx-events-featured__logo {
	position: absolute;
	top: 1rem;
	left: 1rem;
	max-width: 130px;
	max-height: 65px;
	width: auto;
	height: auto;
	z-index: 3;
	pointer-events: none;
	opacity: 0.95;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}

/* Logo containment (v0.2.33-dev.2): same root cause and fix as the Event
 * Grid logo (frontend-event-card.css) — Elementor's `.elementor img`
 * max-width:100% outranked the bare-class cap, so an SVG logo could grow
 * across the hero. Scoped (0,2,0); the 130×65 cap is unchanged. */
.jdx-events-featured .jdx-events-featured__logo {
	max-width: 130px;
	max-height: 65px;
	object-fit: contain;
	object-position: left top;
}

.jdx-events-featured .jdx-events-featured__logo--svg {
	width: 130px;
	height: 65px;
}

/* WIDE/INTERMEDIATE base: spans (nearly) the full hero width rather than
 * the old fixed 55%/640px column — this is what fixed the original
 * intermediate-width defect: text is never forced into an unstable,
 * ever-narrower percentage column as the component's own width shrinks.
 * Individual text-bearing children instead carry their own ~640px
 * readability cap (see each selector below), reset to none at the
 * INTERMEDIATE tier where there usually isn't 640px of column to begin
 * with.
 *
 * justify-content: flex-start, not center (validation.38 Correction):
 * centering was the exact mechanism behind the live-validated "badge/date
 * above the hero, CTA below it" defect — content that exceeds a
 * shorter-than-ideal box spills symmetrically in both directions when
 * centered. Top-aligning the content stack means it always starts
 * predictably right after the padding (matching the reference's own
 * top/left-grouped composition far more directly than vertical centering
 * ever did), and any overflow from genuinely long content now only ever
 * extends downward — a single, predictable direction, not a symmetric
 * split. This is a shared-rule change (not WIDE-scoped), but it is a
 * no-op at the NARROW tier: that tier's own aspect-ratio:auto/min-height:0
 * already leaves no spare cross-axis space to distribute, so centered vs.
 * top-aligned renders identically there. */
.jdx-events-featured__content {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	max-width: none;
	min-width: 0;
	box-sizing: border-box;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Explicit order on every child (Phase 4G content hierarchy): badge,
 * date, time, title, headline, rooms, description, pricing, actions.
 * Rooms/Description previously had distinct `order: 6`/`order: 7` values
 * because Rooms followed Description in the DOM and needed pulling ahead
 * visually — a disclosed screen-reader reading-order trade-off (Decision
 * 029). v0.2.29 moved Rooms before Description in the DOM directly, so
 * the two now share one `order` value: flex `order` only groups elements
 * into ordinal bands, and elements sharing a band keep their relative
 * DOCUMENT order within it — so `order: 6` on both, combined with
 * Rooms-before-Description in the DOM, reproduces the same visual
 * position with no separate ordinal needed. */
.jdx-events-featured__rooms,
.jdx-events-featured__description {
	order: 6;
}

/* Gold background / dark text (validation.1, v0.2.27 — live Sakura
 * visibility correction): previously var(--jdx-events-cta-primary-bg)
 * (which resolves to var(--e-global-color-accent, #1a1a1a)), so absent
 * an Elementor global accent color this badge rendered dark-on-dark
 * against the hero's own dark gradient — easy to miss. Uses this
 * plugin's own established Sakura gold pair directly
 * (--jdx-events-room-badge-bg/-text, frontend-event-card.css — the same
 * tokens the Room badge already uses everywhere), not Elementor's global
 * accent: an Elementor site could define its accent as any color, which
 * would no longer guarantee gold specifically. font-size/padding scaled
 * ~20% up from the shared .jdx-events-card-badge base (0.75em/0.25em
 * 0.6em) for stronger presence, scoped to this modifier only — no other
 * badge (Sold Out/Cancelled/Postponed/Room, here or elsewhere) is
 * affected. */
.jdx-events-card-badge--featured {
	order: 1;
	align-self: flex-start;
	margin-bottom: 0.75em;
	font-size: 0.9em;
	padding: 0.3em 0.72em;
	background: var(--jdx-events-room-badge-bg, #c9a227);
	color: var(--jdx-events-room-badge-text, #1a1a1a);
}

/* Visual Correction Increment: Date and Time now share one row
 * (.jdx-events-featured__meta below) instead of being two separate
 * ordered flex children of .jdx-events-featured__content — the meta row
 * itself now carries order:2 in their place; order:3 is retired rather
 * than reused, so the remaining sequence (title 4, headline 5, ...) is
 * left exactly as-is below with no renumbering needed (flex `order`
 * values don't need to be contiguous). Rooms/Description's own order
 * (previously 6/7) is declared once, shared, further up this file — see
 * that rule's own comment (v0.2.29). */
.jdx-events-featured__title {
	order: 4;
}

.jdx-events-featured__headline {
	order: 5;
}

.jdx-events-featured__pricing {
	order: 8;
}

.jdx-events-featured__actions {
	order: 9;
}

/* Date + Time on one compact row — same mechanism as Event Grid's own
 * .jdx-events-card-meta (frontend-event-card.css): Date immediately
 * followed by Time with a fixed gap (no space-between, see that rule's
 * own comment for why), single child left-aligns itself, flex-wrap is
 * the narrow-width safety net. order:2 and the ~640px readability cap
 * (see this file's own WIDE/INTERMEDIATE base comment above) both moved
 * here from the individual Date/Time rules below, since this row is now
 * the actual flex child of .jdx-events-featured__content. */
.jdx-events-featured__meta {
	order: 2;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.25em 0.75em;
	margin: 0 0 0.5em;
	max-width: 640px;
}

/* Typography alignment (Sakura Event Presentation Refinement): Date/Time
 * are quiet metadata, matching the same treatment and scale as Event
 * Grid/Single Event's own Date/Time (frontend-event-card.css,
 * single-event.css) — 0.7 opacity on this hero's light-on-dark-gradient
 * text remains comfortably legible against the existing overlay
 * gradient (.jdx-events-featured::before), the same overlay every other
 * text element here already relies on for contrast. margin/max-width
 * (Visual Correction Increment): both now live on .jdx-events-featured__meta
 * above instead of here individually. */
.jdx-events-featured__date,
.jdx-events-featured__time {
	font-family: var(--jdx-events-font-secondary);
	font-size: 0.9em;
	opacity: 0.7;
	margin: 0;
}

/* Title typography (v0.2.29): font-size changed from a fixed `3em`
 * (~48px) to `clamp(2.125rem, 6.2cqi, 5rem)` — ~34px to ~80px, scaling
 * with the query container's own inline size (6.2cqi), not the browser
 * viewport, per the approved reference.png target. max-width:640px
 * removed — it was sized for the old, smaller title and would force an
 * early wrap now that the title can reach 80px; the content column's own
 * width governs wrapping instead. font-weight raised 700→800,
 * line-height tightened 1.03→0.95, letter-spacing: -0.01em added, all
 * matching reference.png. Both weight values depend on whichever font
 * --jdx-events-font-primary resolves to live: a single-weight display
 * font (e.g. Bebas Neue, per CLAUDE.md's brand system) has no true bold
 * master and the browser will synthesize one — pre-existing since
 * font-weight:700 shipped in validation.39, worth re-confirming against
 * the live Elementor Global Primary Font, not resolved here. */
.jdx-events-featured__title {
	font-family: var(--jdx-events-font-primary);
	font-size: clamp(2.125rem, 6.2cqi, 5rem);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.95;
	letter-spacing: -0.01em;
	margin: 0.15em 0 0.4em;
}

.jdx-events-featured__title a {
	color: inherit;
	text-decoration: none;
}

/* Featured Event → Single Event navigation (v0.2.28-validation.1): the
 * same stretched-link technique already validated on Event Grid/Event
 * Index (frontend-event-card.css's .jdx-events-card-title a::after,
 * event-index.css's .jdx-events-index__title a::after) — the title
 * anchor's hit area is stretched over the whole hero via inset:0 rather
 * than wrapping the hero in a second <a> (which would nest an
 * interactive element around the CTAs below and break them).
 * .jdx-events-featured__content is the nearest position:relative
 * ancestor and, as the hero's only normal-flow flex child, already
 * fills the entire hero box (see this file's own align-items:stretch
 * note above) — inset:0 against it therefore covers the same visual
 * area as the hero itself. z-index:1 sits above the media/gradient
 * layers but stays below the CTA row, which claims z-index:2 (see
 * .jdx-events-featured__actions below) so Buy Tickets/Book a Table
 * remain independently clickable on top of it. */
.jdx-events-featured__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	cursor: pointer;
}

/* Same two-layer focus ring as the title link's Grid/Index counterparts
 * (frontend-event-card.css, event-index.css) — the tokens are already
 * available here since this file depends on frontend-event-card.css. */
.jdx-events-featured__title a:focus-visible {
	box-shadow: 0 0 0 3px var(--jdx-events-focus-ring-shadow);
	outline: 2px solid var(--jdx-events-focus-ring-outline);
	outline-offset: 3px;
}

.jdx-events-featured__headline {
	font-family: var(--jdx-events-font-secondary);
	font-size: 1.2em;
	font-weight: 600;
	margin: 0 0 0.6em;
	max-width: 640px;
}

/* 4-line clamp (Phase 4F correction, unchanged here): matches the same
 * technique already validated for the Event Grid's own description
 * clamp (frontend-event-card.css, Decision 023) — visual-only,
 * $description_html itself is never truncated server-side. The Single
 * Event page (single-event.css) deliberately has no clamp: full
 * description there. */
.jdx-events-featured__description {
	font-family: var(--jdx-events-font-secondary);
	margin: 0 0 0.75em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	max-width: 640px;
}

/* Plain-text description (v0.2.33-dev.2). Root cause of the staging
 * clipping: the fixed 4-line clamp above ran over rich HTML — paragraph
 * margins, headings and lists count as extra lines and theme `p` rules
 * change their height — so text was cut long before the description
 * ended. The text is now cut server-side at a word boundary
 * (FeaturedEventRenderer, Description Length); no clamp applies unless
 * the widget's optional Max Lines control is set (whole lines only — the
 * text contains no child elements whose margins could cut a line).
 * pre-line keeps the editor's paragraph breaks. */
.jdx-events-featured__description--preview {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
	white-space: pre-line;
	overflow-wrap: break-word;
}

.jdx-events-featured__description p {
	margin: 0 0 0.75em;
}

.jdx-events-featured__description p:last-child {
	margin-bottom: 0;
}

/* Compact horizontal presentation (v0.2.29 — was flex-direction:column,
 * a vertically stacked list): matches reference.png's single-row Rooms
 * chips. Stays horizontal at every tier, including NARROW/mobile —
 * flex-wrap:wrap moves a whole room/artist group to the next line when
 * there isn't space for all of them, rather than overflowing; max-width
 * removed, since a wrapping row has no reason for the old vertical-list
 * reading cap. */
.jdx-events-featured__rooms {
	list-style: none;
	margin: 0 0 0.75em;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.4em 1.25em;
}

/* Each room/artist group stays nowrap (label + artist never split across
 * lines) — min-width:0 lets the group shrink below its own content
 * width so the browser can choose to wrap it to its own line (via the
 * list's flex-wrap above) instead of forcing horizontal overflow. */
.jdx-events-featured__room {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.5em;
	min-width: 0;
	max-width: 100%;
}

/* overflow-wrap:anywhere (v0.2.29): a single long, unbroken artist name
 * — too long to fit even its own line at narrow/mobile widths — is
 * allowed to break internally rather than force the whole row (and the
 * hero) to overflow horizontally. min-width:0 for the same reason as
 * the parent .jdx-events-featured__room above.
 *
 * font-size: 0.8125em (~13px at a 16px root — v0.2.29-validation.2):
 * previously unset (inherited ~1em), now explicit. Room badge size is
 * untouched (still 0.75em, frontend-event-card.css). Overridable
 * per-instance via FeaturedEventWidget's room_artist_typography
 * control (Elementor Style tab); unset by default. */
.jdx-events-featured__room-artist {
	font-family: var(--jdx-events-font-secondary);
	font-size: 0.8125em;
	overflow-wrap: anywhere;
	min-width: 0;
}

/* Pricing/Description visual distinction (Task 3/8; hairline divider
 * removed in validation.39): spacing + a smaller, accent-colored
 * treatment for Pricing — no "Pricing" text label, no reinterpretation
 * of the stored strings. The previous border-top hairline read as a UI
 * card separator rather than the approved reference's clean whitespace
 * hierarchy, so only that one declaration was removed; margin-top/
 * padding-top are unchanged and still provide the same spacing. The `~`
 * general-sibling combinator (not `+` adjacent-sibling) is deliberate:
 * templates/featured-event.php's DOM order has Rooms between Description
 * and Pricing (unchanged), so only `~` correctly matches "Description
 * exists somewhere earlier" regardless of Rooms sitting between them.
 * Featured-only — Event Grid/Event Index/Calendar/Single Event's own
 * Pricing rules are untouched. */
.jdx-events-featured__description ~ .jdx-events-featured__pricing {
	margin-top: 1em;
	padding-top: 0.75em;
}

.jdx-events-featured__pricing {
	list-style: none;
	font-family: var(--jdx-events-font-secondary);
	/* Typography alignment (Sakura Event Presentation Refinement):
	 * bumped from 0.85em to match Date/Time's own quiet-metadata scale
	 * directly above, per the approved "Date and Pricing are both quiet
	 * metadata at the same scale" rule.
	 *
	 * font-size: 0.8125em (~13px at a 16px root — v0.2.29-validation.2,
	 * down from 0.9em). Overridable per-instance via
	 * FeaturedEventWidget's pricing_typography control (Elementor Style
	 * tab); unset by default. */
	font-size: 0.8125em;
	letter-spacing: 0.02em;
	color: var(--jdx-events-color-accent);
	margin: 0 0 0.75em;
	padding: 0;
	max-width: 640px;
}

.jdx-events-featured__pricing li {
	margin: 0 0 0.1em;
}

.jdx-events-featured__pricing li:last-child {
	margin-bottom: 0;
}

/* .jdx-events-card-ctas's shared rule (frontend-event-card.css) is
 * `display:grid; grid-template-columns:repeat(2,1fr)` — fixed to two
 * columns for Event Grid/Index/Calendar's Table+Tickets pair. Featured
 * overrides this to a flex row (see .jdx-events-featured .jdx-events-card-ctas
 * further down) to fit the new third More Info button without forcing it
 * onto a second grid row — scoped to .jdx-events-featured only, the
 * shared 2-column grid is untouched.
 *
 * align-self: flex-start, not flex-end (validation.38 Correction — CTA
 * Position): the previous flex-end pulled this row toward the hero's
 * right edge, which did not match the approved reference (CTAs directly
 * underneath the pricing/content stack, LEFT aligned). flex-start keeps
 * the row shrink-wrapped to its own content width (it still has no
 * max-width of its own, unlike the text children above) while anchoring
 * it to the LEFT edge of the content column instead — a single-property
 * change, no template/markup change needed. INTERMEDIATE already resets
 * this to `auto` below; re-verify that tier's own CTA position once this
 * lands, since it was never specifically validated for alignment,
 * only for overall geometry.
 *
 * margin-top: auto (v0.2.27 validation.1 — live Sakura correction): was
 * a fixed `1em 0 0`, so whenever Pricing was absent (or Description/
 * Rooms were short) the CTA row simply followed whatever content came
 * before it, drifting upward instead of staying anchored near the
 * bottom of the hero. .jdx-events-featured__content (this element's
 * flex-column parent) already guarantees its children match the hero's
 * own resolved height via align-items:stretch (see this file's own
 * top-of-file comment) — margin-top:auto is the standard flexbox
 * "consume all remaining space in this axis" mechanism, so Actions
 * always ends up at the bottom of whatever height the hero box actually
 * has, regardless of how much (or how little) content precedes it. No
 * placeholder content, no fixed value tied to a specific content
 * length: Description/Pricing both already carry their own
 * margin-bottom:0.75em, so a guaranteed minimum gap above the CTA row
 * still exists even when there's no extra space to distribute (long
 * content, box grown to fit) — margin-top:auto only ever ADDS space on
 * top of that, never removes it (flex-item margins don't collapse).
 * Inert (resolves to 0, a harmless no-op) at the NARROW tier below,
 * where .jdx-events-featured itself switches to display:block and no
 * longer has a resolved flex height to distribute — exactly the
 * existing stacked-mobile flow, unaffected. */
.jdx-events-featured__actions {
	margin: auto 0 0;
	align-self: flex-start;
	/* Featured Event → Single Event navigation (v0.2.28-validation.1):
	 * stacks above the stretched title link's ::after (z-index:1, see
	 * .jdx-events-featured__title a::after above) so Buy Tickets/Book a
	 * Table stay independently clickable instead of being intercepted by
	 * the hero-wide overlay — same mechanism as .jdx-events-card-ctas in
	 * frontend-event-card.css. position:relative is required for z-index
	 * to apply. */
	position: relative;
	z-index: 2;
}

/* CTA row flex override (v0.2.29): flex instead of the shared 2-column
 * grid so the new third (More Info) button flows alongside Tickets/Table
 * instead of forcing a second row — scoped to .jdx-events-featured only.
 * flex-wrap:wrap is the safety net if all three can't fit one row at a
 * given width. */
.jdx-events-featured .jdx-events-card-ctas {
	display: flex;
	flex-wrap: wrap;
}

/* More Info (v0.2.29): the quietest of the three — ghost/transparent
 * background, color:inherit, currentColor border (no new literal color
 * introduced); reads as tertiary next to the filled Buy Tickets and
 * outlined Book a Table through shape/fill alone, not opacity (opacity
 * previously dimmed the whole box — removed in validation.2 as a
 * genuine conflict: it also dimmed any Normal/Hover color a site editor
 * configures via FeaturedEventWidget's new More Info Style controls,
 * which wasn't intended, and this codebase's own established CTA
 * convention is background-only hover, never opacity — see
 * frontend-event-card.css's Tickets/Table hover comment). Reuses the
 * shared .jdx-events-card-cta base class for sizing/padding
 * (frontend-event-card.css), same as the other two. */
.jdx-events-featured .jdx-events-card-cta--more-info {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

@media ( hover: hover ) {
	.jdx-events-featured .jdx-events-card-cta--more-info:hover {
		background: rgba( 255, 255, 255, 0.1 );
	}
}

/* prefers-reduced-motion (v0.2.29-validation.2): the shared
 * .jdx-events-card-cta base rule (frontend-event-card.css) declares
 * `transition: background-color 175ms, color 175ms, border-color 175ms`
 * unconditionally — today every CTA, including Tickets/Table, animates
 * regardless of this setting (a pre-existing condition, left
 * intentionally unchanged here per this cycle's explicit "do not change
 * Buy Tickets or Book a Table styling" scope). More Info only: disables
 * that inherited transition when the user has requested reduced motion,
 * scoped narrowly enough that Tickets/Table's own animated hover is
 * completely unaffected. The hover background above still applies
 * instantly, just without the animated transition between states. */
@media ( prefers-reduced-motion: reduce ) {
	.jdx-events-featured .jdx-events-card-cta--more-info {
		transition: none;
	}
}

/* Hero-scoped CTA hierarchy (v0.2.31 stabilization, Decision 045 —
 * supersedes Task 9/validation.37/38 and Increment 3's four-tier
 * model). Built-in fallback is now a FIXED literal gold/black pair
 * (#D4AF37 background/border, #000000 text) for BOTH CTA 1 (Tickets)
 * and CTA 2 (Table) — deliberately no longer chained through
 * --e-global-color-accent or the Room Badge gold token: those were
 * this widget's own earlier design choice to visually match the Room
 * Label badge and to respect an Elementor Global Accent Color if one
 * was configured, both now explicitly retired in favor of a
 * predictable, Elementor-independent built-in default. This is also
 * an explicit, visible change from Table's previous ghost/transparent
 * look — both CTAs now share the identical solid gold/black default.
 *
 * Elementor widget tier is unchanged in mechanism (Elementor\Widgets\
 * FeaturedEventWidget's 'tickets'/'table' CTA Style controls write
 * --jdx-events-cta-{primary,secondary}-{bg,fg,border}-widget on
 * {{WRAPPER}}), but the chain no longer has a JDX global setting tier
 * to sit above (Decision 045 removed it entirely) — the "-global-
 * override" companion token Increment 3 needed to protect this exact
 * fallback from an unrelated base-token default no longer has
 * anything to protect against, so it is removed too.
 *
 * Specificity correction (Decision 045 S1, confirmed via computed-
 * style testing — see DECISIONS.md): live WordPress QA confirmed
 * background/text configured via these Elementor controls did not
 * reliably paint, while border-color (identical mechanism) did —
 * consistent with an external rule (most likely an Elementor Global
 * Kit/Theme Style button default) matching this selector at an equal
 * or higher specificity for background-color/color specifically,
 * while never touching border-color. Adding the `a.` type selector
 * (same technique already in production for Calendar, Decision 043)
 * raises specificity from (0,2,0) to (0,2,1) — higher than any
 * same-or-lower class-level external rule, with no !important and no
 * change to the widget-tier custom-property mechanism or precedence
 * order. */
.jdx-events-featured a.jdx-events-card-cta--tickets {
	background: var(--jdx-events-card-cta-primary-bg, var(--jdx-events-cta-primary-bg-widget, #D4AF37));
	color: var(--jdx-events-card-cta-primary-fg, var(--jdx-events-cta-primary-fg-widget, #000000));
	border-color: var(--jdx-events-card-cta-primary-border, var(--jdx-events-cta-primary-border-widget, #D4AF37));
}

.jdx-events-featured a.jdx-events-card-cta--table {
	background: var(--jdx-events-card-cta-secondary-bg, var(--jdx-events-cta-secondary-bg-widget, #D4AF37));
	color: var(--jdx-events-card-cta-secondary-fg, var(--jdx-events-cta-secondary-fg-widget, #000000));
	border-color: var(--jdx-events-card-cta-secondary-border, var(--jdx-events-cta-secondary-border-widget, #D4AF37));
}

@media ( hover: hover ) {
	/* Preserves the pre-existing shared hover INTENT (frontend-event-card.css's
	 * own .jdx-events-card-cta--tickets:hover darkens the button's
	 * background) rather than inventing a new treatment: this hero-scoped
	 * normal-state rule above shares the shared hover rule's own
	 * specificity and loads later (featured-event.css depends on
	 * frontend-event-card.css), so without an equally-scoped hover rule
	 * here the shared hover would be silently overridden by this file's
	 * own normal state.
	 *
	 * Increment 3 (v0.2.31) correction, kept in Decision 045: an
	 * explicit hover color (per-event or Elementor widget) must render
	 * WITHOUT the filter also darkening it further — but when nothing
	 * is configured, the original filter:brightness(0.85)-over-
	 * whatever-is-painted behavior must be preserved exactly. Pure-CSS
	 * toggle, no JS: the `background` declaration's own deepest
	 * fallback re-derives the SAME chain the Normal-state rule above
	 * already resolves to (so an unconfigured hover re-paints the
	 * identical color, a visual no-op), while `filter` defaults to
	 * brightness(0.85) and is overridden to brightness(1) (a true
	 * no-op) by a companion flag token
	 * (--jdx-events-cta-primary-hover-filter[-widget]) that each
	 * remaining tier's own hover-color mechanism sets ALONGSIDE its
	 * color value, in the same breath — never independently. The
	 * JDX-global tier of this flag (Increment 3) is removed along with
	 * everything else Decision 045 retires. See
	 * templates/featured-event.php and Elementor\Widgets\
	 * FeaturedEventWidget's own 'tickets' hover controls for the two
	 * remaining places that pairing is written. */
	.jdx-events-featured a.jdx-events-card-cta--tickets:hover {
		background: var(--jdx-events-card-cta-primary-bg-hover, var(--jdx-events-cta-primary-bg-hover-widget, var(--jdx-events-card-cta-primary-bg, var(--jdx-events-cta-primary-bg-widget, #D4AF37))));
		color: var(--jdx-events-card-cta-primary-fg-hover, var(--jdx-events-cta-primary-fg-hover-widget, var(--jdx-events-card-cta-primary-fg, var(--jdx-events-cta-primary-fg-widget, #000000))));
		filter: var(--jdx-events-card-cta-primary-hover-filter, var(--jdx-events-cta-primary-hover-filter-widget, brightness(0.85)));
	}

	/* Table/Secondary hover converts cleanly, no filter involved: the
	 * existing flat translucent-white overlay (now layering over the
	 * new solid gold default rather than the previous transparent one —
	 * still a lightening effect, same mechanism, no new treatment)
	 * simply becomes the deepest fallback literal in the same chain
	 * shape used everywhere else — zero behavior change when
	 * unconfigured beyond the Normal-state default change above. */
	.jdx-events-featured a.jdx-events-card-cta--table:hover {
		background: var(--jdx-events-card-cta-secondary-bg-hover, var(--jdx-events-cta-secondary-bg-hover-widget, rgba(255, 255, 255, 0.15)));
		color: var(--jdx-events-card-cta-secondary-fg-hover, var(--jdx-events-cta-secondary-fg-hover-widget, var(--jdx-events-card-cta-secondary-fg, var(--jdx-events-cta-secondary-fg-widget, #000000))));
	}
}

/* INTERMEDIATE (component width <= 959.98px): the overlay/cinematic
 * concept is preserved (.jdx-events-featured stays display:flex,
 * inheriting the align-items:stretch fix above unchanged, so the hero
 * keeps growing safely with content at this tier too) — only the
 * WIDE-only readability cap on text children and the WIDE-only CTA
 * right-alignment are removed, since there usually isn't 640px of
 * column plus a legible right-side CTA zone available at this width.
 * .jdx-events-featured__content itself keeps its full-width WIDE-tier
 * flex/max-width values unchanged here — that is itself the fix for the
 * original defect (the old fixed 55%/640px column, not this rule).
 *
 * Increment 6C.1's own `aspect-ratio: auto` override at this tier
 * (previously needed because the WIDE base rule's aspect-ratio produced
 * a preferred height far too short for real content at intermediate
 * widths) is REMOVED as of v0.2.29 — the WIDE base rule no longer sets
 * `aspect-ratio` at all (see this file's own top-of-file docblock and
 * the WIDE base rule's own comment), so an override here would be dead
 * code with nothing to override. */
@container jdx-events-featured ( max-width: 959.98px ) {
	.jdx-events-featured__content {
		padding: 2rem;
	}

	.jdx-events-featured__meta,
	.jdx-events-featured__title,
	.jdx-events-featured__headline,
	.jdx-events-featured__description,
	.jdx-events-featured__rooms,
	.jdx-events-featured__pricing {
		max-width: none;
	}

	.jdx-events-featured__actions {
		align-self: auto;
	}
}

/* NARROW (component width <= 559.98px): content-for-content identical to
 * the previous @media(max-width:780px) block this replaces — the
 * already-approved stacked mobile treatment, unchanged, merely
 * re-anchored to the component's own container width instead of the
 * browser viewport. Both rules above (padding/max-width resets, CTA
 * align-self reset) remain in effect here too, since their own
 * (max-width:959.98px) condition is still true at this narrower width —
 * nothing below needs to repeat them. */
@container jdx-events-featured ( max-width: 559.98px ) {
	.jdx-events-featured {
		display: block;
		aspect-ratio: auto;
		min-height: 0;
		padding: 2rem 1.25rem;
	}

	.jdx-events-featured__content {
		position: relative;
		z-index: 2;
		flex: none;
		max-width: 100%;
		padding: 0;
	}

	/* v0.2.29: fixed at the clamp's own 2.125rem (34px) floor rather than
	 * the previous 1.9em (~30.4px against this element's inherited
	 * context) — a deliberate, explicit value rather than relying on the
	 * WIDE-tier clamp's `6.2cqi` term, since this tier is the one place
	 * in this file where container-query containment is intentionally
	 * left untouched this cycle (see the mobile-only containment-disable
	 * block below) — cqi's resolution with no named query-container
	 * ancestor is not relied upon here. */
	.jdx-events-featured__title {
		font-size: 2.125rem;
	}

	/* Stretched-link NARROW coverage correction (v0.2.28-validation.1
	 * follow-up): at this tier .jdx-events-featured switches to
	 * display:block and its own 2rem/1.25rem padding above moves from
	 * .jdx-events-featured__content (this pseudo-element's containing
	 * block) onto .jdx-events-featured itself, so inset:0 alone would
	 * stop short of the hero's true outer edge by exactly that padding —
	 * live-verified via box-model inspection, not assumed. Negative
	 * insets equal to that padding widen the overlay back out to
	 * .jdx-events-featured's real boundary, restoring full-hero coverage
	 * without touching the padding/display/aspect-ratio values
	 * themselves. */
	.jdx-events-featured__title a::after {
		inset: -2rem -1.25rem;
	}
}

/* v0.2.27 validation.4 — mobile-only containment disable, live-confirmed
 * root cause: the Elementor-generated .elementor-widget-container's own
 * container-type:inline-size (base rule, top of file) is what produces
 * the ~243px excess outer-widget height specifically on Mobile — live
 * A/B tested by temporarily removing it, which collapsed the outer
 * Elementor widget correctly with no other change. Disabling containment
 * ONLY at this breakpoint removes the bug without touching WIDE/
 * INTERMEDIATE, where the same property continues working correctly.
 * Reverting container-type here also means the existing @container
 * rules above can no longer match anything at this width (there is no
 * longer a named container ancestor for them to query at all) — so
 * every declaration those two blocks currently contribute at mobile is
 * reproduced verbatim below via a plain viewport query instead, so the
 * approved visual result is pixel-for-pixel unchanged. No container-
 * relative length units (cqw/cqh/cqi/cqb) are used anywhere in this
 * file, so a verbatim copy carries no semantic difference. */
@media ( max-width: 559.98px ) {
	.elementor-widget-jdx_featured_event > .elementor-widget-container {
		container-type: normal;
		container-name: none;
	}

	.jdx-events-featured {
		display: block;
		aspect-ratio: auto;
		min-height: 0;
		padding: 2rem 1.25rem;
	}

	.jdx-events-featured__content {
		position: relative;
		z-index: 2;
		flex: none;
		max-width: 100%;
		padding: 0;
	}

	.jdx-events-featured__meta,
	.jdx-events-featured__title,
	.jdx-events-featured__headline,
	.jdx-events-featured__description,
	.jdx-events-featured__rooms,
	.jdx-events-featured__pricing {
		max-width: none;
	}

	.jdx-events-featured__actions {
		align-self: auto;
	}

	/* v0.2.29 — identical to the @container block above, reproduced here
	 * for the same reason every other declaration in this block is
	 * duplicated (see this block's own top-of-block comment): fixed at
	 * the clamp's own 2.125rem (34px) floor rather than the previous
	 * 1.9em. */
	.jdx-events-featured__title {
		font-size: 2.125rem;
	}

	/* Stretched-link NARROW coverage correction (v0.2.28-validation.1
	 * follow-up) — identical to the @container block above, reproduced
	 * here for the same reason every other declaration in this block is
	 * duplicated: once containment is disabled at this breakpoint, the
	 * @container rule above can no longer match anything, so its effect
	 * must be reproduced verbatim via this plain @media query instead. */
	.jdx-events-featured__title a::after {
		inset: -2rem -1.25rem;
	}
}