/* ==========================================================================
   via baby concierge — 子页面样式
   与 site.css 搭配使用（site.css 在前）。只包含首页用不到的版式：
   面包屑、页面头、正文栏 + 侧栏、流程列表、联系页、FAQ 分类。
   断点沿用 1024 / 768。
   ========================================================================== */

/* ---------- 面包屑 --------------------------------------------------- */
.breadcrumb{padding-block:20px 0}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--text-muted)}
.breadcrumb a{color:var(--text-muted)}
.breadcrumb a:hover{color:var(--coral-700)}
.breadcrumb li[aria-current]{color:var(--text-heading);font-weight:600}
.breadcrumb .sep{color:var(--sand-300)}

/* ---------- 页面头 --------------------------------------------------- */
.page-hero{padding-block:40px 56px;background:var(--off-white)}
.page-hero__inner{display:flex;flex-direction:column;gap:20px;max-width:840px}
.page-hero h1{font-size:clamp(26px,3.4vw,42px);line-height:1.35}
.page-hero .lead{max-width:760px}
.page-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}

/* 子页面顶部图：比首页横幅矮，只作氛围铺垫 */
.page-media{position:relative;height:300px;overflow:hidden}
.page-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}

/* ---------- 正文栏 + 侧栏 ------------------------------------------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.layout--narrow{grid-template-columns:minmax(0,1fr) 300px;gap:48px}

/* ---------- 正文排版 ------------------------------------------------- */
.prose{display:flex;flex-direction:column;gap:44px}
.prose section{display:flex;flex-direction:column;gap:20px}
.prose h2{font-size:clamp(21px,2.2vw,28px)}
.prose h3{font-size:18px;line-height:1.5}
.prose p{color:var(--text-body)}

/* 勾选清单 —— 材料、服务内容 */
.checklist{display:flex;flex-direction:column;gap:14px}
.checklist li{display:flex;align-items:flex-start;gap:14px;color:var(--text-body)}
.checklist .icon{width:20px;height:20px;flex:0 0 auto;margin-top:6px;color:var(--coral-600)}
.checklist b{display:block;color:var(--text-heading);font-weight:700}

/* 编号流程 —— 竖排，带连接线 */
.steps{display:flex;flex-direction:column;counter-reset:s}
.steps li{position:relative;display:flex;gap:20px;padding-bottom:28px}
.steps li:last-child{padding-bottom:0}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-pill);background:var(--coral-500);color:#fff;font-size:15px;font-weight:700;line-height:1}
/* 连接线连到下一个序号 */
.steps li:not(:last-child)::after{content:"";position:absolute;left:22px;top:52px;bottom:8px;width:1px;background:var(--sand-300)}
.steps__body{display:flex;flex-direction:column;gap:8px;padding-top:8px}
.steps__body h3{margin:0}

/* 提示条 */
.callout{display:flex;gap:16px;padding:24px 28px;background:var(--coral-100);border-left:4px solid var(--coral-500);border-radius:var(--r-lg)}
.callout .icon{width:22px;height:22px;flex:0 0 auto;margin-top:4px;color:var(--coral-700)}
.callout__body{display:flex;flex-direction:column;gap:8px}
.callout b{color:var(--text-heading)}
.callout p{font-size:15px;line-height:1.8}

