/* ================= ABOUT ================= */

.about{

    max-width:1400px;
    margin:auto;

    padding:120px 40px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:100px;

}

.about-text{

    flex:1;

}

.section-subtitle{

    color:#A58A5A;

    letter-spacing:3px;

    font-size:14px;

    font-weight:600;

    margin-bottom:15px;

}

.about-text h2{

    font-size:48px;

    margin-bottom:25px;

    line-height:1.2;

}

.about-text p{

    color:#666;

    line-height:2;

    text-align:justify;

}

.about-image{

    flex:1;

}

.about-image img{

    width:100%;

    border-radius:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}


/* ================= TEAM ================= */

.team{

    padding:120px 40px;

    background:#fff;

    text-align:center;

}

.team h2{

    font-size:42px;

    margin-top:10px;

    margin-bottom:20px;

}

.team-description{

    max-width:700px;

    margin:0 auto 70px;

    color:#666;

    line-height:1.8;

}

.team-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(12,1fr);

    gap:35px;

}

/* ================= TEAM POSITION ================= */

/* 第一排 */

.member1{
    grid-column:1 / 4;
}

.member2{
    grid-column:4 / 7;
}

.member3{
    grid-column:7 / 10;
}

.member4{
    grid-column:10 / 13;
}

/* 第二排（置中） */

.member5{
    grid-column:2 / 5;
}

.member6{
    grid-column:5 / 8;
}

.member7{
    grid-column:8 / 11;
}

.team-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    text-align:left;

    text-decoration:none;

    color:inherit;

}

.team-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.team-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    object-position:top;

    border-radius:15px;

    margin-bottom:20px;

}

.team-card h3{

    padding:0 25px;

    margin-bottom:8px;

    font-size:22px;

}

.team-card span{

    display:block;

    padding:0 25px 25px;

    color:#A58A5A;

    font-weight:600;

}


/* ================= CLIENTS ================= */

.clients{

    padding:100px 40px 140px;

    background:#f7f4ee;

    text-align:center;

}

.clients h2{

    font-size:42px;

    margin-top:10px;

    margin-bottom:20px;

}

.clients-description{

    max-width:760px;

    margin:0 auto 70px;

    color:#666;

    line-height:1.8;

}

.clients-grid{

    max-width:1240px;

    margin:auto;

    display:grid;

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

    gap:24px 28px;

}

.client-item{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:110px;

    padding:18px 16px;

}

.client-item img{

    display:block;

    max-width:100%;
    max-height:98px;
    width:auto;
    height:auto;
    object-fit:contain;
    opacity:1;

}

/* ================= GALLERY ================= */

.gallery{

    padding:110px 40px 140px;

    background:#fff;

    text-align:center;

}

.gallery h2{

    font-size:42px;

    margin-top:10px;

    margin-bottom:20px;

}

.gallery-description{

    max-width:760px;

    margin:0 auto 42px;

    color:#666;

    line-height:1.8;

}

/* ================= FILTER ================= */

.gallery-filters{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px 28px;

    margin:0 auto 48px;

    max-width:900px;

}

.gallery-filter{

    border:none;

    background:transparent;

    color:#444;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    padding:0 0 8px;

    cursor:pointer;

    position:relative;

    transition:color .25s ease;

}

.gallery-filter::after{

    content:'';

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:#A58A5A;

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .25s ease;

}

.gallery-filter.active,
.gallery-filter:hover{

    color:#A58A5A;

}

.gallery-filter.active::after,
.gallery-filter:hover::after{

    transform:scaleX(1);

}

/* ================= GALLERY GRID ================= */

.gallery-grid{

    max-width:1280px;

    margin:0 auto;

    display:grid;

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

    gap:22px;

    transition:opacity .28s ease, transform .28s ease;

}

.gallery-grid.is-changing{

    opacity:0;

    transform:translateY(6px);

}

/* ================= ALL GALLERY ITEMS ================= */

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    min-height:220px;

    background:#f4efe8;

    transition:transform .35s ease, opacity .3s ease;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .35s ease;

}

.gallery-item:hover img{

    transform:scale(1.03);

}

.gallery-item:hover .gallery-caption{

    opacity:1;

}

.gallery-caption{

    position:absolute;

    left:16px;

    bottom:16px;

    padding:7px 11px;

    background:rgba(255,255,255,.86);

    color:#2f2f2f;

    font-size:11px;

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

    border-radius:999px;

    opacity:0;

    transition:opacity .25s ease;

}

