/* =============================================================
   SINGLE EVENT — two-column layout (main + sticky green sidebar)
   Pairs with templates/single-event.html, which composes TEC's
   granular blocks (featured-image, post-content, event-venue,
   event-datetime, event-price, event-category, event-links,
   related-events) into a fable layout modeled on the live site's IA:
   hero image + description in the main column, key facts (location,
   map, date/time, cost, categories, add-to-calendar) in a sticky
   green card so they sit above the fold and use the screen width.
   Scoped to body.single-tribe_events. Rebuilt 2026-07-17 after Jason
   flagged the single narrow centered column as poor desktop UX.
   ============================================================= */

/* Compact event-only opening: title and graphic share the first screen. */
body.single-tribe_events .fable-event { padding-block-start: 1.5rem; }

/* ---- Back link + title ---- */
body.single-tribe_events .fable-event__back {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
body.single-tribe_events .fable-event__back a {
	color: var(--fable-forest);
	text-decoration: none;
	font-weight: 600;
}
body.single-tribe_events .fable-event__back a:hover { color: var(--fable-forest-deep); }

body.single-tribe_events .fable-event__title {
	font-family: var(--wp--preset--font-family--display);
	color: var(--fable-ink);
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	/* No bottom margin — the grid row-gap separates the title from the body. */
	margin: 0;
	max-width: 30ch;
	text-wrap: balance;
}

/* ---- Two-column grid ----
   Template areas so the sidebar spans the title row + body row and its top
   edge lines up with the headline (Jason 2026-07-17), instead of starting
   lower at the body. Mobile stacks title -> graphic -> key-facts card -> body. */
body.single-tribe_events .fable-event__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	grid-template-areas:
		"title   aside"
		"graphic aside"
		"body    aside";
	grid-template-rows: auto auto 1fr;
	column-gap: 2.5rem;
	row-gap: 1rem;
	margin-block-start: 1rem;
	align-items: start;
}
body.single-tribe_events .fable-event__title { grid-area: title; }
body.single-tribe_events .fable-event__grid > .tribe-events-event-image { grid-area: graphic; }
body.single-tribe_events .fable-event__body { grid-area: body; }
body.single-tribe_events .fable-event__aside { grid-area: aside; }
/* Kill WordPress's block-gap margin on the grid children — it injects a
   margin-block-start on subsequent items (the sidebar), pushing the card ~24px
   below the title top. Grid gap handles spacing here, not block-gap margins. */
body.single-tribe_events .fable-event__grid > * { margin-block: 0; }
@media (max-width: 900px) {
	body.single-tribe_events .fable-event__grid {
		grid-template-columns: 1fr;
		/* Keep the graphic directly beneath the title; details stay in normal
		   flow on phones, followed by the full description and ticket form. */
		grid-template-areas:
			"title"
			"graphic"
			"aside"
			"body";
		grid-template-rows: auto auto auto auto;
		gap: 1.5rem;
	}
}

/* ---- Main column ---- */
body.single-tribe_events .fable-event__body { min-width: 0; }
/* Intrinsic image ratio is preserved; posters and flyers are never cropped. */
body.single-tribe_events .fable-event__grid > .tribe-events-event-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fable-radius-lg);
}
body.single-tribe_events .fable-event__body .wp-block-post-content {
	font-family: var(--wp--preset--font-family--body);
	color: var(--fable-ink);
	font-size: 1.05rem;
	line-height: 1.75;
}
body.single-tribe_events .fable-event__body .wp-block-post-content > * { margin: 0 0 1.25rem; }
body.single-tribe_events .fable-event__body .wp-block-post-content a {
	color: var(--fable-forest);
	text-underline-offset: 2px;
}

/* ---- Related events → fable cards ---- */
body.single-tribe_events .tribe-block__related-events__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	font-weight: 600;
	color: var(--fable-ink);
	margin: 2.75rem 0 1.5rem;
}
body.single-tribe_events ul.tribe-related-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1.5rem;
}
body.single-tribe_events ul.tribe-related-events > li {
	background: var(--fable-white);
	border-radius: var(--fable-radius-lg);
	box-shadow: var(--fable-shadow-card);
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
}
body.single-tribe_events ul.tribe-related-events > li:hover {
	transform: translateY(-4px);
	box-shadow: var(--fable-shadow-lift);
}
body.single-tribe_events ul.tribe-related-events > li img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
body.single-tribe_events ul.tribe-related-events .tribe-related-events__title,
body.single-tribe_events ul.tribe-related-events h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	line-height: 1.3;
	margin: 0;
	padding: 0.9rem 1.1rem 0.2rem;
}
body.single-tribe_events ul.tribe-related-events a { color: var(--fable-ink); text-decoration: none; }
body.single-tribe_events ul.tribe-related-events > li:hover a { color: var(--fable-forest); }
body.single-tribe_events ul.tribe-related-events .tribe-event-date-start,
body.single-tribe_events ul.tribe-related-events .tribe-events-widget-events-list__event-datetime {
	display: block;
	padding: 0 1.1rem 1.1rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fable-moss);
}

/* =============================================================
   SIDEBAR — the sticky green info card
   ============================================================= */
