/* OCHBS — Directory popups
 *
 * Shared by three JetPopups: Sponsor (18479), Exhibitor (17952), Speaker (18393).
 * Enqueued by the ochbs-directory-popups mu-plugin. Elementor's Jet_Popup_Document
 * exposes no Custom CSS control, so element styling that Elementor's own controls
 * can't express lives here.
 *
 * Scoping:
 *   - Panel chrome lives outside the Elementor tree, so those rules list all three
 *     popup IDs explicitly.
 *   - Everything inside the tree keys off .ochbs-popup, the class on each popup's
 *     root container, so the three stay in sync from one rule.
 *   - Rules that must beat an Elementor-generated declaration carry a #jet-popup-*
 *     prefix: Elementor injects its <style> inside the AJAX payload, i.e. later in
 *     document order, so a class-only rule loses the tie.
 *
 * Source of truth: Sponsors/_Templates/ochbs-sponsor-popup.css
 *
 * Kit 16738: ink #0F172A · body #334155 · muted #64748B / #94A3B8 ·
 * hairline #E2E8F0 · plate #F8FAFC · lime #A5BE4C.
 */

/* ---------------------------------------------------------------- panel -- */

#jet-popup-18479 .jet-popup__overlay,
#jet-popup-17952 .jet-popup__overlay,
#jet-popup-18393 .jet-popup__overlay {
	background-color: rgba( 15, 23, 42, .55 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
}

/* No overflow:hidden here — the base stylesheet relies on overflow-y:auto to
   let long copy scroll. overflow:auto still clips the radius. */
#jet-popup-18479 .jet-popup__container-inner,
#jet-popup-17952 .jet-popup__container-inner,
#jet-popup-18393 .jet-popup__container-inner {
	background-color: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 20px;
	padding: 0;
	box-shadow: 0 32px 80px -24px rgba( 15, 23, 42, .35 );
}

#jet-popup-18479 .jet-popup__container-inner::-webkit-scrollbar,
#jet-popup-17952 .jet-popup__container-inner::-webkit-scrollbar,
#jet-popup-18393 .jet-popup__container-inner::-webkit-scrollbar {
	width: 10px;
}

#jet-popup-18479 .jet-popup__container-inner::-webkit-scrollbar-thumb,
#jet-popup-17952 .jet-popup__container-inner::-webkit-scrollbar-thumb,
#jet-popup-18393 .jet-popup__container-inner::-webkit-scrollbar-thumb {
	background-color: #E2E8F0;
	border: 3px solid #fff;
	border-radius: 999px;
}

/* A ghost circle that only asserts itself on hover, instead of the stock
   black square sitting in the corner of a white editorial panel. */
#jet-popup-18479 .jet-popup__close-button,
#jet-popup-17952 .jet-popup__close-button,
#jet-popup-18393 .jet-popup__close-button {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background-color: transparent;
	color: #64748B;
	transform: translate( -14px, 14px );
	transition: background-color .2s ease, color .2s ease;
}

#jet-popup-18479 .jet-popup__close-button:hover,
#jet-popup-18479 .jet-popup__close-button:focus-visible,
#jet-popup-17952 .jet-popup__close-button:hover,
#jet-popup-17952 .jet-popup__close-button:focus-visible,
#jet-popup-18393 .jet-popup__close-button:hover,
#jet-popup-18393 .jet-popup__close-button:focus-visible {
	background-color: #F1F5F9;
	color: #0F172A;
}

#jet-popup-18479 .jet-popup__close-button svg,
#jet-popup-17952 .jet-popup__close-button svg,
#jet-popup-18393 .jet-popup__close-button svg {
	width: 15px;
	height: auto;
	fill: currentColor;
}

/* ------------------------------------------------------------- overflow -- */

/* Elementor's "grow" flex preset emits --flex-grow:1 AND --flex-shrink:0, so the
   content column could never shrink below its content width and the copy ran
   straight through the panel's right edge on any viewport under ~1100px.
   min-width:0 additionally disables the flex item's automatic minimum size,
   which is what actually lets the text reflow. */
#jet-popup-18479 .ochbs-content.e-con,
#jet-popup-17952 .ochbs-content.e-con,
#jet-popup-18393 .ochbs-content.e-con {
	--flex-shrink: 1;
	min-width: 0;
}

/* JetEngine's field wrappers are shrink-to-fit; without these they report the
   measure below as their preferred width and re-introduce the same overflow. */
