/* ============================================================
   企业文化页 - 布艺配饰风自由聚散布局
   ============================================================ */

/* ---------- 使命愿景价值观：错落色样卡 ---------- */
.mvv-section { background: var(--cream-2); }
.mvv-cluster {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
    position: relative;
}
.mvv-card {
    background: var(--white); border-radius: var(--radius-lg); padding: 40px 32px 36px;
    position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
    border: 1px solid var(--line); transition: transform .5s, box-shadow .5s;
}
/* 错落排布：第1张下沉、第3张上浮 */
.mvv-card:nth-child(1) { transform: translateY(32px); }
.mvv-card:nth-child(3) { transform: translateY(-24px); }
.mvv-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.mvv-card:nth-child(1):hover { transform: translateY(24px); }
.mvv-card:nth-child(3):hover { transform: translateY(-32px); }

/* 布艺色样装饰块（右上角斜切） */
.mvv-card .swatch {
    position: absolute; top: 0; right: 0; width: 130px; height: 96px;
    border-radius: 0 0 0 var(--radius-lg);
}
.mvv-card.lotus .swatch { background: linear-gradient(135deg, var(--lotus), var(--lotus-soft)); }
.mvv-card.sage .swatch { background: linear-gradient(135deg, var(--sage), var(--sage-soft)); }
.mvv-card.cream .swatch { background: linear-gradient(135deg, var(--cream-3), var(--cream-2)); }
/* 缝线纹理叠加 */
.mvv-card .swatch::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 8px);
}

.mvv-num {
    font-family: var(--f-serif); font-size: 3rem; color: var(--cream-3);
    font-weight: 600; line-height: 1; display: block; margin-bottom: 8px;
    position: relative; z-index: 2;
}
.mvv-label {
    display: inline-block; font-size: .8rem; letter-spacing: 3px; color: var(--lotus-deep);
    text-transform: uppercase; margin-bottom: 18px; position: relative; z-index: 2;
}
.mvv-card.sage .mvv-label { color: var(--sage-deep); }
.mvv-slogan {
    font-size: 1.5rem; line-height: 1.45; margin-bottom: 16px;
    position: relative; z-index: 2;
}
.mvv-card p { font-size: .94rem; position: relative; z-index: 2; }

/* ---------- 关键词云：散落圆角标签 ---------- */
.cloud-section { background: var(--cream); }
.cloud {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 14px 18px; padding: 30px 20px; max-width: 920px; margin: 0 auto;
    position: relative;
}
.kw {
    display: inline-block; padding: 12px 26px; border-radius: 30px;
    font-size: 1rem; font-weight: 500; color: var(--ink);
    background: var(--white); border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); transition: transform .4s, background .4s, color .4s;
    cursor: default;
}
/* 不同大小、颜色、旋转角度，制造散落感 */
.kw.k1 { font-size: 1.4rem; background: var(--lotus-soft); color: var(--lotus-deep); transform: rotate(-3deg); }
.kw.k2 { font-size: 1.15rem; background: var(--sage-soft); color: var(--sage-deep); transform: rotate(2deg); }
.kw.k3 { font-size: 1.5rem; background: var(--lotus); color: var(--white); transform: rotate(-1deg); }
.kw.k4 { font-size: 1rem; transform: rotate(3deg); }
.kw.k5 { font-size: 1.2rem; background: var(--sage); color: var(--white); transform: rotate(-2deg); }
.kw.k6 { font-size: 1.35rem; background: var(--lotus-soft); color: var(--lotus-deep); transform: rotate(1deg); }
.kw.k7 { font-size: 1.1rem; background: var(--cream-2); transform: rotate(-3deg); }
.kw.k8 { font-size: 1.25rem; background: var(--sage-soft); color: var(--sage-deep); transform: rotate(2deg); }
.kw.k9 { font-size: 1rem; transform: rotate(-1deg); }
.kw.k10 { font-size: 1.15rem; background: var(--lotus-soft); transform: rotate(3deg); }
.kw.k11 { font-size: 1.3rem; background: var(--sage); color: var(--white); transform: rotate(-2deg); }
.kw.k12 { font-size: 1.05rem; background: var(--cream-2); transform: rotate(1deg); }
.kw:hover { transform: translateY(-6px) scale(1.06) rotate(0); background: var(--lotus-deep); color: var(--white); }

