/* 页面标题背景 - 设置header图片和遮罩 */
.title {
    background-image: linear-gradient(to top, var(--black-50), var(--black-50)), url('../images/header-our-story.jpg');
    background-size: cover;
    background-position: center;
}

/* 第一section*/
.first-about {
    margin-bottom: 60px;
    /* 与下面section保持距离 */
}

/* 左右and the图片和文字 */
.about-company {
    display: flex;
    gap: 60px;
    /* 图片和文字之间的间距 */
    align-items: center;
    position: relative;
    /* 为”position做准备 */
    padding: 40px;
}

/* 左边图片 */
.left-side {
    width: 50%;
    /* 占一半宽度 */
}

.latte {
    width: 100%;
    height: auto;
}

/* 右边文字 */
.right-side {
    width: 50%;
}


.content-company .small {
    color: var(--tertiary);
    /* 使用青色 */
    margin-bottom: 15px;
    font-weight: 700;
    /* 青色categories name变bold */
}

.content-company h4 {
    margin-bottom: 25px;
}

.content-company p {
    color: var(--grey-dark);
    margin-bottom: 40px;
}


.slogan {
    background: var(--secondary);
    padding: 25px 35px;
    border-radius: 20px;
    position: relative;
    /* 为”position做准备 */
}

/* ” */
.quote::after {
    top: -30px;
    right: -50px;
}

.slogan p {
    color: var(--white);
    /* 使用common.css的白色变量 */
    margin: 0;
    /* 重要：移除默认margin，让文字紧贴slogan框边缘，避免额外空白 */
}

/* 三个卡片 */
.sqr-group {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 50px;
    flex-wrap: nowrap !important;
}

.company {
    background-image: linear-gradient(var(--black-60), var(--black-60)), url('../images/company-story.jpg');
}

.about {
    background-image: linear-gradient(var(--black-60), var(--black-60)), url('../images/about-us.jpg');
}

.testimonials {
    background-image: linear-gradient(var(--black-60), var(--black-60)), url('../images/testimonials.jpg');
}

/* 第二部分 */
.sec-kopidiam {
    display: flex;
    gap: 0;
    /* 文字框和图片无缝连接中间不要gap */
    margin: 120px 0 250px;
    position: relative;
    width: 100%;
}

/* 文字 */
.content-stories {
    background: var(--dark);
    padding: 100px 90px;
    width: 50%;
    border-radius: 0 0 30px 0;
    /* 这个是跟回figma的设计 */
    transform: translateY(50px);
}

.content-stories .small {
    color: var(--tertiary);
    margin-bottom: 20px;
    font-weight: 700;
}

.content-stories h4 {
    margin-bottom: 30px;
}

.content-stories p {
    color: var(--grey-dark);
}

/* 图片 */
.bar {
    width: 50%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px 0 0 0;
}


/* 第三部分  */
.third-us {
    display: flex;
    gap: 60px;
    align-items: center;
    margin: -80px;
}

.third-us h4 {
    margin-bottom: 30px;
}

/* 员工图片 */
.staff-img {
    width: 45%;
    height: auto;
    border-radius: 20px;
}


.content-us {
    width: 55%;
}

.content-us .small {
    color: var(--tertiary);
    font-weight: 700;
}


.content-us p {
    color: var(--grey-dark);
}


.statsbar {
    display: flex;
    justify-content: flex-start;
    gap: clamp(15px, 4vw, 100px);
    margin-top: 30px;
}

/* solo卡片 */
.stats {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
}

.stats h2 {
    color: var(--tertiary);
}


.statstext {
    display: flex;
    flex-direction: column;
    color: var(--black);
    text-transform: uppercase;
}

/* 第四部分 */
.wrapper.dark {
    background: var(--dark);
    position: relative;
    padding: 80px 140px;
    text-align: center;
    margin: 120px 0;
    margin-bottom: -5px;
    border-radius: 25px 25px 0 0;
    overflow-x: clip;
    /* 防止那些照片造成navi bar so就用deco的方式以此类推这么做 */
}


.four-title {
    margin-bottom: 30px;
}

.four-title .small {
    color: var(--tertiary);
    margin-bottom: 15px;
    font-weight: 700;
}

.four-title h2 {
    color: var(--black);
}

.four-content {
    background: var(--secondary);
    color: var(--white);
    max-width: 800px;
    margin: auto;
    padding: 25px 100px;
    border-radius: 25px;
}

.four-content p {
    color: var(--white);
}

.four-content p:first-child {
    margin-bottom: 40px;
}


.image-foodblogger img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.four-content h6 {
    color: var(--white);
    margin-bottom: 5px;
}


.blogger-1,
.blogger-2,
.blogger-3,
.blogger-4 {
    position: absolute;
}

.blogger-1 {
    top: 15%;
    left: 8%;
    z-index: 100;
    width: 90px;
    height: 90px;
}



