/**
 * Machinery Hero Slider - Frontend Styles
 * Mobile-first, matches default machinery site layout
 */

/* Elementor: full-width widget container */
.elementor-widget-machinery_hero_slider,
.elementor-widget-machinery_hero_slider .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0;
	padding-right: 0;
}

.elementor-widget-machinery_hero_slider .mhs-hero-wrapper--collage {
	width: 100%;
	max-width: none;
}

.mhs-hero-wrapper {
	--mhs-height-mobile: 280px;
	--mhs-height-tablet: 400px;
	--mhs-height-desktop: 480px;
	--mhs-heading-size-mobile: 22px;
	--mhs-heading-size-tablet: 28px;
	--mhs-heading-size-desktop: 36px;
	--mhs-description-size-mobile: 14px;
	--mhs-description-size-tablet: 15px;
	--mhs-description-size-desktop: 16px;
	--mhs-button-font-size: 15px;
	--mhs-heading-color: #ffffff;
	--mhs-description-color: #ffffff;
	--mhs-badge-color: #ffffff;
	--mhs-badge-border-color: #ffffff;
	--mhs-button-1-bg: #e63946;
	--mhs-button-1-text: #ffffff;
	--mhs-button-1-bg-hover: #c1121f;
	--mhs-button-1-text-hover: #ffffff;
	--mhs-button-2-bg: #ffffff;
	--mhs-button-2-text: #000000;
	--mhs-button-2-bg-hover: #f0f0f0;
	--mhs-button-2-text-hover: #000000;
	--mhs-button-radius: 8px;
	--mhs-content-max-width: 700px;
	--mhs-overlay-color: #000000;
	--mhs-overlay-opacity: 0;
	--mhs-image-radius: 0px;
	--mhs-collage-gap: 12px;
	--mhs-hero-bg: #ffffff;
	--mhs-image-fit: contain;
	--mhs-image-width: 68%;
	--mhs-accent: #900048;

	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	background: var(--mhs-hero-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Typography — match hero design, no theme shadow overrides */
.mhs-hero-wrapper .mhs-slide__badge,
.mhs-hero-wrapper .mhs-slide__heading,
.mhs-hero-wrapper .mhs-slide__description,
.mhs-hero-wrapper .mhs-slide__text,
.mhs-hero-wrapper .mhs-btn {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

.mhs-hero-wrapper *,
.mhs-hero-wrapper *::before,
.mhs-hero-wrapper *::after {
	box-sizing: border-box;
}

/* Swiper core layout — keeps slides horizontal even if CDN CSS is blocked */
.mhs-hero-wrapper .mhs-swiper {
	overflow: hidden !important;
}

.mhs-hero-wrapper .swiper-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	transition-property: transform;
	box-sizing: content-box;
}

.mhs-hero-wrapper .swiper-slide {
	flex-shrink: 0 !important;
	width: 100% !important;
	height: 100% !important;
	position: relative;
	overflow: hidden;
}

/* Before JS init: show only the first slide */
.mhs-hero-wrapper:not([data-mhs-initialized]) .swiper-slide:not(:first-child) {
	display: none !important;
}

/* Swiper - standard horizontal slide */
.mhs-swiper {
	width: 100%;
	height: var(--mhs-height-mobile);
	position: relative;
	overflow: hidden;
	background: var(--mhs-hero-bg);
}

.mhs-swiper .swiper-wrapper {
	height: 100%;
}

.mhs-swiper .swiper-slide {
	height: 100%;
}

/* Slide layout - image left, content right, white background */
.mhs-slide {
	position: relative;
	height: 100%;
	min-height: 0;
	background: var(--mhs-hero-bg);
	overflow: hidden;
}

.mhs-slide__layout {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.mhs-slide__media {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	height: 55%;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: var(--mhs-hero-bg);
	overflow: hidden;
}

.mhs-slide__bg-image {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: var(--mhs-image-fit);
	object-position: left center;
	display: block;
	image-orientation: from-image;
}

.mhs-slide__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mhs-slide__content {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-width: 0;
	padding: clamp(16px, 3vw, 32px) clamp(14px, 3vw, 40px);
	text-align: center;
}

/* Content position */
.mhs-slide.mhs-position-left .mhs-slide__content {
	align-items: flex-start;
	text-align: left;
}

.mhs-slide.mhs-position-center .mhs-slide__content {
	align-items: center;
	text-align: center;
}

.mhs-slide.mhs-position-right .mhs-slide__content {
	align-items: flex-end;
	text-align: right;
}

.mhs-slide__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: min(700px, 92%);
	margin: 0 auto;
}

.mhs-slide.mhs-align-left .mhs-slide__text {
	align-items: flex-start;
	text-align: left;
}

.mhs-slide.mhs-align-center .mhs-slide__text {
	align-items: center;
	text-align: center;
}

.mhs-slide.mhs-align-right .mhs-slide__text {
	align-items: flex-end;
	text-align: right;
}

/* Badge — pill at top center */
.mhs-slide__badge,
.mhs-hero-wrapper .hero-badge {
	position: absolute;
	top: 12%;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: clamp(5px, 1vw, 9px) clamp(18px, 3vw, 30px);
	border: 1px solid var(--mhs-badge-border-color, #ffffff);
	border-radius: 999px;
	font-size: clamp(13px, 1.4vw, 19px);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mhs-badge-color, #ffffff);
	background: transparent;
	white-space: nowrap;
	text-align: center;
	text-shadow: none !important;
	box-shadow: none !important;
	max-width: calc(100% - 24px);
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 2;
}

.mhs-slide__heading {
	margin: 0 0 clamp(10px, 2vw, 16px);
	font-size: var(--mhs-heading-size-mobile);
	line-height: 1.2;
	font-weight: 700;
	color: var(--mhs-heading-color);
	max-width: min(760px, 92%);
	text-shadow: none !important;
}

.mhs-slide__description-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: min(700px, 92%);
	margin: 0 auto;
	gap: clamp(8px, 2vw, 16px);
}

.mhs-slide__description {
	margin: 0;
	font-size: clamp(13px, 1.4vw, 16px);
	line-height: clamp(1.45, 1.6, 1.75);
	color: var(--mhs-description-color);
	max-width: min(760px, 92%);
	text-align: center;
	text-shadow: none !important;
}

.mhs-slide.mhs-align-left .mhs-slide__description,
.mhs-slide.mhs-align-left .mhs-slide__description-wrap {
	text-align: left;
	align-items: flex-start;
}

.mhs-slide.mhs-align-right .mhs-slide__description,
.mhs-slide.mhs-align-right .mhs-slide__description-wrap {
	text-align: right;
	align-items: flex-end;
}

/* Buttons */
.mhs-slide__buttons,
.mhs-hero-wrapper .hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 2vw, 16px);
	justify-content: center;
	align-items: center;
	margin-top: clamp(14px, 3vw, 26px);
	width: 100%;
}

