/*
 * "Join Leadership Live" widget styles.
 *
 * Adapted from the reference styles.css. Differences:
 *   - No body/html resets (don't fight the WordPress theme).
 *   - No min-height: 100vh — Elementor sections handle viewport height.
 *   - Tokens are defined on .lhl (not :root), so Style-tab CSS variables on
 *     {{WRAPPER}} can override them without leaking globally.
 */

/* Design tokens — scoped to .lhl so Style-tab overrides can replace them. */
.lhl {
	--primary-1: #021d44;
	--secondary-1: #c8ff78;
	--secondary-2: #222222;
	--secondary-3: #e2e2e2;
	--input-border: rgba(34, 34, 34, 0.3);
	--live-red: #ef2929;

	--corner-color: #ffffff;
	/* Scale the bracket size/inset with the viewport so they don't look
	   oversized on small mobile cards. Style controls overwrite these. */
	--corner-size: clamp(20px, 3.5vw, 32px);
	--corner-thickness: 2px;
	/* Per-edge insets so the editor can offset each corner independently. */
	--corner-inset-top: clamp(12px, 2.5vw, 20px);
	--corner-inset-right: clamp(12px, 2.5vw, 20px);
	--corner-inset-bottom: clamp(12px, 2.5vw, 20px);
	--corner-inset-left: clamp(12px, 2.5vw, 20px);

	/* Fit-to-viewport offset — overridden by the editor control to match the
	   theme's header height when the "Fit to viewport" switcher is on. */
	--lhl-vh-offset: 80px;

	--font-display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
	--font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Helvetica Neue", Arial, sans-serif;
	--font-input: "Helvetica Neue", "Helvetica Neue LT Pro", Helvetica, Arial,
		sans-serif;
}

.lhl,
.lhl *,
.lhl *::before,
.lhl *::after {
	box-sizing: border-box;
}

/* ---------- Section frame ---------- */

