/* =========================================================================
 * Industries Grid / Slider — Elementor Widget
 * Prefix: tp-  |  No external libraries
 * ========================================================================= */

.tp-industries-widget {
	position: relative;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * GRID
 * ---------------------------------------------------------------------- */
.tp-industries-list {
	display: grid;
	/* Columns are driven by the responsive `Columns` control (Elementor sets
	   grid-template-columns per breakpoint). This var is a pre-CSS fallback. */
	grid-template-columns: repeat( var( --tp-cols, 3 ), minmax( 0, 1fr ) );
}

/* -------------------------------------------------------------------------
 * ITEM
 * ---------------------------------------------------------------------- */
.tp-industry-item {
	position: relative;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition-property: transform, box-shadow, background-color;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

.tp-industry-item:hover {
	transform: translateY( -4px );
}

/* Single full-card link — nothing else inside the card may be a link. */
.tp-industry-item__link {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	border-radius: inherit;
}

.tp-industry-item__link:focus-visible {
	outline: 2px solid #ef5a28;
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * ICON BOX
 * ---------------------------------------------------------------------- */
.tp-industry-item__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background-color: #ef5a28;
	color: #fff;
	transition: transform 0.3s ease;
}

.tp-industry-item:hover .tp-industry-item__icon {
	transform: scale( 1.06 );
}

.tp-industry-item__icon i {
	font-size: 25px;
	line-height: 1;
	color: #fff;
}

.tp-industry-item__icon svg {
	width: 25px;
	height: 25px;
	fill: #fff;
}

/* -------------------------------------------------------------------------
 * CONTENT
 * ---------------------------------------------------------------------- */
.tp-industry-item__content {
	flex: 1 1 auto;
	min-width: 0;
}

.tp-industry-item__title {
	margin: 0 0 8px;
	color: #1f4e8c;
	font-size: 20px;
	font-weight: 700;
	transition: color 0.3s ease;
}

.tp-industry-item__desc {
	margin: 0;
	color: #6b7280;
	font-size: 18px;
	line-height: 22px;
}

/* -------------------------------------------------------------------------
 * SLIDER — toggled by JS via .tp-is-slider (native scroll-snap, no transform).
 * Works identically on desktop / tablet / mobile, matching the carousel widget.
 * ---------------------------------------------------------------------- */
.tp-industries-list.tp-is-slider {
	display: flex;
	grid-template-columns: none;
	flex-wrap: nowrap;
	gap: var( --tp-gap, 24px );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* `overflow-x: auto` clips the Y axis too, which cuts off the hover lift
	   and box-shadow. Vertical padding (with negative margins to keep layout
	   position) gives the animation room to breathe. */
	padding: 12px 2px 16px;
	margin: -12px -2px -16px;
}

.tp-industries-list.tp-is-slider::-webkit-scrollbar {
	display: none;
}

.tp-industries-list.tp-is-slider .tp-industry-item {
	flex: 0 0 calc( ( 100% - ( var( --tp-slides, 1 ) - 1 ) * var( --tp-gap, 0px ) ) / var( --tp-slides, 1 ) );
	max-width: calc( ( 100% - ( var( --tp-slides, 1 ) - 1 ) * var( --tp-gap, 0px ) ) / var( --tp-slides, 1 ) );
	scroll-snap-align: start;
}

.tp-industries-list.tp-dragging {
	scroll-behavior: auto;
	cursor: grabbing;
}

/* Slider controls — hidden until JS enables slider mode. */
.tp-industries-slider-controls {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	justify-content: center;
}

.tp-industries-slider-controls[hidden] {
	display: none;
}

.tp-industries-slider-controls button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #ef5a28;
	color: #fff;
	cursor: pointer;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.tp-industries-slider-controls button:hover {
	transform: scale( 1.08 );
}

.tp-industries-slider-controls button:focus-visible {
	outline: 2px solid #1f4e8c;
	outline-offset: 2px;
}

.tp-industries-slider-controls button[disabled] {
	opacity: 0.4;
	cursor: default;
	transform: none;
}

.tp-industries-slider-controls button svg {
	width: 20px;
	height: 20px;
	fill: #fff;
}

/* Dots — hidden until JS enables slider mode. */
.tp-industries-dots {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	justify-content: center;
}

.tp-industries-dots[hidden] {
	display: none;
}

.tp-industries-dots button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 5em;
	background-color: #d1d5db;
	cursor: pointer;
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease;
}

/* Active dot stretches into a "liquid" pill (à la Flickity style-4). */
.tp-industries-dots button.is-active {
	width: 24px;
	background-color: #ef5a28;
}

.tp-industries-dots button:focus-visible {
	outline: 2px solid #1f4e8c;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * RESPONSIVE (Grid columns fallback) — Elementor generates the real
 * per-breakpoint rules from the responsive `Columns` control. Skipped while
 * the list is in slider mode.
 * ---------------------------------------------------------------------- */
@media ( max-width: 1024px ) {
	.tp-industries-list:not( .tp-is-slider ) {
		grid-template-columns: repeat( var( --tp-cols, 2 ), minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.tp-industries-list:not( .tp-is-slider ) {
		grid-template-columns: repeat( var( --tp-cols, 1 ), minmax( 0, 1fr ) );
	}
}

/* Reduced motion */
@media ( prefers-reduced-motion: reduce ) {
	.tp-industry-item,
	.tp-industry-item__icon,
	.tp-industry-item__title,
	.tp-industries-list.tp-is-slider {
		transition: none !important;
		scroll-behavior: auto;
	}

	.tp-industry-item:hover {
		transform: none;
	}
}