.gallery-item.is-hidden{

    display:none;

}

.gallery-item.featured-large{

    grid-column:span 7;

    grid-row:span 2;

    min-height:420px;

}

.gallery-item.feature-medium{

    grid-column:span 5;

    min-height:200px;

}

.gallery-item.feature-small{

    grid-column:span 4;

    min-height:190px;

}

.gallery-item.feature-tall{

    grid-column:span 5;

    grid-row:span 2;

    min-height:420px;

}

/* ================= RESPONSIVE ================= */

@media (max-width:992px){

    .about{
        flex-direction:column;
    }

    .team-container{

        grid-template-columns:repeat(2,1fr);

    }

    .clients-grid{

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

    }

    .gallery-grid{

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

    }

    .gallery-item.featured-large,
    .gallery-item.feature-medium,
    .gallery-item.feature-small,
    .gallery-item.feature-tall{

        grid-column:auto;

        grid-row:auto;

        min-height:260px;

    }

    .member1,
    .member2,
    .member3,
    .member4,
    .member5,
    .member6,
    .member7{

        grid-column:auto;

    }

}

@media (max-width:768px){

    .team-container{

        grid-template-columns:1fr;

    }

    .clients-grid{

        grid-template-columns:1fr;

    }

    .gallery{

        padding:100px 24px 120px;

    }

    .gallery-filters{

        justify-content:flex-start;

        overflow-x:auto;

        padding-bottom:6px;

        scrollbar-width:none;

    }

    .gallery-filters::-webkit-scrollbar{

        display:none;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item.featured-large,
    .gallery-item.feature-medium,
    .gallery-item.feature-small,
    .gallery-item.feature-tall{

        grid-column:auto;

        grid-row:auto;

        min-height:280px;

    }

    .member1,
    .member2,
    .member3,
    .member4,
    .member5,
    .member6,
    .member7{

        grid-column:auto;

    }

/* ================= TRAINER DETAIL ================= */

.trainer-detail{

    max-width:1700px;

    margin:100px auto;

    padding:0 80px;

    display:grid;

    grid-template-columns:48% 52%;

    gap:100px;

    align-items:start;

}

/* 左边照片 */

.trainer-photo{

    position: sticky;
    top: 120px;

    overflow: hidden;
    border-radius: 24px;

}

.trainer-photo img{

    width: 100%;
    height: 88vh;

    object-fit: cover;
    object-position: center top;

    display: block;

    transform: scale(1.12);
    transition: transform .15s ease-out;

    will-change: transform;

}
/* 右边内容 */

.trainer-position{

    color:#A58A5A;

    font-size:15px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.trainer-info h1{

    font-size:64px;

    font-weight:600;

    line-height:1.1;

    margin-bottom:60px;

}

.trainer-section{

    margin-bottom:60px;

}

.trainer-section h3{

    font-size:22px;

    font-weight:600;

    padding-bottom:15px;

    margin-bottom:25px;

    border-bottom:1px solid #ddd;

}

.trainer-section p{

    color:#666;

    font-size:18px;

    line-height:2.1;

    text-align:justify;

}

.trainer-section ul{

    list-style:none;

    padding:0;

}

.trainer-section li{

    color:#666;

    font-size:18px;

    line-height:2;

    margin-bottom:15px;

    padding-left:22px;

    position:relative;

}

.trainer-section li::before{

    content:"•";

    position:absolute;

    left:0;

    color:#A58A5A;

}

/* ================= MOBILE ================= */

@media(max-width:992px){

    .trainer-detail{

        grid-template-columns:1fr;

        gap:60px;

        padding:0 30px;

    }

    .trainer-photo{

        position:static;

    }

    .trainer-photo img{

        height:auto;

    }

    .trainer-info h1{

        font-size:42px;

    }

}

/* ================= BACK ================= */

.trainer-back{

    max-width:1700px;

    margin:120px auto 40px;

    padding:0 80px;

}

.back-link{

    display:inline-block;

    text-decoration:none;

    color:#666;

    font-size:15px;

    font-weight:500;

    transition:.3s;

    padding:6px 0;

}

.back-link:hover{

    color:#A58A5A;

    letter-spacing:1px;

}
}