/*
 * Eventbrite Events - public listing.
 *
 * Scoped under .ebe. The root sets no background-color or font-family on
 * purpose: the list inherits the host theme's page background and type
 * (headings pick up the theme's heading face). Only the details sheet, which
 * floats above the page, paints its own surface.
 *
 * Palette tokens follow indyreads.org's GeneratePress globals: purple
 * global-color-11 (#402a56) for headings, sage accent-2 (#64967c), the gold
 * rule (#fab03c) the site draws above headings, navy accent-5 for focus.
 * Text-bearing sage and orange are darkened to pass WCAG AA.
 */

.ebe {
	--ebe-ink: #402a56;
	--ebe-text: #24212b;
	--ebe-muted: #575760;
	--ebe-sage: #64967c;
	--ebe-sage-ink: #3b6851;
	--ebe-sage-tint: #e6f0ea;
	--ebe-gold: #fab03c;
	--ebe-alert-ink: #a8361a;
	--ebe-alert-tint: #fde9e3;
	--ebe-line: rgba(64, 42, 86, 0.16);
	--ebe-line-strong: rgba(64, 42, 86, 0.34);
	--ebe-surface: #ffffff;
	--ebe-placeholder: #efeaf5;
	--ebe-focus: #2d4e7c;
	--ebe-shadow: 0 1px 2px rgba(31, 20, 43, 0.08), 0 10px 24px -14px rgba(31, 20, 43, 0.35);
	--ebe-shadow-lift: 0 2px 4px rgba(31, 20, 43, 0.08), 0 22px 40px -18px rgba(31, 20, 43, 0.45);
	--ebe-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ebe-radius: 10px;

	color: var(--ebe-text);
	margin-block: 0 4rem;
}

/* WP Dark Mode (the site's toggle). The root carries wp-dark-mode-ignore so
   the plugin's automatic recoloring leaves these authored colors alone. */
html[data-wp-dark-mode-active] .ebe {
	--ebe-ink: #e9e0f5;
	--ebe-text: #ece9f1;
	--ebe-muted: #bcb6c8;
	--ebe-sage: #8fbfa6;
	--ebe-sage-ink: #a6d3bb;
	--ebe-sage-tint: rgba(143, 191, 166, 0.16);
	--ebe-alert-ink: #ffab94;
	--ebe-alert-tint: rgba(255, 140, 110, 0.16);
	--ebe-line: rgba(233, 224, 245, 0.16);
	--ebe-line-strong: rgba(233, 224, 245, 0.38);
	--ebe-surface: #1c1a24;
	--ebe-placeholder: #2a2733;
	--ebe-focus: #9cc2ff;
	--ebe-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -14px rgba(0, 0, 0, 0.7);
	--ebe-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 22px 40px -18px rgba(0, 0, 0, 0.8);
}

.ebe ::selection {
	background: #fde3b8;
	color: #2a1b3a;
}

.ebe-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ebe-icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

/* ----- Filter chips ------------------------------------------------------ */

.ebe-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2.25rem;
}

.ebe-filters[hidden] {
	display: none;
}

.ebe .ebe-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0.45rem 1.05rem;
	border: 1.5px solid var(--ebe-line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--ebe-ink);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color 160ms var(--ebe-ease), border-color 160ms var(--ebe-ease), color 160ms var(--ebe-ease);
}

.ebe .ebe-chip:hover {
	border-color: var(--ebe-ink);
	background: transparent;
	color: var(--ebe-ink);
}

.ebe .ebe-chip[aria-pressed="true"] {
	border-color: var(--ebe-ink);
	background: var(--ebe-ink);
	color: var(--ebe-surface);
}

.ebe .ebe-chip:focus-visible,
.ebe .ebe-textbutton:focus-visible,
.ebe-sheet .ebe-sheet-close:focus-visible,
.ebe-sheet a:focus-visible {
	outline: 3px solid var(--ebe-focus);
	outline-offset: 3px;
}

/* ----- Months ------------------------------------------------------------ */

.ebe-month + .ebe-month {
	margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.ebe-month[hidden] {
	display: none;
}

.ebe .ebe-month-title {
	margin: 0 0 1.5rem;
	padding-top: 1rem;
	border-top: 3px solid var(--ebe-gold);
	color: var(--ebe-ink);
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
	line-height: 1.15;
	text-wrap: balance;
}

/* ----- Grid and cards ---------------------------------------------------- */

/* Teaser (limit="3"): one row inside a host section that owns its own spacing. */
.ebe--teaser {
	margin-block: 1.5rem 0;
}

.ebe .ebe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ebe-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.ebe-card[hidden] {
	display: none;
}

.ebe-cover {
	position: relative;
	overflow: hidden;
	border-radius: var(--ebe-radius);
	background: var(--ebe-placeholder);
	box-shadow: var(--ebe-shadow);
	transition: transform 420ms var(--ebe-ease), box-shadow 420ms var(--ebe-ease);
}

.ebe-cover-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	/* Never crop: the flyer's own text must stay whole. */
	object-fit: contain;
}