#jet-popup-18479 .ochbs-content .jet-listing,
#jet-popup-18479 .ochbs-content .jet-listing-dynamic-field,
#jet-popup-18479 .ochbs-content .jet-listing-dynamic-field__inline-wrap,
#jet-popup-18479 .ochbs-content .jet-listing-dynamic-field__content,
#jet-popup-17952 .ochbs-content .jet-listing,
#jet-popup-17952 .ochbs-content .jet-listing-dynamic-field,
#jet-popup-17952 .ochbs-content .jet-listing-dynamic-field__inline-wrap,
#jet-popup-17952 .ochbs-content .jet-listing-dynamic-field__content,
#jet-popup-18393 .ochbs-content .jet-listing,
#jet-popup-18393 .ochbs-content .jet-listing-dynamic-field,
#jet-popup-18393 .ochbs-content .jet-listing-dynamic-field__inline-wrap,
#jet-popup-18393 .ochbs-content .jet-listing-dynamic-field__content {
	min-width: 0;
	max-width: 100%;
}

/* --------------------------------------------------------- rail imagery -- */

/* Sponsor and exhibitor marks run 5.07:1 to 0.71:1. Capping both axes inside a
   fixed-height plate is what makes 138 different logos read at one size instead
   of each popup taking the shape of its logo. */
.ochbs-popup .ochbs-logo .jet-listing-dynamic-image__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 88px;
	margin: 0 auto;
	object-fit: contain;
}

/* Headshots are photographs, not marks — they range from 480x640 portrait to
   928x703 landscape, so they get a cover crop biased to the top of the frame
   rather than the letterboxing a logo wants. */
.ochbs-popup .ochbs-portrait .jet-listing-dynamic-image__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 12px;
}

.ochbs-popup .ochbs-portrait .jet-listing-dynamic-image,
.ochbs-popup .ochbs-portrait .jet-listing-dynamic-image__figure,
.ochbs-popup .ochbs-portrait .jet-listing {
	width: 100%;
	height: 100%;
	margin: 0;
}

/* -------------------------------------------------------------- eyebrow -- */

