/* ===========================================================================
   Konnect Dots :: local events

   Everything scoped under .ev-page, for the reason the search page taught us:
   an unscoped .btn-primary in a page stylesheet restyled the footer's
   back-to-top button, and a blanket reset overrode the site font on the header
   and footer. Nothing here may reach outside the events pages.
   =========================================================================== */

.ev-page {
	background: #f8fafc;
	padding: 34px 16px 64px;
	min-height: 60vh;
}

.ev-wrap {
	max-width: 1100px;
	margin: 0 auto;
}

.ev-wrap--detail { max-width: 1060px; }
.ev-wrap--narrow { max-width: 620px; }

/* ---- listing header ---- */

.ev-head {
	margin-bottom: 26px;
}

.ev-head__title {
	margin: 0 0 8px;
	font-size: 32px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -.01em;
}

.ev-head__sub {
	margin: 0;
	max-width: 620px;
	font-size: 15px;
	line-height: 1.6;
	color: #64748b;
}

/* ---- the grid of cards ---- */

.ev-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
	gap: 20px;
}

.ev-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 0 0 1px rgba(15, 23, 42, .05);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.ev-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(15, 23, 42, .13), 0 0 0 1px rgba(30, 58, 138, .16);
}

.ev-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.ev-card__link:focus-visible {
	outline: 2px solid #1e3a8a;
	outline-offset: -2px;
}

/* ---- card top: image or lettered panel, with the date over it ---- */

.ev-card__top {
	position: relative;
	display: block;
	height: 180px;
	overflow: hidden;
	background: #eef2f7;
}

/* contain, not cover, for the same reason as .ev-hero__img -- a cropped poster
   shows a meaningless horizontal slice of itself. The tile keeps a fixed height
   so the grid stays even, and .ev-card__top's background fills what is spare. */
.ev-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ev-card__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: linear-gradient(135deg, #1e3a8a 0%, #4f46e5 55%, #7c3aed 100%);
	color: rgba(255, 255, 255, .5);
	font-size: 62px;
	font-weight: 800;
	line-height: 1;
}

/* the date block, top left */
.ev-card__when {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 48px;
	padding: 6px 8px 7px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 3px 10px rgba(15, 23, 42, .22);
	line-height: 1;
}

.ev-card__day {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
}

.ev-card__mon {
	margin-top: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #dc2626;
}

.ev-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(15, 23, 42, .78);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ev-card__badge--online { background: #0f766e; }

/* price, bottom right -- the date block has the top left and the mode badge
   the top right. White on the poster so it reads over any artwork. */
.ev-card__price {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 5px 10px;
	border-radius: 999px;
	background: #fff;
	color: #0f172a;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .01em;
	box-shadow: 0 3px 10px rgba(15, 23, 42, .22);
}

.ev-card__price.is-free {
	background: #0f766e;
	color: #fff;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .06em;
}

/* ---- card body ---- */

.ev-card__body {
	display: block;
	padding: 16px 17px 6px;
	flex: 1 1 auto;
}

.ev-card__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.35;
	margin-bottom: 7px;
}

.ev-card__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.55;
	color: #64748b;
	margin-bottom: 12px;
}

.ev-card__facts {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ev-fact {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: #475569;
}

.ev-fact svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	color: #94a3b8;
}

/* ---- card foot ---- */

.ev-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 17px 16px;
	margin-top: 12px;
	border-top: 1px solid #f1f5f9;
}

.ev-card__host {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	color: #0f172a;
	font-weight: 600;
	min-width: 0;
}

.ev-card__host em {
	display: block;
	font-style: normal;
	font-weight: 500;
	color: #94a3b8;
	font-size: 11px;
}

