/*
 * Event discovery pages (P1 Home, P2 Event detail). Figma file 82czIdavj992v8AI7D1Qkg, nodes 11:4 and 11:412.
 * Components come from guest-components.css. Logical properties only.
 */

/* Featured, desktop: copy on the start side, poster on the end side. */

.ef-hero {
	display: none;
}

.ef-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ef-space-24);
	min-width: 0;
}

.ef-hero__title {
	margin: 0;
	font: 400 64px/68px var(--ef-font-display);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ef-hero__desc {
	max-width: 520px;
	margin: 0;
	font: 400 16px/24px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-hero__meta {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-12);
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 16px/24px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-hero__meta li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ef-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ef-space-12);
}

.ef-hero__poster .ef-poster {
	border-radius: var(--ef-radius-xl);
	box-shadow: var(--ef-elevation-3);
}

@media (min-width: 768px) {
	.ef-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
		align-items: center;
		gap: var(--ef-space-64);
		padding-block: calc(var(--ef-space-48) + var(--ef-space-8)) calc(var(--ef-space-64) + var(--ef-space-8));
	}
}

/* Featured, mobile: one tall card with the title over the poster. */

.ef-featured {
	padding: var(--ef-space-8) var(--ef-space-16) var(--ef-space-24);
}

.ef-featured__card {
	position: relative;
	display: block;
	height: 460px;
	overflow: hidden;
	border-radius: var(--ef-radius-xl);
	background: var(--ef-bg-subtle);
}

.ef-featured__card .ef-poster {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

.ef-featured__shade {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 300px;
	background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ef-neutral-950) 88%, transparent));
}

.ef-featured__overlay {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-8);
	padding: 0 var(--ef-space-20) var(--ef-space-20);
	color: var(--ef-text-on-accent);
}

.ef-featured__overline,
.ef-featured__title,
.ef-featured__meta {
	margin: 0;
}

.ef-featured__overline {
	font: 600 11px/16px var(--ef-font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ef-featured__title {
	font: 400 32px/36px var(--ef-font-display);
}

.ef-featured__meta {
	font: 400 14px/20px var(--ef-font-ui);
}

@media (min-width: 768px) {
	.ef-featured { display: none; }
}

/* Heading, filters and category chips. */

.ef-home-head {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-16);
	padding-block-end: var(--ef-space-16);
}

.ef-home-head__row {
	display: flex;
	align-items: flex-end;
	gap: var(--ef-space-16);
}

.ef-home-head__title {
	flex: 1;
	min-width: 0;
}

.ef-home-head__h1 {
	margin: 0;
	font: 600 22px/28px var(--ef-font-ui);
	letter-spacing: -0.003em;
}

.ef-home-head__count {
	margin: 2px 0 0;
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-filter-bar {
	display: none;
	gap: var(--ef-space-16);
	margin: 0;
}

.ef-chip-row {
	display: flex;
	gap: var(--ef-space-8);
	/* Chips run off the screen edge on mobile and scroll sideways. */
	margin-inline: calc(var(--ef-space-16) * -1);
	padding-inline: var(--ef-space-16);
	overflow-x: auto;
	scrollbar-width: none;
}

.ef-chip-row::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.ef-home-head {
		gap: var(--ef-space-24);
		padding-block-end: var(--ef-space-24);
	}

	.ef-home-head__h1 {
		font: 600 28px/34px var(--ef-font-ui);
		letter-spacing: -0.005em;
	}

	.ef-home-head__count {
		margin-block-start: var(--ef-space-4);
		font: 400 14px/20px var(--ef-font-ui);
	}

	.ef-filter-bar { display: flex; }
	.ef-home-head__filters { display: none; }

	.ef-chip-row {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
}

/* Poster wall. */

.ef-home-wall {
	padding-block-end: var(--ef-space-32);
}

.ef-event-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ef-space-24) var(--ef-space-12);
}

.ef-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ef-space-12);
	padding-block-start: var(--ef-space-32);
}

.ef-more__error {
	margin: 0;
	font: 400 14px/20px var(--ef-font-ui);
	color: var(--ef-danger-fg);
}

.ef-more__error a {
	color: inherit;
}

.ef-card-skel__poster {
	aspect-ratio: 4 / 5;
	border-radius: var(--ef-radius-lg);
}

