/*
 * mod_jpc_hero_block — hero slider styles.
 * Uses the active template's CSS custom properties when present, with hard
 * fallbacks so the module also looks correct outside the mwd2026 template.
 */

.jpc-hero {
	position: relative;
	overflow: hidden;
	background: #000;
}

.jpc-hero-slides {
	position: relative;
	width: 100%;
	height: clamp(440px, 56vw, 640px);
}

.jpc-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .8s ease;
}
.jpc-hero-slide.is-active { opacity: 1; }

/* Slides hidden for the current viewport (per-image "Show on" setting). */
.jpc-hero-slide.is-hidden { display: none; }

.jpc-hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Per-image framing (set from the slide's "Fit" and "Align" parameters). */
.jpc-hero-slide.img-fit-contain img { object-fit: contain; }
.jpc-hero-slide.img-align-left   img { object-position: left center; }
.jpc-hero-slide.img-align-center img { object-position: center; }
.jpc-hero-slide.img-align-right  img { object-position: right center; }

/* Scrim: direction follows the text position so copy stays legible. */
.jpc-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}
.jpc-hero.pos-left .jpc-hero-scrim {
	background: linear-gradient(90deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.6) 44%, rgba(8,9,11,.2) 70%, rgba(8,9,11,.45) 100%);
}
.jpc-hero.pos-right .jpc-hero-scrim {
	background: linear-gradient(270deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.6) 44%, rgba(8,9,11,.2) 70%, rgba(8,9,11,.45) 100%);
}
.jpc-hero.pos-center .jpc-hero-scrim {
	background: radial-gradient(120% 120% at 50% 50%, rgba(8,9,11,.25) 0%, rgba(8,9,11,.82) 100%);
}

/* Copy overlay */
.jpc-hero-copy {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}
.jpc-hero-wrap {
	max-width: var(--wrap, 1200px);
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--gutter, 24px);
	display: flex;
	align-items: center;
}
.jpc-hero-content {
	position: relative;
	max-width: 680px;
	pointer-events: auto;
}

/* Feathered colour panel behind the copy (per-slide "Text panel" colour).
   The panel is only shown while the active slide supplies a colour (.has-panel),
   and the fade direction follows the text-block placement so it tails off just
   past the text rather than ending in a hard edge. */
.jpc-hero-inner {
	position: relative;
	z-index: 1;
}
.jpc-hero-panel {
	position: absolute;
	z-index: 0;
	inset: -18px -56px;
	border-radius: 6px;
	opacity: .82;
	pointer-events: none;
	display: none;
}
.jpc-hero.has-panel .jpc-hero-panel { display: block; }

.jpc-hero.pos-left .jpc-hero-panel {
	inset: -18px -72px -18px -28px;
	background: linear-gradient(90deg,
		var(--panel-color, transparent) 0%,
		var(--panel-color, transparent) 56%,
		transparent 100%);
}
.jpc-hero.pos-right .jpc-hero-panel {
	inset: -18px -28px -18px -72px;
	background: linear-gradient(270deg,
		var(--panel-color, transparent) 0%,
		var(--panel-color, transparent) 56%,
		transparent 100%);
}
.jpc-hero.pos-center .jpc-hero-panel {
	inset: -18px -64px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--panel-color, transparent) 24%,
		var(--panel-color, transparent) 76%,
		transparent 100%);
}

/* Text-block placement (independent of text alignment) */
.jpc-hero.pos-left   .jpc-hero-content { margin-right: auto; }
.jpc-hero.pos-center .jpc-hero-content { margin-left: auto; margin-right: auto; }
.jpc-hero.pos-right  .jpc-hero-content { margin-left: auto; }

/* Text alignment of the whole block */
.jpc-hero.align-left   .jpc-hero-content { text-align: left; }
.jpc-hero.align-center .jpc-hero-content { text-align: center; }
.jpc-hero.align-right  .jpc-hero-content { text-align: right; }

.jpc-hero-kick {
	font-family: var(--font-disp, 'Anton', sans-serif);
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: 16px;
	color: var(--color-primary, #FFD320);
}
.jpc-hero-title {
	font-family: var(--font-disp, 'Anton', sans-serif);
	text-transform: uppercase;
	font-weight: 400;
	color: #fff;
	line-height: .86;
	margin: 8px 0 6px;
	font-size: clamp(44px, 8vw, 104px);
	text-shadow: 0 6px 40px rgba(0,0,0,.7);
}
.jpc-hero-title .hl { color: var(--color-primary, #FFD320); }

.jpc-hero-sub {
	font-family: var(--font-disp, 'Anton', sans-serif);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #f0f1f3;
	font-size: clamp(18px, 2.6vw, 30px);
	text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.jpc-hero-accent {
	display: block;
	height: 5px;
	width: 120px;
	margin: 18px 0;
	border-radius: 3px;
	background: var(--color-primary, #FFD320);
}
.jpc-hero.align-center .jpc-hero-accent { margin-left: auto; margin-right: auto; }
.jpc-hero.align-right  .jpc-hero-accent { margin-left: auto; }

.jpc-hero-text {
	max-width: 520px;
	color: #e6e8ea;
	font-size: 18px;
	margin: 16px 0 24px;
	text-shadow: 0 2px 10px rgba(0,0,0,.85);
	font-family: var(--font-body, 'Barlow', system-ui, sans-serif);
}
.jpc-hero.align-center .jpc-hero-text { margin-left: auto; margin-right: auto; }
.jpc-hero.align-right  .jpc-hero-text { margin-left: auto; }

.jpc-hero-cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.jpc-hero.align-center .jpc-hero-cta { justify-content: center; }
.jpc-hero.align-right  .jpc-hero-cta { justify-content: flex-end; }

.jpc-hero-btn {
	display: inline-block;
	background: var(--color-primary, #FFD320);
	color: var(--color-on-primary, #141414);
	font-family: var(--font-disp, 'Anton', sans-serif);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 15px;
	padding: 13px 24px;
	border-radius: var(--br-sm, 3px);
	transition: background .16s ease, box-shadow .16s ease;
}
.jpc-hero-btn:hover {
	background: var(--color-primary-dark, #E6BD10);
	color: var(--color-on-primary, #141414);
	box-shadow: 0 0 0 3px rgba(255,211,32,.25);
}
.jpc-hero-btn-ghost {
	background: transparent;
	border: 2px solid #3A3D42;
	color: #fff;
	padding: 11px 22px;
}
.jpc-hero-btn-ghost:hover { background: transparent; border-color: var(--color-primary, #FFD320); color: #fff; box-shadow: none; }

/* Controls */
.jpc-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.18);
	background: rgba(0,0,0,.45);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.jpc-hero-arrow:hover { background: var(--color-primary, #FFD320); color: #111; border-color: var(--color-primary, #FFD320); }
.jpc-hero-prev { left: 18px; }
.jpc-hero-next { right: 18px; }

.jpc-hero-dots {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	gap: 10px;
	justify-content: center;
}
.jpc-hero-dots button {
	width: 11px;
	height: 11px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid #fff;
	background: transparent;
	cursor: pointer;
	opacity: .7;
	transition: background .15s ease, opacity .15s ease;
}
.jpc-hero-dots button.is-active {
	background: var(--color-primary, #FFD320);
	border-color: var(--color-primary, #FFD320);
	opacity: 1;
}

@media (max-width: 560px) {
	.jpc-hero-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jpc-hero-slide { transition: none; }
}