@import url(https://fonts.bunny.net/css?family=abel:400);

/* 轮播图样式 */
	.carousel {
		--items: 12; /* 更新为12个项目 */
		--carousel-duration: 40s; /* 加速轮播动画 */
		@media (width > 600px) {
			--carousel-duration: 35s;
		}
		--carousel-width: 100%; /* 使用全宽 */
		--carousel-item-width: 260px; /* 减小卡片宽度 */
		--carousel-item-height: 360px; /* 减小卡片高度 */
		--carousel-item-gap: 1rem; /* 卡片间距 */
		--carousel-visible-padding: 15%; /* 增加两侧可见区域，让更多卡片预显示 */
		--carousel-z-index: 1; /* 控制轮播图层级，确保不干扰视差背景 */

		--clr-cta: rgb(0, 132, 209);

		/* 重要：使用相对定位，不影响文档流 */
		position: relative;
		display: block; /* 确保是块级元素 */
		width: 100%;
		max-width: 100%; /* 防止超出容器 */
		height: var(--carousel-item-height);
		overflow: visible; /* 允许内容溢出容器 */
		/* 增加右侧预显示区域 */
		margin-right: calc(var(--carousel-item-width) + var(--carousel-item-gap)); /* 右侧预留一张卡片的空间 */
		padding: 0 var(--carousel-visible-padding); /* 添加两侧填充，确保卡片在容器内可见 */
        margin: 2rem auto 3rem auto; /* 增加上下间距，居中显示 */
        border-radius: 24px; /* 轮播区域整体圆角 */
        padding-top: 1.2rem; /* 轮播区域顶部内边距 */
		padding-bottom: 1.2rem; /* 轮播区域底部内边距 */
        font-family: "Abel", sans-serif; /* 确保使用Abel字体 */
        background: light-dark(rgba(245, 245, 250, 0.08), rgba(30, 30, 50, 0.08)); /* 减少背景透明度 */
        backdrop-filter: blur(8px); /* 减少背景模糊效果 */
        -webkit-backdrop-filter: blur(8px); /* Safari兼容 */
		z-index: var(--carousel-z-index); /* 确保不影响视差背景 */
		
		/* 确保轮播图不会影响页面布局 */
		box-sizing: border-box;

		&[reverse] > article {
			animation-direction: reverse;
		}
		/* hover pauses animation */
		&:hover > article {
			animation-play-state: paused;
		}
	}
	.carousel > article {
		position: absolute;
		top: 0;
		/* 调整起始位置，让卡片从更远的右侧开始，确保预加载显示 */
		left: calc(100% + var(--carousel-item-gap) + var(--carousel-visible-padding) + var(--carousel-item-width));
		width: var(--carousel-item-width);
		height: var(--carousel-item-height);
		display: grid;
		grid-template-rows: 180px auto 1fr auto; /* 图片区域占一半高度 */
		gap: 0.1rem;
		border: 1px solid light-dark(rgba(0 0 0 / 0.08), rgba(255 255 255 / 0.08)); /* 更淡的边框 */
		padding-block-end: 1rem;
		border-radius: 16px; /* 圆角 */
		background: light-dark(rgba(255, 255, 255, 0.9), rgba(30, 30, 45, 0.7)); /* 稍微调整背景透明度 */
		color: light-dark(rgb(49, 65, 88), white);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 减轻阴影 */
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* 平滑的过渡效果 */
        backdrop-filter: blur(3px); /* 减少背景模糊效果 */
        -webkit-backdrop-filter: blur(3px); /* Safari兼容 */
		
		/* 确保卡片不会影响页面其他元素 */
		isolation: isolate;

		/* animation */
		will-change: transform;
		animation-name: marquee;
		animation-duration: var(--carousel-duration);
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-delay: calc(
			var(--carousel-duration) / var(--items) * 1 * var(--i) * -1
		);
		/* 更新为12个项目的索引 */
		&:nth-child(1) { --i: 0; }
		&:nth-child(2) { --i: 1; }
		&:nth-child(3) { --i: 2; }
		&:nth-child(4) { --i: 3; }
		&:nth-child(5) { --i: 4; }
		&:nth-child(6) { --i: 5; }
		&:nth-child(7) { --i: 6; }
		&:nth-child(8) { --i: 7; }
		&:nth-child(9) { --i: 8; }
		&:nth-child(10) { --i: 9; }
		&:nth-child(11) { --i: 10; }
		&:nth-child(12) { --i: 11; }
	}
	.carousel img {
		width: 100%;
		height: 100%;
		object-fit: cover;
        object-position: center; /* 确保图片居中 */
		border-radius: 15px 15px 0 0; /* 增加边角圆润度 */
        filter: brightness(0.95) saturate(1.05); /* 轻微提高亮度和饱和度 */
        transition: all 0.5s ease; /* 更平滑的过渡 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 轻微的内阴影 */
	}
	.carousel > article:hover {
        transform: translateY(-6px) scale(1.005); /* 减少上浮效果和放大程度 */
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); /* 减轻阴影 */
        z-index: 10; /* 确保悬停的卡片显示在最上层 */
        border-color: light-dark(rgba(0, 132, 209, 0.2), rgba(0, 132, 209, 0.4)); /* 减淡边框颜色 */
    }

    .carousel > article:hover img {
        transform: scale(1.02); /* 减少放大效果 */
        filter: brightness(1.03) contrast(1.03); /* 减少亮度和对比度提升 */
    }
	.carousel > article > *:not(img) {
		padding: 0 1.2rem; /* 增加内边距 */
	}
	.carousel > article > div {
		grid-row: span 2;
		display: grid;
		grid-template-rows: subgrid;
		font-size: 0.85rem; /* 减小字体 */
        max-height: 80px; /* 增加内容区域高度以容纳两行文本 */
        overflow-y: hidden; /* 隐藏溢出内容 */
        position: relative;
	}
	.carousel > article h2 {
		font-size: 1.4rem; /* 适当调整标题大小 */
		font-weight: 600; /* 更粗的标题 */
		padding-block: 0.5rem 0.1rem; /* 减少上下间距 */
		margin: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* 增强文字阴影 */
        letter-spacing: 0.6px; /* 增加字间距 */
        text-align: center; /* 居中标题 */
        color: light-dark(rgb(20, 40, 80), rgb(220, 230, 255)); /* 更鲜明的颜色 */
        transition: color 0.3s ease; /* 添加颜色过渡效果 */
	}
	.carousel > article p {
		margin: 0 0 0.3rem 0; /* 减少段落底部边距 */
        line-height: 1.4; /* 增加行高，让文本更易读 */
        display: -webkit-box;
        display: box;
        -webkit-line-clamp: 2; /* 改为2行，显示更多内容 */
        line-clamp: 2; /* 标准属性兼容 */
        -webkit-box-orient: vertical;
        box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* 添加省略号 */
        opacity: 0.9; /* 轻微透明，让内容不那么突兀 */
        transition: opacity 0.3s ease; /* 添加透明度过渡 */
		word-wrap: break-word; /* 允许长单词换行 */
		hyphens: auto; /* 自动断词 */
	}
    .carousel > article:hover h2 {
        color: var(--clr-cta); /* 悬停时标题变色 */
    }
    .carousel > article:hover p {
        opacity: 1; /* 悬停时文本完全不透明 */
    }
	.carousel > article a {
		text-decoration: none;
		text-transform: uppercase; /* 大写按钮文字 */
		border: none; /* 移除边框 */
		color: white; /* 保证在所有情况下按钮文字都是白色 */
		background-color: var(--clr-cta); /* 默认就有背景色 */
		border-radius: 20px; /* 减小按钮圆角 */
		padding: 0.2rem 0.8rem; /* 减小内边距 */
		margin-top: 0.3rem; /* 增加与文本的距离 */
		place-self: center; /* 居中显示按钮 */
		transition: all 400ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* 平滑过渡 */
        font-weight: 600; /* 按钮文字加粗 */
        font-size: 0.75rem; /* 进一步减小按钮文字 */
        letter-spacing: 0.5px; /* 减小字间距 */
        display: inline-block;
        position: absolute; /* 绝对定位 */
        bottom: 10px; /* 减小距离底部距离 */
        left: 50%;
        transform: translateX(-50%) translateY(15px); /* 居中并向下偏移 */
        opacity: 0; /* 默认隐藏 */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* 减轻阴影 */
	}
	.carousel > article a:hover,
	.carousel > article a:focus-visible {
		background-color: #0088dd; /* 更鲜艳的蓝色 */
		color: white;
		outline: none;
        transform: translateX(-50%) scale(1.03); /* 稍微放大效果 */
        box-shadow: 0 2px 8px rgba(0, 132, 209, 0.4); /* 减轻彩色阴影 */
	}
	.carousel > article:hover a {
        opacity: 1; /* 鼠标悬停时显示按钮 */
        transform: translateX(-50%) translateY(0); /* 移回原位 */
        transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 更平滑的弹性动画 */
    }
    
    /* 按钮点击效果 */
    .carousel > article a:active {
        transform: translateX(-50%) scale(0.97); /* 轻微的缩小效果 */
        background-color: #0066aa; /* 点击时颜色变深 */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 减少阴影 */
    }

	@keyframes marquee {
		0% {
			/* 起始位置，从右侧完全进入 */
			transform: translateX(0);
		}
		100% {
			/* 结束位置，移动到最左侧，考虑预加载空间 */
			transform: translateX(
				calc(
					(var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap)) + 
					var(--carousel-visible-padding) * 2 + var(--carousel-item-width)) * -1
				)
			);
		}
	}
	
	/* 添加响应式设计优化 */
	@media (max-width: 768px) {
        .carousel {
            --carousel-item-width: 240px;
            --carousel-item-height: 340px;
            --carousel-item-gap: 0.8rem;
            --carousel-duration: 30s; /* 平板设备上加速轮播 */
            --carousel-visible-padding: 12%; /* 平板设备上增加侧边距 */
            padding: 0 var(--carousel-visible-padding);
            margin: 1.5rem auto 2.5rem auto; /* 调整间距 */
            margin-right: calc(var(--carousel-item-width) + var(--carousel-item-gap)); /* 平板设备预留空间 */
        }
        
        .carousel > article {
            grid-template-rows: 170px auto 1fr auto; /* 调整比例 */
            left: calc(100% + var(--carousel-item-gap) + var(--carousel-visible-padding) + var(--carousel-item-width));
        }
        
        .carousel > article h2 {
            font-size: 1.2rem;
            padding-block: 0.4rem 0.1rem;
        }
        
        .carousel > article > div {
            font-size: 0.8rem;
            max-height: 50px; /* 平板设备上调整高度 */
        }
        
        .carousel > article a {
            font-size: 0.7rem;
            padding: 0.2rem 0.7rem;
            bottom: 8px;
        }
    }
    
    @media (max-width: 480px) {
        .carousel {
            --carousel-item-width: 175px;
            --carousel-item-height: 250px;
            --carousel-duration: 25s; /* 移动设备上加速轮播 */
            --carousel-visible-padding: 8%; /* 移动设备上适度减少侧边距 */
            margin: 1rem auto 2rem auto; /* 进一步调整间距 */
            padding: 0 var(--carousel-visible-padding);
            margin-right: calc(var(--carousel-item-width) * 0.5); /* 移动端预留半张卡片空间 */
        }
        
        .carousel > article {
            grid-template-rows: 150px auto 1fr auto; /* 移动端比例 */
            left: calc(100% + var(--carousel-item-gap) + var(--carousel-visible-padding));
        }
        
        .carousel > article h2 {
            font-size: 1rem;
        }
        
        .carousel > article > div {
            font-size: 0.75rem;
            max-height: 40px; /* 移动设备上调整高度 */
        }
        
        .carousel > article p {
            font-size: 0.7rem;
        }
        
        .carousel > article a {
            font-size: 0.65rem;
            padding: 0.15rem 0.6rem;
            bottom: 6px;
        }
    }