/**
 * Homepage hero + floating search bar. Depends on variables/typography/components.
 */

.hero {
	padding-top: var(--evently-header-height);
	background: var(--evently-surface);
	min-height: 720px;
	position: relative;
}

.hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--evently-space-7);
	align-items: center;
	/* Horizontal inset comes from layout.css (.hero-inner.evently-container).
	   No padding-top here — .hero's own padding-top already reserves exactly
	   the fixed header's height, so content should start flush under it. */
	padding-bottom: var(--evently-space-6);
}

.hero-title {
	margin-bottom: var(--evently-space-3);
	font-size: var(--evently-fs-hero);
}

.hero-sub {
	font-size: 18px;
	line-height: 1.6;
	color: var(--evently-muted);
	margin-bottom: var(--evently-space-5);
	max-width: 420px;
}

.hero-btns {
	display: flex;
	gap: var(--evently-space-1) var(--evently-space-2);
	flex-wrap: wrap;
}

.hero-stats {
	display: flex;
	gap: var(--evently-space-4);
	margin-top: var(--evently-space-6);
	flex-wrap: wrap;
}

.hero-stat-num {
	font-size: 22px;
	font-weight: 800;
	color: var(--evently-text);
	letter-spacing: -0.03em;
}

.hero-stat-lbl {
	font-size: var(--evently-fs-caption);
	color: var(--evently-muted);
	margin-top: 2px;
}

.hero-img-wrap {
	position: relative;
}

.hero-img {
	border-radius: var(--evently-radius-hero);
	overflow: hidden;
	aspect-ratio: 4/3;
	background: var(--evently-border);
}

.hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-card {
	position: absolute;
	bottom: 24px;
	left: -32px;
	background: var(--evently-white);
	border-radius: var(--evently-radius-md);
	padding: 20px 24px;
	box-shadow: var(--evently-shadow-floating);
	border: 1px solid var(--evently-border);
	min-width: 260px;
}

.hero-card-cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--evently-primary);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.hero-card-date {
	font-size: 15px;
	font-weight: 700;
	color: var(--evently-text);
	margin-bottom: 4px;
}

.hero-card-loc {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: var(--evently-fs-caption);
	color: var(--evently-muted);
	margin-bottom: 14px;
}

.hero-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--evently-space-2);
}

.hero-card-price {
	font-size: 18px;
	font-weight: 800;
	color: var(--evently-text);
}

.hero-live {
	position: absolute;
	top: 20px;
	right: 20px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	border-radius: var(--evently-radius-sm);
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	box-shadow: var(--evently-shadow-soft);
}

.hero-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--evently-live);
	flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.hero-live-dot {
		animation: evently-pulse 2.4s ease-in-out infinite;
	}
}

@keyframes evently-pulse {
	0%, 100% {
		opacity: 1;
	}

	50% {
		opacity: 0.4;
	}
}

.hero-live span {
	font-size: var(--evently-fs-caption);
	font-weight: 600;
	color: var(--evently-text);
}

/* ── Search bar ───────────────────────────────────────────────────── */

.search-wrap {
	/* Vertical padding + full-bleed background band only. No horizontal
	   padding here on purpose: .search-bar centers itself independently
	   via max-width:var(--evently-max) + margin:auto (own 10px inset —
	   see that rule), the exact same mechanism the header uses against
	   the raw viewport. Giving .search-wrap its own --evently-pad on top
	   of that made .search-bar center inside an already-inset band
	   instead of against the viewport directly, so the two only lined up
	   by coincidence at certain widths and visibly drifted apart at
	   others. (archive.css already zeroes this for the compact archive
	   search bar for the same reason — this makes the homepage hero
	   consistent with that.) */
	padding: var(--evently-space-4) 0 0;
	background: var(--evently-surface);
}

