/* 页面特定微调 */

/* 调整不同卡片比例以贴合设计视觉层级 */
.work-lg .work-media { aspect-ratio: 9/10; }
.work-md .work-media { aspect-ratio: 16/7; }
.work-sm .work-media { aspect-ratio: 14/16; }

/* Hero 背景：渐变占位 + 本地优先 + 外链兜底 */
.hero-section .hero-bg {
	/* 渐变透明 + 本地图片，repeat-x 与容器对齐逻辑在 base.css */
	--hero-local: url('../../assets/images/hero-window.png');
	/* 改为单张大图，不再平铺，避免拼缝；水平垂直都以中心为基准 */
	--hero-y-offset: 20px; /* 向下偏一点，露出更多下部 */
    background-image:
        linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, rgba(235, 235, 235, 0) 100%),
        var(--hero-local);
	/* 覆盖基础样式：不平铺，图片 cover 充满 */
	background-repeat: no-repeat, no-repeat;
	background-size: auto, cover;
	background-position: center center, center calc(50% + var(--hero-y-offset));
}

/* 让 hero 区域本身也在底部留出额外空间，使延展的背景可见 */
.hero-section {
	--hero-bottom-extend: 0px; /* 移除额外留白，让版面更紧凑 */
	--hero-height: 790px; /* 再调大一些 */
}

/* 精选作品卡片：为每张图提供本地优先/外链兜底 */
.works-section .work-card .work-media.media-01 {
	background-image:
		url('../../assets/images/work-01.png');
}

.works-section .work-card .work-media.media-02 {
	background-image:
		url('../../assets/images/work-02.webp');
}

.works-section .work-card .work-media.media-03 {
	background-image:
		url('../../assets/images/work-03.png');
}

.works-section .work-card .work-media.media-04 {
	background-image:
		url('../../assets/images/work-04.png');
}

/* 桌面端布局：大卡左侧（1-6），中卡右上（7-12），两张小卡右下左右并排（各 3 列） */
@media (min-width: 1025px) {
	.works-section .works-grid { /* 精准两行结构：左大卡贯穿两行，右侧上中卡，下两小卡并排 */
		grid-auto-flow: row; /* 明确按行填充 */
		align-items: start; /* 网格项按内容高度，不被拉伸 */
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas:
			"lg lg lg lg lg lg md md md md md md"
			"lg lg lg lg lg lg sm1 sm1 sm1 sm2 sm2 sm2";
	}
	.works-section .work-card { /* 单个卡片不拉伸，顶对齐 */
		align-self: start;
	}
	.works-section .work-card.work-lg { /* 左列：大卡贯穿两行 */
		grid-area: lg;
	}
	.works-section .work-card.work-md { /* 右列顶部：中卡 */
		grid-area: md;
	}
	/* 右列底部：两张小卡左右并排 */
	.works-section .work-card.work-sm:has(.media-03) { /* 右下左 */
		grid-area: sm1;
	}
	.works-section .work-card.work-sm:has(.media-04) { /* 右下右 */
		grid-area: sm2;
	}
}