/* ============================================================
   客户评价页 - 专属样式
   布艺配饰风 · 精简 Banner + 瀑布流 + Logo 墙 + 印章评分
   ============================================================ */

/* ---------- 精简 Banner ---------- */
.rev-banner {
    padding: 150px 0 60px; text-align: center;
}
/* 隐藏默认右渐变,改为对称柔光 */
.rev-banner::before {
    width: 100%; background: radial-gradient(ellipse at center, rgba(226,196,188,.22), transparent 65%);
}
.rev-banner-inner {
    position: relative; z-index: 1; max-width: 760px; margin: 0 auto;
}
.rev-banner-inner .tag-label { margin-bottom: 22px; }
.rev-banner h1 { margin-bottom: 18px; }
.rev-banner h1 em {
    font-style: normal; color: var(--lotus-deep); position: relative;
}
.rev-banner h1 em::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 10px;
    background: var(--sage-soft); z-index: -1; border-radius: 6px;
}
.rev-lead {
    max-width: 560px; margin: 0 auto; font-size: 1.05rem;
}
/* 悬挂引号装饰 */
.rev-quote {
    position: absolute; font-family: var(--f-serif); font-size: 7rem;
    color: var(--lotus-soft); line-height: 1; z-index: 0; user-select: none;
}
.rev-quote.q1 { top: -30px; left: -10px; transform: rotate(-12deg); }
.rev-quote.q2 { bottom: -60px; right: -10px; transform: rotate(10deg); color: var(--sage-soft); }

/* ============================================================
   评价瀑布流(CSS columns 实现错落 masonry)
   ============================================================ */
.rev-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 20px; margin-bottom: 50px;
}
.rev-masonry {
    column-count: 3; column-gap: 26px;
}
.rev-card {
    display: inline-block; width: 100%; margin-bottom: 26px;
    background: var(--white); border-radius: var(--radius);
    padding: 30px 28px; border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); position: relative;
    break-inside: avoid; -webkit-column-break-inside: avoid;
    transition: transform .4s, box-shadow .4s;
}
/* 手工感:奇偶反向轻微旋转 */
.rev-card:nth-child(2n) { transform: rotate(.5deg); }
.rev-card:nth-child(3n) { transform: rotate(-.4deg); }
.rev-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow); }
/* 卡片左上角布艺引号 */
.rev-card::before {
    content: """; font-family: var(--f-serif); font-size: 3.4rem; line-height: 1;
    color: var(--lotus-soft); position: absolute; top: 10px; left: 18px;
}
.rev-card:nth-child(2n)::before { color: var(--sage-soft); }

.rev-card .star {
    color: var(--lotus-deep); letter-spacing: 3px; margin-bottom: 14px;
    position: relative; z-index: 2;
}
.rev-card:nth-child(2n) .star { color: var(--sage-deep); }
.rev-card p {
    font-size: .95rem; margin-bottom: 22px; position: relative; z-index: 2;
}
.rev-card .who {
    display: flex; align-items: center; gap: 12px;
    padding-top: 18px; border-top: 1px dashed var(--line);
}
.rev-card .who img {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--cream-2);
}
.rev-card .who .nm { font-weight: 600; color: var(--ink); }
.rev-card .who .cp { font-size: .82rem; color: var(--ink-mute); }
/* 项目类型小吊牌 */
.rev-tag {
    position: absolute; top: 22px; right: 22px;
    padding: 4px 12px; border-radius: 2px 12px 12px 2px;
    background: var(--cream-2); font-size: .72rem; color: var(--ink-soft);
    letter-spacing: 1px;
}
.rev-card:nth-child(2n) .rev-tag { background: var(--sage-soft); color: var(--sage-deep); }

/* ============================================================
   客户 Logo 墙(纯 CSS 文字 logo)
   ============================================================ */
.logo-wall {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.logo-item {
    display: grid; place-items: center; text-align: center;
    padding: 30px 14px; border-radius: var(--radius);
    background: var(--white); border: 1px solid var(--line);
    font-size: 1.15rem; font-weight: 600; color: var(--ink-mute);
    letter-spacing: 1px; transition: all .4s; cursor: default;
    filter: grayscale(1); opacity: .75;
}
.logo-item:hover {
    filter: grayscale(0); opacity: 1; color: var(--lotus-deep);
    transform: translateY(-4px); box-shadow: var(--shadow-sm);
}
.logo-item:nth-child(2n):hover { color: var(--sage-deep); }
/* 不同字体让每个 logo 看起来像独立品牌字标 */
.logo-item.serif { font-family: var(--f-serif); font-size: 1.25rem; }
.logo-item.mono { font-family: "Consolas", "SF Mono", monospace; font-size: 1rem; letter-spacing: 0; }

/* ============================================================
   评分数据汇总:布艺印章
   ============================================================ */
.rev-scores { background: var(--lotus-soft); position: relative; overflow: hidden; }
.rev-scores::after {
    content: ""; position: absolute; left: -70px; top: -70px;
    width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.28);
}
.score-seals {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
    position: relative; z-index: 2;
}
.seal { text-align: center; }
/* 印章圆环 */
.seal-ring {
    width: 200px; height: 200px; margin: 0 auto 22px; border-radius: 50%;
    background: var(--white); border: 3px dashed var(--lotus-deep);
    display: grid; place-items: center; gap: 6px;
    box-shadow: var(--shadow); position: relative;
}
.seal-ring::before {
    content: ""; position: absolute; inset: 10px; border-radius: 50%;
    border: 1px solid var(--lotus); opacity: .5;
}
.seal-ring.sage { border-color: var(--sage-deep); }
.seal-ring.sage::before { border-color: var(--sage); }
.seal-num {
    font-family: var(--f-serif); font-size: 3rem; font-weight: 600;
    color: var(--lotus-deep); line-height: 1;
}
.seal-ring.sage .seal-num { color: var(--sage-deep); }
.seal-star { color: var(--lotus-deep); letter-spacing: 2px; font-size: .85rem; }
.seal-ring.sage .seal-star { color: var(--sage-deep); }
.seal-lbl {
    font-family: var(--f-serif); font-size: 1.25rem; color: var(--ink); font-weight: 600;
    margin-bottom: 6px;
}
.seal-sub { font-size: .85rem; color: var(--ink-soft); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 980px) {
    .rev-masonry { column-count: 2; }
    .logo-wall { grid-template-columns: repeat(3, 1fr); }
    .score-seals { grid-template-columns: 1fr; gap: 50px; }
    .seal-ring { width: 180px; height: 180px; }
}
@media (max-width: 560px) {
    .rev-masonry { column-count: 1; }
    .rev-card { transform: rotate(0deg) !important; }
    .logo-wall { grid-template-columns: repeat(2, 1fr); }
    .rev-quote { font-size: 5rem; }
    .rev-quote.q1 { left: -5px; }
    .rev-quote.q2 { right: -5px; bottom: -50px; }
    .seal-ring { width: 160px; height: 160px; }
    .seal-num { font-size: 2.4rem; }
}