/*
 * Styles for the RFH single-event template (see rh-single-event-template.php).
 * Brand colors/fonts match SITE.md's brand guide section -- hardcoded here
 * rather than referencing Bricks' auto-generated --bricks-color-* custom
 * properties, since those are tied to color-palette entry IDs that can
 * change if the palette is ever edited/regenerated in the Bricks builder.
 */

/*
 * The site's Bricks Global Custom CSS caps #tribe-events-pg-template (the
 * outer wrapper Events Calendar/the theme render around every event view,
 * single or otherwise) at max-width: 1140px -- added for EPTA's narrower
 * layout. Since this stylesheet only loads on the single-event view (see
 * the wp_enqueue_style() call in single-event.php), overriding it here is
 * scoped to just this page, not the calendar/list views. !important because
 * both rules target the same #id selector at equal specificity and source
 * order isn't reliably in our favor (confirmed the hard way earlier on this
 * same page -- see SITE.md).
 */
#tribe-events-pg-template { max-width: none !important; width: 100% !important; }

.rh-event {
	--rh-ink: #182D5B;
	--rh-ink-soft: #32415F;
	--rh-accent: #D97B66;
	--rh-accent-deep: #b8624e;
	--rh-sky: #4A93DD;
	--rh-mist: #EAF2FA;
	--rh-line: #e4d9d0;
	/* Cream, from the brand guide -- used as the box background for every
	   .rh-card, instead of plain white, to echo the warm boxed look the old
	   EPTA template used without going full saturated orange. */
	--rh-panel: #FAF5F1;
	--rh-shadow: 0 1px 2px rgba(24,45,91,.06), 0 12px 32px -12px rgba(24,45,91,.18);
	--rh-radius-lg: 22px;
	--rh-radius-md: 14px;

	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 20px 64px;
	color: var(--rh-ink);
}

.rh-event * { box-sizing: border-box; }
.rh-event img { max-width: 100%; display: block; }
.rh-event a { color: inherit; }

/* ---------- Top: title, its own full-width block above the hero ---------- */

.rh-top {
	padding-bottom: 24px;
	margin-bottom: 32px;
	/* A plain title sitting directly beside the flyer read oddly next to the
	   flyer art's own large stylized title text -- a rule under it makes
	   this its own distinct block on the page rather than a floating label
	   next to the image. */
	border-bottom: 1px solid var(--rh-line);
}

.rh-title {
	font-family: "Abril Fatface";
	font-weight: 400;
	font-size: 56px;
	line-height: 1.05;
	margin: 0;
	text-wrap: balance;
}

/* ---------- Hero row: a wide, tall flyer on the left, everything else
   stacked in a single column to its right (description+RSVP / starts-in /
   venue / save-the-date & share). Widened enough that its own aspect ratio
   genuinely renders taller (not stretched-then-padded -- a fixed-aspect
   image can't be stretched taller without also getting wider, and forcing
   the box taller than the image itself just left a big empty frame around
   it, worse than the space it was meant to fill). align-items:start, not
   stretch, so the two columns are each exactly as tall as their own real
   content instead of one artificially matching the other. ---------- */

.rh-hero-row {
	display: grid;
	grid-template-columns: 600px 1fr;
	gap: 28px;
	align-items: start;
	margin-bottom: 40px;
}
.rh-hero-flyer {
	position: relative;
	border-radius: var(--rh-radius-lg);
	overflow: hidden;
	box-shadow: var(--rh-shadow);
}
.rh-hero-flyer img { width: 100%; height: auto; }
/* tribe_event_featured_image() wraps the image in TEC's own
   .tribe-events-event-image, which carries a 32px bottom margin meant for
   in-content images followed by more content -- inside our own card-like
   flyer frame that just reads as unexplained white space under the art. */
.rh-hero-flyer .tribe-events-event-image { margin: 0; }

/* Single column, not a 2x2 grid: a 2-up grid squeezed each cell down to
   roughly a quarter of the row's width -- too narrow for the countdown's
   4-digit grid and the icon row without wrapping awkwardly. A single
   column gives Venue and Save the date & Share the full width of the right
   side; the flyer being top-aligned (not stretched, see .rh-hero-row) means
   this stack is free to run longer or shorter than the flyer without an
   empty gap either side reading as a mistake. */
