/* ═══════════════════════════════════════════════════════════════
   服务页样式：服务卡片与详情弹层
   ═══════════════════════════════════════════════════════════════ */

/* ── 服务卡片 ── */
.services-main { min-height: 100vh; }
.service-card {
    position: relative;
    border: 1px solid var(--line);
    background: var(--panel-bg);
    border-radius: var(--radius-lg);
    transition: transform 250ms var(--ease-out), border-color 250ms var(--ease-out);
    overflow: hidden;
    cursor: pointer;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    opacity: 0; transition: opacity 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .service-card:hover::before { opacity: 1; }
    .service-card:hover { transform: translateY(-2px); border-color: var(--highlight); }
}
.service-card:active { transform: scale(0.97); }

/* ── 卡片上的"点击查看详情"提示 ── */
.detail-hint {
    margin-top: 14px;
    font-size: 10px; font-weight: 600; letter-spacing: calc(0.35em*var(--ls-scale)); text-transform: uppercase;
    opacity: 0.35; display: flex; align-items: center; gap: 8px;
    transition: opacity 250ms var(--ease-out);
}
.detail-hint svg { transition: transform 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .service-card:hover .detail-hint { opacity: 0.9; }
    .service-card:hover .detail-hint svg { transform: translateX(4px); }
}

/* ── 详情弹层 ──
   入场:容器 opacity 瞬达 1,毛玻璃立即生效(backdrop-filter 在容器 opacity
   渐入时会被 Safari 延迟采样,模糊出现有滞后);面板单独 transform 展开
   退出:容器统一 opacity 300ms 淡出,模糊/遮罩/面板同步消失,保持镜像 */
.service-modal {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
.service-modal.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0s, visibility 0s;
}
.modal-frost {
    position: absolute; inset: 0;
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    backdrop-filter: blur(24px) saturate(1.3);
    pointer-events: none;
}
.modal-backdrop {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bg) 30%, transparent);
}
.modal-panel {
    position: relative; width: 100%; max-width: 760px;
    max-height: min(85vh, 680px); overflow: hidden;
    background: var(--panel-bg);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 0;
    transform: translateY(16px) scale(0.97);
    transition: transform 300ms var(--ease-out);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.service-modal.open .modal-panel { transform: translateY(0) scale(1); }

/* 弹层标题区：两行固定 —— 第一行 序号 + 关闭按钮，第二行 标题 */
.modal-head {
    margin: 0; padding: 14px 24px 10px;
    position: relative; z-index: 10;
    background: var(--panel-bg);
}
.modal-head-top {
    display: flex; align-items: center; justify-content: space-between;
}
.modal-head .modal-title { margin: 10px 0 0; }
/* 弹层内容区：独立滚动，顶部标题栏固定 */
.modal-body {
    max-height: calc(min(85vh, 680px) - 64px);
    overflow-y: auto;
    padding: 0 28px 36px;
}
.modal-index { font-size: 10px; font-family: monospace; font-weight: bold; opacity: 0.3; }
.modal-close {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: transparent; color: var(--text);
    font-size: 16px; line-height: 1; cursor: pointer;
    transition: background 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.modal-close:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
    .modal-close:hover { background: var(--highlight); }
}
.modal-title { font-size: 22px; font-weight: 600; letter-spacing: calc(0.25em*var(--ls-scale)); }

/* ── 套餐 ── */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }
/* 4 档位(场照/正片)移动端也保持 2 列两行 */
.plan-grid-quad { grid-template-columns: repeat(2, 1fr); }
.plan {
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--bg); padding: 18px 16px;
    text-align: center;
}
.plan-tag { font-size: 10px; font-weight: 600; letter-spacing: calc(0.2em*var(--ls-scale)); opacity: 0.5; margin: 0 0 8px; }
/* 价格:flex 让数字精确水平居中;数字与单位底部对齐(line-height 1 保证底边一致) */
.plan-price {
    position: relative;
    height: 44px;
    margin: 0 0 16px;
    font-size: 34px; font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.plan-price .price-num {
    position: relative;
    white-space: nowrap;
}
/* 单位:相对数字右边缘定位(左 100% + 8px),底部与数字对齐 */
.plan-price .plan-unit {
    position: absolute;
    left: 100%; bottom: 0;
    margin-left: 8px;
    font-size: 14px; font-weight: 500; opacity: 0.45;
    line-height: 1;
    white-space: nowrap;
}
/* 正片卡(有 tag):价格组相对整卡垂直居中。用 translateY 平移(不参与布局,
   不会撑高卡片导致中心漂移),内容贴底对齐保持不变 */
.plan:has(.plan-tag) .plan-price { transform: translateY(-8px); }
/* 移动端两列时缩小价格,避免与右侧单位重叠 */
@media (max-width: 639px) {
    .plan-price { font-size: 24px; height: 36px; }
    .plan-price .plan-unit { right: 4px; font-size: 11px; }
}
/* 暂不接的服务档位:删除线划过价格数字(两端延伸 2px),单位不划线 */
.plan-price.strikethrough { opacity: 0.35; }
.plan-price.strikethrough .price-num::after {
    content: ''; position: absolute;
    left: -2px; right: -2px; top: 50%;
    height: 2px; background: currentColor;
}
.plan-features { list-style: none; margin: 0; padding: 0; }
.plan-features li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 12.5px; padding: 8px 0;
    border-top: 1px dashed var(--line);
}
.plan-features li span:first-child { opacity: 0.45; }
.plan-features li span:last-child { font-weight: 600; opacity: 0.85; }

/* ── 可选加购 ── */
.extras { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.extras-title { font-size: 9px; font-weight: 600; letter-spacing: calc(0.3em*var(--ls-scale)); opacity: 0.4; margin: 0 0 10px; }
.extra-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 12.5px; padding: 8px 0;
    border-top: 1px dashed var(--line);
}
.extra-row:first-child { border-top: none; }
.extra-row span:first-child { opacity: 0.6; }
.extra-row span:last-child { font-weight: 600; opacity: 0.8; }

/* ── 弹层底部咨询链接 ── */
.modal-footer { margin-top: 26px; text-align: center; }
.modal-footer-links { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.cta-link {
    font-size: 11px; font-weight: 600; letter-spacing: calc(0.25em*var(--ls-scale)); text-transform: uppercase;
    color: var(--text); text-decoration: none; opacity: 0.55;
    padding-bottom: 5px; border-bottom: 1px solid var(--line);
    transition: opacity 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .cta-link:hover { opacity: 1; border-color: var(--text); }
}

/* ── 服务项文字（不换行） ── */
.service-item { white-space: nowrap; }

/* ── 标题字重 ── */
h1, h3 { font-weight: 600 !important; }