/**
 * STC Logo Carousel Pro
 * Frontend styles: layout, color modes, hover effects, presets, responsive.
 *
 * The grayscale / color hover system is driven by CSS custom properties that
 * are computed in PHP and printed inline on the wrapper. This keeps the
 * "default state vs hover state" switch reliable for every combination
 * (e.g. grayscale -> color, color -> grayscale, sepia -> color, etc.).
 */

/* -------------------------------------------------------------------------
 * Wrapper & Swiper container
 * ---------------------------------------------------------------------- */
.stc-lcp {
	position: relative;
	width: 100%;
	/* Hover transition tokens (overridable from Elementor). */
	--stc-trans-dur: 0.3s;
	--stc-trans-type: ease;
	/* Neutral baselines for advanced effects. */
	--stc-hover-scale: 1;
	--stc-hover-rotate: 0deg;
	--stc-hover-lift: 0px;
	--stc-hover-bright: 1;
	--stc-hover-contrast: 1;
	--stc-hover-blur: 0px;
	--stc-hover-opacity: 1;
	--stc-hover-glow-size: 0px;
	--stc-hover-glow-color: transparent;
}

.stc-lcp__swiper {
	position: relative;
	width: 100%;
	padding: 0;
	overflow: hidden;
}

.stc-lcp .swiper-wrapper {
	align-items: center;
	box-sizing: border-box;
}

.stc-lcp__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Item / media
 * ---------------------------------------------------------------------- */
.stc-lcp__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
}

.stc-lcp__link {
	display: block;
	width: 100%;
	line-height: 0;
	text-decoration: none;
}

.stc-lcp__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	/* Default color-mode filter (PHP overrides --stc-filter-default). */
	filter: var( --stc-filter-default, grayscale( 0 ) );
	transition:
		filter var( --stc-trans-dur, 0.3s ) var( --stc-trans-type, ease ),
		transform var( --stc-trans-dur, 0.3s ) var( --stc-trans-type, ease ),
		opacity var( --stc-trans-dur, 0.3s ) var( --stc-trans-type, ease ),
		box-shadow var( --stc-trans-dur, 0.3s ) var( --stc-trans-type, ease ),
		background-color var( --stc-trans-dur, 0.3s ) var( --stc-trans-type, ease );
	will-change: filter, transform;
}

.stc-lcp__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}

/* Custom color overlay layer. */
.stc-lcp__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: var( --stc-overlay-color, transparent );
	mix-blend-mode: var( --stc-overlay-blend, multiply );
	opacity: var( --stc-overlay-default-opacity, 0 );
	transition: opacity var( --stc-trans-dur, 0.3s ) var( --stc-trans-type, ease );
}

/* Logo title / caption. */
.stc-lcp__title {
	display: block;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	color: inherit;
}

.stc-lcp__title--hidden {
	display: none;
}

/* -------------------------------------------------------------------------
 * Hover state — color/grayscale switch + advanced effects
 * ---------------------------------------------------------------------- */
.stc-lcp__item:hover .stc-lcp__media,
.stc-lcp__item:focus-within .stc-lcp__media {
	filter:
		var( --stc-filter-hover, var( --stc-filter-default, grayscale( 0 ) ) )
		brightness( var( --stc-hover-bright, 1 ) )
		contrast( var( --stc-hover-contrast, 1 ) )
		blur( var( --stc-hover-blur, 0px ) )
		drop-shadow( 0 0 var( --stc-hover-glow-size, 0px ) var( --stc-hover-glow-color, transparent ) );
	transform:
		translateY( var( --stc-hover-lift, 0px ) )
		scale( var( --stc-hover-scale, 1 ) )
		rotate( var( --stc-hover-rotate, 0deg ) );
	opacity: var( --stc-hover-opacity, 1 );
}

.stc-lcp__item:hover .stc-lcp__overlay,
.stc-lcp__item:focus-within .stc-lcp__overlay {
	opacity: var( --stc-overlay-hover-opacity, var( --stc-overlay-default-opacity, 0 ) );
}