/* 数据/时长表 */
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:34%;color:var(--text-heading);font-weight:700}
.spec td{color:var(--text-body)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

/* ---------- 侧栏 ----------------------------------------------------- */
.side{position:sticky;top:180px;display:flex;flex-direction:column;gap:20px}
.side-card{display:flex;flex-direction:column;gap:16px;padding:28px;background:#fff;border-top:5px solid var(--coral-500);border-radius:var(--r-2xl);box-shadow:var(--shadow-card)}
.side-card h2{font-size:19px;line-height:1.5}
.side-card p{font-size:14px;line-height:1.75}
.side-card__lines{display:flex;flex-direction:column;gap:10px;padding-top:4px;border-top:1px solid var(--line)}
.side-card__lines li{display:flex;align-items:center;gap:10px;color:var(--text-heading);font-size:14px}
.side-card__lines .icon{width:17px;height:17px;color:var(--coral-600)}
.side-links{padding:24px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl)}
.side-links h2{margin-bottom:16px;font-size:15px;letter-spacing:.02em}
.side-links li+li{margin-top:12px}
.side-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-body);font-size:15px}
.side-links a:hover{color:var(--coral-700)}
.side-links .icon{width:15px;height:15px;flex:0 0 auto;opacity:.55}
.side-links [aria-current]{color:var(--coral-700);font-weight:700}

/* ---------- 联系我们 ------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.contact-card{display:flex;flex-direction:column;gap:14px;padding:32px;background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);text-align:center;align-items:center}
.contact-card .icon-tile{margin-bottom:4px}
.contact-card h2{font-size:19px}
.contact-card p{font-size:15px;line-height:1.75}
.contact-card__value{color:var(--text-heading);font-size:16px;font-weight:700;word-break:break-all}
.contact-qr{width:132px;height:132px;border-radius:var(--r-md);background:var(--mist);border:1px solid var(--line)}
.hours{display:flex;flex-direction:column;gap:0}
.hours li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.hours li:last-child{border-bottom:0}
.hours b{color:var(--text-heading)}
.hours span{color:var(--text-body);text-align:right}

/* ---------- FAQ 分类 ------------------------------------------------- */
.faq-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.faq-nav a{display:inline-block;padding:9px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--text-body);font-size:14px;font-weight:600}
.faq-nav a:hover{background:var(--coral-100);border-color:var(--coral-200);color:var(--coral-700)}
.faq-group{display:flex;flex-direction:column;gap:16px}
.faq-group__head{display:flex;align-items:center;gap:14px}
.faq-group__head h2{font-size:clamp(20px,2.2vw,26px)}
.faq-group__head .icon-tile{width:44px;height:44px}

/* ---------- 1024px --------------------------------------------------- */
@media (max-width:1024px){
  .layout,.layout--narrow{grid-template-columns:1fr;gap:40px}
  /* 侧栏在窄屏不再吸顶，直接排在正文后面 */
  .side{position:static;flex-direction:row;flex-wrap:wrap}
  .side>*{flex:1 1 300px}
  .page-hero{padding-block:32px 44px}
  .page-media{height:220px}
  .prose{gap:36px;max-width: 100%;overflow: hidden;;}
  .contact-grid{grid-template-columns:1fr}
}

/* ---------- 768px ---------------------------------------------------- */
@media (max-width:768px){
  .side{flex-direction:column}
  .side>*{flex:1 1 auto}
  .prose{gap:32px}
  .prose>section{gap:16px}
  .callout{flex-direction:column;gap:12px;padding:20px}
  .steps li{gap:14px;padding-bottom:22px}
  .steps li::before{width:38px;height:38px;font-size:14px}
  .steps li:not(:last-child)::after{left:19px;top:46px}
  .side-card,.side-links,.contact-card{padding:22px}
  /* 表格在窄屏改为纵向堆叠 */
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;width:auto}
  .spec th{padding:16px 0 4px;border-bottom:0}
  .spec td{padding:0 0 16px;border-bottom:1px solid var(--line)}
  .page-media{height:170px}
  .breadcrumb{padding-block:16px 0}
  .breadcrumb ol{font-size:13px}
  .hours li{flex-direction:column;gap:4px}
  .hours span{text-align:left}
}

/* ==========================================================================
   最新政策（Blog）
   列表页：置顶文章 + 卡片网格 + 分类筛选
   详情页：窄栏正文 + 目录侧栏
   ========================================================================== */

