/* Event hero (views/partials/event-hero.ejs): used by eventDetail.ejs when an event sets
   `content.hero`, in place of the standard banner. First used by Sa-Dhan 2026.
   Font, colours and grid texture follow the NBFC industry hero. */
.evl-hero {
	--evl-blue: #1565f5;
	--evl-blue-dark: #0e4fd0;
	--evl-navy: #0f2557;
	--evl-text: #4a5873;
	--evl-border: #e3e9f4;
	--evl-soft: #f3f7ff;
	color: var(--evl-text);
	text-align: left;
}

.evl-hero,
.evl-hero *:not(svg):not(svg *) {
	font-family: Arial, Helvetica, sans-serif !important;
}

.evl-hero * { box-sizing: border-box; }
.evl-hero h1 { margin: 0; }
.evl-hero p { margin: 0; }
.evl-hero a { text-decoration: none; }

.evl-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Buttons */
.evl-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.evl-btn i { display: inline-flex; width: 16px; height: 16px; }
.evl-btn svg { width: 100%; height: 100%; }

.evl-btn-primary {
	background: var(--evl-blue);
	color: #fff;
	box-shadow: 0 8px 20px rgba(21, 101, 245, 0.25);
}

.evl-btn-primary:hover { background: var(--evl-blue-dark); color: #fff; }

.evl-btn-outline {
	border: 1.5px solid var(--evl-blue);
	color: var(--evl-blue);
	background: #fff;
}

.evl-btn-outline:hover { background: var(--evl-soft); color: var(--evl-blue); }

/* Hero: text only, no photo. The site header is position: fixed (65px), so the hero clears it.
   Background colour and grid texture are the NBFC industry hero's (finances.css
   .fin-hero-center + nbfc-field-force-management.css): pale blue base with a deeper
   blue glow at the top centre, and a 14px grid drawn from the top of the hero down
   to the bottom of the heading, fading out at its sides and bottom. */
.evl-hero {
	position: relative;
	overflow: hidden;
	padding: 129px 0 80px;
	background:
		radial-gradient(ellipse 36% 58% at 50% 0%, rgba(110, 166, 255, 0.42) 0%, rgba(150, 192, 255, 0.18) 50%, rgba(150, 192, 255, 0) 100%),
		linear-gradient(180deg, #ebf3ff 0%, #f3f8ff 45%);
}

#event-container .evl-hero h1 { position: relative; z-index: 0; }

#event-container .evl-hero h1::before {
	position: absolute;
	z-index: -1;
	top: -420px;
	bottom: 0;
	left: 50%;
	width: min(760px, 52vw);
	content: "";
	pointer-events: none;
	transform: translateX(-50%);
	background-image:
		linear-gradient(rgba(30, 91, 250, 0.09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(30, 91, 250, 0.09) 1px, transparent 1px);
	background-position: center top;
	background-size: 14px 14px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 94%, transparent 100%),
		linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(180deg, #000 0%, #000 94%, transparent 100%),
		linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-composite: intersect;
}

@media (max-width: 900px) {
	#event-container .evl-hero h1::before { width: 86vw; }
}

.evl-hero-grid { display: block; }

.evl-hero-copy {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

/* Hero text matches the NBFC industry hero (finances.css .fin-hero-center +
   nbfc-field-force-management.css): 800-weight tight headline in #0b1530 with the
   accent in #164bd6, grey 18px subtitle. The "Event" badge keeps the mockup's small pill. */
.evl-badge {
	/* Own centred line: the heading box below is inline-grid, so an inline badge
	   would sit on the same line and be overlapped by the heading's first line. */
	display: block;
	width: fit-content;
	padding: 8px 20px;
	margin: 0 auto 24px;
	border-radius: 999px;
	background: #d6f0f2;
	color: var(--evl-navy);
	font-size: 16px;
	font-weight: 600;
}

#event-container .evl-hero h1 {
	margin: 0 auto;
	color: #0b1530;
	font-size: clamp(32px, 4vw, 58px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.1;
}

/* Two lines: "TrackOlap at Sa-Dhan 2026" / "Smarter Microfinance Operations".
   The font size keeps the longer line on one row at desktop widths. */
.evl-hero-line { display: block; }
.evl-hero-accent { color: #164bd6; }

@media (min-width: 861px) {
	.evl-hero-line { white-space: nowrap; }

	/* The tagline spans exactly the width of "Inclusive Growth 2026". The head box
	   shrink-wraps to the accent line only: the lead line and the tagline take
	   width 0 / min-width 100%, so they add nothing to its width. The wider lead
	   line overflows both sides evenly (flex centring), staying centred. */
	.evl-hero-head { display: inline-grid; }
	.evl-hero-lead {
		display: flex;
		justify-content: center;
		width: 0;
		min-width: 100%;
	}
	#event-container .evl-hero-head .evl-tagline {
		width: 0;
		min-width: 100%;
		max-width: none;
		text-wrap: wrap; /* fill the line out to the accent's edges */
	}
}

#event-container .evl-tagline {
	max-width: 760px;
	margin: 24px auto 0;
	color: #6b7280;
	font-size: 18px;
	line-height: 1.7;
	text-wrap: balance;
}

.evl-facts {
	display: flex;
	justify-content: center;
	gap: 12px;
	max-width: 760px;
	margin: 36px auto 32px;
	text-align: left;
}

.evl-fact {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex: 1 1 0;
	min-width: 0;
	padding: 16px 14px;
	border: 1px solid var(--evl-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(15, 37, 87, 0.06);
}

.evl-fact i { flex: none; width: 24px; height: 24px; color: var(--evl-blue); font-style: normal; }
.evl-fact svg { width: 100%; height: 100%; }
.evl-fact dt { font-size: 12px; font-weight: 500; color: var(--evl-navy); }
.evl-fact dd { margin: 4px 0 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--evl-navy); }

.evl-fact-booth { background: #ecfbf3; border-color: #bfeccf; }
.evl-fact-booth i { width: 30px; height: 30px; color: #17a35b; }
.evl-fact-booth dt { color: #17a35b; }
.evl-fact-booth dd { font-size: 22px; font-weight: 700; line-height: 1.1; }

.evl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }


@media (max-width: 860px) {
	.evl-hero { padding: 105px 0 56px; }
}

/* Phones keep the desktop layout: date, venue and booth stay side by side in one
   row of cards. Each card is narrow, so the icon sits above the text. */
@media (max-width: 560px) {
	.evl-wrap { padding: 0 16px; }
	.evl-facts { gap: 8px; margin: 28px auto 28px; }
	.evl-fact { flex-direction: column; gap: 8px; padding: 12px 10px; }
	.evl-fact i { width: 20px; height: 20px; }
	.evl-fact-booth i { width: 24px; height: 24px; }
	.evl-fact dt { font-size: 11px; }
	.evl-fact dd { font-size: 12px; overflow-wrap: anywhere; }
	.evl-fact-booth dd { font-size: 18px; }
	.evl-btn { width: 100%; justify-content: center; }
}