/* Glow uses a soft drop-shadow in the hover filter chain (see above), so it
   never collides with the optional box-shadow hover control. */

/* -------------------------------------------------------------------------
 * Navigation arrows
 * ---------------------------------------------------------------------- */
.stc-lcp__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	cursor: pointer;
	border-radius: 50%;
	background-color: rgba( 0, 0, 0, 0.45 );
	color: #fff;
	transition: background-color 0.25s ease, opacity 0.25s ease;
}

.stc-lcp__arrow:hover {
	background-color: rgba( 0, 0, 0, 0.7 );
}

.stc-lcp__arrow svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.stc-lcp__arrow--prev {
	left: 8px;
}

.stc-lcp__arrow--next {
	right: 8px;
}

.stc-lcp__arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* -------------------------------------------------------------------------
 * Pagination dots
 * ---------------------------------------------------------------------- */
.stc-lcp__dots {
	position: relative;
	margin-top: 16px;
	text-align: center;
}

.stc-lcp__dots .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background-color: #c4c4c4;
	opacity: 1;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.stc-lcp__dots .swiper-pagination-bullet-active {
	background-color: #1e73be;
	transform: scale( 1.2 );
}

/* -------------------------------------------------------------------------
 * Style presets — starting points, fully overridable in Elementor
 * ---------------------------------------------------------------------- */

/* Preset 1 — Corporate */
.stc-lcp--preset-corporate .stc-lcp__media {
	padding: 18px 24px;
	background-color: #ffffff;
	border: 1px solid #e6e9ef;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba( 16, 24, 40, 0.06 );
}

/* Preset 2 — Minimal */
.stc-lcp--preset-minimal .stc-lcp__media {
	padding: 10px;
	background-color: transparent;
	border: none;
	border-radius: 0;
}

/* Preset 3 — Industrial */
.stc-lcp--preset-industrial .stc-lcp__media {
	padding: 16px 20px;
	background-color: #f4f5f7;
	border: 2px solid #d0d3d9;
	border-radius: 2px;
}

.stc-lcp--preset-industrial .stc-lcp__title {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

/* Preset 4 — Dark Mode */
.stc-lcp--preset-dark {
	background-color: #0f1115;
	padding: 24px 0;
	border-radius: 8px;
}

.stc-lcp--preset-dark .stc-lcp__media {
	padding: 18px 24px;
	background-color: #1a1d24;
	border: 1px solid #262b34;
	border-radius: 8px;
}

.stc-lcp--preset-dark .stc-lcp__title {
	color: #e6e9ef;
}

/* Preset 5 — Modern */
.stc-lcp--preset-modern .stc-lcp__media {
	padding: 16px 22px;
	background: linear-gradient( 145deg, #ffffff 0%, #f2f5fb 100% );
	border: 1px solid transparent;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba( 31, 45, 61, 0.08 );
}

.stc-lcp--preset-modern .stc-lcp__item:hover .stc-lcp__media {
	box-shadow: 0 14px 36px rgba( 31, 45, 61, 0.16 );
}

/* -------------------------------------------------------------------------
 * Accessibility helpers
 * ---------------------------------------------------------------------- */
.stc-lcp__link:focus-visible {
	outline: 2px solid #1e73be;
	outline-offset: 3px;
}

.stc-lcp .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Respect reduced motion preferences. */
@media ( prefers-reduced-motion: reduce ) {
	.stc-lcp__media,
	.stc-lcp__overlay,
	.stc-lcp__arrow,
	.stc-lcp__dots .swiper-pagination-bullet {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Editor / loading niceties
 * ---------------------------------------------------------------------- */
.stc-lcp .swiper:not(.swiper-initialized) .swiper-wrapper {
	flex-wrap: nowrap;
}

.stc-lcp .swiper:not(.swiper-initialized) .stc-lcp__slide {
	flex: 0 0 auto;
}