/* ---------- 文章元信息 --------------------------------------------- */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px;color:var(--text-muted)}
.post-meta__region{color:var(--coral-700);font-weight:700}
.post-meta .sep{width:1px;height:14px;background:var(--sand-300)}
.post-meta time{color:var(--text-muted)}

/* ---------- 置顶文章 ------------------------------------------------ */
.post-featured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:#fff;border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--shadow-card)}
.post-featured__media{position:relative;min-height:340px;background:var(--navy-050)}
.post-featured__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-featured__badge{position:absolute;top:20px;left:20px;padding:6px 14px;background:var(--coral-700);border-radius:var(--r-pill);color:#fff;font-size:13px;font-weight:700}
.post-featured__body{display:flex;flex-direction:column;gap:18px;justify-content:center;padding:44px}
.post-featured__body h2{font-size:clamp(22px,2.4vw,30px);line-height:1.4}
.post-featured__body p{color:var(--text-body)}

/* ---------- 文章卡片网格 -------------------------------------------- */
.post-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.post-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.post-card__media{aspect-ratio:16/9;overflow:hidden;background:var(--navy-050)}
.post-card__media img{width:100%;height:100%;object-fit:cover}
.post-card__body{display:flex;flex-direction:column;gap:14px;flex:1;padding:26px}
.post-card__body h3{font-size:19px;line-height:1.5}
.post-card__body p{flex:1;font-size:15px;line-height:1.8;color:var(--text-body)}

/* ---------- 文章正文 ------------------------------------------------ */
.article{display:flex;flex-direction:column;gap:28px}
.article__lede{font-size:19px;line-height:1.85;color:var(--text-heading);font-weight:500;padding-bottom:28px;border-bottom:1px solid var(--line)}
.article__body{display:flex;flex-direction:column;gap:32px}
.article__body section{display:flex;flex-direction:column;gap:16px}
.article__body h2{font-size:clamp(20px,2.1vw,25px)}
.article__body h3{font-size:17px;line-height:1.5}
.article__body p{color:var(--text-body);max-width:68ch}
.article__body ul:not(.checklist){display:flex;flex-direction:column;gap:12px;padding-left:0}
.article__body ul:not(.checklist) li{position:relative;padding-left:22px;color:var(--text-body)}
.article__body ul:not(.checklist) li::before{content:"";position:absolute;left:4px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--coral-500)}
.article__figure{margin:0;display:flex;flex-direction:column;gap:10px}
.article__figure img{width:100%;border-radius:var(--r-lg)}
.article__figure figcaption{font-size:14px;color:var(--text-muted)}
.article__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:28px;border-top:1px solid var(--line)}
.article__tags{display:flex;flex-wrap:wrap;gap:8px}

/* 目录 */
.toc li+li{margin-top:12px}
.toc a{display:block;color:var(--text-body);font-size:14px;line-height:1.6}
.toc a:hover{color:var(--coral-700)}

/* ---------- 上下篇 -------------------------------------------------- */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.post-nav a{display:flex;flex-direction:column;gap:8px;padding:24px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl)}
.post-nav a:hover{border-color:var(--coral-200);background:var(--coral-100)}
.post-nav .kicker{color:var(--text-muted)}
.post-nav b{color:var(--text-heading);font-size:16px;line-height:1.5}
.post-nav__next{text-align:right}

/* ---------- 1024px --------------------------------------------------- */
@media (max-width:1024px){
  .post-featured{grid-template-columns:1fr}
  .post-featured__media{min-height:260px}
  .post-featured__body{padding:32px}
}

/* ---------- 768px ---------------------------------------------------- */
@media (max-width:768px){
  .post-featured__media{min-height:200px}
  .post-featured__body{padding:24px;gap:14px}
  .post-card__body{padding:22px}
  .article__lede{font-size:17px;padding-bottom:22px}
  .article__body{gap:26px}
  .post-nav{grid-template-columns:1fr}
  .post-nav__next{text-align:left}
}

img.contact-qr{object-fit:contain;background:#fff;display:block}
