/*
 * Factory Tour 图库以 PSD 导出的完整工厂背景为画布，不再拆分成固定的左右氛围图。
 * 轨道中的八个 Gutenberg 子区块都保持可维护；视口只突出中间主卡和两侧部分卡片。
 */
.yumin-company-gallery {
	/*
	 * 宽屏主卡以设计稿 968px 为上限，并按视口宽度等比例收缩。
	 * 480px 下限保证平板仍有可辨识的主图；高度始终由 968:620 比例推导，
	 * 因此不会在不同窗口高度下拉伸图片或挤压进度导航。
	 */
	--yumin-gallery-card-width: clamp(480px, 50.42vw, 968px);
	--yumin-gallery-gap: clamp(14px, 1.25vw, 24px);
	position: relative;
	min-height: clamp(780px, 75.68vw, 1453px);
	overflow: clip;
	isolation: isolate;
	color: #fff;
	/*
	 * 环境底图的末行以透明像素渐隐。画廊本身必须以白色页面底合成，
	 * 不能使用进度导航的青绿色作为兜底色，否则会在底部露出色块。
	 * 进度线及当前位置标记继续由下方独立的 progress 规则负责。
	 */
	background-color: #fff;
	background-image: var(--yumin-factory-gallery-background);
	background-position: center top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.yumin-company-gallery__intro { position: relative; z-index: 2; padding-top: clamp(50px, 4.5vw, 86px); }
.yumin-company-gallery__heading h2 { margin: 0; color: #fff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: clamp(28px, 2.08vw, 40px); font-weight: 800; line-height: 1.2; }

.yumin-company-gallery__content { position: relative; z-index: 1; padding-top: clamp(96px, 7.3vw, 140px); }
/*
 * 标题和进度导航继续受共享内容轨道约束；只有卡片舞台扩展到画廊全宽。
 * 轮播脚本会按舞台宽度居中当前卡片，根容器负责裁切两侧超出的预览卡，
 * 从而与 PSD 一致地让左右预览从画布边缘露出，而不是从文字轨道边缘开始。
 */
.yumin-company-gallery__viewport { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; }
.yumin-company-gallery__viewport.is-dragging { cursor: grabbing; }
.yumin-company-gallery__track { display: flex; align-items: flex-start; gap: var(--yumin-gallery-gap); width: max-content; padding-block: 4px clamp(24px, 2.5vw, 48px); transition: transform .58s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.yumin-company-gallery__viewport.is-dragging .yumin-company-gallery__track { transition: none; }
.yumin-company-gallery__track.is-reordering { transition: none; }
/* 卡片始终使用同一尺寸。标题改为绝对定位覆盖层，切换时不会推挤图片或下方轨道。 */
.yumin-company-gallery__item { --yumin-gallery-flip-x: 0px; position: relative; flex: 0 0 var(--yumin-gallery-card-width); aspect-ratio: 968 / 620; overflow: hidden; isolation: isolate; padding: 0; border: 0; border-radius: 8px; color: #00a99d; background: #fff; box-shadow: 0 16px 34px rgba(12, 66, 69, .16); cursor: pointer; font: inherit; text-align: left; opacity: .5; filter: saturate(.74) brightness(.94); transform: translate3d(var(--yumin-gallery-flip-x), 0, 0); transition: transform .64s cubic-bezier(.22, .72, .22, 1), opacity .42s ease, filter .42s ease, box-shadow .42s ease; will-change: transform; }
.yumin-company-gallery__track.is-reordering .yumin-company-gallery__item { transition: none; }
.yumin-company-gallery__item::before { position: absolute; z-index: 2; inset: -20% -35%; content: ""; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .45) 49%, transparent 60%); opacity: 0; transform: translateX(-24%); transition: opacity .42s ease, transform .64s cubic-bezier(.22, .72, .22, 1); pointer-events: none; }
.yumin-company-gallery__item::after { position: absolute; z-index: 1; inset: 0; content: ""; opacity: 0; transition: opacity .42s ease; pointer-events: none; }
/* 多层硬阴影、暗角和扫光模拟卡片厚度，全程不缩放或旋转图片本体。 */
.yumin-company-gallery__item.is-previous { box-shadow: 8px 8px 0 rgba(0, 53, 58, .13), 16px 16px 0 rgba(0, 53, 58, .09), 24px 24px 38px rgba(12, 66, 69, .24); }
.yumin-company-gallery__item.is-previous::before { opacity: .72; transform: translateX(18%); }
.yumin-company-gallery__item.is-previous::after { background: linear-gradient(90deg, transparent 48%, rgba(0, 53, 58, .42)); opacity: 1; }
.yumin-company-gallery__item.is-next { box-shadow: -8px 8px 0 rgba(0, 53, 58, .13), -16px 16px 0 rgba(0, 53, 58, .09), -24px 24px 38px rgba(12, 66, 69, .24); }
.yumin-company-gallery__item.is-next::before { opacity: .72; transform: translateX(-18%); }
.yumin-company-gallery__item.is-next::after { background: linear-gradient(90deg, rgba(0, 53, 58, .42), transparent 52%); opacity: 1; }
.yumin-company-gallery__item.is-active { z-index: 1; color: #00a99d; box-shadow: 0 24px 52px rgba(12, 66, 69, .24); opacity: 1; filter: none; }
.yumin-company-gallery__item:not(.is-active):hover { opacity: .72; filter: saturate(.88) brightness(.98); }
.yumin-company-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* 标题覆盖层高度固定；柔和乳白从底部高白度过渡至顶部半透明，保证标题不悬浮在图片上。 */
.yumin-company-gallery__item span { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: grid; min-height: clamp(68px, 5.2vw, 88px); padding: 14px 24px; place-items: center; overflow: hidden; color: #00a99d; background: linear-gradient(to top, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 34%, rgba(255, 255, 255, .83) 66%, rgba(255, 255, 255, .62) 100%); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: clamp(18px, 1.35vw, 26px); font-weight: 800; line-height: 1.2; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity .32s ease, transform .46s cubic-bezier(.22, .72, .22, 1); pointer-events: none; }
.yumin-company-gallery__item.is-active span { opacity: 1; transform: translateY(0); }
.yumin-company-gallery__item:focus-visible { z-index: 2; outline: 3px solid #113f43; outline-offset: 4px; }

/* 轨道形态保持 PSD 的细绿线和当前项矩形标记；透明的 range 提供点击、拖拽与键盘输入。 */
.yumin-company-gallery__navigation { padding: clamp(64px, 6.25vw, 120px) 0 64px; }
.yumin-company-gallery__navigation-row { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); }
.yumin-company-gallery__progress { position: relative; height: 28px; }
.yumin-company-gallery__navigation-row .yumin-company-gallery__progress { flex: 1 1 auto; min-width: 0; }
.yumin-company-gallery__progress-input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.yumin-company-gallery__progress-track { position: absolute; top: 13px; right: 0; left: 0; height: 3px; background: #00a99d; }
.yumin-company-gallery__progress-indicator { position: absolute; top: -7px; left: 0; width: var(--yumin-gallery-progress-width, 12.5%); height: 15px; background: #00a99d; transition: left .38s cubic-bezier(.22, .61, .36, 1), width .2s ease; }
.yumin-company-gallery__progress-input:focus-visible + .yumin-company-gallery__progress-track { outline: 3px solid #113f43; outline-offset: 5px; }
.yumin-company-gallery__autoplay-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; min-width: 112px; min-height: 42px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 0; color: #fff; background: rgba(0, 53, 58, .24); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.yumin-company-gallery__autoplay-toggle:hover { color: #00353a; background: #fff; }
.yumin-company-gallery__autoplay-toggle:focus-visible { outline: 3px solid #113f43; outline-offset: 4px; }
.yumin-company-gallery__autoplay-toggle:disabled { opacity: .58; cursor: not-allowed; }
.yumin-company-gallery__autoplay-icon { position: relative; display: inline-block; flex: 0 0 12px; width: 12px; height: 14px; }
.yumin-company-gallery__autoplay-icon::before,
.yumin-company-gallery__autoplay-icon::after { position: absolute; top: 0; width: 3px; height: 14px; content: ""; background: currentColor; }
.yumin-company-gallery__autoplay-icon::before { left: 0; }
.yumin-company-gallery__autoplay-icon::after { right: 0; }
.yumin-company-gallery__autoplay-toggle.is-paused .yumin-company-gallery__autoplay-icon::before { top: 1px; left: 2px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; background: transparent; }
.yumin-company-gallery__autoplay-toggle.is-paused .yumin-company-gallery__autoplay-icon::after { display: none; }

.yumin-gallery-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 24px; background: rgba(0, 24, 29, .88); }
.yumin-gallery-lightbox__inner { position: relative; max-width: min(1200px, 94vw); max-height: 92vh; text-align: center; }
.yumin-gallery-lightbox img { display: block; max-width: 100%; max-height: 82vh; margin: auto; object-fit: contain; }
.yumin-gallery-lightbox p { margin: 12px 0 0; color: #fff; }
.yumin-gallery-lightbox__close { position: absolute; top: -42px; right: 0; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; color: #fff; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; }

@media (max-width: 700px) {
	/* 窄屏也预留两侧可点击预览，中央主卡仍占据主要可视宽度。 */
	.yumin-company-gallery { --yumin-gallery-card-width: 64vw; --yumin-gallery-gap: 12px; width: 100%; min-height: clamp(630px, 164vw, 760px); background-size: auto 100%; background-position: center top; }
	.yumin-company-gallery__intro { padding-top: 48px; }
	.yumin-company-gallery__intro .yumin-hero-track,
	.yumin-company-gallery__content.yumin-hero-track { max-width: 100%; min-width: 0; }
	.yumin-company-gallery__heading { display: block; min-width: 0; }
	.yumin-company-gallery__heading h2 { width: 100%; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(22px, 6.2vw, 26px); }
	.yumin-company-gallery__content { padding-top: clamp(62px, 17vw, 78px); }
	/* 窄屏恢复内容宽度，避免全宽舞台参与移动端的横向尺寸计算。 */
	.yumin-company-gallery__viewport { width: 100%; margin-left: 0; }
	.yumin-company-gallery__track { padding-bottom: 24px; }
	.yumin-company-gallery__item { border-radius: 6px; }
	.yumin-company-gallery__item span { padding-inline: 16px; font-size: 17px; }
	.yumin-company-gallery__navigation { width: 100%; min-width: 0; padding: clamp(44px, 12vw, 58px) 0 38px; }
	.yumin-company-gallery__navigation-row { gap: 12px; }
	.yumin-company-gallery__autoplay-toggle { min-width: 88px; min-height: 38px; padding-inline: 10px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.yumin-company-gallery__track,
	.yumin-company-gallery__item,
	.yumin-company-gallery__item::before,
	.yumin-company-gallery__item::after,
	.yumin-company-gallery__item span,
	.yumin-company-gallery__progress-indicator { transition: none; }
}