/* =========================================================
   KANGDE SILICONE
   ABOUT US
   SECTION 03 — OUR STORY

   APPROVED LAYOUT
   ---------------------------------------------------------
   PC:
   LEFT  = IMAGE
   RIGHT = STORY CONTENT

   TABLET:
   IMAGE
   ↓
   CONTENT

   MOBILE:
   IMAGE
   ↓
   CONTENT

   WIDTH:
   Desktop = 1320px
   Tablet  = 900px
   Mobile  = 100%

   IMPORTANT:
   This section does NOT change any existing URL.
========================================================= */


/* =========================================================
   SECTION
========================================================= */

#kd-about-story-section {

    width:
        100%;

    max-width:
        100%;

    padding:
        72px 20px
        78px;

    background:
        #F7F8FA;

    box-sizing:
        border-box;

    overflow:
        hidden;

    color:
        #27323C;
}


/* =========================================================
   CONTAINER
========================================================= */

#kd-about-story-section .kd-story-container {

    width:
        100%;

    max-width:
        1320px;

    min-width:
        0;

    margin:
        0 auto;

    box-sizing:
        border-box;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
========================================================= */

#kd-about-story-section .kd-story-grid {

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0,.88fr)
        minmax(0,1.12fr);

    gap:
        clamp(
            40px,
            6vw,
            85px
        );

    align-items:
        center;

    box-sizing:
        border-box;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

#kd-about-story-section .kd-story-image {

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    overflow:
        hidden;

    background:
        #F0F3F5;

    box-sizing:
        border-box;
}


/* =========================================================
   IMAGE

   🔴【需要更换：OUR STORY 图片】

   推荐尺寸：
   1400 × 1320 px 或更大

   推荐内容：
   - 公司发展照片
   - 工厂照片
   - 公司团队照片
   - 老工厂 / 新工厂
   - 企业历史相关照片

   如果没有历史照片：
   可以直接使用真实 Kangde 工厂照片。

   不建议：
   - Stock Photo
   - AI 人物图片
   - 与公司无关的商务照片
========================================================= */

#kd-about-story-section .kd-story-image img {

    display:
        block;

    width:
        100%;

    max-width:
        100%;

    height:
        auto;

    aspect-ratio:
        1 / .96;

    object-fit:
        cover;

    object-position:
        center;

    box-sizing:
        border-box;

    transition:
        transform .5s ease;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

#kd-about-story-section .kd-story-image:hover img {

    transform:
        scale(1.02);
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

#kd-about-story-section .kd-story-content {

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;
}


/* =========================================================
   EYEBROW
========================================================= */

#kd-about-story-section .kd-story-eyebrow {

    margin:
        0 0 15px;

    color:
        #159A9C;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.4;

    font-weight:
        750;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;

    overflow-wrap:
        break-word;
}


/* =========================================================
   TITLE
========================================================= */

#kd-about-story-section .kd-story-title {

    width:
        100%;

    max-width:
        650px;

    margin:
        0;

    color:
        #14213D;

    font-family:
        Manrope,
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            36px,
            4vw,
            54px
        );

    line-height:
        1.06;

    font-weight:
        750;

    letter-spacing:
        -1.25px;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* =========================================================
   STORY PARAGRAPHS
========================================================= */

#kd-about-story-section .kd-story-text {

    width:
        100%;

    max-width:
        720px;

    margin:
        18px 0 0;

    color:
        #69757E;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        15px;

    line-height:
        1.82;

    font-weight:
        400;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* =========================================================
   HIGHLIGHT STATEMENT
========================================================= */

#kd-about-story-section .kd-story-highlight {

    width:
        100%;

    max-width:
        720px;

    margin:
        28px 0 0;

    padding:
        20px 0 0;

    border-top:
        2px solid #159A9C;

    color:
        #14213D;

    font-family:
        Manrope,
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        18px;

    line-height:
        1.55;

    font-weight:
        700;

    letter-spacing:
        -.2px;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* =========================================================
   TABLET
   641px - 1050px
