/* =============================================================
   Setu Hero Slider — self-contained styles.
   Falls back to its own palette when the theme's --bsd-* design
   tokens are not available, so the plugin works on any theme.
   ============================================================= */

.shs-slider {
	--shs-height: calc(100vh - 81px);
	--shs-ink: var(--bsd-primary-deep, #092b37);
	--shs-accent: var(--bsd-accent, #e8630a);
	--shs-accent-hover: var(--bsd-accent-hover, #cf5504);
	--shs-display: var(--bsd-font-display, 'Sora', -apple-system, sans-serif);

	position: relative;
	overflow: hidden;
	height: var(--shs-height);
	min-height: 500px;
	max-height: 860px;
	margin-bottom: 44px;
	background: var(--shs-ink);
}

/* Break out of the theme's content container to span the viewport.
   !important overrides Astra's content-width constraint on entry-content children. */
.entry-content > .shs-slider.shs-fullbleed,
.shs-slider.shs-fullbleed {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: -25px;
	border-radius: 0;
}

.shs-track {
	position: absolute;
	inset: 0;
}

.shs-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background-color: var(--shs-ink);
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.7s ease, transform 1.2s ease;
	pointer-events: none;
}

.shs-slide.active {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.shs-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(78deg, rgba(6, 26, 34, 0.92) 0%, rgba(6, 26, 34, 0.62) 48%, rgba(6, 26, 34, 0.12) 100%);
}

.shs-align-center .shs-scrim {
	background: linear-gradient(0deg, rgba(6, 26, 34, 0.82) 0%, rgba(6, 26, 34, 0.45) 55%, rgba(6, 26, 34, 0.35) 100%);
}

.shs-align-right .shs-scrim {
	background: linear-gradient(282deg, rgba(6, 26, 34, 0.92) 0%, rgba(6, 26, 34, 0.62) 48%, rgba(6, 26, 34, 0.12) 100%);
}

/* Copy sits in a centred column that lines up with the page content. */
.shs-content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

.shs-align-center .shs-content {
	text-align: center;
}

.shs-align-right .shs-content {
	text-align: right;
}

.shs-title,
.shs-subtitle {
	max-width: 640px;
}

.shs-description {
	max-width: 560px;
}

.shs-align-center .shs-title,
.shs-align-center .shs-subtitle,
.shs-align-center .shs-description {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.shs-align-right .shs-title,
.shs-align-right .shs-subtitle,
.shs-align-right .shs-description {
	margin-left: auto;
}

.shs-badges {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.shs-align-center .shs-badges {
	justify-content: center;
}

.shs-align-right .shs-badges {
	justify-content: flex-end;
}

.shs-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
}

.shs-title {
	font-family: var(--shs-display);
	color: #fff;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	line-height: 1.1;
	margin: 0 0 10px;
}

.shs-subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
	font-size: 0.92rem;
	margin: 0 0 10px;
}

.shs-description {
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.55;
	margin: 0 0 22px;
}

.shs-cta {
	display: inline-block;
	background: var(--shs-accent);
	color: #fff !important;
	font-weight: 600;
	padding: 12px 26px;
	border-radius: 999px;
	text-decoration: none !important;
	transition: background 0.15s ease, transform 0.15s ease;
}

.shs-cta:hover {
	background: var(--shs-accent-hover);
	transform: translateY(-1px);
}

/* Circular glass arrows. Padding/min-width reset keeps the box square on
   themes (e.g. Astra) that style all buttons. */
.shs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	min-width: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.32);
	background: rgba(9, 27, 34, 0.42);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 22px;
	line-height: 0;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.shs-arrow:hover,
.shs-arrow:focus-visible {
	background: var(--shs-accent);
	border-color: var(--shs-accent);
	transform: translateY(-50%) scale(1.06);
}

.shs-prev { left: 28px; }
.shs-next { right: 28px; }

.shs-dots {
	position: absolute;
	bottom: 18px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 2;
}

.shs-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	min-width: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}

.shs-dots button.active {
	width: 26px;
	background: var(--shs-accent);
}

.shs-empty {
	background: #fff4e5;
	border: 1px dashed #e8630a;
	border-radius: 8px;
	padding: 14px 16px;
	color: #7a3c02;
}

@media (prefers-reduced-motion: reduce) {
	.shs-slide {
		transition: opacity 0.3s ease;
		transform: none;
	}
	.shs-slide.active { transform: none; }
}

@media (min-width: 1400px) {
	.shs-content { padding-left: 92px; padding-right: 92px; }
}

@media (max-width: 782px) {
	/* A tall near-square box on a phone would crop most of a wide slide
	   image away with background-size: cover. Instead the image is contained
	   at the top of the slide at its own aspect ratio, and the copy sits
	   below it over the brand gradient, so nothing is cut off whatever
	   shape the uploaded image is. */
	.shs-slider {
		--shs-height: auto;
		height: auto;
		aspect-ratio: 3 / 4;
		min-height: 520px;
		max-height: none;
		border-radius: 0;
		background: linear-gradient(160deg, var(--shs-ink) 0%, #0e3d4d 100%);
	}
	.shs-slide {
		align-items: flex-end;
		background-size: contain;
		background-repeat: no-repeat;
		/* Each slide sets background-position inline from its Image focus
		   setting, which would otherwise win here. Focus only matters when
		   the image is being cropped, and nothing is cropped at this size,
		   so pin the image to the top and let the copy sit beneath it. */
		background-position: top center !important;
	}
	.shs-content { padding: 0 22px 44px; }
	/* Keep the top of the frame clear so the image reads, and darken only
	   the lower band the text sits on. */
	.shs-scrim,
	.shs-align-center .shs-scrim,
	.shs-align-right .shs-scrim {
		background: linear-gradient(0deg, rgba(6, 26, 34, 0.97) 30%, rgba(6, 26, 34, 0.72) 52%, rgba(6, 26, 34, 0) 74%);
	}
	.shs-arrow { display: none; }
	.shs-dots { bottom: 14px; }
	.shs-align-right .shs-content,
	.shs-align-right .shs-title,
	.shs-align-right .shs-subtitle,
	.shs-align-right .shs-description { text-align: left; margin-left: 0; }
	.shs-align-right .shs-badges { justify-content: flex-start; }
}