/**
 * 首页 Banner（Slick Hero）— 仅在前台由 inc/home-hero.php 条件入队。
 */

/* --- 首页 Hero：Slick（父主题 mfn-slick + be.css 中 .slick-* 基类）--- */
#Header .elastel-home-hero {
	--elastel-hero-height: min(78vh, 610px);
	position: relative;
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	isolation: isolate;
}

#Header .elastel-home-hero .elastel-home-hero-slider.slick-slider {
	position: relative;
	overflow: hidden;
	z-index: 1;
	margin: 0;
	padding: 0;
	width: 100%;
}

#Header .elastel-home-hero .elastel-home-hero-slider:not(.slick-slider) {
	position: relative;
	margin: 0;
	padding: 0;
}

#Header .elastel-home-hero .slide-item {
	outline: none;
}

/* Slick 执行前：三张 .slide-item 会纵向堆叠各占满高，先只显示第一张 */
#Header .elastel-home-hero .elastel-home-hero-slider:not(.slick-initialized) > .slide-item ~ .slide-item {
	display: none !important;
}

#Header .elastel-home-hero .elastel-hero-slide {
	width: 100%;
	height: var(--elastel-hero-height, min(78vh, 610px));
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
}

#Header .elastel-home-hero .elastel-hero__inner {
	flex: 1;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	max-width: 1240px;
	width: 100%;
	margin: 0 auto;
	padding: clamp(18px, 3.5vw, 40px) clamp(48px, 6vw, 64px) clamp(20px, 3.5vw, 36px);
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	grid-template-areas: "copy media";
	gap: clamp(14px, 2.5vw, 28px) clamp(16px, 3vw, 40px);
	align-items: center;
	justify-items: start;
	min-height: 0;
	align-self: center;
}

/* 桌面：左文右图、垂直居中 — 接近原版 Rev Hero */
@media only screen and (min-width: 779px) {
	#Header .elastel-home-hero .elastel-hero__inner {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
		column-gap: clamp(28px, 4vw, 56px);
		padding: clamp(24px, 4vh, 48px) clamp(56px, 7vw, 72px);
		align-items: center;
		justify-items: start;
	}

	#Header .elastel-home-hero .elastel-hero__copy {
		max-width: 38rem;
	}

	#Header .elastel-home-hero .elastel-hero__title {
		font-size: clamp(1.75rem, 2.5vw + 0.85rem, 2.85rem);
		line-height: 1.18;
		margin-bottom: clamp(14px, 2vh, 22px);
	}

	#Header .elastel-home-hero .elastel-hero__sub {
		font-size: clamp(1rem, 1.1vw + 0.45rem, 1.35rem);
		line-height: 1.62;
		max-width: 28rem;
		font-weight: 500;
	}

	#Header .elastel-home-hero .elastel-hero__media {
		justify-self: end;
	}

	#Header .elastel-home-hero .elastel-hero__media img {
		max-width: min(100%, 560px);
		max-height: min(52vh, 440px);
	}
}

#Header .elastel-home-hero .elastel-hero__copy {
	grid-area: copy;
	align-self: center;
	color: #fff;
	text-align: left;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	font-family: inherit;
}

#Header .elastel-home-hero .elastel-hero__title {
	margin: 0 0 12px;
	font-size: clamp(1.45rem, 3.6vw, 2.35rem);
	line-height: 1.15;
	font-weight: 700;
	font-family: inherit;
	letter-spacing: -0.02em;
	color: #fff;
	font-size:40px;
}

#Header .elastel-home-hero .elastel-hero__title a.elastel-hero__title-link {
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}

#Header .elastel-home-hero .elastel-hero__title a.elastel-hero__title-link:hover,
#Header .elastel-home-hero .elastel-hero__title a.elastel-hero__title-link:focus {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* 第三屏等黑底：防止主题全局 a/h2 颜色盖掉 */
#Header .elastel-home-hero .elastel-hero-slide--dark .elastel-hero__title,
#Header .elastel-home-hero .elastel-hero-slide--dark .elastel-hero__title a.elastel-hero__title-link {
	color: #fff !important;
}

#Header .elastel-home-hero .elastel-hero-slide--dark .elastel-hero__copy,
#Header .elastel-home-hero .elastel-hero-slide--dark .elastel-hero__sub {
	color: rgba(255, 255, 255, 0.95) !important;
}

#Header .elastel-home-hero .elastel-hero__sub {
	margin: 0;
	font-size: clamp(0.95rem, 2.35vw, 1.12rem);
	line-height: 1.5;
	max-width: 32em;
	font-family: inherit;
	font-weight: 400;
	font-size:20px;
}