.search-bar {
	max-width: var(--evently-max);
	margin: 0 auto;
	/* Same fixed 10px inset as the header, archive layout and Elementor page
	   title — this floats between the hero and the page content instead of
	   nesting inside a .evently-section, so it has no padding of its own
	   otherwise and its edges land flush with the container's. */
	padding-left: 10px;
	padding-right: 10px;
	background: var(--evently-white);
	border-radius: var(--evently-radius-lg);
	border: 1px solid var(--evently-border);
	box-shadow: var(--evently-shadow-floating);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr auto;
	overflow: visible;
	min-height: 88px;
	position: relative;
	z-index: 5;
}

.search-bar.has-select-open {
	z-index: 30;
}

.search-field {
	padding: 0 var(--evently-space-3);
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-right: 1px solid var(--evently-border);
	min-width: 0;
	position: relative;
}

.search-field:last-of-type {
	border-right: none;
}

.search-field--select {
	overflow: visible;
	z-index: 1;
}

.search-field--select.is-select-open {
	z-index: 40;
}

.search-field--what {
	overflow: visible;
	z-index: 1;
}

.search-field--what.is-autocomplete-open {
	z-index: 40;
}

.search-field input,
.search-field select {
	border: none;
	outline: none;
	font-size: var(--evently-fs-label);
	font-weight: 500;
	color: var(--evently-text);
	background: transparent;
	font-family: inherit;
	width: 100%;
	padding: 0;
	appearance: none;
}

.search-field input::placeholder {
	color: #bbb;
}

/* ── Modern category select (search.js enhances the native <select>) ─ */

.evently-modern-select {
	position: relative;
	width: 100%;
	min-width: 0;
}

.evently-modern-select__native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.evently-modern-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--evently-text);
	font-family: inherit;
	font-size: var(--evently-fs-label);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
}

.evently-modern-select__trigger:focus {
	outline: none;
}

.evently-modern-select__trigger:focus-visible {
	outline: 2px solid var(--evently-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

.evently-modern-select__value {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.evently-modern-select__chevron {
	flex: 0 0 auto;
	width: 12px;
	height: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23777773' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 8px;
	transition: transform var(--evently-transition-fast) ease;
}

.evently-modern-select.is-open .evently-modern-select__chevron {
	transform: rotate(180deg);
}

.evently-modern-select__menu {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	left: auto;
	z-index: 50;
	min-width: 240px;
	max-width: min(320px, calc(100vw - 32px));
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--evently-border);
	border-radius: var(--evently-radius-md);
	background: var(--evently-white);
	box-shadow: var(--evently-shadow-deep);
	box-sizing: border-box;
	scrollbar-width: thin;
}

.evently-modern-select__menu[hidden] {
	display: none;
}

.evently-modern-select__option {
	display: block;
	margin: 0;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--evently-radius-sm);
	background: transparent;
	color: var(--evently-muted);
	font-size: var(--evently-fs-small);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--evently-transition-fast) ease,
		color var(--evently-transition-fast) ease;
}

.evently-modern-select__option + .evently-modern-select__option {
	margin-top: 2px;
}

.evently-modern-select__option:hover,
.evently-modern-select__option:focus {
	outline: none;
	background: var(--evently-surface);
	color: var(--evently-text);
}

.evently-modern-select__option.is-selected {
	background: var(--evently-primary-soft);
	color: var(--evently-primary);
	font-weight: 600;
}

.evently-modern-select__option.is-selected:hover,
.evently-modern-select__option.is-selected:focus {
	background: var(--evently-primary-soft);
	color: var(--evently-primary);
}

.evently-modern-select__option.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.search-submit {
	display: flex;
	align-items: center;
	padding: 0 var(--evently-space-2);
}

.search-submit .btn {
	background: var(--evently-primary);
	color: var(--evently-white);
	border-radius: var(--evently-radius-md);
	padding: 14px 32px;
}

.search-submit .btn:hover {
	opacity: 0.88;
	transform: none;
	box-shadow: none;
}

.search-bar-mobile {
	display: none;
}