========================================================= */

@media (max-width: 1050px) {

    #kd-about-story-section {

        padding:
            66px 20px
            72px;
    }


    #kd-about-story-section .kd-story-container {

        width:
            100%;

        max-width:
            900px;
    }


    #kd-about-story-section .kd-story-grid {

        grid-template-columns:
            minmax(0,1fr);

        gap:
            38px;
    }


    /* Image becomes wide */

    #kd-about-story-section .kd-story-image {

        width:
            100%;

        max-width:
            100%;
    }


    #kd-about-story-section .kd-story-image img {

        width:
            100%;

        max-width:
            100%;

        aspect-ratio:
            1.7 / 1;

        object-fit:
            cover;
    }


    /* Content */

    #kd-about-story-section .kd-story-content {

        width:
            100%;

        max-width:
            900px;
    }


    #kd-about-story-section .kd-story-title {

        max-width:
            780px;
    }


    #kd-about-story-section .kd-story-text {

        max-width:
            780px;
    }


    #kd-about-story-section .kd-story-highlight {

        max-width:
            780px;
    }

}


/* =========================================================
   MOBILE
   0 - 640px
========================================================= */

@media (max-width: 640px) {

    #kd-about-story-section {

        width:
            100%;

        max-width:
            100%;

        padding:
            50px 16px
            55px;
    }


    #kd-about-story-section .kd-story-container {

        width:
            100%;

        max-width:
            100%;
    }


    #kd-about-story-section .kd-story-grid {

        width:
            100%;

        max-width:
            100%;

        grid-template-columns:
            minmax(0,1fr);

        gap:
            30px;
    }


    /* Image */

    #kd-about-story-section .kd-story-image {

        width:
            100%;

        max-width:
            100%;

        min-width:
            0;
    }


    #kd-about-story-section .kd-story-image img {

        width:
            100%;

        max-width:
            100%;

        height:
            auto;

        aspect-ratio:
            1.12 / 1;

        object-fit:
            cover;
    }


    /* Content */

    #kd-about-story-section .kd-story-content {

        width:
            100%;

        max-width:
            100%;

        min-width:
            0;
    }


    /* Eyebrow */

    #kd-about-story-section .kd-story-eyebrow {

        margin-bottom:
            13px;

        font-size:
            11px;

        letter-spacing:
            1.6px;
    }


    /* Title */

    #kd-about-story-section .kd-story-title {

        width:
            100%;

        max-width:
            100%;

        font-size:
            32px;

        line-height:
            1.10;

        letter-spacing:
            -.8px;
    }


    /* Paragraph */

    #kd-about-story-section .kd-story-text {

        width:
            100%;

        max-width:
            100%;

        margin-top:
            16px;

        font-size:
            14px;

        line-height:
            1.72;
    }


    /* Highlight */

    #kd-about-story-section .kd-story-highlight {

        width:
            100%;

        max-width:
            100%;

        margin-top:
            23px;

        padding-top:
            18px;

        font-size:
            17px;

        line-height:
            1.55;
    }

}


/* =========================================================
   SMALL MOBILE
   0 - 380px
========================================================= */

@media (max-width: 380px) {

    #kd-about-story-section {

        padding:
            46px 14px
            50px;
    }


    #kd-about-story-section .kd-story-grid {

        gap:
            27px;
    }


    #kd-about-story-section .kd-story-title {

        font-size:
            29px;

        line-height:
            1.10;
    }


    #kd-about-story-section .kd-story-text {

        font-size:
            13px;

        line-height:
            1.72;
    }


    #kd-about-story-section .kd-story-highlight {

        font-size:
            16px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #kd-about-story-section *,
    #kd-about-story-section *::before,
    #kd-about-story-section *::after {

        transition:
            none !important;

        scroll-behavior:
            auto !important;
    }

}