/* ============================================================
   响应式网站开发 - 专属样式
   纯CSS设备外框 + 自定义断点表 + 标签云 + 案例层叠
   ============================================================ */

/* ---------- Banner 定制 ---------- */
.rs-banner { padding-bottom: 90px; }
.rs-banner h1 em {
    font-style: normal; color: var(--lotus-deep); position: relative;
}
.rs-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;
}
.rs-banner-meta {
    display: flex; gap: 30px; margin-top: 36px; flex-wrap: wrap;
}
.rs-banner-meta span {
    font-size: .92rem; color: var(--ink-soft); display: flex; align-items: baseline; gap: 6px;
}
.rs-banner-meta strong {
    font-family: var(--f-serif); font-size: 1.8rem; color: var(--lotus-deep); font-weight: 600;
}
/* Banner 缝线点装饰 */
.wc-banner-dots {
    position: absolute; bottom: 28px; left: 6%; display: flex; gap: 12px;
}
.wc-banner-dots span {
    width: 9px; height: 9px; border-radius: 50%; background: var(--lotus);
}
.wc-banner-dots span:nth-child(2n) { background: var(--sage); }
.wc-banner-dots span:nth-child(3n) { background: var(--lotus-deep); }

/* ============================================================
   三端设备展示区:纯CSS绘制设备外框 + 示意图
   ============================================================ */
.rs-devices { position: relative; }
.rs-stage {
    position: relative; min-height: 540px; padding: 40px 20px 60px;
    display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap;
}

/* ---------- 设备通用 ---------- */
.rs-device {
    position: relative; display: flex; flex-direction: column; align-items: center;
    transition: transform .5s;
}
.rs-device:hover { transform: translateY(-8px); }

/* 屏幕外框通用 */
.rs-screen {
    background: var(--ink); border-radius: 10px; padding: 10px;
    box-shadow: var(--shadow); position: relative;
}