.lhl {
	background: var(--secondary-1);
	color: var(--secondary-2);
	font-family: var(--font-body);
	padding: 140px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Fit-to-viewport modifier — toggled by the "Fit to viewport height" Style
   control. Fills the screen below the theme header and vertically centers the
   inner grid so nothing sits below the fold. */
.nil-ea-fit-vh--yes .lhl {
	min-height: calc(100vh - var(--lhl-vh-offset));
	min-height: calc(100svh - var(--lhl-vh-offset));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.lhl__inner {
	/* Inner container grows with viewport above 1170px so the layout doesn't
	   look stranded on ultra-wide / zoomed-out screens. Below 1170px the
	   px floor wins, so nothing changes for normal desktops. */
	max-width: clamp(1170px, 78vw, 1700px);
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 534fr) minmax(0, 520fr);
	column-gap: clamp(28px, 4.7vw, 80px);
	/* Both columns start at the top of the row. The image is sized
	   independently (aspect-ratio + viewport cap) and the right column
	   flows naturally — so a tall form pushes content below the fold
	   without affecting the image. */
	align-items: start;
}

/* ---------- Left: live card ---------- */

.lhl__left {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}

.lhl .live-card {
	position: relative;
	width: 100%;
	/* Image width grows with viewport above 534px (Figma baseline) up to
	   750px — keeps the image properly sized on large monitors / zoomed-out
	   views without ballooning past readable proportions. */
	max-width: clamp(520px, 37vw, 715px);
	margin: 0;
	overflow: hidden;
	container-type: inline-size;
	background: #1a1a1a;
	/* The image is sized independently of the right column so it's always
	   fully visible inside the viewport.
	     - aspect-ratio keeps the Figma 534×692 proportions
	     - max-height caps height to whatever the viewport leaves after the
	       theme header (--lhl-vh-offset) and the section's vertical padding
	     - width is bounded by the grid column AND the responsive cap above
	   Whichever constraint is tighter wins, so the image scales down on
	   shorter viewports without ever clipping. */
	aspect-ratio: 534 / 580;
	height: auto;
	max-height: calc(100vh - var(--lhl-vh-offset, 80px) - 160px);
}

.nil-ea-fit-vh--yes .lhl .live-card {
	max-height: calc(100vh - var(--lhl-vh-offset) - 160px);
	max-height: calc(100svh - var(--lhl-vh-offset) - 160px);
}

.lhl .live-card__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Corner brackets — L-shaped overlays inset from each corner of the image */
.lhl .live-card__corner {
	position: absolute;
	width: var(--corner-size);
	height: var(--corner-size);
	pointer-events: none;
	z-index: 2;
}

.lhl .live-card__corner--tl {
	top: var(--corner-inset-top);
	left: var(--corner-inset-left);
	border-top: var(--corner-thickness) solid var(--corner-color);
	border-left: var(--corner-thickness) solid var(--corner-color);
}

.lhl .live-card__corner--tr {
	top: var(--corner-inset-top);
	right: var(--corner-inset-right);
	border-top: var(--corner-thickness) solid var(--corner-color);
	border-right: var(--corner-thickness) solid var(--corner-color);
}

.lhl .live-card__corner--bl {
	bottom: var(--corner-inset-bottom);
	left: var(--corner-inset-left);
	border-bottom: var(--corner-thickness) solid var(--corner-color);
	border-left: var(--corner-thickness) solid var(--corner-color);
}

.lhl .live-card__corner--br {
	bottom: var(--corner-inset-bottom);
	right: var(--corner-inset-right);
	border-bottom: var(--corner-thickness) solid var(--corner-color);
	border-right: var(--corner-thickness) solid var(--corner-color);
}

/* "We Are Live" badge — dot + text, pinned to the lower portion of the image */
.lhl .live-card__badge {
	position: absolute;
	left: 50%;
	bottom: clamp(20px, 6cqw, 56px);
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: clamp(8px, 1.2cqw, 14px);
	pointer-events: none;
	z-index: 3;
	white-space: nowrap;
}

.lhl .live-card__dot {
	position: relative;
	width: max(10px, 1.55cqw);
	height: max(10px, 1.55cqw);
	border-radius: 50%;
	background: var(--live-red);
	flex: 0 0 auto;
}

.lhl .live-card__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: nil-lhl-live-pulse 1.8s ease-out infinite;
}

.lhl .live-card__dot--static::after {
	animation: none;
}

.lhl .live-card__label {
	font-family: var(--font-display);
	font-size: clamp(14px, 1.9cqw, 20px);
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
}

@keyframes nil-lhl-live-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(239, 41, 41, 0.65);
	}
	70% {
		box-shadow: 0 0 0 14px rgba(239, 41, 41, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(239, 41, 41, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lhl .live-card__dot::after {
		animation: none;
	}
}

/* ---------- Right: content + form ---------- */

.lhl__right {
	width: 100%;
	min-width: 0;
	/* Right column matches the image's growth so the 2-column ratio holds
	   on large viewports. Below 567px the px floor wins. */
	max-width: clamp(520px, 37vw, 750px);
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 3vh, 32px);
}

.lhl__text-block {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.8vh, 18px);
}

.lhl__title {
	margin: 0;
	font-family: var(--font-display);
	/* Scales from 28px (mobile) through 56px (≈ default desktop) up to 80px
	   on very wide viewports — keeps the Figma proportion when the right
	   column expands. The vh component prevents it from getting too big on
	   short screens. */
	font-size: clamp(28px, min(4vw, 6vh), 80px);
	font-weight: 400;
	line-height: 0.88;
	text-transform: uppercase;
	color: var(--primary-1);
}

.lhl__desc {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(13px, min(1.05vw, 1.7vh), 18px);
	font-weight: 400;
	line-height: 1.45;
	color: var(--secondary-2);
}

/* ---------- Custom-HTML slot ----------
   The widget renders whatever HTML the editor pasted (typically the HubSpot
   embed from hubspot-embed.html) into this slot. The embed brings its own
   scoped styling — we just give the slot a full-width container so it
   slots into the right column cleanly. */