.rh-hero-stack {
	display: grid;
	gap: 18px;
}
/* Description+RSVP and Starts-in are the two short/narrow cells (neither
   needs real width -- no map, no wrapping icon row) -- combined into one
   card (a divider between the two halves, not two separate boxes) instead
   of each getting its own; that alone brings the stack's total height
   meaningfully closer to the now much taller flyer beside it, and reads as
   one "at a glance" panel rather than two disconnected ones. .rh-stack-top
   already carries the .rh-card class for its background/border/shadow --
   the extra specificity here (vs. .rh-card's own flex-direction:column) is
   what lets it lay its two halves out in a row instead. */
.rh-hero-stack .rh-stack-top {
	flex-direction: row;
	align-items: stretch;
	gap: 24px;
}
.rh-stack-top-half {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.rh-stack-top-divider {
	width: 1px;
	background: var(--rh-line);
	align-self: stretch;
}

/* .rh-card--centered is a no-op now that nothing is stretched to an
   artificial height -- left in place in case that changes again. */
.rh-card--centered { justify-content: center; }

.rh-tagline {
	font-size: 18px;
	color: var(--rh-ink-soft);
	max-width: 56ch;
	margin: 0 0 8px;
}
.rh-hosted-by {
	font-size: 15px;
	color: var(--rh-ink-soft);
	margin: 0 0 18px;
}

/* Registration/RSVP links pulled out of the description -- see
   extract_button_paragraphs() in single-event.php -- featured here as real
   buttons instead of left styled however the WYSIWYG editor left them. */
.rh-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.rh-hero-ctas .rh-btn { width: auto; padding-left: 28px; padding-right: 28px; }

/* Save the date + Share, combined into one card (calendar export links,
   a divider, then the share links) -- labeled pills, not icon-only, so
   each one reads clearly instead of relying on a hover tooltip. */
.rh-actions-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.rh-actions-divider {
	width: 1px;
	height: 28px;
	background: var(--rh-line);
	margin: 0 4px;
}
.rh-share-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid var(--rh-line);
	color: var(--rh-ink-soft);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.rh-share-link svg { width: 18px; height: 18px; flex: none; }
.rh-share-link:hover {
	border-color: var(--rh-accent);
	color: var(--rh-accent);
	background: rgba(217,123,102,.08);
}

/* ---------- About: full width, only rendered when there's real content ---------- */

.rh-about h2 {
	font-family: "Abril Fatface";
	font-weight: 400;
	font-size: 32px;
	margin: 0 0 16px;
}
.rh-about .tribe-events-single-event-description p {
	font-size: 17px;
	color: var(--rh-ink-soft);
	max-width: 72ch;
	margin: 0 0 18px;
}
.rh-about .tribe-events-single-event-description ul,
.rh-about .tribe-events-single-event-description ol {
	max-width: 72ch;
	color: var(--rh-ink-soft);
	font-size: 17px;
}

.rh-card {
	background: var(--rh-panel);
	border: 1px solid var(--rh-line);
	border-radius: var(--rh-radius-md);
	box-shadow: var(--rh-shadow);
	padding: 22px;
	display: flex;
	flex-direction: column;
}
.rh-card h4 {
	font-family: "Abril Fatface";
	font-weight: 400;
	font-size: 14.5px;
	letter-spacing: .03em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

/* Countdown -- reuses EPTA's own markup/JS (epta-events-countdown-widget) */
.rh-card .epta-countdown-timer {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 8px;
	text-align: center;
}
/* NOT display:contents: that flattens each cell's number+label pair into
   the *parent's* 4-column grid individually, so they auto-place across the
   row as 8 separate items (09 | DAYS | 08 | HOURS on row one, ...) instead
   of stacking each number over its own label -- reads as a layout bug and
   as extra whitespace between a number and the label it belongs to. */
.rh-card .epta-countdown-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rh-card .epta-countdown-number {
	font-size: 27px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.rh-card .epta-countdown-under {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rh-ink-soft);
}

.rh-fact-list { display: grid; gap: 11px; font-size: 15.5px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rh-line); }
.rh-fact-list:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.rh-fact-list .rh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--rh-line); }
.rh-fact-list .rh-row:last-child { border-bottom: none; padding-bottom: 0; }
.rh-fact-list .rh-label { color: var(--rh-ink-soft); }
.rh-fact-list .rh-value { font-weight: 600; text-align: right; }