.ef-card-skel__line {
	height: 16px;
	margin-block-start: var(--ef-space-12);
}

.ef-card-skel__line + .ef-card-skel__line {
	width: 60%;
	margin-block-start: var(--ef-space-8);
}

@media (min-width: 768px) {
	.ef-home-wall {
		padding-block-end: calc(var(--ef-space-48) + var(--ef-space-8));
	}

	.ef-event-grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: var(--ef-space-40) var(--ef-space-24);
	}
}

.ef-home-state {
	padding-block: var(--ef-space-16) var(--ef-space-48);
}

/* P2 Event detail. Mobile first: a full-bleed poster, then the info, tickets and sections in one column. */

.ef-event-hero {
	display: flex;
	flex-direction: column;
}

@media (max-width: 767.98px) {
	/* The poster runs edge to edge on mobile. */
	.ef-event-hero {
		padding-inline: 0;
	}
}

.ef-event-hero__poster {
	position: relative;
}

.ef-event-hero__poster .ef-poster {
	aspect-ratio: 5 / 6;
	border-radius: 0;
}

.ef-event-hero__nav {
	position: absolute;
	inset: var(--ef-space-16) var(--ef-space-16) auto;
	display: flex;
	justify-content: space-between;
}

.ef-event-hero__info {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-16);
	padding: var(--ef-space-16);
}

.ef-event-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ef-space-8);
}

.ef-event-hero__title {
	margin: 0;
	font: 400 44px/48px var(--ef-font-display);
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.ef-event-hero__actions {
	display: none;
	gap: var(--ef-space-12);
}

.ef-organizer-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ef-space-12);
}

.ef-organizer-line__text {
	display: flex;
	flex-direction: column;
}

.ef-organizer-line__label {
	display: none;
	font: 500 12px/16px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-organizer-line__name {
	font: 500 14px/20px var(--ef-font-ui);
}

.ef-meta {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-12);
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 16px/24px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-meta li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ef-event-main {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-32);
	padding-block: var(--ef-space-16) var(--ef-space-48);
}

.ef-event-content {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-32);
	min-width: 0;
}

.ef-section {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-16);
}

.ef-section__title {
	margin: 0;
	font: 600 22px/28px var(--ef-font-ui);
	letter-spacing: -0.003em;
}

.ef-prose {
	font: 400 14px/20px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-prose p {
	margin: 0 0 var(--ef-space-16);
}

.ef-prose p:last-child {
	margin-block-end: 0;
}

/* Tickets: a card on desktop, a plain section on mobile. */

.ef-tickets__title {
	margin: 0;
	font: 600 22px/28px var(--ef-font-ui);
	letter-spacing: -0.003em;
}

.ef-tickets__note {
	margin: var(--ef-space-4) 0 0;
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-tickets__rows {
	margin-block-start: var(--ef-space-8);
}

.ef-tickets > .ef-tickets__summary,
.ef-tickets__cta,
.ef-tickets__secure {
	display: none;
}

.ef-tickets__lines {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-12);
	padding-block: var(--ef-space-16);
}

.ef-tickets__summary[hidden] {
	display: none !important;
}

.ef-tickets__secure {
	align-items: flex-start;
	gap: var(--ef-space-8);
	margin: var(--ef-space-16) 0 0;
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-tickets__secure .ef-icon {
	margin-block-start: 1px;
}

.ef-tickets__closed {
	margin: var(--ef-space-16) 0 0;
	padding: var(--ef-space-16);
	border-radius: var(--ef-radius-md);
	background: var(--ef-bg-subtle);
	font: 400 14px/20px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

/* Event notice: cancelled, ended or rescheduled. Text plus icon, never colour alone. */

.ef-event-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--ef-space-12);
	padding: var(--ef-space-12) var(--ef-space-16);
	border-radius: var(--ef-radius-md);
}

.ef-event-notice > .ef-icon { flex: none; margin-block-start: 2px; }
.ef-event-notice__text { min-width: 0; }
.ef-event-notice__title { margin: 0; font: 600 15px/22px var(--ef-font-ui); }
.ef-event-notice__body { margin: 0; font: 400 14px/20px var(--ef-font-ui); }
.ef-event-notice__body a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.ef-event-notice--danger { background: var(--ef-danger-bg); color: var(--ef-danger-fg); }
.ef-event-notice--warning { background: var(--ef-warning-bg); color: var(--ef-warning-fg); }
.ef-event-notice--neutral { background: var(--ef-bg-subtle); color: var(--ef-text-primary); }

/* Venue map: drawn from tokens, so it follows light and dark. */

.ef-map {
	position: relative;
	display: block;
	height: 192px;
	overflow: hidden;
	border-radius: var(--ef-radius-lg);
	background: var(--ef-bg-subtle);
}

.ef-map > span {
	position: absolute;
}

.ef-map__water { inset: 0 0 0 73.6%; background: var(--ef-info-bg); }
.ef-map__park { inset: 50% auto auto 28.6%; width: 18.4%; height: 35%; border-radius: var(--ef-radius-full); background: var(--ef-success-bg); }
.ef-map__road { background: var(--ef-bg-surface); }
.ef-map__road--h1 { inset: 35% 0 auto; height: 12px; }
.ef-map__road--h2 { inset: 75% 0 auto; height: 8px; }
.ef-map__road--v1 { inset: 0 auto 0 56%; width: 12px; }
.ef-map__road--v2 { inset: 0 auto 0 20%; width: 8px; }

.ef-map__pin {
	inset: 30% auto auto 54.5%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 3px solid var(--ef-bg-surface);
	border-radius: var(--ef-radius-full);
	background: var(--ef-accent-default);
	color: var(--ef-text-on-accent);
}

.ef-map__label {
	inset: calc(30% + 6px) auto auto calc(54.5% + 48px);
	padding: var(--ef-space-4) 10px;
	border-radius: var(--ef-radius-full);
	background: var(--ef-bg-surface);
	box-shadow: var(--ef-elevation-1);
	font: 500 12px/16px var(--ef-font-ui);
	color: var(--ef-text-primary);
	white-space: nowrap;
}

.ef-venue-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ef-space-16);
}

