/**
 * JT Elegant Hero Banner widget styles.
 *
 * Visual design ported 1:1 from the supplied markup (badge + serif title
 * with a highlighted second line + description + button, prev/next arrows,
 * dots). The single static ".hh-bar" background is split into a
 * scroll-snap ".jt-ehb-track" of real ".jt-ehb-slide" items so the
 * repeater can drive genuinely different slides while the on-screen look
 * of a single slide stays pixel-identical to the original.
 *
 * Pro features on top of the original: Content Position (left/right,
 * flips which side the text panel sits on + which side the overlay
 * darkens), Content Vertical Position, configurable Content Padding, an
 * optional secondary (ghost) button, an entrance animation, and a Mobile
 * Layout choice (Stacked vs Overlay) - see the ".jt-ehb-pos-*",
 * ".jt-ehb-animate" and ".jt-ehb-mobile-overlay" modifier classes below.
 */

.jt-ehb-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	font-family: 'Poppins', sans-serif;
}

.jt-ehb-bar {
	position: relative;
	border-radius: var(--jt-ehb-radius, 12px);
	overflow: hidden;
	min-height: var(--jt-ehb-height, 440px);
	box-shadow: 0 26px 54px rgba(0, 0, 0, 0.14);
}

/* Track & Slides using pure CSS Scroll Snapping */
.jt-ehb-track {
	display: flex;
	width: 100%;
	height: 100%;
	min-height: var(--jt-ehb-height, 440px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* Firefox */
	-webkit-overflow-scrolling: touch;
}
.jt-ehb-track::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.jt-ehb-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-height: var(--jt-ehb-height, 440px);
	display: flex;
	align-items: var(--jt-ehb-v-align, center);
	justify-content: flex-start;
	scroll-snap-align: start;
}

/* Content Position: Right - flips which side the text panel sits on. */
.jt-ehb-wrap.jt-ehb-pos-right .jt-ehb-slide {
	justify-content: flex-end;
}

.jt-ehb-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-color: #1c1c1c;
}

.jt-ehb-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to right, rgba(15, 23, 42, var(--jt-ehb-overlay, 0.35)) 0%, rgba(15, 23, 42, 0) 60%);
}

/* Content Position: Right - the overlay darkens the right side instead,
   where the text panel now sits. */
.jt-ehb-wrap.jt-ehb-pos-right .jt-ehb-overlay {
	background: linear-gradient(to left, rgba(15, 23, 42, var(--jt-ehb-overlay, 0.35)) 0%, rgba(15, 23, 42, 0) 60%);
}

.jt-ehb-left {
	position: relative;
	flex: 0 0 var(--jt-ehb-content-width, 44%);
	max-width: var(--jt-ehb-content-width, 44%);
	padding: var(--jt-ehb-content-padding, 0 36px 0 64px);
	z-index: 3;
	box-sizing: border-box;
	/*
	 * The padding above is transparent but still part of this element's
	 * hit-test area - at the default 64px left padding it physically sits
	 * on top of the prev arrow (.jt-ehb-prev, left:26px), silently
	 * swallowing its clicks since this element comes later in the DOM at
	 * the same z-index. Turning off pointer-events here (and back on for
	 * the actual buttons below) lets clicks pass through the empty padding
	 * to whatever sits behind it - the same pattern .jt-ehb-overlay uses.
	 */
	pointer-events: none;
}
.jt-ehb-left a {
	pointer-events: auto;
}

.jt-ehb-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--jt-ehb-badge-bg, #ffffff);
	color: var(--jt-ehb-badge-color, #2b2b2b);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	padding: 9px 17px 9px 13px;
	border-radius: 20px;
	margin-bottom: 26px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.jt-ehb-badge-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--jt-ehb-badge-dot, #c8975a);
	flex-shrink: 0;
}

