/* Separated portfolio styles to match the floating layout screenshot */
:root {
    --gap: 2.5vw; /* 水平间距基于视口宽度 */
    --vGap: 2.5vh; /* 垂直间距基于视口高度 */
}

.portfolio {
    padding: 40px 0
}

.portfolio h2 {
    font-family: Georgia, serif;
    text-align: center;
    font-size: 56px;
    color: #a9a9a9;
    margin-bottom: 18px
}

.carousel {
    display: flex;
    align-items: center;
    gap: 12px
}

.carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.06);
    font-size: 28px;
    cursor: pointer
}

.carousel-viewport {
    overflow: hidden;
    flex: 1
}

.portfolio-track {
    /* 改为相对定位的容器，内部卡片使用绝对定位以精确控制浮动布局 */
    position: relative;
    padding: 3vw 3vw; /* 画面内间距，随视口缩放 */
    height: 78vh; /* portfolio 区按视口高度比例展示 */
    transition: transform .45s ease;
}

.card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    position: absolute; /* 通过 nth-child 定位每个卡片 */
    overflow: hidden;
}

.card img {
    width: 100%;
    /* 图片高度留出底部 meta 区域的空间，以便标题/价格可见 */
    height: calc(100% - 64px);
    object-fit: cover;
    display: block;
}

/* 默认尺寸（会被下面按索引的规则覆盖）*/
.card.wide { width: 32vw }
.card.small { width: 16vw }
.card.tall { width: 15vw }

/* 使用视口高度控制卡片高度（可被各自 nth-child 覆盖） */
.card.wide img { height: 15vh } /* 色块等宽条高度 */
.card.small img { height: 17vh }
.card.tall img { height: 71vh }

/* 卡片底部的标题/价格条 */
.meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 -6px 12px rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 5;
}

.meta h3 {
    font-size: 14px;
    margin: 0;
    color: #223;
}

.meta span {
    color: #2b5876;
    font-weight: 700;
    margin-left: 8px;
}

.cart-badge {
    position: absolute;
    right: 12px;
    bottom: 10px; /* 在 meta 上方少许位置，便于视觉 */
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 8px;
    border-radius: 16px;
    z-index: 6;
}

.explore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 18px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -48px; /* 下移，避免与图片重叠 */
    width: 100%;
}

.btn.explore {
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 2px;
    text-decoration: none
}


/* 精确定位每一张卡片（按 index 对应 index.html 中的顺序） */
/* 1: 色块的呼吸（宽卡） */
.portfolio-track .card:nth-child(1) {
    /* 色块的呼吸：左侧宽条 */
    left: 3vw;
    top: 4vh; /* 画面上方留白 */
    width: 32vw; /* 约占画面宽度的 32% */
    height: 20vh; /* 进一步向下拉长，约占画面高度的 20% */
}
.portfolio-track .card:nth-child(1) img { height: calc(20vh - 64px) }

/* 2: 未来都市（小卡） - 放在色块下方，右边与色块右边对齐 */
.portfolio-track .card:nth-child(2) {
    /* 未来都市：右对齐于色块底部 */
    width: 16vw; /* 约占画面宽度的 16% */
    left: calc(3vw + 32vw - 16vw); /* 与色块右对齐 */
    top: calc(4vh + 20vh + var(--vGap)); /* 在色块下方（基于第1项新高度20vh） */
    height: 22vh; /* 再向下拉长一点 */
}
.portfolio-track .card:nth-child(2) img { height: calc(22vh - 64px) }

/* 3: 光的褶皱（竖条） - 占中间长条区域 */
.portfolio-track .card:nth-child(3) {
    /* 光的褶皱：中间竖条 */
    left: 38vw;
    top: 4vh;
    width: 15vw; /* 约占画面宽度的 15% */
    height: 71vh; /* 约占画面高度的 71% */
}
.portfolio-track .card:nth-child(3) img { height: 71vh }

/* 4: 黄与黑的对话 - 拉长一点，位于右侧上方 */
.portfolio-track .card:nth-child(4) {
    /* 黄与黑的对话：右侧上方 */
    left: 55.5vw;
    top: 6vh;
    width: 15vw; /* 约占画面宽度的 15% */
    height: 38vh; /* 约占画面高度的 38% */
}
.portfolio-track .card:nth-child(4) img { height: 38vh }

/* 5: 风藏在叶脉里 - 移到黄与黑下面，左边与黄与黑对齐 */
.portfolio-track .card:nth-child(5) {
    /* 风藏在叶脉里：黄与黑下方，左边与黄与黑对齐 */
    left: 55.5vw;
    top: calc(6vh + 38vh + var(--vGap));
    width: 15vw; /* 约占画面宽度的 15% */
    height: 20vh; /* 约占画面高度的 20% */
}
.portfolio-track .card:nth-child(5) img { height: 20vh }

.portfolio-track .card:nth-child(6) {
    /* 6: 雾天的街景漫游：右侧上方小卡 */
    left: 73vw; /* 计算：55.5vw + 15vw + 2.5vw */
    top: 6vh;
    width: 19vw; /* 约占画面宽度的 19% */
    height: 25vh; /* 约占画面高度的 25% */
}
.portfolio-track .card:nth-child(6) img { height: 25vh }

/* 7: 线条的独白 - 在第6项下面，左边与其对齐 */
.portfolio-track .card:nth-child(7) {
    /* 7: 线条的独白：右侧下方 */
    left: 73vw; /* 与第6项左对齐 */
    top: calc(6vh + 25vh + var(--vGap));
    width: 29vw; /* 约占画面宽度的 29% */
    height: 19vh; /* 约占画面高度的 19% */
}

/* 保持响应式行为：窄屏时回退到横向滚动的 flex 布局，便于移动端查看 */
@media(max-width:1100px) {
    .portfolio-track {
        display: flex;
        align-items: flex-start;
        gap: var(--gap);
        height: auto;
        position: static;
        padding: 12px;
        flex-wrap: nowrap;
    }

    .card { position: relative; width: auto }
    .card img { height: 160px }
    .card.tall img { height: 420px }
    .explore-wrap { position: static; transform: none; margin-top: 18px }
}

@media(max-width:900px) {
    .portfolio-track {
        gap: 12px
    }

    .card.wide {
        flex: 0 0 300px
    }

    .card.tall img {
        height: 320px
    }
}