.mhs-slide.mhs-align-left .mhs-slide__buttons {
	justify-content: flex-start;
}

.mhs-slide.mhs-align-right .mhs-slide__buttons {
	justify-content: flex-end;
}

.mhs-btn,
.mhs-hero-wrapper .hero-buttons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: clamp(11px, 1.6vw, 14px) clamp(14px, 2vw, 20px);
	font-size: clamp(13px, 1.2vw, var(--mhs-button-font-size));
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--mhs-button-radius, 8px);
	border: 1px solid transparent;
	cursor: pointer;
	transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
	min-width: clamp(170px, 18vw, 210px);
	text-align: center;
}

.mhs-btn:hover,
.mhs-hero-wrapper .hero-buttons a:hover {
	opacity: 1;
	outline: none;
	text-shadow: none !important;
	box-shadow: none !important;
}

.mhs-btn:focus-visible,
.mhs-hero-wrapper .hero-buttons a:focus-visible {
	outline: 2px solid var(--mhs-accent, #e63946);
	outline-offset: 2px;
}

.mhs-btn--primary:hover,
.mhs-hero-wrapper .btn-primary:hover {
	background-color: var(--mhs-button-1-bg-hover, #c1121f) !important;
	color: var(--mhs-button-1-text-hover, #ffffff) !important;
	border-color: var(--mhs-button-1-bg-hover, #c1121f) !important;
}

.mhs-btn--secondary:hover,
.mhs-hero-wrapper .btn-secondary:hover {
	background-color: var(--mhs-button-2-bg-hover, #f0f0f0) !important;
	color: var(--mhs-button-2-text-hover, #000000) !important;
	border-color: var(--mhs-button-2-bg-hover, #f0f0f0) !important;
}

.mhs-btn--primary,
.mhs-hero-wrapper .btn-primary {
	background-color: var(--mhs-button-1-bg, #e63946) !important;
	color: var(--mhs-button-1-text, #ffffff) !important;
	border-color: var(--mhs-button-1-bg, #e63946) !important;
}

.mhs-btn--secondary,
.mhs-hero-wrapper .btn-secondary {
	background-color: var(--mhs-button-2-bg, #ffffff) !important;
	color: var(--mhs-button-2-text, #000000) !important;
	border-color: var(--mhs-button-2-bg, #ffffff) !important;
}

@media (min-width: 1200px) and (max-width: 1500px) {
	.mhs-slide__badge,
	.mhs-hero-wrapper .hero-badge {
		top: 12%;
	}
}

@media (min-width: 1501px) {
	.mhs-slide__badge,
	.mhs-hero-wrapper .hero-badge {
		top: 15%;
	}
}

@media (max-width: 768px) {
	.mhs-slide__badge,
	.mhs-hero-wrapper .hero-badge {
		white-space: normal;
		line-height: 1.3;
		max-width: 96%;
	}

	.mhs-slide__buttons,
	.mhs-hero-wrapper .hero-buttons {
		flex-direction: column;
		align-items: center;
	}

	.mhs-btn,
	.mhs-hero-wrapper .hero-buttons a {
		width: min(360px, 92%);
		min-width: 0;
	}
}

@media (max-width: 480px) {
	.mhs-slide__badge,
	.mhs-hero-wrapper .hero-badge {
		font-size: 12px;
		padding: 8px 16px;
		top: 18%;
	}
}

/* Collage background layer - clickable grid like bg */
.mhs-slide__layout {
	position: relative;
}

.mhs-slide--has-collage .mhs-slide__layout {
	display: block;
	position: relative;
	height: 100%;
	min-height: 100%;
	width: 100%;
	overflow: hidden;
}

.mhs-slide--has-collage {
	height: 100%;
	min-height: 100%;
}

/* Collage hero — exact height from Settings → Slider Heights */
.mhs-hero-wrapper--collage {
	width: 100%;
	min-height: var(--mhs-height-mobile);
}

.mhs-hero-wrapper--collage .mhs-swiper {
	width: 100%;
}

.mhs-hero-wrapper--collage .swiper-wrapper,
.mhs-hero-wrapper--collage .swiper-slide,
.mhs-hero-wrapper--collage .mhs-slide {
	height: 100% !important;
	min-height: 100% !important;
}

.mhs-hero-wrapper--collage .mhs-slide--has-collage,
.mhs-hero-wrapper--collage .mhs-slide--has-collage .mhs-slide__layout {
	height: 100%;
	min-height: 100%;
	width: 100%;
	max-width: none;
}

.mhs-hero-wrapper--collage .mhs-slide--has-collage {
	background: var(--mhs-hero-bg);
}

.mhs-slide--has-collage .mhs-slide__collage-bg,
.mhs-slide--has-collage .mhs-collage-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.mhs-slide__collage-bg,
.mhs-collage-bg {
	display: grid;
	gap: var(--mhs-collage-gap);
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: 0;
	margin: 0;
	align-items: stretch;
	align-content: stretch;
}

.mhs-collage-bg--grid-2,
.mhs-collage-bg--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
}

.mhs-collage-bg--grid-3,
.mhs-collage-bg--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
}

.mhs-collage-bg--grid-4,
.mhs-collage-bg--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
}

.mhs-collage-bg__tile {
	display: block;
	position: relative;
	overflow: hidden;
	min-height: 0;
	min-width: 0;
	height: 100%;
	width: 100%;
	align-self: stretch;
	justify-self: stretch;
	text-decoration: none;
	color: inherit;
	border: none;
	background: transparent;
	z-index: 1;
}

.mhs-collage-bg__tile--empty {
	background: #ececec;
	pointer-events: none;
}

.mhs-collage-bg__tile:not(.mhs-collage-bg__tile--static) {
	cursor: pointer;
}

.mhs-collage-bg__tile--static {
	cursor: default;
}

.mhs-collage-bg__tile:hover,
.mhs-collage-bg__tile:focus {
	outline: 2px solid var(--mhs-accent);
	outline-offset: -2px;
	z-index: 2;
}

.mhs-collage-bg__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	image-orientation: from-image;
}

.mhs-collage-bg__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 6px 8px;
	font-size: clamp(10px, 1.8vw, 12px);
	font-weight: 600;
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	pointer-events: none;
}

.mhs-slide__bg-fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.35;
	pointer-events: none;
	image-orientation: from-image;
}

.mhs-slide--has-collage .mhs-slide__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
	width: 100%;
	height: 100%;
}

.mhs-slide--has-collage .mhs-slide__content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100%;
	height: 100%;
	width: 100%;
	pointer-events: none;
	padding: clamp(16px, 3vw, 32px) clamp(14px, 3vw, 40px);
	text-align: center;
}

.mhs-slide--has-collage .mhs-slide__text {
	position: relative;
	z-index: 1;
	max-width: min(700px, 92%);
}

.mhs-slide--has-collage .mhs-slide__badge {
	color: var(--mhs-badge-color, #ffffff);
	border-color: var(--mhs-badge-border-color, #ffffff);
	pointer-events: none;
}

/* Let clicks pass through hero text to collage tiles underneath; keep buttons clickable */
.mhs-slide--has-collage .mhs-slide__text,
.mhs-slide--has-collage .mhs-slide__badge,
.mhs-slide--has-collage .mhs-slide__heading,
.mhs-slide--has-collage .mhs-slide__description {
	pointer-events: none;
}

.mhs-slide--has-collage .mhs-slide__buttons,
.mhs-slide--has-collage .mhs-btn {
	pointer-events: auto;
	position: relative;
	z-index: 4;
}

/* Legacy inline collage (deprecated) - keep minimal */
.mhs-slide__collage {
	display: none;
}

.mhs-collage__item {
	min-width: 0;
}

/* Arrows - maroon outline style */
.mhs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 40px;
	height: 40px;
	border: 1px solid var(--mhs-accent);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.95);
	color: var(--mhs-accent);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.mhs-arrow:hover,
.mhs-arrow:focus {
	background: #ffffff;
	outline: 2px solid var(--mhs-accent);
	outline-offset: 2px;
}

.mhs-arrow-prev {
	left: clamp(8px, 2vw, 16px);
}

.mhs-arrow-next {
	right: clamp(8px, 2vw, 16px);
}

.mhs-swiper .swiper-button-prev::after,
.mhs-swiper .swiper-button-next::after {
	display: none;
}

/* Dots */
.mhs-dots {
	position: absolute;
	bottom: clamp(10px, 2vw, 20px) !important;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.mhs-dots .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: #cccccc;
	opacity: 1;
	border-radius: 0;
	transition: background 0.2s ease;
}

.mhs-dots .swiper-pagination-bullet-active {
	background: var(--mhs-accent);
}

.mhs-dots .swiper-pagination-bullet:focus {
	outline: 2px solid var(--mhs-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

/* Tablet: 768px+ */
@media (min-width: 768px) {
	.mhs-swiper {
		height: var(--mhs-height-tablet);
	}

	.mhs-slide--has-collage {
		min-height: 100%;
	}

	.mhs-hero-wrapper--collage {
		min-height: var(--mhs-height-tablet);
	}

	.mhs-slide:not(.mhs-slide--has-collage) .mhs-slide__layout {
		flex-direction: row;
		align-items: stretch;
	}

	.mhs-slide__media {
		width: var(--mhs-image-width);
		height: 100%;
		flex-shrink: 0;
	}

	.mhs-slide__bg-image {
		width: 100%;
		height: 100%;
	}

	.mhs-slide__content {
		flex: 1 1 auto;
		padding: clamp(20px, 3vw, 40px);
	}

	.mhs-slide__heading {
		font-size: var(--mhs-heading-size-tablet);
	}

	.mhs-slide__description {
		font-size: var(--mhs-description-size-tablet);
	}

	.mhs-slide.mhs-position-left .mhs-slide__layout {
		flex-direction: row;
	}

	.mhs-slide.mhs-position-right .mhs-slide__layout {
		flex-direction: row-reverse;
	}

	.mhs-slide.mhs-position-center:not(.mhs-slide--has-collage) .mhs-slide__layout {
		flex-direction: row;
		justify-content: center;
	}

	.mhs-slide.mhs-position-center:not(.mhs-slide--has-collage) .mhs-slide__media {
		width: min(var(--mhs-image-width), 55%);
	}
}

/* Laptop: 1024px+ */
@media (min-width: 1024px) {
	.mhs-swiper {
		height: var(--mhs-height-desktop);
	}

	.mhs-slide--has-collage {
		min-height: 100%;
	}

	.mhs-hero-wrapper--collage {
		min-height: var(--mhs-height-desktop);
	}

	.mhs-slide__heading {
		font-size: var(--mhs-heading-size-desktop);
	}

	.mhs-slide__description {
		font-size: var(--mhs-description-size-desktop);
	}
}

/* Large desktop */
@media (min-width: 1280px) {
	.mhs-slide:not(.mhs-slide--has-collage) .mhs-slide__layout {
		max-width: 1400px;
		margin: 0 auto;
	}
}

@media (min-width: 1440px) {
	.mhs-slide:not(.mhs-slide--has-collage) .mhs-slide__layout {
		max-width: 1600px;
	}
}

/* Small mobile */
@media (max-width: 425px) {
	.mhs-slide__buttons {
		flex-direction: column;
		width: 100%;
	}

	.mhs-btn {
		width: 100%;
		min-width: 0;
	}

	.mhs-slide__collage {
		grid-template-columns: 1fr 1fr;
		max-width: 100%;
	}

	.mhs-arrow {
		width: 34px;
		height: 34px;
		font-size: 18px;
	}
}

@media (max-width: 320px) {
	.mhs-arrow {
		width: 30px;
		height: 30px;
	}
}