/* ════════════════════════════════════════════════════════════════
   大象民宿 · 详情页共享布局组件
   lead 大图 → 两栏布局 → 正文 → 分段 → 图片 → 网格
   适用于所有 routes/ 下的详情页
   ════════════════════════════════════════════════════════════════ */

/* —— 全幅 lead 大图 —— */
.lead-hero{position:relative;width:100%;height:62vh;min-height:380px;max-height:680px;background:#111;overflow:hidden}
.lead-hero img{width:100%;height:100%;object-fit:cover;object-position:center 56%}
.lead-hero .cap{position:absolute;left:24px;right:auto;bottom:22px;padding:0;color:rgba(255,255,255,.84);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:none;text-shadow:0 1px 12px rgba(37,41,43,.42);pointer-events:none;max-width:70%}

/* —— 两栏布局 —— */
.layout{max-width:var(--maxw);margin:0 auto;padding:52px 22px 0;display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:920px){ .layout{grid-template-columns:280px 1fr;gap:64px;align-items:start} }

/* —— 标题栏（sticky）—— */
.title-col .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.title-col h1{font-family:var(--serif-display);font-weight:300;font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:.01em;color:var(--ink);margin-bottom:20px}
.title-col .meta{font-family:var(--mono);font-size:12.5px;color:var(--slate);line-height:1.95;border-top:1px solid var(--line);padding-top:16px}
.title-col .meta span{display:block}
.title-col .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.title-col .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink);background:#fff;border:1px solid var(--line-2);padding:3px 11px;border-radius:999px}
@media(min-width:920px){ .title-col{position:sticky;top:86px;align-self:start} }

/* —— 正文阅读栏 —— */
.article{max-width:760px}
.article .intro{font-family:var(--serif-body);font-size:clamp(18px,2.1vw,21px);line-height:1.7;color:var(--slate);margin-bottom:42px}
.article h2{font-family:var(--serif-display);font-weight:300;font-size:clamp(28px,3.8vw,40px);line-height:1.2;color:var(--ink);margin:48px 0 18px;letter-spacing:.01em}
.article h3{font-family:var(--serif-display);font-size:21px;color:var(--ink);margin-bottom:10px}
.article p{font-size:1.06rem;line-height:1.85;color:var(--slate);margin-bottom:20px}
.article a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--muted-2)}
.article a:hover{text-decoration-color:var(--ink)}
.article figure{margin:32px 0}
.article figure img{width:100%;border-radius:var(--radius)}
.article figcaption{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:10px;letter-spacing:.03em}

/* —— 分段块 —— */
.segment{margin:36px 0;padding:30px 0 0;border-top:2px solid var(--line-2)}
.segment:first-child{border-top:none;padding-top:0}
.seg-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.seg-head h3{font-family:var(--serif-display);font-size:23px;color:var(--ink);margin:0}
.seg-sub{font-family:var(--serif-display);font-style:italic;font-size:16px;color:var(--muted-2);margin-bottom:18px}
.seg-block{margin:20px 0;padding:20px 22px;background:var(--paper-2,#fcfbfa);border:1px solid var(--line);border-radius:var(--radius)}
.seg-block h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.seg-block p{font-size:14px;line-height:1.75;color:var(--slate);margin:0 0 10px}
.seg-block p:last-child{margin-bottom:0}

/* —— 文章内图片 —— */
.article .landscape{width:100%;margin:6px 0 44px}
.article .landscape img{width:100%;height:auto;display:block;border-radius:0}
.article .landscape figcaption,
.article .portrait figcaption{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:10px;letter-spacing:.03em}
.article .landscape figcaption b,
.article .portrait figcaption b{color:var(--ink);font-weight:700}
.article .portrait{max-width:800px;margin:6px auto 44px}
.article .portrait img{width:100%;height:auto;display:block;border-radius:0}
.article figure img{border-radius:0}
.article .sidebyside{display:flex;gap:4px;margin:6px 0 16px}
.article .sidebyside figure{flex:1 1 0;margin:0}
.article .sidebyside img{width:100%;height:auto;display:block;border-radius:0}
.article .sidebyside figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:.03em}
.article .sidebyside figcaption b{color:var(--ink);font-weight:700}

/* —— tile 网格（通用）—— */
.tilegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}
.tile{background:var(--paper-2,#fcfbfa);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px}
.tile h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.tile p{font-size:13.5px;color:var(--slate);line-height:1.65;margin:0}

/* —— Tips —— */
.tips{background:var(--paper-2,#fcfbfa);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-top:8px}
.tips h3{font-family:var(--serif-display);font-size:20px;color:var(--ink);margin-bottom:16px}
.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.tip h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.tip p{font-size:13.5px;color:var(--slate);line-height:1.6;margin:0}

/* —— Tips 变体：border-top 风格（3+ 页共用） —— */
.tips--border-top{background:transparent;border:0;border-radius:0;padding:26px 0 0;border-top:2px solid var(--line-2)}
.tips--border-top .tip p b{color:var(--ink);font-weight:700}