.ebe-card:hover .ebe-cover,
.ebe-card:focus-within .ebe-cover {
	transform: translateY(-4px);
	box-shadow: var(--ebe-shadow-lift);
}

.ebe-card-body {
	display: grid;
	grid-template-columns: 3.4rem minmax(0, 1fr);
	gap: 0 1rem;
	align-items: start;
	margin-top: 1.1rem;
}

.ebe-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.4rem 0 0.45rem;
	border-top: 3px solid var(--ebe-gold);
	line-height: 1;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ebe-date-wd {
	color: var(--ebe-sage-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ebe-date-day {
	margin: 0.2rem 0 0.15rem;
	color: var(--ebe-ink);
	font-size: 1.95rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ebe-date-mo {
	color: var(--ebe-muted);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ebe-card-text {
	min-width: 0;
}

.ebe .ebe-card-title {
	margin: 0 0 0.35rem;
	color: var(--ebe-ink);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

.ebe .ebe-card-link {
	color: inherit;
	text-decoration: none;
}

/* The title link covers the whole card, so the cover is clickable too. */
.ebe-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--ebe-radius);
}

.ebe .ebe-card:hover .ebe-card-link {
	text-decoration: underline;
	text-decoration-color: var(--ebe-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.ebe .ebe-card-link:focus-visible {
	outline: none;
}

.ebe .ebe-card-link:focus-visible::after {
	outline: 3px solid var(--ebe-focus);
	outline-offset: 6px;
}

.ebe .ebe-meta,
.ebe .ebe-series,
.ebe .ebe-tags {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

.ebe .ebe-meta {
	color: var(--ebe-muted);
}

.ebe-meta > span + span::before {
	content: "·";
	margin: 0 0.4em;
}

.ebe .ebe-series {
	display: flex;
	gap: 0.45rem;
	margin-top: 0.45rem;
	color: var(--ebe-sage-ink);
}

.ebe-series .ebe-icon {
	margin-top: 0.15em;
	color: var(--ebe-sage);
}

.ebe-series strong {
	font-weight: 600;
}

.ebe-also {
	display: block;
	color: var(--ebe-muted);
}

.ebe .ebe-tags {
	margin-top: 0.6rem;
}

.ebe-tag {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--ebe-sage-tint);
	color: var(--ebe-sage-ink);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.ebe-tag--alert {
	background: var(--ebe-alert-tint);
	color: var(--ebe-alert-ink);
}

/* ----- Empty states ------------------------------------------------------ */

.ebe-empty,
.ebe-none {
	max-width: 40rem;
	padding: 2rem 0;
	border-top: 3px solid var(--ebe-gold);
	color: var(--ebe-muted);
}

.ebe .ebe-empty-title {
	margin: 0 0 0.35rem;
	color: var(--ebe-ink);
	font-size: 1.35rem;
	font-weight: 700;
}

.ebe-none[hidden] {
	display: none;
}

.ebe .ebe-textbutton {
	margin: 0 0 0 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ebe-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* ----- Details sheet ----------------------------------------------------- */

html.ebe-locked {
	overflow: hidden;
}

.ebe-sheet {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(620px, 100vw);
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	background: var(--ebe-surface);
	color: var(--ebe-text);
	box-shadow: -30px 0 60px -30px rgba(20, 12, 30, 0.45);
	scrollbar-width: thin;
	scrollbar-color: var(--ebe-line-strong) transparent;
}

.ebe-sheet[open] {
	animation: ebe-sheet-in 520ms var(--ebe-ease);
}

.ebe-sheet::backdrop {
	background: rgba(28, 18, 40, 0.55);
	animation: ebe-fade-in 320ms ease-out;
}

@keyframes ebe-sheet-in {
	from {
		transform: translateX(48px);
		opacity: 0;
	}
}

@keyframes ebe-fade-in {
	from {
		opacity: 0;
	}
}

.ebe-sheet .ebe-sheet-close {
	position: sticky;
	top: 0.75rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0.75rem 0.75rem -3.5rem auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ebe-surface);
	color: var(--ebe-ink);
	box-shadow: 0 2px 10px rgba(20, 12, 30, 0.28);
	cursor: pointer;
}

.ebe-sheet .ebe-sheet-close:hover {
	background: var(--ebe-surface);
	color: var(--ebe-ink);
	transform: scale(1.06);
}

.ebe-sheet-close .ebe-icon {
	width: 1.35rem;
	height: 1.35rem;
}

.ebe-sheet-cover {
	background: var(--ebe-placeholder);
}

.ebe-sheet-body {
	padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem) 3.5rem;
}

.ebe .ebe-sheet-title {
	margin: 0 0 1.35rem;
	color: var(--ebe-ink);
	font-size: clamp(1.55rem, 1.3rem + 1vw, 2rem);
	line-height: 1.2;
	text-wrap: balance;
}

.ebe .ebe-facts {
	display: grid;
	gap: 0.9rem;
	margin: 0 0 1.75rem;
}

.ebe-fact {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	gap: 0.8rem;
	align-items: start;
}

.ebe .ebe-fact dt {
	margin: 0;
	padding-top: 0.15rem;
	color: var(--ebe-sage);
	font-weight: inherit;
}

.ebe .ebe-fact dd {
	margin: 0;
	color: var(--ebe-text);
	font-weight: 600;
	line-height: 1.4;
}

.ebe-fact-sub {
	display: block;
	color: var(--ebe-muted);
	font-weight: 400;
}

.ebe-dates-list .ebe-fact-sub {
	display: inline;
	margin-left: 0.5rem;
}

.ebe-sheet a:not(.ebe-button) {
	color: var(--ebe-ink);
	text-decoration: underline;
	text-decoration-color: var(--ebe-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.ebe .ebe-actions {
	margin: 0 0 2rem;
}

.ebe .ebe-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.7rem 1.6rem;
	border: 0;
	border-radius: 8px;
	background: var(--ebe-sage-ink);
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(20, 40, 30, 0.2);
	transition: background-color 160ms var(--ebe-ease), transform 160ms var(--ebe-ease);
}

.ebe .ebe-button:hover {
	background: #2f5642;
	color: #ffffff;
}

.ebe .ebe-button:active {
	transform: translateY(1px);
}

.ebe .ebe-button:focus-visible {
	outline: 3px solid var(--ebe-focus);
	outline-offset: 3px;
}

html[data-wp-dark-mode-active] .ebe .ebe-button {
	background: var(--ebe-sage-ink);
	color: #14201a;
}

html[data-wp-dark-mode-active] .ebe .ebe-button:hover {
	background: #c2e6d2;
	color: #14201a;
}

.ebe .ebe-button--small {
	min-height: 40px;
	padding: 0.45rem 1rem;
	font-size: 0.92rem;
}

.ebe-dates {
	margin: 0 0 2rem;
}

.ebe .ebe-dates-title {
	margin: 0 0 0.5rem;
	color: var(--ebe-ink);
	font-size: 1.1rem;
	line-height: 1.3;
}

.ebe .ebe-dates-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ebe .ebe-dates-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0.7rem 0;
	border-top: 1px solid var(--ebe-line);
	font-variant-numeric: tabular-nums;
}

.ebe-dates-when {
	font-weight: 600;
}

.ebe .ebe-description {
	max-width: 65ch;
	font-size: 1.02rem;
	line-height: 1.65;
	overflow-wrap: break-word;
}

.ebe .ebe-description > :first-child {
	margin-top: 0;
}

.ebe .ebe-description p,
.ebe .ebe-description ul,
.ebe .ebe-description ol {
	margin: 0 0 1em;
}

.ebe-desc-figure {
	margin: 1.5rem 0;
}

.ebe-desc-figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.ebe .ebe-eb-link {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ebe-line);
	font-size: 0.95rem;
}

/* Cover glide between card and sheet (View Transitions, where supported). */
::view-transition-group(ebe-cover) {
	animation-duration: 460ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(ebe-cover),
::view-transition-new(ebe-cover) {
	height: 100%;
	object-fit: contain;
}

@media (max-width: 639px) {
	.ebe-sheet {
		width: 100vw;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ebe-cover,
	.ebe .ebe-chip,
	.ebe .ebe-button {
		transition: none;
	}

	.ebe-card:hover .ebe-cover,
	.ebe-card:focus-within .ebe-cover {
		transform: none;
	}

	.ebe-sheet[open],
	.ebe-sheet::backdrop {
		animation: none;
	}
}