.ef-venue-line__name {
	display: none;
	margin: 0;
	font: 500 14px/20px var(--ef-font-ui);
}

.ef-venue-line__address {
	margin: 0;
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-venue-line .ef-btn {
	display: none;
}

.ef-organizer-card {
	display: flex;
	align-items: center;
	gap: var(--ef-space-16);
	padding: var(--ef-space-16);
	border: 1px solid var(--ef-border-default);
	border-radius: var(--ef-radius-lg);
	background: var(--ef-bg-surface);
}

.ef-organizer-card__name {
	margin: 0;
	font: 600 16px/24px var(--ef-font-ui);
}

.ef-organizer-card__meta {
	margin: 0;
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

/* Mobile Book bar. It takes the place of the tab bar on this page. */

.ef-buybar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ef-space-16);
	padding: var(--ef-space-12) var(--ef-space-16) calc(var(--ef-space-12) + env(safe-area-inset-bottom));
	background: var(--ef-bg-surface);
	border-top: 1px solid var(--ef-border-default);
}

.ef-buybar__price {
	display: flex;
	flex-direction: column;
}

.ef-buybar__label {
	font: 400 13px/18px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-buybar__amount {
	font: 600 24px/28px var(--ef-font-ui);
	letter-spacing: -0.003em;
}

.ef-buybar .ef-btn {
	flex: 0 1 190px;
}

@media (max-width: 767.98px) {
	.ef-has-buybar {
		padding-bottom: calc(52px + var(--ef-space-24) + env(safe-area-inset-bottom));
	}
}

@media (min-width: 768px) {
	.ef-buybar { display: none; }

	.ef-event-hero {
		display: grid;
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
		align-items: end;
		gap: calc(var(--ef-space-48) + var(--ef-space-8));
		padding-block: var(--ef-space-24) var(--ef-space-48);
	}

	.ef-event-hero__poster .ef-poster {
		aspect-ratio: 4 / 5;
		border-radius: var(--ef-radius-xl);
		box-shadow: var(--ef-elevation-3);
	}

	.ef-event-hero__nav { display: none; }

	.ef-event-hero__info {
		gap: var(--ef-space-20);
		padding: 0;
	}

	.ef-event-hero__title {
		font: 400 64px/68px var(--ef-font-display);
		letter-spacing: -0.01em;
	}

	.ef-event-hero__actions { display: flex; }
	.ef-organizer-line__label { display: block; }

	.ef-event-main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		grid-template-areas: "content aside";
		align-items: start;
		gap: var(--ef-space-64);
		padding-block: 0 calc(var(--ef-space-64) + var(--ef-space-16));
	}

	.ef-event-content {
		grid-area: content;
		gap: var(--ef-space-48);
	}

	.ef-section__title {
		font: 600 28px/34px var(--ef-font-ui);
		letter-spacing: -0.005em;
	}

	.ef-prose { font: 400 16px/24px var(--ef-font-ui); }

	.ef-tickets {
		grid-area: aside;
		position: sticky;
		top: var(--ef-space-24);
		padding: var(--ef-space-24);
		border: 1px solid var(--ef-border-default);
		border-radius: var(--ef-radius-xl);
		background: var(--ef-bg-surface);
		box-shadow: var(--ef-elevation-1);
	}

	.ef-tickets__title { font: 600 28px/34px var(--ef-font-ui); letter-spacing: -0.005em; }
	.ef-tickets > .ef-tickets__summary { display: block; }
	.ef-tickets__cta { display: flex; margin-block-start: var(--ef-space-16); }
	.ef-tickets__secure { display: flex; }

	.ef-map { height: 260px; }
	.ef-venue-line__name { display: block; }
	.ef-venue-line .ef-btn { display: inline-flex; }
	.ef-organizer-card { padding: var(--ef-space-16) var(--ef-space-20); }
	.ef-organizer-card__name { font: 600 18px/24px var(--ef-font-ui); }
	.ef-organizer-card__meta { font: 400 14px/20px var(--ef-font-ui); }
	.ef-organizer-line__name { font: 500 14px/20px var(--ef-font-ui); }
}