/* ---------- 桌面端显示器 ---------- */
.rs-desktop { transform: translateY(-30px) rotate(-1.5deg); z-index: 2; }
.rs-desktop:hover { transform: translateY(-38px) rotate(-1.5deg); }
.rs-desktop .rs-screen { width: 460px; height: 300px; border-radius: 10px 10px 4px 4px; padding: 8px; }
/* 显示器底座 */
.rs-stand { display: flex; flex-direction: column; align-items: center; margin-top: -2px; }
.rs-neck { width: 50px; height: 22px; background: linear-gradient(var(--ink), #2d2925); border-radius: 0 0 6px 6px; }
.rs-base { width: 130px; height: 8px; background: linear-gradient(#2d2925, var(--ink)); border-radius: 8px; margin-top: 2px; box-shadow: var(--shadow-sm); }

/* ---------- 平板端 ---------- */
.rs-tablet { transform: translateY(40px) rotate(2deg); z-index: 1; }
.rs-tablet:hover { transform: translateY(32px) rotate(2deg); }
.rs-tablet .rs-screen.tablet {
    width: 220px; height: 290px; border-radius: 18px; padding: 8px;
}
/* 平板侧边按钮 */
.rs-tablet .rs-screen.tablet::before, .rs-tablet .rs-screen.tablet::after {
    content: ""; position: absolute; background: #2d2925; border-radius: 2px;
}
.rs-tablet .rs-screen.tablet::before { left: -2px; top: 60px; width: 3px; height: 40px; }
.rs-tablet .rs-screen.tablet::after { right: -2px; top: 90px; width: 3px; height: 30px; }

/* ---------- 手机端 ---------- */
.rs-mobile { transform: translateY(-10px) rotate(-3deg); z-index: 3; }
.rs-mobile:hover { transform: translateY(-18px) rotate(-3deg); }
.rs-mobile .rs-screen.phone {
    width: 130px; height: 260px; border-radius: 20px; padding: 6px;
}
/* 手机刘海 */
.rs-notch {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 46px; height: 12px; background: #2d2925; border-radius: 0 0 10px 10px; z-index: 5;
}

/* ---------- 设备标签 ---------- */
.rs-label {
    margin-top: 22px; padding: 6px 16px; background: var(--white); border-radius: 20px;
    font-size: .82rem; color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm);
    letter-spacing: 1px;
}
.rs-label.sage { background: var(--sage-soft); color: var(--sage-deep); }
.rs-bp {
    margin-top: 8px; font-family: var(--f-serif); font-size: .78rem; color: var(--lotus-deep);
    letter-spacing: 1px;
}
.rs-bp.sage { color: var(--sage-deep); }

/* ---------- 散落浮动吊牌 ---------- */
.rs-float {
    position: absolute; background: var(--cream); padding: 8px 16px; border-radius: 6px;
    font-size: .78rem; color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm);
    letter-spacing: 1px; z-index: 4;
}
.rs-float::before {
    content: ""; position: absolute; top: -10px; left: 16px; width: 2px; height: 14px; background: var(--ink-mute);
}
.rs-float.f1 { top: 30px; left: 4%; transform: rotate(-8deg); background: var(--lotus-soft); }
.rs-float.f2 { top: 60px; right: 6%; transform: rotate(6deg); }
.rs-float.f3 { bottom: 30px; left: 8%; transform: rotate(4deg); background: var(--lotus-soft); }
.rs-float.sage { background: var(--sage-soft); color: var(--sage-deep); }

/* ============================================================
   示意图:网站线框 mock(纯CSS绘制)
   ============================================================ */
.rs-mock { width: 100%; height: 100%; background: var(--cream); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; gap: 5px; padding: 6px; }
/* 顶栏 */
.m-topbar { display: flex; align-items: center; justify-content: space-between; height: 14px; padding: 0 2px; }
.m-logo { width: 28px; height: 8px; background: var(--lotus-deep); border-radius: 2px; }
.m-nav { display: flex; gap: 4px; }
.m-nav i { width: 16px; height: 4px; background: var(--ink-mute); border-radius: 2px; opacity: .55; }
.m-burger {
    width: 14px; height: 10px; border-radius: 1px;
    background: linear-gradient(var(--ink-mute) 0 2px, transparent 2px 4px, var(--ink-mute) 4px 6px, transparent 6px 8px, var(--ink-mute) 8px 10px);
}
/* hero 区 */
.m-hero { width: 100%; height: 38px; background: linear-gradient(135deg, var(--lotus), var(--lotus-soft)); border-radius: 3px; position: relative; }
.m-hero::after { content: ""; position: absolute; left: 8px; bottom: 6px; width: 40%; height: 4px; background: var(--white); border-radius: 2px; opacity: .8; }
/* 三列内容 */
.m-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; flex: 1; }
.m-row.two { grid-template-columns: repeat(2, 1fr); }
.m-row > div { background: var(--cream-3); border-radius: 3px; opacity: .7; }
.m-row > div:nth-child(2) { background: var(--sage-soft); opacity: .85; }
/* 单列堆叠(手机) */
.m-stack { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.m-stack > div { background: var(--cream-3); border-radius: 3px; opacity: .7; height: 16px; }
.m-stack > div:nth-child(2) { background: var(--sage-soft); opacity: .85; }
/* 底栏 */
.m-foot { height: 6px; background: var(--ink-mute); border-radius: 2px; opacity: .4; }

/* 平板/手机 mock 调整字号比例 */
.rs-mock.tablet { gap: 4px; padding: 4px; }
.rs-mock.tablet .m-hero { height: 50px; }
.rs-mock.tablet .m-row { gap: 3px; }
.rs-mock.mobile { gap: 4px; padding: 4px; }
.rs-mock.mobile .m-topbar { height: 10px; }
.rs-mock.mobile .m-hero { height: 44px; }

/* ============================================================
   断点适配说明表:自定义样式表格(非默认 table)
   ============================================================ */
.rs-table {
    background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow); border: 1px solid var(--line);
}
.rs-tr {
    display: grid; grid-template-columns: 1.1fr 1.2fr 1.4fr 1fr 1.3fr;
    align-items: center; padding: 22px 28px; gap: 20px;
    border-bottom: 1px dashed var(--line); transition: background .3s;
}
.rs-tr:last-child { border-bottom: none; }
.rs-tr:not(.rs-th):hover { background: var(--cream-2); }
/* 表头 */
.rs-tr.rs-th {
    background: var(--lotus-soft); padding: 18px 28px;
    font-size: .82rem; letter-spacing: 2px; color: var(--lotus-deep); font-weight: 600;
    text-transform: uppercase; border-bottom: 2px solid var(--lotus);
}
.rs-td { font-size: .92rem; color: var(--ink); }

/* 设备类型单元格 */
.c-device { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.rs-dev-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--lotus-soft); color: var(--lotus-deep); flex-shrink: 0; }
.rs-dev-ic.sage { background: var(--sage-soft); color: var(--sage-deep); }
.rs-dev-ic svg { width: 22px; height: 22px; }

/* 断点范围:可视化宽度条 */
.c-bp { display: flex; align-items: center; }
.rs-bp-bar {
    width: 100%; height: 28px; background: var(--cream-2); border-radius: 14px;
    position: relative; display: block; overflow: hidden;
}
.rs-bp-bar::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w);
    background: linear-gradient(90deg, var(--lotus-deep), var(--lotus));
    border-radius: 14px; transition: width .8s ease;
}
.rs-bp-bar.sage::before { background: linear-gradient(90deg, var(--sage-deep), var(--sage)); }
.rs-bp-num {
    position: relative; z-index: 2; display: block; padding: 0 14px;
    font-family: var(--f-serif); font-size: .82rem; color: var(--ink); font-weight: 500;
    line-height: 28px;
}

.c-strategy { color: var(--ink-soft); }
.c-font { font-family: var(--f-serif); color: var(--lotus-deep); font-weight: 500; }
.c-scene { color: var(--ink-mute); font-size: .88rem; }

/* ============================================================
   核心特性标签云
   ============================================================ */