#Header .elastel-home-hero .elastel-hero__media {
	grid-area: media;
	align-self: center;
	justify-self: end;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
}

#Header .elastel-home-hero .elastel-hero__media-link {
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 0;
	text-decoration: none;
}

#Header .elastel-home-hero .elastel-hero__media-link:focus {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 4px;
}

#Header .elastel-home-hero .elastel-hero__media img {
	display: block;
	max-width: min(100%, 520px);
	width: 100%;
	height: auto;
	max-height: min(48vh, 400px);
	object-fit: contain;
}

/* Slick：列表填满高度，箭头叠加在轮播两侧（避免占行） */
#Header .elastel-home-hero .slick-list {
	position: relative;
	z-index: 2;
	height: var(--elastel-hero-height, min(78vh, 610px)) !important;
}

#Header .elastel-home-hero .slick-slide > div,
#Header .elastel-home-hero .slick-slide .slide-item {
	height: 100%;
}

/* 箭头仍留在 slick 内部时会变成上下两行，统统隐藏后用 appendArrows 挂到外层 */
#Header .elastel-home-hero .elastel-home-hero-slider .slick-arrow {
	display: none !important;
}

#Header .elastel-home-hero > .slick-prev,
#Header .elastel-home-hero > .slick-next {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	transform: translateY(-50%) !important;
	float: none !important;
	clear: none !important;
	z-index: 50 !important;
	line-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 44px !important;
	min-width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
}

#Header .elastel-home-hero > .slick-prev {
	left: clamp(6px, 1.25vw, 14px) !important;
	right: auto !important;
}

#Header .elastel-home-hero > .slick-next {
	right: clamp(6px, 1.25vw, 14px) !important;
	left: auto !important;
}

#Header .elastel-home-hero > .slick-arrow.slick-hidden {
	display: none !important;
}

/* 箭头视觉（挂载在 Hero 根上） */
#Header .elastel-home-hero > .elastel-home-hero-arrow {
	background: rgba(0, 0, 0, 0.22);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	transition: background 0.2s ease;
}

#Header .elastel-home-hero > .elastel-home-hero-arrow:hover,
#Header .elastel-home-hero > .elastel-home-hero-arrow:focus {
	background: rgba(0, 0, 0, 0.48);
	color: #fff;
}

#Header .elastel-home-hero .slick-dots {
	position: absolute;
	bottom: clamp(12px, 3vw, 24px);
	left: 0;
	right: 0;
	text-align: center;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 0;
	z-index: 25;
}

#Header .elastel-home-hero .slick-dots li {
	display: inline-block;
	margin: 0 6px;
}

#Header .elastel-home-hero .slick-dots li button {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	border: none;
	cursor: pointer;
	padding: 0;
	text-indent: -9999px;
	overflow: hidden;
	transition: background 0.2s ease, transform 0.2s ease;
}

#Header .elastel-home-hero .slick-dots .slick-active button {
	background: #fff;
	transform: scale(1.09);
}

@media only screen and (max-width: 778px) {
	#Header .elastel-home-hero {
		--elastel-hero-height: min(72vh, 540px);
	}

	#Header .elastel-home-hero .elastel-hero__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"copy"
			"media";
		text-align: center;
		padding: clamp(14px, 3vw, 24px) clamp(16px, 4vw, 24px) clamp(20px, 5vw, 32px);
	}

	#Header .elastel-home-hero .elastel-hero__copy {
		text-align: center;
		justify-self: center;
	}

	#Header .elastel-home-hero .elastel-hero__media {
		justify-self: center;
	}

	#Header .elastel-home-hero .elastel-hero__media img {
		max-width: min(100%, 420px);
		max-height: min(36vh, 300px);
	}
}

@media only screen and (max-width: 480px) {
	#Header .elastel-home-hero {
		--elastel-hero-height: min(76vh, 500px);
	}

	#Header .elastel-home-hero .elastel-hero__inner {
		padding-left: 14px;
		padding-right: 14px;
		gap: 12px;
	}

	#Header .elastel-home-hero .elastel-hero__title {
		font-size: clamp(1.2rem, 6vw, 1.45rem);
	}

	#Header .elastel-home-hero .elastel-hero__sub {
		font-size: 0.9rem;
		line-height: 1.45;
	}

	#Header .elastel-home-hero .elastel-hero__media img {
		max-height: min(34vh, 260px);
	}
}