.blogger-2 {
    top: 20%;
    right: 8%;
    width: 110px;
    height: 110px;
}


.blogger-3 {
    bottom: 20%;
    left: 5%;
    width: 70px;
    height: 70px;
}


.blogger-4 {
    bottom: 15%;
    right: 10%;
    z-index: 100;
    width: 95px;
    height: 95px;
}

.deco-container {
    width: 100%;
    position: relative;
    overflow-x: clip;
}

div.last-left-leaf {
    top: -16%;
    left: -1%;
    width: 17%;
    z-index: 2;
    transform: scaleY(1);
}

div.last-right-leaf {
    top: 45%;
    right: -1%;
    z-index: 2;
    width: 13%;
    transform: scaleX(-1) rotate(3deg);

}

.about-us {
    position: relative;
    overflow-x: clip;
}

div.top-right-leaf {
    top: -40%;
    right: -5%;
    width: 20%;
    transform: scaleX(-1) rotate(5deg);
}


@media screen and (max-width: 1024px) {
    .about-company {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .latte {
        display: none;
    }

    .third-us {
        flex-direction: column-reverse;
        gap: 40px;
        text-align: center;
        padding: 0 50px;
        margin-top: 20px; /* 设置为正的20px */
    }

    div.top-right-leaf {
        top: -5%;
    }

    .staff-img {
        max-width: 500px;
        margin: 0 auto;
    }

    .content-us {
        padding: 0 40px;
        width: 100%;
    }

    .sec-kopidiam {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        gap: 30px;
        margin-bottom: 0; /* 移除底部margin */
    }

    .content-stories {
        width: 100%;
        transform: none;
        padding: 60px 40px;
        text-align: center;
        border-radius: 0;
    }

    .bar {
        display: none;
    }

    .sqr-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin-top: -80px;
        padding: 0 20px;
    }

    .sqr-img-btn {
        width: 280px;
        height: 200px;
        margin-bottom: 0;
    }

    .statsbar {
        justify-content: center;
        gap: 30px;
    }
}

@media screen and (max-width: 768px) {

    /* 这里的话我选择把字体调小因为字太大很影响 看起来不好看 */
    .about-company {
        gap: 30px;
        padding: 20px 15px 40px 15px; /* 进一步减少top padding，参考four-content */
        margin-bottom: 60px;
    }

    /* 让第一section的文字区域跟最后section一样宽 */
    .left-side,
    .right-side {
        width: 100%; /* 占满容器宽度，跟最后section一样 */
    }

    .latte {
        display: none;
    }

    .bar {
        display: none;
    }

    .deco {
        display: none;
    }

    .sec-kopidiam {
        margin: 80px 0;
    }

    .content-stories {
        padding: 40px 20px;
        width: 100%; /* 跟最后section一样的宽度 */
    }

    .third-us {
        gap: 30px;
        margin: -30px 0; /* 使用负margin大胆压缩上下空白 */
        padding: 0 15px; /* 完全移除上下padding，只保留左右 */
        text-align: center; /* 确保整个section居中对齐 */
    }

    /* 让第三section的文字和图片区域跟最后section一样宽 */
    .staff-img,
    .content-us {
        width: 100%; /* 占满容器宽度，跟最后section一样 */
        padding: 0; /* 移除额外padding，因为third-us已经有了 */
        margin: 0 auto; /* 改为auto居中，而不是左右margin */
        text-align: center; /* 确保内容居中 */
    }

    /* 重置第三section内部元素的margin */
    .content-us h4,
    .content-us p {
        margin-top: 0; /* 移除标题和段落的上边距 */
        margin-bottom: 0; /* 大胆移除下边距 */
    }

    .sqr-group {
        margin-top: -100px;
        padding: 0 15px;
    }

    .sqr-img-btn {
        height: 180px;
        margin-bottom: 15px;
    }

    .statsbar {
        margin-top: -10px; /* 使用负margin向上压缩 */
        margin-bottom: 0; /* 移除statsbar的下边距 */
        flex-direction: row;
        justify-content: center; /* 改为居中对齐 */
        gap: 15px;
        margin: 10px auto 0 auto; /* 增加top margin让stats往下一点 */
        width: fit-content; /* 让statsbar宽度适应内容 */
    }

    .stats {
        flex: 1;
        padding: 15px 10px;
    }

    .stats h2 {
        font-size: 28px;
    }

    .statstext {
        font-size: 9px;
    }

    .content-company h4,
    .content-stories h4,
    .content-us h4,
    .four-title h2 {
        font-size: 22px;
    }

    .four-content {
        padding: 40px 20px;
        margin: 0 15px;
    }

    .slogan {
        padding: 20px 25px;
    }

    .wrapper.dark {
        padding: 60px 15px;
    }

    .blogger-1,
    .blogger-2,
    .blogger-3,
    .blogger-4 {
        display: none;
    }
}