/* Organizer public page (P9) */
.ef-org-hero {
	background: var(--ef-accent-default);
	color: var(--ef-text-on-accent);
}

.ef-org-hero__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ef-space-24);
	padding-block: var(--ef-space-32);
}

.ef-org-hero__avatar {
	width: 96px;
	height: 96px;
	font: 600 28px/1 var(--ef-font-ui);
	background: var(--ef-bg-surface);
	color: var(--ef-accent-default);
}

.ef-org-hero__text {
	flex: 1;
	min-width: 0;
}

.ef-org-hero__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ef-space-12);
}

.ef-org-hero__title {
	font: 400 36px/40px var(--ef-font-display);
	letter-spacing: -0.005em;
}

.ef-org-hero__about {
	margin-block-start: var(--ef-space-8);
	font: 400 15px/22px var(--ef-font-ui);
}

.ef-org-hero__stats {
	display: flex;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
	gap: var(--ef-space-16);
	margin-block-start: var(--ef-space-8);
	font: 500 13px/20px var(--ef-font-ui);
}

.ef-org-events {
	padding-block: var(--ef-space-32);
}

.ef-org-events__past {
	margin-block-start: var(--ef-space-24);
	font: 500 16px/24px var(--ef-font-ui);
	color: var(--ef-text-secondary);
}

.ef-organizer-card__action {
	margin-inline-start: auto;
}

@media (max-width: 767px) {
	.ef-org-hero__avatar { width: 64px; height: 64px; font-size: 20px; }
	.ef-org-hero__title { font-size: 28px; line-height: 32px; }
	.ef-organizer-card { flex-wrap: wrap; }
	.ef-organizer-card__action { margin-inline-start: 0; width: 100%; }
}

/* Agenda (F7): published sessions on the event page. */
.ef-agenda {
	display: grid;
	gap: var(--ef-space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ef-agenda__item {
	display: grid;
	gap: var(--ef-space-4);
	padding-block-end: var(--ef-space-12);
	border-block-end: 1px solid var(--ef-border-default);
}

.ef-agenda__time,
.ef-agenda__speakers {
	margin: 0;
	color: var(--ef-text-secondary);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.ef-agenda__title {
	margin: 0;
	color: var(--ef-text-primary);
	font-weight: 600;
}

.ef-agenda__track {
	margin-inline-start: var(--ef-space-8);
	padding: 0 var(--ef-space-8);
	border-radius: var(--ef-radius-sm);
	background: var(--ef-bg-subtle);
	font-size: 12px;
	font-weight: 500;
}

.ef-agenda__text {
	margin: 0;
	color: var(--ef-text-primary);
}