.jt-ehb-title {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-size: 47px;
	line-height: 1.16;
	color: var(--jt-ehb-title-color, #ffffff);
	margin: 0 0 22px;
	font-weight: 600;
	letter-spacing: -.4px;
}
.jt-ehb-title span {
	display: block;
	color: var(--jt-ehb-title-highlight, #e8bb7a);
}

.jt-ehb-desc {
	font-size: 15.5px;
	color: var(--jt-ehb-desc-color, #ffffff);
	line-height: 1.7;
	margin: 0 0 34px;
	max-width: 310px;
	font-weight: 400;
}

.jt-ehb-buttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.jt-ehb-btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	background: var(--jt-ehb-btn-bg, #1c1c1c);
	color: var(--jt-ehb-btn-color, #fff);
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	padding: 17px 30px;
	border-radius: var(--jt-ehb-btn-radius, 4px);
	transition: all .35s cubic-bezier(.22, 1, .36, 1);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
	position: relative;
	overflow: hidden;
}
.jt-ehb-btn span {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--jt-ehb-btn-color, #fff);
}
.jt-ehb-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--jt-ehb-btn-hover-bg, #a8722f);
	transform: translateX(-100%);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.jt-ehb-btn:hover::before { transform: translateX(0); }
.jt-ehb-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(168, 114, 47, 0.4); }
.jt-ehb-btn svg { width: 15px; height: 15px; transition: transform .3s ease; stroke: var(--jt-ehb-btn-color, #fff); }
.jt-ehb-btn:hover svg { transform: translateX(4px); }
.jt-ehb-btn:focus-visible {
	outline: 2px solid var(--jt-ehb-btn-color, #fff);
	outline-offset: 3px;
}

/* Secondary (ghost/outline) button - optional, per slide. */
.jt-ehb-btn2 {
	display: inline-flex;
	align-items: center;
	background: transparent;
	/*
	 * !important is required here for the same reason as the theme-wide
	 * link-color override noted on other JT widgets: assets/css/pro-style.css
	 * has `a:not(.button):not(.btn)...{ color: var(--link-color); }` with
	 * ~10 chained :not() exclusions this class isn't in, giving it higher
	 * specificity than this plain selector.
	 */
	color: var(--jt-ehb-btn2-color, #ffffff) !important;
	border: 1.5px solid var(--jt-ehb-btn2-color, #ffffff);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	padding: 17px 30px;
	border-radius: var(--jt-ehb-btn-radius, 4px);
	text-decoration: none;
	transition: all .3s ease;
}
.jt-ehb-btn2:hover {
	background: var(--jt-ehb-btn2-hover-bg, #ffffff);
	color: var(--jt-ehb-btn2-hover-color, #1c1c1c) !important;
	border-color: var(--jt-ehb-btn2-hover-bg, #ffffff);
	transform: translateY(-3px);
}
.jt-ehb-btn2:focus-visible {
	outline: 2px solid var(--jt-ehb-btn2-color, #fff);
	outline-offset: 3px;
}

.jt-ehb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--jt-ehb-nav-bg, rgba(255, 255, 255, 0.9));
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.13);
	z-index: 3;
	border: none;
	padding: 0;
	transition: all .3s ease;
}
.jt-ehb-nav:hover { background: var(--jt-ehb-nav-hover-bg, #1c1c1c); transform: translateY(-50%) scale(1.08); }
.jt-ehb-nav:focus-visible {
	outline: 2px solid var(--jt-ehb-nav-hover-bg, #1c1c1c);
	outline-offset: 3px;
}
.jt-ehb-nav svg { width: 17px; height: 17px; }
.jt-ehb-nav svg path { stroke: var(--jt-ehb-nav-color, #1c1c1c); transition: stroke .3s ease; }
.jt-ehb-nav:hover svg path { stroke: var(--jt-ehb-nav-hover-color, #fff); }
.jt-ehb-prev { left: 26px; }
.jt-ehb-next { right: 26px; }

.jt-ehb-dots {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 3;
}
.jt-ehb-dot {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--jt-ehb-dot, rgba(255, 255, 255, 0.6));
	cursor: pointer;
	transition: all .35s cubic-bezier(.22, 1, .36, 1);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.jt-ehb-dot.jt-ehb-dot-active { background: var(--jt-ehb-dot-active, #fff); width: 26px; border-radius: 4px; }
.jt-ehb-dot:focus-visible {
	outline: 2px solid var(--jt-ehb-dot-active, #fff);
	outline-offset: 2px;
}

/* --- Entrance animation --- */
.jt-ehb-wrap.jt-ehb-animate .jt-ehb-anim-target {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.jt-ehb-wrap.jt-ehb-animate.jt-ehb-in-view .jt-ehb-anim-target {
	opacity: 1;
	transform: none;
}

/* Tablet - still an image overlay with bottom-aligned content */
@media (max-width: 992px) {
	.jt-ehb-bar, .jt-ehb-track, .jt-ehb-slide { min-height: var(--jt-ehb-height, 440px); }
	.jt-ehb-slide { align-items: flex-end; }
	.jt-ehb-left { flex: none; max-width: 100%; width: 100%; padding: 0 28px 40px; }
	.jt-ehb-nav { display: none; }
}

/* Mobile - "Stacked" layout (default): image on top (kept fully visible),
   text panel below. The large title/desc no longer sit on top of the
   image, where they used to cover it - the panel background
   (--jt-ehb-mobile-panel-bg) keeps the light title/highlight/desc colors
   readable without needing the image underneath. */
@media (max-width: 576px) {
	.jt-ehb-wrap { padding: 0; }
	.jt-ehb-bar {
		min-height: 0;
	}
	.jt-ehb-track { min-height: 0; height: auto; }
	.jt-ehb-slide {
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
	}
	.jt-ehb-bg {
		position: static;
		width: 100%;
		min-height: var(--jt-ehb-height, 50vh);
	}
	.jt-ehb-overlay { display: none; }
	.jt-ehb-left {
		position: static;
		flex: none;
		width: 100%;
		max-width: 100%;
		padding: var(--jt-ehb-content-padding, 22px 20px 34px);
		background: var(--jt-ehb-mobile-panel-bg, #1c1c1c);
	}
	.jt-ehb-badge { font-size: 9px; padding: 6px 12px 6px 9px; margin-bottom: 12px; letter-spacing: 1px; }
	.jt-ehb-badge-dot { width: 4px; height: 4px; }
	.jt-ehb-title { font-size: 24px; margin-bottom: 10px; line-height: 1.2; }
	.jt-ehb-desc { font-size: 12.5px; max-width: 100%; margin-bottom: 18px; line-height: 1.55; }
	.jt-ehb-buttons { gap: 10px; }
	.jt-ehb-btn, .jt-ehb-btn2 { font-size: 10.5px; padding: 12px 20px; letter-spacing: .6px; }
	.jt-ehb-btn span { gap: 8px; }
	.jt-ehb-btn svg { width: 13px; height: 13px; }
	.jt-ehb-dots {
		position: static;
		left: auto;
		transform: none;
		justify-content: center;
		background: var(--jt-ehb-mobile-panel-bg, #1c1c1c);
		margin: 0;
		padding: 0 0 16px;
	}

	/* Mobile Layout: "Overlay" - undo the stacked layout above and go back
	   to the tablet-style look (text on top of the image, bottom-aligned,
	   no solid panel). Compound-class selectors here always win over the
	   single-class rules above regardless of source order. */
	.jt-ehb-wrap.jt-ehb-mobile-overlay .jt-ehb-bar,
	.jt-ehb-wrap.jt-ehb-mobile-overlay .jt-ehb-track,
	.jt-ehb-wrap.jt-ehb-mobile-overlay .jt-ehb-slide {
		min-height: var(--jt-ehb-height, 60vh);
	}
	.jt-ehb-wrap.jt-ehb-mobile-overlay .jt-ehb-slide {
		flex-direction: row;
		align-items: flex-end;
	}
	.jt-ehb-wrap.jt-ehb-mobile-overlay .jt-ehb-bg {
		position: absolute;
		width: auto;
		min-height: 0;
	}
	.jt-ehb-wrap.jt-ehb-mobile-overlay .jt-ehb-overlay {
		display: block;
	}
	.jt-ehb-wrap.jt-ehb-mobile-overlay .jt-ehb-left {
		position: relative;
		flex: none;
		width: 100%;
		max-width: 100%;
		padding: 0 20px 26px;
		background: none;
	}
	.jt-ehb-wrap.jt-ehb-mobile-overlay .jt-ehb-dots {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 14px;
		background: none;
		padding: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jt-ehb-btn, .jt-ehb-btn2, .jt-ehb-nav, .jt-ehb-dot { transition: none !important; }
	.jt-ehb-wrap.jt-ehb-animate .jt-ehb-anim-target {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}