.lhl__custom-html {
	width: 100%;
}

/* ---------- Responsive ---------- */

/* Small-laptop / tablet landscape — still 2 columns, just compressed.
   Title cap lowered so "LEADERSHIP LIVE" reliably fits the narrower right
   column at this breakpoint. */
@media (max-width: 1024px) {
	.lhl {
		padding: clamp(56px, 9vh, 96px) clamp(24px, 6vw, 64px);
	}

	.lhl__inner {
		column-gap: clamp(24px, 3.5vw, 48px);
	}

	.lhl__title {
		font-size: clamp(32px, min(4.6vw, 6vh), 48px);
	}

	.lhl .live-card {
		max-height: calc(100vh - var(--lhl-vh-offset, 80px) - 140px);
	}
}

/* Tablet portrait — stack the columns. Below this breakpoint the section is
   naturally taller than one viewport (image + content + form stacked), so
   override the fit-to-viewport min-height — otherwise the content gets a
   forced empty band underneath. */
@media (max-width: 960px) {
	.lhl {
		padding: clamp(48px, 7vh, 80px) clamp(20px, 5vw, 48px);
	}

	.nil-ea-fit-vh--yes .lhl {
		min-height: 0;
		display: block;
	}

	.lhl__inner {
		grid-template-columns: 1fr;
		row-gap: clamp(32px, 5vh, 48px);
	}

	.lhl__left {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lhl .live-card {
		aspect-ratio: 534 / 580;
		max-width: 480px;
		width: 100%;
		/* On stacked layouts the image sits above content, so allow a bit
		   more height — capped so the right column still gets airtime. */
		max-height: 55vh;
		max-height: 55svh;
	}

	.lhl__right {
		max-width: none;
		align-items: stretch;
	}

	.lhl__title {
		font-size: clamp(36px, 6.4vw, 56px);
	}

	.lhl__desc {
		font-size: clamp(15px, 1.8vw, 17px);
		line-height: 1.45;
	}
}

@media (max-width: 768px) {
	.lhl {
		padding: 56px clamp(20px, 5vw, 32px);
	}

	.lhl__inner {
		row-gap: 36px;
	}

	.lhl .live-card {
		max-width: min(420px, 80vw);
	}

	.lhl__right {
		gap: 28px;
	}

	.lhl__text-block {
		gap: 14px;
	}

	.lhl__title {
		font-size: clamp(36px, 8vw, 56px);
	}
}

@media (max-width: 560px) {
	.lhl {
		padding: 48px 20px;
	}

	.lhl__inner {
		row-gap: 32px;
	}

	.lhl .live-card {
		max-width: min(360px, 88vw);
	}

	.lhl__title {
		font-size: clamp(32px, 9vw, 44px);
		line-height: 0.9;
	}

	.lhl__desc {
		font-size: 15px;
	}
}

@media (max-width: 380px) {
	.lhl {
		padding: 40px 16px;
	}

	.lhl__title {
		font-size: 32px;
	}
}

@media (min-width: 1600px) {
	.lhl {
		padding: 140px;
	}
}

/* Landscape phones — short viewport, side-by-side. Cap the image to the
   actual screen height so it can't push pasted form embeds off the side. */
@media (min-width: 961px) and (max-height: 600px) {
	.lhl .live-card {
		max-height: calc(100vh - var(--lhl-vh-offset, 80px) - 120px);
	}

	.lhl__title {
		font-size: clamp(28px, 4.4vh, 40px);
	}
}

/* Print — flatten the section, drop the form, keep the heading + image. */
@media print {
	.lhl {
		padding: 24px 0;
		min-height: 0 !important;
		display: block !important;
	}

	.lhl__inner {
		grid-template-columns: 1fr;
	}

	.lhl__custom-html,
	.lhl .live-card__corner,
	.lhl .live-card__badge {
		display: none;
	}

	.lhl .live-card {
		max-height: 400px;
		aspect-ratio: 534 / 580;
	}

	.lhl__title {
		color: #000 !important;
	}
}