/*
 * Sacred Ground Upcoming Events — v1.0.19
 * Standard full-width layout. No viewport breakout tricks.
 * The page fix Code Snippet ensures the shortcode sits in its own
 * clean block, so this CSS just needs to fill 100% of available width.
 *
 * Uniform card grid: every card (starred/featured, the meditation anchor,
 * and rotating cards) is the same size and image shape. Featured events are
 * visually distinguished by the star badge on the image, not by size.
 *
 * Grid uses normal (non-dense) auto-flow: the PHP emits cards in priority
 * order (meditation anchor first, then starred picks, then rotating), and
 * normal flow just wraps them onto new rows as each row fills.
 *
 * SPECIFICITY NOTE (read before "simplifying" a selector back to a bare
 * class): the theme injects an inline reset — `.sg-page * { margin: 0;
 * padding: 0; box-sizing: border-box; }` — on every page this plugin runs
 * on. A bare single-class selector like `.sg-ue-card__body { padding: ... }`
 * has the exact same specificity as that reset, and depending on where in
 * the cascade the theme happens to inject its inline style block, the
 * reset can win the tie and silently zero out our padding/margin — this
 * bit us for real on this site (wrap padding and card body padding were
 * both getting collapsed to 0 despite the CSS "looking right"). Every
 * selector below is deliberately scoped under `.sg-ue-wrap` (two classes,
 * specificity 0,2,0) specifically to out-rank that 0,1,0 reset, without
 * resorting to !important anywhere — restyling by overriding these rules
 * from theme CSS still works fine, it just also needs two classes' worth
 * of specificity (or its own !important) to win.
 */

.sg-ue-wrap.sg-ue-wrap {
	width: 100%;
	padding: 48px 56px 56px;
	box-sizing: border-box;
	/* Matches the site's own background color (checked via computed style
	 * on the live page: body background is rgb(27, 15, 58)) instead of
	 * inheriting the theme's default cream page-content background. This
	 * both ties the section into the site's overall dark brand look AND
	 * creates a clear boundary against the cream "Energy Healing, Explained"
	 * section that follows — before this, both sections shared the exact
	 * same cream background and visually ran together with no seam. */
	background-color: #1b0f3a;
}

.sg-ue-wrap * {
	box-sizing: border-box;
}

.sg-ue-wrap .sg-ue-heading {
	text-align: center;
	font-size: 2.4rem;
	font-weight: 700;
	margin: 0 0 8px;
	color: #f5d78e;
	letter-spacing: 0.01em;
}

.sg-ue-wrap .sg-ue-subheading {
	text-align: center;
	margin: 0 0 28px;
	color: #c9bde8;
	font-size: 1rem;
}

.sg-ue-wrap .sg-ue-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 18px;
	/* Deliberately using the default align-items: stretch here (not
	 * align-items: start). CSS Grid always sizes a row to its tallest
	 * item no matter what — a short card next to a tall row-mate either
	 * (a) stretches to match and the extra height has to go somewhere, or
	 * (b) sits at its own height and leaves that same amount of dead,
	 * unstyled space below it before the next row starts. Option (b)
	 * looked like a broken hole in the layout, so we use (a) and route
	 * the extra height into the image (see .sg-ue-card__image flex-grow
	 * below) instead of the description area.
	 */
}

.sg-ue-wrap .sg-ue-card {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	background: rgba(45, 27, 78, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.2s;
	/* Anchor for .sg-ue-card__hover-desc below, which is positioned
	 * absolute against this card (not the page). */
	position: relative;
}

.sg-ue-wrap .sg-ue-card:hover {
	border-color: rgba(212, 175, 55, 0.45);
}

/* Full-description hover reveal. The visible excerpt on the card is
 * truncated (26 words) and the card links through to each event's own
 * "Website" field when one is set, which on this site is often a separate
 * practitioner booking page with its own generic description — NOT the
 * specific, longer description written for this dated event. Rather than
 * make visitors click through to read a description that may not even
 * match, hovering the TITLE reveals the real, fuller description in place.
 * Confined to the card's own footprint (no reflow of neighboring cards) —
 * an internal scrollbar (see max-height + overflow-y below) takes over for
 * any description too long to fit rather than growing the box.
 *
 * v1.0.18: the trigger used to be `.sg-ue-card:hover` — hovering ANYWHERE
 * on the card (image, excerpt, empty space) popped the overlay, which felt
 * trigger-happy and buried the excerpt/meta with no obvious way back. Now
 * it's scoped to just the title link via :has(), and the whole card is no
 * longer a single giant <a> — the title text and the new "Book Now" link
 * are the only two clickable/hoverable targets, so it's clear hovering the
 * title = preview, and clicking "Book Now" = go book. The :has() condition
 * also checks the overlay itself (`.sg-ue-card__hover-desc:hover`) so the
 * panel doesn't flicker shut the instant the cursor moves from the title
 * onto the overlay it just revealed. */
.sg-ue-wrap .sg-ue-card__hover-desc {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	background: rgba(17, 9, 36, 0.97);
	opacity: 0;
	pointer-events: none;
	overflow-y: auto;
	transition: opacity 0.18s ease;
}

.sg-ue-wrap .sg-ue-card:has(.sg-ue-card__title-link:hover) .sg-ue-card__hover-desc,
.sg-ue-wrap .sg-ue-card:has(.sg-ue-card__title-link:focus-visible) .sg-ue-card__hover-desc,
.sg-ue-wrap .sg-ue-card:has(.sg-ue-card__hover-desc:hover) .sg-ue-card__hover-desc {
	opacity: 1;
	pointer-events: auto;
}

.sg-ue-wrap .sg-ue-card__hover-desc-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #f5d78e;
}