.ev-card__host-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: linear-gradient(135deg, #1e3a8a, #3b5bb5);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.ev-pill {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: #eff6ff;
	color: #1e3a8a;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.ev-pill--few    { background: #fef3c7; color: #b45309; }
.ev-pill--closed { background: #f1f5f9; color: #94a3b8; }

/* ---- empty state ---- */

.ev-empty {
	text-align: center;
	padding: 64px 24px;
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 16px;
	color: #94a3b8;
}

.ev-empty svg {
	width: 40px;
	height: 40px;
	stroke-width: 1.4;
	margin-bottom: 12px;
}

.ev-empty p { margin: 0; font-size: 15px; }

/* ===========================================================================
   detail page
   =========================================================================== */

.ev-crumb {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 18px;
	font-size: 13px;
	color: #94a3b8;
	flex-wrap: wrap;
}

.ev-crumb a { color: #64748b; text-decoration: none; }
.ev-crumb a:hover { color: #1e3a8a; }
.ev-crumb svg { width: 13px; height: 13px; }
.ev-crumb span { color: #0f172a; font-weight: 600; }

.ev-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 356px;
	gap: 24px;
	align-items: start;
}

.ev-detail__main {
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 16px;
	padding: 26px 28px 28px;
}

/* ---- hero ---- */

/* Event covers are usually portrait posters with the detail -- timings, what is
   included -- printed top to bottom, so nothing may be cropped. width/height
   auto with both maximums lets the browser scale the whole image down to fit
   while keeping its aspect ratio: a tall poster ends up narrow and centred, a
   wide banner fills the column. No cover crop, and no letterbox bars either. */
.ev-hero__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 620px;
	border-radius: 12px;
	margin: 0 auto 18px;
	display: block;
}

.ev-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 13px;
}

.ev-tag {
	padding: 4px 11px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ev-tag--online { background: #ccfbf1; color: #0f766e; }
.ev-tag--few    { background: #fef3c7; color: #b45309; }
.ev-tag--quiet  { background: #eff6ff; color: #1e3a8a; }

.ev-hero__title {
	margin: 0 0 10px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.22;
	color: #0f172a;
	letter-spacing: -.01em;
}

.ev-hero__sub {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #475569;
}

/* ---- when and where ---- */

.ev-facts {
	display: grid;
	gap: 14px;
	margin: 22px 0;
	padding: 18px 20px;
	background: #f8fafc;
	border: 1px solid #eef2f7;
	border-radius: 12px;
}

.ev-factrow {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.ev-factrow__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 9px;
	background: #fff;
	border: 1px solid #e8edf3;
	color: #1e3a8a;
}

.ev-factrow__icon svg { width: 16px; height: 16px; }

.ev-factrow__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 3px;
}

.ev-factrow__value {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
}

.ev-factrow__note {
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.55;
	color: #64748b;
}

/* the price sitting under whichever schedule it belongs to */
.ev-factrow__price {
	margin-top: 5px;
	font-size: 15px;
	font-weight: 800;
	color: #1e3a8a;
}

.ev-factrow__price.is-free { color: #0f766e; }

.ev-factrow__price span {
	margin-left: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #64748b;
}

.ev-dot { margin: 0 6px; color: #cbd5e1; }

/* ---- the write up, which is author HTML ---- */

.ev-body {
	font-size: 15px;
	line-height: 1.72;
	color: #334155;
}

.ev-body p { margin: 0 0 14px; }
.ev-body h2, .ev-body h3 { margin: 22px 0 10px; color: #0f172a; line-height: 1.3; }
.ev-body h2 { font-size: 20px; }
.ev-body h3 { font-size: 17px; }
.ev-body ul, .ev-body ol { margin: 0 0 14px; padding-left: 22px; }
.ev-body li { margin-bottom: 6px; }
.ev-body img { max-width: 100%; height: auto; border-radius: 10px; }
.ev-body a { color: #1e3a8a; }

/* The description is pasted from a rich text editor and carries its own inline
   font sizes, some of them large enough to break the column. Capping here is
   safer than stripping the style attributes, which would also lose emphasis. */
.ev-body [style*="font-size"] { font-size: inherit !important; }

/* ---- host ---- */

.ev-host {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #eef2f7;
}

.ev-host__who { display: flex; align-items: center; gap: 13px; }

.ev-host__pic {
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	font-size: 18px;
}

.ev-host__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #94a3b8;
}

.ev-host__name { font-size: 16px; font-weight: 700; color: #0f172a; margin-top: 2px; }
.ev-host__role { font-size: 13px; color: #64748b; }

.ev-host__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #1e3a8a;
	text-decoration: none;
}

.ev-host__link svg { width: 15px; height: 15px; }
.ev-host__link:hover { text-decoration: underline; }

/* ===========================================================================
   registration form
   =========================================================================== */

.ev-detail__side { position: sticky; top: 20px; }

.ev-form-card {
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 16px;
	padding: 22px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.ev-form-card__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	color: #0f172a;
}

.ev-form-card__note {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.55;
	color: #64748b;
}

/* ---- what it costs, in the registration card ---- */

.ev-price {
	margin: 0 0 16px;
	padding: 13px 15px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid #eef2f7;
}

.ev-price__row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
}

/* two modes at two prices, one under the other */
.ev-price--split .ev-price__row + .ev-price__row {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px dashed #e2e8f0;
}

.ev-price__label {
	flex: 0 0 100%;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #94a3b8;
}

.ev-price__amount {
	font-size: 25px;
	font-weight: 800;
	line-height: 1.1;
	color: #0f172a;
}

.ev-price__amount.is-free { color: #0f766e; }

.ev-price__note {
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
}

/* inside .ev-join on the confirmation, which already draws the panel */
.ev-price--bare {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.ev-field { margin-bottom: 14px; }

.ev-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 6px;
}

.ev-optional {
	text-transform: none;
	letter-spacing: 0;
	color: #cbd5e1;
	margin-left: 3px;
}

.ev-input {
	width: 100%;
	font-family: 'Segoe UI', sans-serif;
	font-size: 14px;
	color: #1e293b;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	padding: 11px 13px;
	transition: border-color .15s;
}

.ev-input:focus { outline: none; border-color: #1e3a8a; }
.ev-field.is-invalid .ev-input { border-color: #dc2626; }

.ev-textarea { resize: vertical; min-height: 76px; line-height: 1.55; }

.ev-input-group { display: flex; align-items: stretch; }

.ev-prefix {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	background: #f1f5f9;
	border: 1.5px solid #e2e8f0;
	border-right: none;
	border-radius: 10px 0 0 10px;
}

.ev-input-group .ev-input { border-radius: 0 10px 10px 0; }

.ev-err {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #dc2626;
}

.ev-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	font-family: 'Segoe UI', sans-serif;
	font-size: 14px;
	font-weight: 700;
	border: 1.5px solid transparent;
	border-radius: 10px;
	padding: 13px 20px;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}

.ev-btn--primary { background: #1e3a8a; color: #fff; }
.ev-btn--primary:hover { background: #1e40af; color: #fff; }
.ev-btn--ghost { background: #fff; border-color: #e2e8f0; color: #475569; }
.ev-btn--ghost:hover { border-color: #cbd5e1; color: #1e3a8a; }
.ev-btn svg { width: 15px; height: 15px; }

.ev-privacy {
	margin: 14px 0 0;
	font-size: 11.5px;
	line-height: 1.6;
	color: #94a3b8;
}

.ev-privacy a { color: #1e3a8a; }

.ev-alert {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-size: 13px;
	font-weight: 600;
	border-radius: 10px;
	padding: 11px 14px;
	margin-bottom: 16px;
}

/* honeypot: off-screen rather than display:none, because some bots skip inputs
   that are not rendered and this one is meant to be filled in */
.ev-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===========================================================================
   confirmation
   =========================================================================== */

.ev-done {
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 16px;
	padding: 40px 30px;
	text-align: center;
}

.ev-done__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #dcfce7;
	color: #15803d;
	font-size: 28px;
	margin-bottom: 16px;
}

.ev-done__title {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 800;
	color: #0f172a;
}

.ev-done__text {
	margin: 0 auto 8px;
	max-width: 430px;
	font-size: 15px;
	line-height: 1.65;
	color: #475569;
}

.ev-done__text--small { font-size: 13px; color: #94a3b8; }

.ev-join {
	margin: 24px auto 0;
	max-width: 440px;
	padding: 18px 20px;
	background: #f8fafc;
	border: 1px solid #e8edf3;
	border-radius: 12px;
	text-align: left;
}

.ev-join__label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 11px;
}

.ev-join__label svg { width: 14px; height: 14px; }

.ev-join__detail {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #0f172a;
	word-break: break-word;
}

.ev-join__note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: #64748b;
}

.ev-done__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 26px;
}

.ev-done__actions .ev-btn { width: auto; }

/* ===========================================================================
   small screens
   =========================================================================== */

@media (max-width: 900px) {
	.ev-detail { grid-template-columns: 1fr; }
	.ev-detail__side { position: static; }
}

@media (max-width: 560px) {
	.ev-page { padding: 20px 12px 44px; }
	.ev-head__title { font-size: 25px; }
	.ev-hero__title { font-size: 23px; }
	.ev-detail__main { padding: 20px 18px 22px; }
	.ev-grid { grid-template-columns: 1fr; gap: 16px; }

	/* a tap has no hover state to lift into */
	.ev-card:hover { transform: none; }
}