/* Venue card -- reuses TEC's own venue/map template parts, restyled */
.rh-card .tribe-events-meta-group-venue h2.tribe-events-single-section-title { display: none; }
/* TEC's own stylesheet carries a dormant responsive rule (order: -1 on the
   map, order: 1 on the address, flex-basis: 140px on the address) meant for
   some other flex context in its stock template -- it had no effect while
   .rh-card was a plain block, but making the card a flex column (above)
   activated it, silently re-ordering the map *above* the h4/address on
   narrow viewports. Reset to source order: heading, then address, then map. */
.rh-card .tribe-events-meta-group-venue,
.rh-card .tribe-events-venue-map {
	order: 0;
	flex-basis: auto;
}
/* TEC's own stylesheet gives .tribe-events-meta-group-venue a 32px top
   padding, sized to sit under the (visible, in TEC's own template) section
   title above -- combined with our h4's own margin, hiding that title still
   left a ~46px gap before the address, much wider than any other card's
   heading-to-content spacing. */
.rh-card .tribe-events-meta-group-venue { padding-top: 0 !important; }
.rh-card .tribe-venue { font-weight: 600; font-size: 15px; margin: 0 0 4px; }
.rh-card .tribe-events-venue-map { border-radius: 12px; overflow: hidden; margin-top: 12px; }
/* TEC hardcodes the map iframe at 350px tall; shortened so the Venue card
   (now its own compact pane alongside Share/Save the date, not stretched to
   match a taller neighbor) doesn't tower over them. */
.rh-card .tribe-events-venue-map iframe { height: 170px !important; }

/* Address and map side by side, not stacked -- the address block is short
   (name, street, city/state/zip) so it doesn't need the full card width,
   and the map reads better wider than it does tall anyway. */
.rh-venue-row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.rh-venue-row .tribe-events-meta-group-venue { flex: 0 0 220px; }
.rh-venue-row .tribe-events-venue-map { flex: 1; min-width: 0; margin-top: 0; }
@media (max-width: 560px) {
	.rh-venue-row { flex-direction: column; }
	/* Same bug class as the mobile flyer earlier: flex-direction:column flips
	   the main axis, so the address's flex-basis:220px (a *width* above)
	   became a fixed *height* here instead, forcing a tall box around much
	   shorter content and leaving a large gap before the map. */
	.rh-venue-row .tribe-events-meta-group-venue { flex-basis: auto; }
	.rh-venue-row .tribe-events-venue-map { width: 100%; }
}

.rh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	border-radius: 10px;
	padding: 13px 20px;
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--rh-line);
	color: var(--rh-ink);
	transition: transform .15s ease, background-color .15s ease;
}
.rh-btn:hover { transform: translateY(-1px); }
.rh-btn--primary { background: var(--rh-accent); border-color: var(--rh-accent); color: #fff; }
.rh-btn--primary:hover { background: var(--rh-accent-deep); }

/*
 * ECP's own series-relationship notice (rendered by tribe_the_notices() --
 * "Event Series: X" with a link to the series archive page) is hidden here:
 * per feedback the site shouldn't link out to EPTA/TEC's own archive-style
 * pages (series, "all events") at all -- see also the facts-list Series row
 * above, which is plain text, not a link, for the same reason.
 */
.rh-event .tribe-events-series-relationship-single-marker { display: none; }

@media (max-width: 860px) {
	/* Flyer full-width on top, the stack below. */
	.rh-hero-row { grid-template-columns: 1fr; }
	.rh-hero-flyer { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 720px) {
	.rh-hero-flyer { max-width: 360px; }
	.rh-hero-stack .rh-stack-top { flex-direction: column; }
	/* A vertical divider between side-by-side halves doesn't make sense
	   once they're stacked -- swap it for a horizontal rule instead. */
	.rh-stack-top-divider { width: 100%; height: 1px; }
	.rh-title { font-size: 38px; }
}