.rs-features { position: relative; }
.rs-cloud {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 16px 14px; padding: 30px 10px; max-width: 980px; margin: 0 auto;
}
.rs-tag {
    display: inline-block; padding: 10px 22px; border-radius: 30px;
    background: var(--cream-2); color: var(--ink); font-size: .92rem; font-weight: 500;
    border: 1px solid var(--line); transition: all .35s; cursor: default;
    position: relative; letter-spacing: 1px;
}
.rs-tag.sage { background: var(--sage-soft); color: var(--sage-deep); border-color: var(--sage); }
/* 不同尺寸:营造标签云层次 */
.rs-tag.s1 { font-size: 1rem; padding: 10px 22px; }
.rs-tag.s2 { font-size: 1.15rem; padding: 12px 26px; font-family: var(--f-serif); }
.rs-tag.s3 { font-size: .85rem; padding: 8px 18px; }
.rs-tag.s4 { font-size: 1.3rem; padding: 13px 28px; font-family: var(--f-serif); color: var(--lotus-deep); background: var(--lotus-soft); border-color: var(--lotus); }
.rs-tag.s4.sage { color: var(--sage-deep); }
/* 手工感:轻微旋转 */
.rs-tag:nth-child(3n) { transform: rotate(-2deg); }
.rs-tag:nth-child(3n+1) { transform: rotate(1.5deg); }
.rs-tag:nth-child(5n) { transform: rotate(-1deg); }
.rs-tag:hover {
    transform: translateY(-5px) rotate(0deg) scale(1.06);
    box-shadow: var(--shadow-sm); background: var(--white); z-index: 2;
}

/* ============================================================
   案例展示:3列层叠卡片
   ============================================================ */
.rs-cases-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 20px; margin-bottom: 50px;
}
.rs-case-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.rs-case {
    display: flex; flex-direction: column; background: var(--white);
    border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); transition: transform .4s, box-shadow .4s;
    position: relative;
}
/* 手工感:中间卡片下沉 */
.rs-case:nth-child(2) { transform: translateY(28px); }
.rs-case:hover { transform: translateY(-10px); box-shadow: var(--shadow); }
.rs-case:nth-child(2):hover { transform: translateY(18px); }
.rs-case-img { height: 240px; overflow: hidden; position: relative; }
.rs-case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.rs-case:hover .rs-case-img img { transform: scale(1.06); }
/* 图片左上角编号水印 */
.rs-case-img::before {
    content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px;
    background: linear-gradient(135deg, var(--lotus-deep) 50%, transparent 50%);
    z-index: 2; border-top-left-radius: var(--radius-lg);
}
.rs-case-body { padding: 26px 24px 30px; position: relative; }
.rs-case-no {
    position: absolute; top: -32px; right: 20px; font-family: var(--f-serif);
    font-size: 1.4rem; color: var(--white); z-index: 3; font-weight: 600;
}
.rs-case-tag {
    display: inline-block; font-size: .76rem; letter-spacing: 1px; color: var(--lotus-deep);
    margin-bottom: 10px;
}
.rs-case-tag.sage { color: var(--sage-deep); }
.rs-case-body h3 { font-size: 1.2rem; margin-bottom: 8px; }
.rs-case-body p { font-size: .88rem; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
    .rs-tr { grid-template-columns: 1fr 1.3fr 1.4fr; gap: 16px; padding: 18px 20px; }
    .rs-td.c-font, .rs-td.c-scene { display: none; }
    .rs-tr.rs-th .rs-td.c-font, .rs-tr.rs-th .rs-td.c-scene { display: none; }
}
@media (max-width: 860px) {
    .rs-stage { gap: 50px 30px; min-height: auto; }
    .rs-desktop { transform: rotate(-1deg); }
    .rs-desktop:hover { transform: translateY(-8px) rotate(-1deg); }
    .rs-tablet { transform: rotate(1.5deg); }
    .rs-tablet:hover { transform: translateY(-8px) rotate(1.5deg); }
    .rs-mobile { transform: rotate(-2deg); }
    .rs-mobile:hover { transform: translateY(-8px) rotate(-2deg); }
    .rs-float { display: none; }
    .rs-case-grid { grid-template-columns: 1fr; }
    .rs-case:nth-child(2) { transform: none; }
    .rs-case:nth-child(2):hover { transform: translateY(-10px); }
}
@media (max-width: 640px) {
    .rs-desktop .rs-screen { width: 100%; max-width: 340px; height: 220px; }
    .rs-tablet .rs-screen.tablet { width: 180px; height: 240px; }
    .rs-mobile .rs-screen.phone { width: 110px; height: 220px; }
    /* 断点表:转为纵向卡片 */
    .rs-tr { grid-template-columns: 1fr; gap: 12px; padding: 20px 18px; }
    .rs-tr.rs-th { display: none; }
    .rs-td::before {
        content: attr(data-label); display: block; font-size: .72rem; letter-spacing: 1px;
        color: var(--lotus-deep); margin-bottom: 4px; font-weight: 600;
    }
    .rs-cloud { gap: 12px 10px; }
    .rs-tag.s4 { font-size: 1.1rem; }
    .rs-tag.s2 { font-size: 1rem; }
}