.sg-ue-wrap .sg-ue-card__hover-desc-meta {
	font-size: 0.82rem;
	color: #d4af37;
	font-weight: 600;
}

.sg-ue-wrap .sg-ue-card__hover-desc-text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: #e7e0f5;
	white-space: pre-line;
}

.sg-ue-wrap .sg-ue-card__hover-desc-link {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	padding: 9px 18px;
	border-radius: 6px;
	background: #d4af37;
	color: #1b0f3a;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.sg-ue-wrap .sg-ue-card__hover-desc-link:hover {
	background: #f5d78e;
}

.sg-ue-wrap .sg-ue-card.sg-ue-hero {
	grid-column: span 2;
}

.sg-ue-wrap .sg-ue-card__image {
	position: relative;
	aspect-ratio: 16 / 9;
	/* contain (not cover) so the whole event photo is always visible rather
	 * than cropped to fill the box — any empty space on the short axis is
	 * filled by background-color below instead of cutting off part of the
	 * image. no-repeat is required with contain, or the browser tiles the
	 * now-smaller image to fill the remaining box. */
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #2d1b4e;
	/* flex-grow so any extra height the card picks up from being stretched
	 * to match a taller row-mate gets absorbed here (more visible image /
	 * more of the placeholder gradient) instead of in the body below. This
	 * only ever ADDS height beyond the aspect-ratio's natural size — it
	 * never shrinks the image below 16:9. min-height: 0 is required for
	 * flex-grow to actually take effect on a flex item that also has an
	 * aspect-ratio set. */
	flex: 1 1 auto;
	min-height: 0;
}

.sg-ue-wrap .sg-ue-card__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #2d1b4e 0%, #4a1942 50%, #6b46c1 100%);
}

.sg-ue-wrap .sg-ue-card__date {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(212, 175, 55, 0.55);
	border-radius: 8px;
	padding: 6px 10px;
	text-align: center;
	min-width: 52px;
	backdrop-filter: blur(4px);
}

.sg-ue-wrap .sg-ue-card__month {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #d4af37;
	text-transform: uppercase;
	line-height: 1.3;
}

.sg-ue-wrap .sg-ue-card__day {
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.1;
}

.sg-ue-wrap .sg-ue-card__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid #d4af37;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d4af37;
	font-size: 14px;
	backdrop-filter: blur(4px);
}

.sg-ue-wrap .sg-ue-card__body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* flex: 0 0 auto (not flex: 1) — the body should only ever be as tall
	 * as its own content (title, excerpt, meta). Any extra row height goes
	 * to the image above (see .sg-ue-card__image), not here. This is the
	 * fix for the "huge empty description block" bug. */
	flex: 0 0 auto;
}

.sg-ue-wrap .sg-ue-card__title {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.3;
	font-weight: 600;
	color: #f5d78e;
}

/* v1.0.18: the card itself is a plain <div> now — only the title and the
 * "Book Now" link are actual <a> tags, so this is where color/underline
 * live instead of on the whole card. */
.sg-ue-wrap .sg-ue-card__title-link {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.sg-ue-wrap .sg-ue-card__title-link:hover,
.sg-ue-wrap .sg-ue-card__title-link:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

.sg-ue-wrap .sg-ue-card__link {
	color: #f5d78e;
	text-decoration: none;
}

/* Always-visible call to action — previously the only way to book was to
 * click the whole card through to whatever the event's "Website" field
 * pointed at, with no visual cue that the card was clickable at all. This
 * makes the destination explicit. */
.sg-ue-wrap .sg-ue-card__book-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	color: #d4af37;
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.sg-ue-wrap .sg-ue-card__book-link:hover,
.sg-ue-wrap .sg-ue-card__book-link:focus-visible {
	color: #f5d78e;
	text-decoration: underline;
}

.sg-ue-wrap .sg-ue-card__excerpt {
	margin: 0;
	font-size: 0.95rem;
	color: #c9bde8;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sg-ue-wrap .sg-ue-card__meta {
	margin-top: auto;
	padding-top: 6px;
	font-size: 0.82rem;
	color: #c9bde8;
}

.sg-ue-wrap .sg-ue-card__meta-date {
	color: #d4af37;
	font-weight: 600;
}

.sg-ue-wrap .sg-ue-empty {
	text-align: center;
	color: #c9bde8;
	padding: 24px 0;
}

.sg-ue-wrap .sg-ue-calendar-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 24px auto 0;
	max-width: 240px;
	padding: 11px 20px;
	border: 1px solid #d4af37;
	border-radius: 8px;
	text-decoration: none;
	color: #d4af37;
	font-weight: 600;
	font-size: 0.9rem;
	background: rgba(212, 175, 55, 0.08);
	transition: background 0.2s;
}

.sg-ue-wrap .sg-ue-calendar-link:hover {
	background: rgba(212, 175, 55, 0.18);
	color: #f5d78e;
}

@media (max-width: 900px) {
	.sg-ue-wrap .sg-ue-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.sg-ue-wrap.sg-ue-wrap {
		padding: 20px 12px 28px;
	}
	.sg-ue-wrap .sg-ue-grid {
		grid-template-columns: 1fr;
	}
	.sg-ue-wrap .sg-ue-card,
	.sg-ue-wrap .sg-ue-card.sg-ue-hero {
		grid-column: span 1;
	}
}