/* TSC Hero Slider — breakpoints match Elementor defaults (1024 / 767).
 * Text selectors use two classes so they beat theme/Elementor-kit rules such as
 * `.elementor-kit-5 h2` while Elementor widget controls ({{WRAPPER}} .x) still win. */

.tsc-hero {
	--tsc-hero-h: var(--tsc-hero-h-d, 620px);
	--tsc-hero-title: var(--tsc-hero-title-d, 52px);
	--tsc-hero-desc: var(--tsc-hero-desc-d, 20px);
	position: relative;
	width: 100%;
	height: var(--tsc-hero-h);
	overflow: hidden;
	background: #0b2b3a;
	color: #fff;
	isolation: isolate;
}

@media (max-width: 1024px) {
	.tsc-hero {
		--tsc-hero-h: var(--tsc-hero-h-t, 480px);
		--tsc-hero-title: var(--tsc-hero-title-t, 40px);
		--tsc-hero-desc: var(--tsc-hero-desc-t, 18px);
	}
}

@media (max-width: 767px) {
	.tsc-hero {
		--tsc-hero-h: var(--tsc-hero-h-m, 420px);
		--tsc-hero-title: var(--tsc-hero-title-m, 28px);
		--tsc-hero-desc: var(--tsc-hero-desc-m, 16px);
	}
}

.tsc-hero__viewport,
.tsc-hero__track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Slide transition */
.tsc-hero--slide .tsc-hero__track {
	display: flex;
	transition: transform var(--tsc-hero-speed, 700ms) cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.tsc-hero--slide .tsc-hero__slide {
	flex: 0 0 100%;
}

/* Fade transition */
.tsc-hero--fade .tsc-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--tsc-hero-speed, 700ms) ease, visibility 0s linear var(--tsc-hero-speed, 700ms);
}

.tsc-hero--fade .tsc-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--tsc-hero-speed, 700ms) ease;
	z-index: 1;
}

.tsc-hero__slide {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: var(--tsc-slide-text, #fff);
}

.tsc-hero__media {
	position: absolute;
	inset: 0;
	display: block;
}

.tsc-hero__media picture,
.tsc-hero__img {
	display: block;
	width: 100%;
	height: 100%;
}

.tsc-hero__img {
	object-fit: cover;
	object-position: center;
	max-width: none;
}

/* Beat Elementor / theme resets (`.elementor img { height: auto }`) so the photo always fills the slide. */
.tsc-hero .tsc-hero__media img.tsc-hero__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

.tsc-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--tsc-slide-overlay, #000);
	opacity: var(--tsc-slide-overlay-o, .35);
	pointer-events: none;
}

.tsc-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	width: min(1180px, calc(100% - 150px));
	height: 100%;
	margin: 0 auto;
	padding: 60px 0;
	pointer-events: none;
}

.tsc-hero__content-inner {
	max-width: var(--tsc-hero-content-w, 720px);
	pointer-events: auto;
}

.tsc-hero__slide.has-box .tsc-hero__content-inner {
	padding: 28px 32px;
	background: rgba(11, 43, 58, .72);
}

.tsc-hero__slide--h-left .tsc-hero__content { justify-content: flex-start; text-align: left; }
.tsc-hero__slide--h-center .tsc-hero__content { justify-content: center; text-align: center; }
.tsc-hero__slide--h-right .tsc-hero__content { justify-content: flex-end; text-align: right; }
.tsc-hero__slide--v-top .tsc-hero__content { align-items: flex-start; }
.tsc-hero__slide--v-middle .tsc-hero__content { align-items: center; }
.tsc-hero__slide--v-bottom .tsc-hero__content { align-items: flex-end; padding-bottom: 80px; }

.tsc-hero .tsc-hero__kicker {
	margin: 0 0 10px;
	font-size: calc(var(--tsc-hero-desc) * .9);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tsc-slide-text, #fff);
}

.tsc-hero .tsc-hero__title {
	margin: 0 0 16px;
	font-size: var(--tsc-hero-title);
	line-height: 1.1;
	font-weight: 700;
	color: var(--tsc-slide-text, #fff);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.tsc-hero .tsc-hero__desc {
	font-size: var(--tsc-hero-desc);
	line-height: 1.5;
	color: var(--tsc-slide-text, #fff);
}

.tsc-hero .tsc-hero__desc p {
	margin: 0 0 .6em;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.tsc-hero .tsc-hero__desc a {
	color: inherit;
	text-decoration: underline;
	font-weight: 700;
}

.tsc-hero .tsc-hero__button {
	display: inline-block;
	margin-top: 18px;
	padding: 14px 30px;
	background: var(--tsc-hero-btn-bg, #f0c400);
	color: var(--tsc-hero-btn-color, #0b2b3a);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-radius: 2px;
	transition: filter .2s ease, transform .2s ease;
}

.tsc-hero .tsc-hero__button:hover,
.tsc-hero .tsc-hero__button:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: var(--tsc-hero-btn-color, #0b2b3a);
}

/* Arrows */
.tsc-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}

.tsc-hero__arrow:hover,
.tsc-hero__arrow:focus-visible {
	background: rgba(0, 0, 0, .6);
}

.tsc-hero__arrow svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.tsc-hero__arrow--prev { left: 16px; }
.tsc-hero__arrow--next { right: 16px; }

/* Controls: pause + dots */
.tsc-hero__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.tsc-hero__dots {
	display: flex;
	gap: 8px;
}

.tsc-hero__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.tsc-hero__dot.is-active {
	background: #fff;
	transform: scale(1.1);
}

.tsc-hero__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
}

.tsc-hero__toggle svg { width: 16px; height: 16px; fill: currentColor; }
.tsc-hero__toggle .tsc-hero__icon-play { display: none; }
.tsc-hero.is-paused .tsc-hero__toggle .tsc-hero__icon-play { display: block; }
.tsc-hero.is-paused .tsc-hero__toggle .tsc-hero__icon-pause { display: none; }

.tsc-hero :focus-visible {
	outline: 2px solid #f0c400;
	outline-offset: 2px;
}

/* Per-device slide visibility (JS skips hidden slides) */
@media (min-width: 1025px) { .tsc-hero__slide.tsc-hide-desktop { display: none; } }
@media (min-width: 768px) and (max-width: 1024px) { .tsc-hero__slide.tsc-hide-tablet { display: none; } }
@media (max-width: 767px) {
	.tsc-hero__slide.tsc-hide-mobile { display: none; }
	.tsc-hero--no-arrows-mobile .tsc-hero__arrow { display: none; }
	.tsc-hero__content { width: calc(100% - 32px); padding: 40px 0 56px; }
	.tsc-hero__slide.has-box .tsc-hero__content-inner { padding: 18px 20px; }
}

/* Static image used on non-front pages in "front page only" mode */
.tsc-hero-fallback { width: 100%; line-height: 0; }
.tsc-hero-fallback__img { display: block; width: 100%; height: auto; max-width: 100%; }

.tsc-hero-empty {
	padding: 20px;
	border: 1px dashed #c3c4c7;
	background: #f6f7f7;
	color: #50575e;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.tsc-hero--slide .tsc-hero__track,
	.tsc-hero--fade .tsc-hero__slide,
	.tsc-hero__button {
		transition: none !important;
	}
}