body.single-tribe_events .fable-event__aside {
	background: var(--fable-pine);
	background-image: var(--fable-topo-light);
	background-size: cover;
	color: var(--fable-bone);
	border-radius: var(--fable-radius-lg);
	box-shadow: var(--fable-shadow-card);
	padding: 1.75rem;
}
/* Sticky is a DESKTOP-ONLY enhancement (two-column view). On mobile the card
   is in normal flow — see the max-width:900 block above. Defined AFTER the
   mobile rule so source order can't resurrect stickiness on small screens. */
@media (min-width: 901px) {
	body.single-tribe_events .fable-event__aside {
		position: sticky;
		top: calc(var(--fable-header-h) + 1rem);
	}
}
/* Section labels: "Event location", "Event details" */
body.single-tribe_events .fable-event__aside-h {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fable-goldenrod);
	margin: 1.5rem 0 0.75rem;
}
body.single-tribe_events .fable-event__aside-h:first-child { margin-top: 0; }
body.single-tribe_events .fable-event__aside a { color: var(--fable-bone); text-underline-offset: 2px; }
body.single-tribe_events .fable-event__aside a:hover { color: var(--fable-goldenrod); }

/* Venue name + address + map. TEC lays the venue block out as a flex row
   (address | map); force a column so the map sits full-width below. */
body.single-tribe_events .fable-event__aside .tribe-block__venue {
	display: block !important;
}
body.single-tribe_events .fable-event__aside .tribe-block__venue__meta { width: 100%; }
body.single-tribe_events .fable-event__aside .tribe-block__venue__name { margin: 0 0 0.35rem; }
body.single-tribe_events .fable-event__aside .tribe-block__venue__name a,
body.single-tribe_events .fable-event__aside .tribe-block__venue__name {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--fable-bone);
}
body.single-tribe_events .fable-event__aside address.tribe-block__venue__address {
	font-style: normal;
	font-size: 0.9rem;
	line-height: 1.5;
	color: rgba(255, 253, 245, 0.82);
}
body.single-tribe_events .fable-event__aside .tribe-address__street-address,
body.single-tribe_events .fable-event__aside .tribe-block__venue__address span { color: inherit; }
body.single-tribe_events .fable-event__aside .tribe-block__venue__map {
	display: block !important;
	width: 100% !important;
	margin: 1rem 0 0;
}
body.single-tribe_events .fable-event__aside .tribe-block__venue__map iframe {
	width: 100% !important;
	min-height: 190px;
	border: 0;
	border-radius: var(--fable-radius-sm);
	display: block;
}

/* Date / time */
body.single-tribe_events .fable-event__aside .tribe-events-schedule {
	margin: 0 0 0.75rem;
	color: var(--fable-bone);
}
body.single-tribe_events .fable-event__aside .tribe-events-schedule__datetime {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--fable-bone);
}

/* Cost */
body.single-tribe_events .fable-event__aside .tribe-block__event-price { margin: 0 0 0.75rem; }
body.single-tribe_events .fable-event__aside .tribe-block__event-price__cost {
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--fable-bone);
}

/* Categories */
body.single-tribe_events .fable-event__aside .tribe-events-section-category { margin: 0 0 0.5rem; }
body.single-tribe_events .fable-event__aside .tribe-events-event-categories-label {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fable-goldenrod);
	margin: 0 0 0.25rem;
}
body.single-tribe_events .fable-event__aside dd.tribe-events-event-categories {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}
body.single-tribe_events .fable-event__aside dd.tribe-events-event-categories a { color: rgba(255, 253, 245, 0.9); }

/* Add to calendar — ghost button on the dark card */
body.single-tribe_events .fable-event__aside .tribe-block__events-link { margin: 1.25rem 0 0; }
body.single-tribe_events .fable-event__aside .tribe-events-c-subscribe-dropdown__button {
	border-radius: 999px !important;
	border: 2px solid rgba(255, 253, 245, 0.6) !important;
	background: rgba(255, 255, 255, 0.06) !important;
	padding: 0.6em 1.2em !important;
}
body.single-tribe_events .fable-event__aside .tribe-events-c-subscribe-dropdown__button-text,
body.single-tribe_events .fable-event__aside .tribe-events-c-subscribe-dropdown__button-icon-svg {
	color: var(--fable-bone) !important;
	fill: var(--fable-bone) !important;
}
body.single-tribe_events .fable-event__aside .tribe-events-c-subscribe-dropdown__button:hover {
	background: var(--fable-bone) !important;
	border-color: var(--fable-bone) !important;
}
body.single-tribe_events .fable-event__aside .tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-text,
body.single-tribe_events .fable-event__aside .tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-icon-svg {
	color: var(--fable-pine) !important;
	fill: var(--fable-pine) !important;
}

/* Return to calendar (fable ghost-light button already; make it full width) */
body.single-tribe_events .fable-event__return {
	display: block;
	text-align: center;
	width: 100%;
	margin-top: 0.9rem;
	box-sizing: border-box;
}

/* Put time, cost, and program details before the optional map on a phone. */
#event-description { scroll-margin-top: 9rem; }
.fable-event__location { margin: 1rem 0; }
.fable-event__location > summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0; }