/* ---------- 团队生活图集：拼贴拍立得 ---------- */
.gallery-section { background: var(--cream-2); }
.collage {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
    padding: 20px 0; position: relative;
}
.polaroid {
    background: var(--white); padding: 14px 14px 50px; border-radius: 4px;
    box-shadow: var(--shadow); transition: transform .5s, box-shadow .5s, z-index 0s;
    position: relative;
}
.polaroid img { width: 100%; height: 240px; object-fit: cover; border-radius: 2px; }
.polaroid figcaption {
    position: absolute; bottom: 14px; left: 14px; right: 14px;
    font-size: .85rem; color: var(--ink-soft); text-align: center;
    font-family: var(--f-serif);
}
/* 不同旋转与位移，营造拼贴感 */
.polaroid.p1 { transform: rotate(-4deg) translateY(20px); }
.polaroid.p2 { transform: rotate(3deg) translateY(-10px); }
.polaroid.p3 { transform: rotate(-2deg) translateY(15px); }
.polaroid.p4 { transform: rotate(4deg) translateY(-5px); }
.polaroid:hover {
    transform: rotate(0) translateY(-12px);
    box-shadow: 0 30px 60px -20px rgba(74,69,64,.4); z-index: 5;
}

/* ---------- 员工寄语：布艺引语卡 ---------- */
.voice-section { background: var(--cream); }
.voice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.voice-card {
    background: var(--white); border-radius: var(--radius); padding: 36px 30px;
    border: 1px solid var(--line); position: relative; box-shadow: var(--shadow-sm);
    transition: transform .4s, box-shadow .4s;
}
/* 轻微倾斜，手工感 */
.voice-card:nth-child(1) { transform: rotate(-1deg); }
.voice-card:nth-child(3) { transform: rotate(1deg); }
.voice-card:hover { transform: translateY(-6px) rotate(0); box-shadow: var(--shadow); }
.voice-card .quote-mark {
    font-family: var(--f-serif); font-size: 4.5rem; color: var(--lotus-soft);
    line-height: .8; margin-bottom: 6px;
}
.voice-card p { font-size: .95rem; margin-bottom: 24px; line-height: 1.85; }
.voice-who { display: flex; align-items: center; gap: 12px; }
.voice-who img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lotus-soft); }
.voice-who .nm { font-weight: 600; color: var(--ink); font-family: var(--f-serif); }
.voice-who .cp { font-size: .82rem; color: var(--ink-mute); }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
    .mvv-cluster { grid-template-columns: 1fr; }
    .mvv-card:nth-child(1), .mvv-card:nth-child(3) { transform: none; }
    .mvv-card:nth-child(1):hover, .mvv-card:nth-child(3):hover { transform: translateY(-8px); }
    .collage { grid-template-columns: 1fr 1fr; }
    .voice-row { grid-template-columns: 1fr; }
    .voice-card:nth-child(1), .voice-card:nth-child(3) { transform: none; }
}
@media (max-width: 560px) {
    .collage { grid-template-columns: 1fr; gap: 24px; }
    .polaroid.p1, .polaroid.p2, .polaroid.p3, .polaroid.p4 { transform: rotate(0); }
    .mvv-card { padding: 32px 24px; }
    .mvv-slogan { font-size: 1.3rem; }
    .mvv-card .swatch { width: 100px; height: 76px; }
    .kw { padding: 10px 20px; font-size: .95rem; }
    .kw.k1, .kw.k3, .kw.k5, .kw.k6, .kw.k8, .kw.k11 { font-size: 1.1rem; }
}