.ochbs-popup .ochbs-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.ochbs-popup .ochbs-tier {
	padding: 7px 12px;
	border: 1px solid #E2E8F0;
	border-radius: 999px;
	background-color: transparent;
	color: #64748B;
	font-family: "Inter", sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Three levels of standing, drawn only from the kit — the directories have never
   distinguished a Platinum sponsor from a Silver one. Outline is the default, so
   silver / media / vip-lounge / exhibitor / speaker need no rule of their own. */
.ochbs-popup .ochbs-tier--platinum,
.ochbs-popup .ochbs-tier--title,
.ochbs-popup .ochbs-tier--moderator {
	border-color: #0F172A;
	background-color: #0F172A;
	color: #fff;
}

.ochbs-popup .ochbs-tier--gold,
.ochbs-popup .ochbs-tier--featured {
	border-color: #A5BE4C;
	background-color: #A5BE4C;
	color: #0F172A;
}

.ochbs-popup .ochbs-industry {
	color: #94A3B8;
	font-family: "Inter", sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* --------------------------------------------------------- name + body -- */

.ochbs-popup .ochbs-name .jet-listing-dynamic-field__content {
	margin: 0;
}

/* Speaker role line, sitting directly under the name. */
.ochbs-popup .ochbs-role {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-top: 10px;
	color: #64748B;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.ochbs-popup .ochbs-role__company-org {
	color: #0F172A;
	font-weight: 600;
}

.ochbs-popup .ochbs-role__sep {
	color: #CBD5E1;
}

/* min() so the measure never exceeds the column: at a 960px panel the column is
   only ~544px wide, so a bare 62ch would overhang even on desktop. */
#jet-popup-18479 .ochbs-body .jet-listing-dynamic-field__content,
#jet-popup-17952 .ochbs-body .jet-listing-dynamic-field__content,
#jet-popup-18393 .ochbs-body .jet-listing-dynamic-field__content {
	max-width: min( 62ch, 100% );
	margin-top: 20px;
	padding-top: 24px;
	border-top: 1px solid #E2E8F0;
	overflow-wrap: break-word;
}

.ochbs-popup .ochbs-body p {
	margin: 0 0 14px;
}

/* Several description fields are pastes of Elementor output — .elementor-element /
   .elementor-widget-container wrappers and all. Flatten that builder chrome so the
   copy reads as prose instead of inheriting widget spacing. */
.ochbs-popup .ochbs-body .elementor-element,
.ochbs-popup .ochbs-body .elementor-widget,
.ochbs-popup .ochbs-body .elementor-widget-container {
	width: auto;
	margin: 0;
	padding: 0;
}

/* Each wrapper's own last paragraph has its bottom margin zeroed below, so the
   rhythm between consecutive pasted blocks has to come from the wrapper itself. */
.ochbs-popup .ochbs-body .elementor-element + .elementor-element {
	margin-top: 14px;
}

/* Those pastes also close on an <h6>, which the theme renders at ~11px. Inside the
   popup a heading in the body copy is emphasis, not hierarchy. */
.ochbs-popup .ochbs-body h1,
.ochbs-popup .ochbs-body h2,
.ochbs-popup .ochbs-body h3,
.ochbs-popup .ochbs-body h4,
.ochbs-popup .ochbs-body h5,
.ochbs-popup .ochbs-body h6 {
	margin: 0 0 14px;
	color: #0F172A;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: 0;
}

.ochbs-popup .ochbs-body p:empty {
	display: none;
}

.ochbs-popup .ochbs-body p:last-child,
.ochbs-popup .ochbs-body > .jet-listing-dynamic-field__content > *:last-child {
	margin-bottom: 0;
}

/* Not every bio is built from paragraphs — several speaker bios are pasted as
   <div dir="auto"> blocks, which would otherwise run together with no rhythm.
   :not([class]) keeps this off the Elementor wrappers flattened above. */
.ochbs-popup .ochbs-body div[dir],
.ochbs-popup .ochbs-body > .jet-listing-dynamic-field__content > div:not([class]) {
	margin: 0 0 14px;
}

.ochbs-popup .ochbs-body div[dir]:last-child {
	margin-bottom: 0;
}

/* Links inside pasted copy default to browser blue, which is the one colour in
   the panel that belongs to nothing. */
.ochbs-popup .ochbs-body a {
	color: #0F172A;
	text-decoration: underline;
	text-decoration-color: #A5BE4C;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: text-decoration-color .2s ease;
}

.ochbs-popup .ochbs-body a:hover,
.ochbs-popup .ochbs-body a:focus-visible {
	text-decoration-color: #0F172A;
}

/* --------------------------------------------------------- session card -- */

/* Speakers appear in at most one session today, but the card is a list so a
   second assignment needs no template change. Hidden entirely by the shortcode
   when the speaker has no session yet. */
.ochbs-popup .ochbs-sessions {
	margin-top: 28px;
	padding: 22px 24px;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	background-color: #F8FAFC;
}

.ochbs-popup .ochbs-sessions__label {
	margin-bottom: 14px;
	color: #94A3B8;
	font-family: "Inter", sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ochbs-popup .ochbs-sessions__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ochbs-popup .ochbs-session + .ochbs-session {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #E2E8F0;
}

.ochbs-popup .ochbs-session__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.ochbs-popup .ochbs-session__type {
	padding: 5px 10px;
	border-radius: 999px;
	background-color: #0F172A;
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ochbs-popup .ochbs-session__day {
	color: #64748B;
	font-family: "Inter", sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ochbs-popup .ochbs-session__title {
	color: #0F172A;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.01em;
}

.ochbs-popup .ochbs-session__when {
	margin-top: 6px;
	color: #64748B;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ CTA -- */

.ochbs-popup .ochbs-cta a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}

/* A glyph rather than an icon-library reference: the popups are AJAX-loaded and
   the host page is not guaranteed to have enqueued any icon font.
   JetEngine orders the label after its (unused) icon slot, so the arrow needs an
   explicit order or it sorts to 0 and lands in front of the text. */
.ochbs-popup .ochbs-cta a .jet-listing-dynamic-link__label {
	order: 1;
}

.ochbs-popup .ochbs-cta a::after {
	content: "\2197";
	order: 2;
	font-size: 1.05em;
	line-height: 1;
}

.ochbs-popup .ochbs-cta a:hover,
.ochbs-popup .ochbs-cta a:focus-visible {
	background-color: #1E293B;
	transform: translateY( -1px );
}

/* ---------------------------------------------------------------- booth -- */

.ochbs-popup .ochbs-booth {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 20px;
	border-top: 1px solid #E2E8F0;
}

.ochbs-popup .ochbs-booth__label {
	color: #94A3B8;
	font-family: "Inter", sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ochbs-popup .ochbs-booth__value {
	color: #0F172A;
	font-family: "Inter", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.01em;
}

/* -------------------------------------------------------------- socials -- */

.ochbs-popup .ochbs-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ochbs-popup .ochbs-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid #E2E8F0;
	border-radius: 999px;
	color: #64748B;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ochbs-popup .ochbs-socials a:hover,
.ochbs-popup .ochbs-socials a:focus-visible {
	border-color: #0F172A;
	background-color: #0F172A;
	color: #fff;
}

/* A record with no booth and no socials leaves the shortcode widget in place but
   empty; without this the rail's 24px gap would open a hole. */
.ochbs-popup .elementor-widget-shortcode .elementor-shortcode:empty {
	display: none;
}

/* ------------------------------------------------------------- entrance -- */

@media ( prefers-reduced-motion: no-preference ) {

	#jet-popup-18479.jet-popup--show-state .ochbs-rail,
	#jet-popup-18479.jet-popup--show-state .ochbs-content > *,
	#jet-popup-17952.jet-popup--show-state .ochbs-rail,
	#jet-popup-17952.jet-popup--show-state .ochbs-content > *,
	#jet-popup-18393.jet-popup--show-state .ochbs-rail,
	#jet-popup-18393.jet-popup--show-state .ochbs-content > * {
		animation: ochbsRise .42s cubic-bezier( .22, .61, .36, 1 ) both;
	}

	.ochbs-popup .ochbs-content > *:nth-child(1) { animation-delay: .05s; }
	.ochbs-popup .ochbs-content > *:nth-child(2) { animation-delay: .09s; }
	.ochbs-popup .ochbs-content > *:nth-child(3) { animation-delay: .13s; }
	.ochbs-popup .ochbs-content > *:nth-child(4) { animation-delay: .17s; }
	.ochbs-popup .ochbs-content > *:nth-child(5) { animation-delay: .21s; }
	.ochbs-popup .ochbs-content > *:nth-child(6) { animation-delay: .25s; }
}

@keyframes ochbsRise {
	from { opacity: 0; transform: translateY( 10px ); }
	to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- stacked -- */

/* Elementor only stacks at its 767px mobile breakpoint, but the panel tracks the
   viewport at 92% from 1024px down. Below ~900px the fixed rail leaves the copy
   under 300px of measure, so the two-column split has to give out earlier. */
@media ( max-width: 900px ) {

	#jet-popup-18479 .ochbs-popup,
	#jet-popup-17952 .ochbs-popup,
	#jet-popup-18393 .ochbs-popup {
		--flex-direction: column;
	}

	#jet-popup-18479 .ochbs-rail,
	#jet-popup-17952 .ochbs-rail,
	#jet-popup-18393 .ochbs-rail {
		--width: 100%;
		--padding-left: 32px;
		--padding-right: 32px;
		--padding-bottom: 8px;
	}

	#jet-popup-18479 .ochbs-rail.e-con,
	#jet-popup-17952 .ochbs-rail.e-con,
	#jet-popup-18393 .ochbs-rail.e-con {
		--flex-grow: 0;
		--flex-shrink: 0;
	}

	#jet-popup-18479 .ochbs-content,
	#jet-popup-17952 .ochbs-content,
	#jet-popup-18393 .ochbs-content {
		--padding-top: 8px;
		--padding-left: 32px;
		--padding-right: 32px;
		border-width: 1px 0 0 0;
		--border-top-width: 1px;
		--border-right-width: 0px;
		--border-bottom-width: 0px;
		--border-left-width: 0px;
	}

	/* Full-bleed the plate would strand a small mark in a very wide box. */
	#jet-popup-18479 .ochbs-plate,
	#jet-popup-17952 .ochbs-plate {
		--min-height: 148px;
		max-width: 300px;
	}

	#jet-popup-18393 .ochbs-plate {
		--min-height: 220px;
		max-width: 180px;
	}
}

/* --------------------------------------------------------------- mobile -- */

@media ( max-width: 767px ) {

	#jet-popup-18479 .jet-popup__container-inner,
	#jet-popup-17952 .jet-popup__container-inner,
	#jet-popup-18393 .jet-popup__container-inner {
		border-radius: 16px;
	}

	#jet-popup-18479 .ochbs-rail,
	#jet-popup-17952 .ochbs-rail,
	#jet-popup-18393 .ochbs-rail {
		--padding-left: 24px;
		--padding-right: 24px;
	}

	#jet-popup-18479 .ochbs-content,
	#jet-popup-17952 .ochbs-content,
	#jet-popup-18393 .ochbs-content {
		--padding-left: 24px;
		--padding-right: 24px;
	}

	.ochbs-popup .ochbs-logo .jet-listing-dynamic-image__img {
		max-height: 68px;
	}

	.ochbs-popup .ochbs-booth {
		padding-top: 0;
		border-top: 0;
	}

	.ochbs-popup .ochbs-sessions {
		padding: 18px 18px;
	}
}