/* ==========================================================
   请柬制作网 - 前台样式（响应式，电脑端 / 手机端自适应）
   ========================================================== */
:root {
    --red: #b3121b;
    --red-d: #8a0d15;
    --red-l: #fdeeee;
    --gold: #c9a227;
    --gold-l: #e7ce86;
    --ink: #262626;
    --ink-2: #5c5c5c;
    --ink-3: #8a8a8a;
    --line: #ece6dc;
    --bg: #fdfaf6;
    --card: #fff;
    --radius: 14px;
    --shadow: 0 6px 20px rgba(90, 60, 30, .08);
    --shadow-h: 0 12px 32px rgba(120, 60, 30, .16);
    --wrap: 1200px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.75 "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
}
img { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-d); }
h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 700; line-height: 1.4; }
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 14px; border-radius: 8px; }
main { min-height: 60vh; }

/* ---------------- 头部 ---------------- */
.site-head {
    position: sticky; top: 0; z-index: 50;
    background: linear-gradient(180deg, #fff 0%, #fffaf3 100%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 12px rgba(150, 100, 60, .05);
}
.head-inner { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-img {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: block; object-fit: cover; border-radius: 10px;
}
.logo-badge {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--red) 0%, var(--red-d) 100%);
    color: var(--gold-l); font-size: 22px; font-weight: 700;
    border-radius: 10px; box-shadow: 0 4px 10px rgba(179, 18, 27, .25);
}
.logo-text b { display: block; font-size: 17px; letter-spacing: .5px; }
.logo-text i { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a {
    padding: 8px 14px; border-radius: 999px; color: var(--ink-2);
    font-size: 15px; white-space: nowrap;
}
.site-nav a:hover { background: var(--red-l); color: var(--red); }
.site-nav a.on { background: var(--red); color: #fff; }
.nav-toggle { display: none; }
/* ---------------- 二级导航（下拉）----------------
   一级栏目 = 顶部项，二级栏目 = 鼠标移上去展开的下拉。
   桌面端靠 :hover / :focus-within 展开（键盘 Tab 到链接也能展开，无需 JS）；
   手机端（≤900px 触摸）在下面的媒体查询里改成常显的缩进列表。 */
.nav-item { position: relative; }
.nav-item > .nav-top { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret {
    width: 0; height: 0; flex: 0 0 auto;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; opacity: .6;
}
.nav-sub {
    position: absolute; left: 0; top: 100%; min-width: 132px; padding: 6px;
    display: none; flex-direction: column; gap: 2px; z-index: 30;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 14px 28px rgba(90, 60, 30, .14);
}
/* 悬停过桥：光标从一级项往下走时不会掉出 hover 区（否则下拉会闪一下就没） */
.nav-sub:before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub { display: flex; }
.nav-sub a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14.5px; color: var(--ink-2); }
.nav-sub a:hover { background: var(--red-l); color: var(--red); }
.nav-sub a.on { background: var(--red); color: #fff; }
/* 导航内搜索：电脑端跟在导航右侧，手机端落在下拉菜单底部（同一份标记） */
.nav-search {
    display: flex; align-items: center; margin-left: 8px;
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 3px 3px 3px 14px; height: 38px; box-sizing: border-box;
}
.nav-search input {
    border: 0; outline: none; background: none; width: 152px; align-self: stretch;
    font-size: 14px; font-family: inherit; color: var(--ink); min-width: 0;
}
.nav-search input::placeholder { color: var(--ink-3); }
.nav-search button {
    flex: 0 0 auto; height: 30px; padding: 0 15px; border: 0; cursor: pointer;
    border-radius: 999px; background: var(--red); color: #fff; font-size: 13px;
    font-family: inherit; line-height: 1;
}
.nav-search button:hover { background: var(--red-d); }
.nav-search:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-l); }

/* ---------------- 面包屑 ---------------- */
.breadcrumb { background: #fff; border-bottom: 1px solid var(--line); font-size: 13px; }
.breadcrumb .wrap { padding: 10px 18px; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { margin: 0 6px; color: #cfc7bb; }
.breadcrumb .cur { color: var(--ink-2); }

/* ---------------- 首页 Hero ---------------- */
.hero {
    background:
        radial-gradient(1200px 400px at 12% -10%, rgba(201, 162, 39, .18), transparent 60%),
        linear-gradient(135deg, #b3121b 0%, #8a0d15 55%, #6d0a11 100%);
    color: #fff; padding: 46px 0 54px; position: relative; overflow: hidden;
}
.hero:after {
    content: "囍"; position: absolute; right: 3%; top: -26px;
    font-size: 240px; color: rgba(255, 255, 255, .06); font-weight: 700; pointer-events: none;
}
.hero h1 { font-size: 32px; color: #fff; margin-bottom: 10px; letter-spacing: 1px; }
.hero h1 em { font-style: normal; color: var(--gold-l); }
.hero .sub { color: rgba(255, 255, 255, .88); font-size: 15px; max-width: 640px; margin-bottom: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero-cta a {
    padding: 10px 22px; border-radius: 999px; background: rgba(255, 255, 255, .14);
    color: #fff; border: 1px solid rgba(255, 255, 255, .35); font-size: 15px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.hero-cta a.main { background: var(--gold); border-color: var(--gold); color: #4a3405; font-weight: 700; }
.hero-cta a:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.steps { display: flex; flex-wrap: wrap; gap: 10px 26px; color: rgba(255, 255, 255, .85); font-size: 13px; }
.steps span { position: relative; padding-left: 24px; }
.steps span:before {
    content: attr(data-i); position: absolute; left: 0; top: 0;
    width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .22);
    font-size: 11px; line-height: 18px; text-align: center;
}
/* 首页 Hero 搜索：直接搜模板名称或编号 */
.hero-search {
    display: flex; align-items: center; max-width: 470px; margin: 0 0 22px;
    background: #fff; border-radius: 999px; padding: 5px 5px 5px 18px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.hero-search input {
    flex: 1; min-width: 0; height: 42px; border: 0; outline: none; background: none;
    font-size: 15px; font-family: inherit; color: var(--ink);
}
.hero-search input::placeholder { color: var(--ink-3); }
.hero-search button {
    flex: 0 0 auto; height: 42px; padding: 0 24px; border: 0; cursor: pointer;
    border-radius: 999px; background: var(--gold); color: #4a3405;
    font-weight: 700; font-size: 15px; font-family: inherit; line-height: 1;
}
.hero-search button:hover { filter: brightness(1.05); }

/* ---------------- 区块 ---------------- */
.section { padding: 40px 0 8px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
/* 标题一侧可收缩（min-width:0 才允许窄屏下让出宽度），右侧「查看全部」不收缩、永不折行，
   否则手机端会被标题+副标题挤成「查看全 / 部 ›」两行 */
.section-head h2 { margin: 0; flex: 1 1 auto; min-width: 0; }
.section-head h2 small { display: block; font-size: 13px; color: var(--ink-3); font-weight: 400; margin-top: 4px; }
.section-head .more { flex: 0 0 auto; white-space: nowrap; font-size: 14px; color: var(--ink-3); }
.section-head .more:hover { color: var(--red); }

/* ---------------- 模板卡片 ---------------- */
/* 电脑端一排 6 个模板卡片（容器 1200px，卡片约 177px 宽）；
   窄屏/手机端在下方媒体查询里依次降为 3 列、2 列 */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(6, 1fr); }
/* 横版栏目页模板（后台「栏目页模板」选了「横版图片墙」的栏目）：
   一排 3 个、缩略图 16:9，适合背景图这类横屏素材；
   手机端降为 1 列（2 列时缩略图只有 95px 高，背景图看不清内容） */
.grid-land { grid-template-columns: repeat(3, 1fr); }
.grid-land .tpl-thumb { aspect-ratio: 16 / 9; }
.tpl-card {
    background: var(--card); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); border: 1px solid #f3ece2;
    display: flex; flex-direction: column;
    transition: transform .18s, box-shadow .18s;
}
.tpl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.tpl-thumb {
    position: relative; display: block; background: #f6f2ec;
    aspect-ratio: 1044 / 2257; overflow: hidden;
}
.tpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 缩略图左上角的栏目胶囊（首页 / 列表页通用）：栏目名过长时省略，不撑破窄卡片 */
.tpl-thumb .tag,
.video-thumb .tag {
    position: absolute; left: 10px; top: 10px; background: rgba(179, 18, 27, .9);
    color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 999px;
    max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* 一排 6 个后卡片变窄（约 177px，内容区约 149px），长标题换行会让卡片忽高忽低，
   所以标题固定占 2 行（14px × 1.5 = 21px，两行 42px），超出部分省略号隐藏 */
.tpl-info h3 { font-size: 14px; margin: 0; line-height: 21px; height: 42px; }
.tpl-info h3 a {
    color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.tpl-info h3 a:hover { color: var(--red); }
/* 横版图片墙（一排 3 个、卡片更宽）：标题只留 1 行，超出省略号 */
.grid-land .tpl-info h3 { height: 21px; }
.grid-land .tpl-info h3 a {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl-meta { font-size: 12px; color: var(--ink-3); margin: 0; }
/* 模板编号：紧贴标题下方（负外边距抵消 .tpl-info 的 8px 行间距） */
.tpl-code { margin: -4px 0 0; font-size: 12.5px; color: var(--ink-2); letter-spacing: .2px; }
.tpl-code b { color: var(--ink); font-weight: 600; }
/* 模板浏览量：接在模板编号下方，比编号更淡一档（同样用负外边距抵消 .tpl-info 的 8px 行间距） */
.tpl-views { margin: -4px 0 0; font-size: 12px; color: var(--ink-3); }
.tpl-btns { display: flex; gap: 8px; margin-top: auto; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 9px; font-size: 14px; cursor: pointer;
    border: 1px solid var(--line); background: #fff; color: var(--ink-2); text-align: center;
}
.btn:hover { border-color: var(--red); color: var(--red); }
.btn.primary { background: linear-gradient(145deg, var(--red), var(--red-d)); border-color: var(--red); color: #fff; }
.btn.primary:hover { filter: brightness(1.06); color: #fff; }
.btn.gold { background: linear-gradient(145deg, #e7ce86, #c9a227); border-color: #c9a227; color: #4a3405; font-weight: 700; }
.btn.block { width: 100%; }

/* ---------------- 栏目导航 ---------------- */
.cat-list { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.cat-card {
    position: relative; overflow: hidden; border-radius: var(--radius);
    background: #fff; border: 1px solid #f3ece2; box-shadow: var(--shadow);
    padding: 22px 20px; display: block; color: var(--ink);
}
.cat-card:hover { box-shadow: var(--shadow-h); transform: translateY(-3px); }
.cat-card h3 { font-size: 19px; margin-bottom: 6px; }
.cat-card h3 a { color: var(--ink); }
.cat-card h3 a:hover { color: var(--red); }
.cat-card p { color: var(--ink-3); font-size: 13px; margin: 0 0 10px; }
.cat-card .count { font-size: 12px; color: var(--gold); }
/* 一级栏目卡片里的二级栏目入口（小胶囊，直接跳到对应二级栏目页） */
.cat-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cat-subs a {
    padding: 3px 10px; border-radius: 999px; font-size: 12.5px;
    background: var(--red-l); color: var(--red);
}
.cat-subs a:hover { background: var(--red); color: #fff; }
.cat-card .icon {
    position: absolute; right: -8px; bottom: -18px; font-size: 76px; color: rgba(179, 18, 27, .07); font-weight: 700;
}

/* ---------------- 页面头部 ---------------- */
.page-head { padding: 26px 0 6px; }
.page-head h1 { margin-bottom: 8px; }
.page-head p { color: var(--ink-2); max-width: 860px; }
/* 一级栏目页顶部：旗下二级栏目的入口 */
.page-head .sub-cats { margin-top: 2px; }
.page-head .sub-cats a {
    display: inline-block; margin: 6px 8px 0 0; padding: 4px 12px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font-size: 13px; color: var(--ink-2);
}
.page-head .sub-cats a:hover { border-color: var(--red); color: var(--red); }
/* 当前所在的那一枚（二级栏目页才有）：实心红底 + 白字，一眼看出「我在哪个分类下」 */
.page-head .sub-cats a.on,
.page-head .sub-cats a[aria-current="page"] {
    background: var(--red); border-color: var(--red); color: #fff; font-weight: 500;
}
.page-head .sub-cats a.on:hover,
.page-head .sub-cats a[aria-current="page"]:hover {
    background: var(--red-d); border-color: var(--red-d); color: #fff;
}
/* 列表页搜索框（始终可见，可按名称或模板编号搜索） */
.list-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0 20px; max-width: 560px; }
.list-search input[type="search"] {
    flex: 1; min-width: 200px; padding: 10px 16px; border: 1px solid var(--line);
    border-radius: 999px; font-size: 15px; font-family: inherit; color: var(--ink);
    background: #fff; outline: none;
}
.list-search input[type="search"]:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-l); }
.panel {
    background: #fff; border: 1px solid #f3ece2; border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow); margin: 22px 0;
}
.panel h2 { font-size: 18px; }
.prose { color: var(--ink-2); font-size: 14.5px; }
.prose p { margin-bottom: 10px; }
/* 首页正文块：小标题 / 提示条 / 栏目链接（正文比卡片更密，靠这三条把层级拉开） */
.prose h3 { font-size: 15.5px; color: var(--ink); margin: 16px 0 6px; }
.prose h3 + p { margin-bottom: 12px; }
.prose .tip-box {
    background: #fdf6f6; border: 1px solid #f6e3e3; border-radius: 10px;
    padding: 10px 14px; margin: 12px 0 0; font-size: 14px; color: var(--ink-2);
}
.prose-links {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px;
}

/* ---------------- 分页 ---------------- */
.pager { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 30px 0; }
.pager a, .pager span {
    min-width: 38px; padding: 7px 12px; border-radius: 9px; background: #fff;
    border: 1px solid var(--line); text-align: center; color: var(--ink-2); font-size: 14px;
}
.pager .cur { background: var(--red); border-color: var(--red); color: #fff; }
.pager a:hover { border-color: var(--red); color: var(--red); }

/* ---------------- 文章资讯 ----------------
 * 三个前台位置共用一套卡片：首页「最新资讯」、资讯列表页、文章详情页的「相关文章」。
 * 列表页 / 详情页是「主轴 + 侧栏」两栏布局（侧栏放最新 / 热门文章，兼职内链）。 */
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.art-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform .18s ease, box-shadow .18s ease;
}
.art-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }
.art-thumb {
    position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
    background: linear-gradient(145deg, #fdf4e8, var(--red-l));
}
.art-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 没有封面图时的占位（种子文章默认没有封面）：金色囍字，比灰色空块体面 */
.art-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 34px; color: var(--gold); opacity: .8; }
.art-cat {
    display: inline-block; font-size: 12px; line-height: 1.6; border-radius: 999px;
    padding: 2px 10px; background: var(--red-l); color: var(--red-d);
}
.art-thumb .art-cat { position: absolute; left: 10px; top: 10px; background: rgba(179, 18, 27, .92); color: #fff; }
.art-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
/* 标题固定一行、摘要固定两行，超出部分用省略号裁掉：一排卡片高度才齐整 */
.art-body h3 { font-size: 15px; line-height: 1.5; margin: 0; }
.art-body h3 a {
    display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    color: var(--ink);
}
.art-body h3 a:hover { color: var(--red); }
.art-body p {
    font-size: 13px; line-height: 1.6; color: var(--ink-3); margin: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-clamp: 2; overflow: hidden; overflow-wrap: break-word;
}
.art-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: auto; font-size: 12.5px; color: var(--ink-3); }
.art-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.art-tags i, .art-tags a,
.art-meta .art-tags i {
    font-style: normal; font-size: 12.5px; color: var(--red);
    background: var(--red-l); border-radius: 999px; padding: 2px 10px;
}
.art-tags a:hover { background: var(--red); color: #fff; }

/* 侧栏「热门标签」：标签聚合页的入口，每个标签后面跟文章数 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a {
    font-size: 12.5px; color: var(--red-d); background: var(--red-l);
    border: 1px solid rgba(179, 18, 27, .12); border-radius: 999px; padding: 3px 10px;
}
.tag-cloud a:hover, .tag-cloud a.on { background: var(--red); color: #fff; }
.tag-cloud a .n { margin-left: 4px; opacity: .65; font-size: 11.5px; }

/* 列表页：主轴 + 侧栏 */
.art-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; margin-top: 6px; }
.art-main { min-width: 0; }
.art-list { display: flex; flex-direction: column; gap: 16px; }
.art-row {
    display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.art-row-thumb {
    display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px;
    background: linear-gradient(145deg, #fdf4e8, var(--red-l));
}
.art-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.art-row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.art-row-body h2 { font-size: 17px; margin: 2px 0 0; }
.art-row-body h2 a { color: var(--ink); }
.art-row-body h2 a:hover { color: var(--red); }
.art-row-body p { font-size: 13.5px; color: var(--ink-3); margin: 0; }
.art-row-body .art-cat { align-self: flex-start; }
/* 侧栏面板：与左列顶部对齐 —— .panel 自带「上下各 22px」外边距，
 * 在侧栏里会把第一块整体顶下来（资讯列表页 / 文章详情页右侧都会比左边低 22px），
 * 所以侧栏内的 panel 收掉上边距，只留面板之间的 18px 间距。 */
.art-side .panel { margin: 0 0 18px; }
.art-side .panel:last-child { margin-bottom: 0; }
.art-rank { list-style: none; margin: 0; padding: 0; }
.art-rank li { display: flex; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.art-rank li:last-child { border-bottom: 0; }
.art-rank b { color: var(--red); font-size: 13px; min-width: 14px; }
.art-rank a { color: var(--ink-2); }
.art-rank a:hover, .art-rank a.on { color: var(--red); }
/* 侧栏「相关图片模板」：竖版小卡两列，缩略图保持竖版比例 */
.side-tpl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.side-tpl-card {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--card); border: 1px solid #f3ece2; border-radius: var(--radius);
    overflow: hidden; transition: transform .18s, box-shadow .18s;
}
.side-tpl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.side-tpl-thumb { display: block; aspect-ratio: 1044 / 2257; overflow: hidden; background: #f6f2ec; }
.side-tpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-tpl-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; padding: 0 10px; font-size: 13px; line-height: 19px; height: 38px; color: var(--ink);
}
.side-tpl-card:hover .side-tpl-name { color: var(--red); }
.side-tpl-btn {
    margin: 0 10px 10px; padding: 6px 0; text-align: center;
    font-size: 12.5px; color: var(--red); background: #fdf1ef; border-radius: 999px;
}
.side-tpl-card:hover .side-tpl-btn { background: var(--red); color: #fff; }

/* 详情页 */
.art-detail {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 26px; margin-bottom: 22px;
}
.art-head h1 { font-size: 24px; margin: 10px 0 10px; }
.art-head .art-meta { margin-bottom: 8px; }
/* 来源署名：与日期/阅读数同行，弱化显示，链接可点、新窗口打开 */
.art-head .art-src { color: var(--ink-3); }
.art-head .art-src a { color: var(--red); text-decoration: none; }
.art-head .art-src a:hover { text-decoration: underline; }
.art-cover { margin: 4px 0 16px; }
.art-cover img { border-radius: 10px; }
/* 正文：字号略大于普通段落，行高放宽，中文长文更好读 */
.art-content { font-size: 15.5px; line-height: 1.95; color: var(--ink); }
.art-content h2 {
    font-size: 18px; margin: 24px 0 10px; padding-left: 10px;
    border-left: 3px solid var(--red); line-height: 1.5;
}
.art-content ul { margin: 0 0 12px; padding-left: 20px; }
.art-content ol { margin: 0 0 12px; padding-left: 22px; }
.art-content li { margin-bottom: 6px; }
/* 正文现在还支持 HTML（后台可视化编辑器产出）：表格 / 引用 / 插图 / 链接 / 分隔线 */
.art-content p { margin: 0 0 12px; }
.art-content h3 { font-size: 16.5px; margin: 20px 0 8px; font-weight: 600; }
.art-content h4 { font-size: 15.5px; margin: 16px 0 6px; font-weight: 600; }
.art-content blockquote {
    margin: 0 0 14px; padding: 8px 14px; background: var(--bg); color: var(--ink-2);
    border-left: 3px solid var(--line); border-radius: 0 8px 8px 0;
}
.art-content img { border-radius: 10px; margin: 6px 0; }
.art-content a { color: var(--red); text-decoration: underline; }
.art-content hr { border: 0; border-top: 1px dashed var(--line); margin: 22px 0; }
.art-content table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14.5px; }
.art-content th, .art-content td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.art-content th { background: var(--bg); font-weight: 600; }
.art-content figure { margin: 0 0 14px; }
.art-content figcaption { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: 6px; }
.art-content > p:last-child { margin-bottom: 0; }
.art-nav {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 14px;
}
.art-nav .next { margin-left: auto; }

/* ---------------- 模板详情 ---------------- */
.detail { display: grid; grid-template-columns: 380px 1fr; gap: 30px; padding: 24px 0 10px; }
.detail-preview {
    background: #fff; border: 1px solid #f3ece2; border-radius: var(--radius);
    padding: 14px; box-shadow: var(--shadow); position: sticky; top: 84px; align-self: start;
}
.detail-preview img { width: 100%; border-radius: 8px; }
.detail-info h1 { font-size: 24px; }
.detail-attrs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.detail-attrs span {
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 12px; font-size: 12.5px; color: var(--ink-2);
}
.detail-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 22px; }

/* ---------------- 常见问题 ---------------- */
.faq-item { border-bottom: 1px dashed var(--line); padding: 16px 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-item h2,
.faq-item h3 { font-size: 16px; margin-bottom: 6px; }
.faq-item p { color: var(--ink-2); margin: 0; }

/* ---------------- 编辑器页面 ---------------- */
body.editor-page { background: #f4f1ec; overflow: hidden; }

/* ---------------- 页脚 ---------------- */
/* 简约多列：品牌 / 模板栏目（一级一行、二级另起一行）/ 用户须知 / 微信客服（二维码 + 微信号，最右） */
.site-foot { background: #2a2320; color: #c9c0b6; margin-top: 50px; padding: 30px 0 16px; font-size: 13px; }
/* 用 flex 而非固定列数的 grid：页脚列数是「按实际情况」的（用户须知没填、客服信息没填都会少一列），
   flex 会自动分掉剩余宽度，不用为每种组合改列定义。min-width:0 防 nowrap 链接把列撑宽。 */
.foot-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 26px; }
.foot-col { flex: 1 1 0; min-width: 0; }
.foot-brand { flex: 1.6 1 200px; }
.foot-cats-col { flex: 1.4 1 200px; }
.foot-about { flex: 1.1 1 160px; }
/* 客服卡固定宽度、不吃剩余空间，自然贴在页脚最右侧（flex-grow:0） */
.foot-contact { flex: 0 0 300px; }
.foot-col h4 {
    position: relative; color: #f3ece2; font-size: 14.5px; font-weight: 600;
    margin: 0 0 12px; padding-left: 10px;
}
/* 标题左侧的金色小竖条 */
.foot-col h4:before {
    content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, var(--gold-l), var(--gold));
}
.foot-desc { margin: 0 0 12px; color: #9c9288; line-height: 1.7; }

/* 微信客服（页脚最右列）：二维码在左、微信号 + 一键复制在右，合成同一张卡。
   ⚠️ 样式一律带 .foot-contact 前缀：.wx-copy 这个类名视频列表页/视频内容页也在用
   （那边的按钮是 .btn primary wx-copy），不加前缀会把它们的按钮改成通栏描边胶囊。 */
.foot-contact .wx-card {
    display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px;
    background: linear-gradient(145deg, rgba(231, 206, 134, .17), rgba(201, 162, 39, .06));
    border: 1px solid rgba(231, 206, 134, .34);
}
/* 只填了微信号、没传二维码：整块不居中留空，卡片转成纯文字块 */
.foot-contact .wx-card.no-qr { display: block; padding: 12px 14px; }
/* 只传了二维码、没填微信号：二维码居中 */
.foot-contact .wx-card.no-txt { justify-content: center; }

.foot-contact .wx-qr {
    flex: none; width: 96px; height: 96px; padding: 5px; border-radius: 10px;
    background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}
.foot-contact .wx-qr img { display: block; width: 100%; height: 100%; border-radius: 6px; background: #f4f1ec; object-fit: contain; }

.foot-contact .wx-body { flex: 1 1 auto; min-width: 0; }
.foot-contact .wx-body em { display: block; font-style: normal; font-size: 11.5px; color: #a89d92; letter-spacing: 1px; }
.foot-contact .wx-body b { display: block; margin: 1px 0 8px; font-size: 17px; color: var(--gold-l); letter-spacing: .4px; word-break: break-all; }

.foot-contact .wx-copy {
    display: block; width: 100%; cursor: pointer; font: inherit; font-size: 12.5px; line-height: 1.4;
    padding: 7px 10px; border-radius: 999px; color: var(--gold-l); text-align: center;
    border: 1px solid rgba(231, 206, 134, .45); background: rgba(255, 255, 255, .05); transition: .15s;
}
.foot-contact .wx-copy:hover { background: rgba(231, 206, 134, .18); }
.foot-contact .wx-copy.ok { color: #9fe0ac; border-color: rgba(120, 200, 140, .6); background: rgba(90, 190, 120, .14); }
/* 没有二维码时横向空间富余，复制按钮收成贴合文字的胶囊 */
.foot-contact .no-qr .wx-copy { display: inline-block; width: auto; padding: 7px 18px; }
.foot-contact .wx-tip { display: block; margin-top: 7px; font-size: 11px; line-height: 1.5; color: #8d837a; }

/* 模板栏目：一级栏目一行（固定），二级栏目另起一行用 · 内联横排。
   ⚠️ 一级 / 二级必须上下分行，不能用 flex 自动折行 ——
   「背景图片模板」的二级比「视频制作模板」的长，同一个列宽下前者折行、后者不折，
   同一列里出现「有的在第二行有的挤在第一行」的观感 bug。
   （手机端列宽够，例外改成并排一行，见 ≤480px 触摸那段。） */
.foot-cats { list-style: none; margin: 0; padding: 0; }
.foot-cats > li { display: block; margin-bottom: 9px; }
.foot-cats > li > a { color: #ded4c8; font-weight: 600; }
.foot-cats > li > a:hover { color: var(--gold-l); }
.foot-subs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 6px; margin-top: 2px; }
.foot-subs a { color: #8d837a; font-size: 12.5px; }
.foot-subs a:hover { color: var(--gold-l); }
.foot-subs i { font-style: normal; color: #6e6359; }

.foot-bottom { border-top: 1px solid #3b322c; margin-top: 22px; padding-top: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.foot-bottom p { margin: 0; color: #8d837a; font-size: 12.5px; }
/* 备案号链接：外观与普通文案一致，悬停加下划线提示可点 */
.foot-bottom p a { color: inherit; text-decoration: none; }
.foot-bottom p a:hover { text-decoration: underline; }

.to-top {
    position: fixed; right: 18px; bottom: 24px; z-index: 40; width: 42px; height: 42px;
    border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-2);
    box-shadow: var(--shadow); cursor: pointer; display: none; font-size: 16px;
}
.to-top.show { display: block; }

/* ---------------- 视频栏目（「视频制作」） ----------------
 * 视频卡片（栏目页与首页视频区共用）：16:9 封面 + 居中播放按钮 + 右下角时长；
 * 内容页：播放器铺满内容区，下面接视频说明与「联系客服定制」区块。
 * 视频不是可在线编辑的模板，所以卡片底部按钮是「查看视频」而不是「在线制作」——
 * 但卡片的骨架（封面 / 标题 / 编号 / 播放量 / 底部按钮）与模板卡保持一致。 */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.video-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--card); border: 1px solid #f3ece2; border-radius: var(--radius);
    box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s;
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.video-thumb {
    position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
    background: linear-gradient(145deg, #2c1a17, #4a2320);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 没有封面时的占位：深底金字，比空白块体面 */
.video-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 40px; color: var(--gold-l); opacity: .85; }
/* 播放按钮：纯 CSS 画的圆底三角，居中盖在封面上（悬停时放大并转成品牌红） */
.video-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(0, 0, 0, .45); border: 2px solid rgba(255, 255, 255, .85);
    transition: transform .18s, background .18s;
}
.video-play:after {
    content: ''; position: absolute; left: 20px; top: 15px;
    border-style: solid; border-width: 11px 0 11px 17px;
    border-color: transparent transparent transparent #fff;
}
.video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(179, 18, 27, .82); }
/* 时长角标（右下角） */
.video-time {
    position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px;
    background: rgba(0, 0, 0, .68); color: #fff; font-size: 12px; letter-spacing: .3px;
}
.video-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.video-info h2, .video-info h3 { font-size: 15px; margin: 0; line-height: 22px; }
/* 标题固定 2 行、简介固定 2 行，卡片高度整齐 */
.video-info h2 a, .video-info h3 a {
    color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-info h2 a:hover, .video-info h3 a:hover { color: var(--red); }
.video-info p {
    margin: 0; font-size: 13px; color: var(--ink-3);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; font-size: 12px; color: var(--ink-3); }
.video-meta .tag { padding: 2px 9px; border-radius: 999px; background: var(--red-l); color: var(--red-d); font-size: 12px; }
/* 视频编号：浅金描边胶囊，和栏目标签区分开；等宽数字更整齐 */
.video-meta .tag.code { background: #fbf6ea; color: #8a6d1f; border: 1px solid var(--gold-l); font-variant-numeric: tabular-nums; }
/* 列表卡片上的「视频编号 / 播放量 / 查看视频」——
   结构与 .tpl-code / .tpl-views / .tpl-btns 完全对齐，让视频卡片与「背景图片」这类横版模板卡
   共用同一套视觉（编号 / 浏览量的字号、颜色、负边距都照抄模板卡那三条）。 */
.video-info .video-code { margin: -4px 0 0; font-size: 12.5px; color: var(--ink-2); letter-spacing: .2px; font-variant-numeric: tabular-nums; }
.video-info .video-code b { color: var(--ink); font-weight: 600; }
.video-info .video-views { margin: -4px 0 0; font-size: 12px; color: var(--ink-3); }
/* 按钮压到卡片底部（同 .tpl-btns），一排卡片高度不齐时按钮也对齐 */
.video-info .video-btns { display: flex; gap: 8px; margin-top: auto; }
.video-count { margin: 6px 0 14px; font-size: 13.5px; color: var(--ink-3); }
.video-count b { color: var(--red); }

/* 搜索结果按「一级栏目」分板块：每块 = 一行小标题（栏目名 + 条数 + 右侧「查看全部」）+ 自己的网格。
   电子请柬走竖版网格（一排 6 个）、背景图片走横版（一排 3 个 16:9）、视频制作走视频网格。
   板块之间用一道细分隔线隔开；第一块紧跟搜索框，不再额外加线。 */
.search-sec { margin: 4px 0 34px; }
.search-sec + .search-sec { padding-top: 30px; border-top: 1px solid var(--line); }

/* 视频内容页 */
.video-detail {
    background: #fff; border: 1px solid #f3ece2; border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 24px; margin: 22px 0;
}
.video-head h1 { margin-bottom: 10px; }
.video-head .video-meta { margin-bottom: 12px; }
.video-lead { color: var(--ink-2); font-size: 14.5px; margin: 0; }
.video-stage {
    margin: 16px 0 0; border-radius: 12px; overflow: hidden; background: #1b1310;
    display: grid; place-items: center; min-height: 200px;
}
.video-player { display: block; width: 100%; max-height: 74vh; background: #1b1310; }
.video-cover-only { margin: 0; }
.video-cover-only img { width: 100%; }
.video-empty { color: #d8cfc6; padding: 40px 20px; margin: 0; }
.video-detail .panel { margin: 22px 0 0; }
.video-desc { border: 0; box-shadow: none; padding: 0; }

/* 视频内容页右侧推荐栏（与文章详情页的 .art-wrap 同一套栅格）：
   左＝视频播放区，右＝请柬模板推荐（竖图两列）+ 背景图模板推荐（竖排卡片单列）。
   整页宽度跟随站点 .wrap（1200），左侧播放器 16:9 约 790×444。
   ⚠️ 右栏与左列谁高由推荐条数决定（video.php：竖图 2 + 背景图 2 时右栏约 1020px，
   低于左列约 1130px）：整页是「[左列 | 右栏] 网格 + 网格外的整宽『更多视频』」，
   网格高度取两列较高者。align-items 用默认 stretch：某天右栏反超左列时，
   左列白色卡片会延伸到与右栏同底、把高差藏进卡内，而不是露一条裸空白。 */
.video-cols {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px; margin-top: 22px;
}
.video-cols-main { min-width: 0; display: flex; flex-direction: column; }
/* 侧栏一条推荐都没有（站里还没模板）时不留空列，让视频区占满整宽 */
.video-cols.is-solo { grid-template-columns: minmax(0, 1fr); }
/* .video-detail 自带 margin:22px 0，这里收掉上下边距：上沿与右栏同线、下沿与右栏同底；
   flex:1 让卡片拉伸填满列高 */
.video-cols-main .video-detail { margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.video-side .panel { margin: 0 0 18px; }
.video-side .panel:last-child { margin-bottom: 0; }
.video-side .panel > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.video-side .panel > h2 .more { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.video-side .panel > h2 .more:hover { color: var(--red); }
/* 背景图模板（横图）：竖排卡片——图在上、标题在下，**单列**排 2 条。
   取数条数在 controller/video.php（$sideLand）：3 条时右栏比左列高 150px+，
   左列下方被顶出一大块空白（用户实测反馈「空白太多」），已减到 2 条。 */
.side-land { display: grid; grid-template-columns: 1fr; gap: 8px; }
.side-land-card {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid #f3ece2; border-radius: var(--radius);
    overflow: hidden; transition: transform .18s, box-shadow .18s;
}
.side-land-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.side-land-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f6f2ec; }
.side-land-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-land-name {
    padding: 8px 12px 0; font-size: 13px; line-height: 19px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    color: var(--ink);   /* 标题与上面「请柬模板推荐」一样用黑色（卡片是 <a>，不放行链的红色） */
}
.side-land-card:hover .side-land-name { color: var(--red); }
.side-land-btn {
    margin: 6px 12px 10px; padding: 6px 0; text-align: center;
    font-size: 12.5px; color: var(--red); background: #fdf1ef; border-radius: 999px;
}
.side-land-card:hover .side-land-btn { background: var(--red); color: #fff; }
/* 「联系客服定制」区块：视频页的主转化点，用淡红底色与普通面板区分开 */
.video-cta { border-color: rgba(179, 18, 27, .22); background: linear-gradient(180deg, #fff 0%, #fff7f5 100%); }
.video-cta h2 { color: var(--red-d); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.cta-wx {
    display: inline-flex; flex-direction: column; padding: 8px 16px; border-radius: 11px;
    background: #fff; border: 1px dashed rgba(179, 18, 27, .32);
}
.cta-wx em { font-style: normal; font-size: 11.5px; color: var(--ink-3); letter-spacing: 1px; }
.cta-wx b { font-size: 17px; color: var(--red); word-break: break-all; }

/* ---------------- 首页栏目区块：电脑端 / 手机端各显示几条 ----------------
 * 后台「栏目管理」里每个栏目可分别设置两端调用条数；index.php 按两端较大的值取数，
 * 多出来的卡片打上 only-pc / only-mb，在这里隐藏。
 * 断点与下面的移动布局保持一致：触摸设备且 ≤1000px 视为手机端。
 * 用 display:none 隐藏（而不是服务端按 UA 判断），页面缓存只有一份、内链完整，
 * 且隐藏的卡片图片带 loading=lazy 不会被下载。 */
@media (max-width: 1000px) and (pointer: coarse) {
    .only-pc { display: none !important; }
}
@media (min-width: 1001px), (pointer: fine) {
    .only-mb { display: none !important; }
}

/* ---------------- 移动端 ----------------
 * 断点带 (pointer: coarse)：仅触摸设备进入移动布局。
 * 电脑端按 Ctrl+加号 放大页面时，视口 CSS 像素虽然变窄，
 * 但主指针仍是鼠标（pointer: fine），保持电脑端画面不变。 */
/* 页脚：视口变窄后挤成细长条，提前折行 ——
   品牌与「模板栏目」各占整行，「用户须知」与「微信客服卡」并排（客服卡贴右） */
@media (max-width: 1120px) {
    .foot-brand, .foot-cats-col { flex: 1 1 100%; }
    .foot-about { flex: 1 1 55%; }
    .foot-contact { margin-left: auto; }
}
@media (max-width: 1000px) and (pointer: coarse) {
    .grid { grid-template-columns: repeat(3, 1fr); }
    .grid-land { grid-template-columns: repeat(2, 1fr); }
    .search-sec { margin-bottom: 28px; }
    .search-sec + .search-sec { padding-top: 24px; }
    .detail { grid-template-columns: 300px 1fr; }
    .art-grid { grid-template-columns: repeat(2, 1fr); }
    .art-wrap { grid-template-columns: 1fr 260px; }
    .video-cols { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 900px) and (pointer: coarse) {
    /* 汉堡按钮：浅红圆角块，展开时自动变成 ✕
     * （样式只认 aria-expanded，site.js 已经在切换 class 时同步了它，无需再加 JS） */
    .nav-toggle {
        display: inline-flex; flex-direction: column; gap: 4px; margin-left: auto;
        background: var(--red-l); border: 0; padding: 11px 9px; cursor: pointer;
        border-radius: 11px;
    }
    .nav-toggle span {
        width: 20px; height: 2px; background: var(--red); border-radius: 2px;
        transition: transform .2s ease, opacity .2s ease;
    }
    .nav-toggle[aria-expanded="true"] { background: var(--red); }
    .nav-toggle[aria-expanded="true"] span { background: #fff; }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* 导航面板：贴着头部下沿滑出的圆角卡片（align-items:stretch 让每一项都撑满宽度） */
    .site-nav {
        position: absolute; left: 0; right: 0; top: 100%; margin: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--line);
        border-radius: 0 0 20px 20px;
        padding: 6px 16px 18px;
        box-shadow: 0 20px 38px rgba(90, 60, 30, .16);
        max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        display: none;
    }
    .site-nav.open { display: flex; animation: navDrop .2s ease-out; }
    @keyframes navDrop {
        from { opacity: 0; transform: translateY(-10px); }
        to   { opacity: 1; transform: none; }
    }
    /* 面板展开时抹掉头部那道分隔线，看起来是一整张卡片 */
    /* :has() 在老微信 X5 / 老 Android WebView 上整条丢弃 → 导航展开时头部底边框颜色不变，
     * 纯装饰效果，可接受；不引入 JS 兜底以免增加依赖 */
    .site-head:has(.site-nav.open) { border-bottom-color: transparent; }

    /* 首页 = 整行主按钮
     * 注意：这里用的是「.site-nav 的第一个直接子链接」——PHP（site_header.php）
     * 与三个静态镜像页里，导航的第一个子元素都是首页链接，结构一致。 */
    .site-nav > a:first-child {
        display: flex; align-items: center; justify-content: center;
        margin: 10px 0 2px; padding: 12px 16px; border-radius: 13px;
        background: linear-gradient(135deg, var(--red) 0%, var(--red-d) 100%);
        color: #fff; font-size: 15.5px; font-weight: 600;
        box-shadow: 0 8px 18px rgba(179, 18, 27, .26);
    }
    /* 当前就在首页：加一圈内描白边表示「当前」 */
    .site-nav > a:first-child.on {
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 8px 18px rgba(179, 18, 27, .26);
    }
    /* 页面型栏目（常见问题）= 次要描边按钮（它没有二级，就是普通链接） */
    .site-nav > a:not(:first-child) {
        display: flex; align-items: center; justify-content: center;
        margin: 10px 0 0; padding: 11px 16px; border-radius: 13px;
        border: 1px solid var(--line); background: #fff; color: var(--ink-2);
        font-size: 15px; font-weight: 500;
    }
    .site-nav > a:not(:first-child).on {
        border-color: rgba(179, 18, 27, .35); background: var(--red-l); color: var(--red);
    }

    /* 一级栏目 = 分组标题行：整行就是一级栏目页链接，右侧「全部 ›」；
     * 左侧一条红金渐变竖条做视觉锚点（::before 是 flex 首项，::after 靠 margin-left:auto 顶到右边） */
    .nav-item { position: static; width: 100%; }
    .nav-item > .nav-top {
        display: flex; align-items: center; gap: 8px;
        margin: 16px 0 8px; padding: 4px 2px; border-radius: 0;
        background: none; font-size: 15px; font-weight: 700; color: var(--ink);
    }
    .nav-item > .nav-top:before {
        content: ''; flex: 0 0 auto; width: 3px; height: 15px; border-radius: 2px;
        background: linear-gradient(180deg, var(--red) 0%, var(--gold) 100%);
    }
    .nav-item > .nav-top:after {
        content: '全部 ›'; margin-left: auto;
        font-size: 12.5px; font-weight: 400; color: var(--ink-3);
    }
    .nav-item.on > .nav-top,
    .nav-item > .nav-top.on {
        /* 必须显式盖掉桌面端那条「下拉项实心红底」的 .site-nav a.on 规则：
         * 它会直接落到分组标题行上、把整行刷成一条红杠。
         * 这里 .on 只表示「当前在这一栏」，只把文字变红（3 个类，权重盖得住）。 */
        background: none; color: var(--red);
    }
    /* 手机端没有悬停，也不是折叠面板，所以不需要 ▾ 小三角 */
    .nav-caret { display: none; }

    /* 二级栏目 = 胶囊标签横向排布（比原来的整块竖列表矮很多，也更好点）
     * 注意必须显式写回 flex-direction: row —— 桌面端那条 .nav-sub 是 column，
     * 不重置的话胶囊会被拉成一整行一个（chips 的「横排」全靠这一句）。 */
    .nav-sub {
        position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
        margin: 0; padding: 0; min-width: 0;
        background: none; border: 0; border-radius: 0; box-shadow: none;
    }
    .nav-sub:before { display: none; }
    .nav-sub a {
        padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
        background: var(--red-l); color: var(--red-d);
        border: 1px solid rgba(179, 18, 27, .1);
        transition: transform .12s ease;
    }
    .nav-sub a:active { transform: scale(.96); }
    /* 首页 / 常见问题两个整行按钮也加一点按压反馈 */
    .site-nav > a:first-child:active,
    .site-nav > a:not(:first-child):active { transform: scale(.985); }
    .nav-sub a:hover { background: var(--red-l); color: var(--red-d); }
    .nav-sub a.on {
        background: linear-gradient(135deg, var(--red) 0%, var(--red-d) 100%);
        color: #fff; border-color: transparent;
        box-shadow: 0 5px 12px rgba(179, 18, 27, .24);
    }

    .nav-search { margin: 18px 0 0; width: 100%; height: 42px; }
    .nav-search input { width: auto; flex: 1; }
    .hero { padding: 30px 0 36px; }
    .hero h1 { font-size: 22px; }
    .hero:after { font-size: 130px; top: -10px; }
    .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .grid-land { grid-template-columns: 1fr; }
    .search-sec { margin-bottom: 24px; }
    .search-sec + .search-sec { padding-top: 22px; }
    .cat-list { grid-template-columns: 1fr; }
    .detail { grid-template-columns: 1fr; gap: 18px; }
    .detail-preview { position: static; }
    .section { padding: 26px 0 4px; }
    /* 区块标题行：手机端「查看全部」改成与标题首行基线对齐（原来对齐到多行副标题的底部，
       看着像掉到下一行了），同时保持单行；左侧标题与副标题让出宽度后自然换行 */
    .section-head { align-items: baseline; gap: 10px; margin-bottom: 14px; }
    .section-head h2 { line-height: 1.35; }
    .section-head h2 small { font-size: 12.5px; line-height: 1.6; }
    .section-head .more { font-size: 13px; line-height: 1.4; }
    .panel { padding: 16px; }
    h1 { font-size: 21px; }
    /* 文章资讯：手机上侧栏落到正文下方，卡片两列 → 列表项改成上图下文 */
    .art-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .art-wrap { grid-template-columns: 1fr; gap: 16px; }
    .video-cols { grid-template-columns: 1fr; gap: 16px; }
    .video-cols-main .video-detail { margin-bottom: 0; }
    .art-row { grid-template-columns: 1fr; gap: 10px; }
    .art-row-thumb { aspect-ratio: 16 / 9; }
    .art-detail { padding: 16px 16px 18px; }
    .art-head h1 { font-size: 20px; }
    .art-content { font-size: 15px; line-height: 1.9; }
    .art-nav { flex-direction: column; }
    .art-nav .next { margin-left: 0; }
    /* 视频：卡片两列，内容页收窄留白，客服区块按钮占满整行更好点 */
    .video-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .video-detail { padding: 16px; }
    .video-head h1 { font-size: 20px; }
    .video-info { padding: 10px 12px 12px; }
    .cta-actions .btn { flex: 1 1 auto; }
}
/* 电脑端视口较窄（浏览器放大）时：导航允许换行收窄，避免横向溢出 */
@media (max-width: 900px) and (pointer: fine) {
    .head-inner { flex-wrap: wrap; gap: 8px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
    .site-nav { margin-left: 0; flex-wrap: wrap; }
    .site-nav a { padding: 6px 10px; font-size: 14px; }
    .nav-search { margin-left: 0; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .grid-land { grid-template-columns: repeat(2, 1fr); }
    .search-sec { margin-bottom: 26px; }
    .search-sec + .search-sec { padding-top: 24px; }
    .art-grid { grid-template-columns: repeat(2, 1fr); }
    .art-wrap { grid-template-columns: 1fr; }
    .art-row { grid-template-columns: 1fr; }
    .video-grid { grid-template-columns: repeat(2, 1fr); }
    .video-cols { grid-template-columns: 1fr; }
    .video-cols-main .video-detail { margin-bottom: 0; }
}
@media (max-width: 480px) and (pointer: coarse) {
    .tpl-info h3 { font-size: 14px; }
    .tpl-btns .btn { padding: 7px 10px; font-size: 13px; }
    .foot-col { flex: 1 1 100%; }
    .foot-contact { flex: 1 1 100%; margin: 0; }
    /* 手机上页脚纵向堆叠，客服卡提到「品牌」下方更靠前；
       电脑端同一张卡贴在页脚最右列（见 .foot-contact 的 width 定义）。 */
    .foot-brand { order: 1; }
    .foot-contact { order: 2; }
    .foot-cats-col { order: 3; }
    .foot-about { order: 4; }
    /* 手机端列宽 354px 够放下最长的「电子请柬模板 + 婚宴请柬图 · 乔迁请柬图 · 寿宴请柬图」（304px），
       所以例外地把一级与二级并排在同一行（电脑端列窄，仍保持上下两行）。 */
    .foot-cats > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
    .foot-subs { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: 0; }
}

/* ---------------- 视频内容页两栏：保证右栏永远比左列矮 ----------------
 * 左列高度跟着栏宽走（播放器 16:9，栏越窄视频越矮），右栏高度却是固定的，
 * 于是窗口越窄、左列越矮，右栏就反过来把网格外的「更多视频」整段顶下去，
 * 在左列下方留出一条空档（详见 .video-cols 上方的注释）。
 * 所以这里比通用断点更早地收窄侧栏（缩略图跟着变小 → 整栏变矮），再窄就直接并成一列 ——
 * 并成一列后右栏落到视频下方，高度不再影响「更多视频」的位置。
 * 本段放在样式表最后，确保覆盖上面 .art-wrap 那套通用断点。 */
@media (max-width: 1170px) {
    .video-cols { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 1024px) {
    .video-cols { grid-template-columns: 1fr; gap: 16px; }
    .video-cols-main .video-detail { margin-bottom: 0; }
    /* 并成一列后侧栏会占满整宽，卡片跟着容器等比放大 —— 请柬缩略图是 1044:2257，
       铺满一整行能有 1000px 高。所以两块面板横过来并排、请柬卡改三列，把尺寸压回原样。 */
    .video-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
    .video-side .panel { margin-bottom: 0; }
    .video-side .side-tpl { grid-template-columns: repeat(3, 1fr); }
}
/* 手机：宽度本来就窄，侧栏回到单列、请柬卡两列 */
@media (max-width: 640px) {
    .video-side { grid-template-columns: 1fr; }
    .video-side .side-tpl { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- L23 兼容回退（2026-11-03）：不支持 aspect-ratio 的老浏览器 ----------------
   Safari ≤14 / 旧 WebView 会把 aspect-ratio 当无效声明，缩略图容器失去比例（塌陷）。
   回退方案：::before padding-top 撑比例 + 图片绝对定位铺满（等效 object-fit: cover）；
   支持 aspect-ratio 的现代浏览器不进入 @supports not 分支，完全不受影响。 */
@supports not (aspect-ratio: 1 / 1) {
    .tpl-thumb, .grid-land .tpl-thumb, .side-tpl-thumb, .art-thumb, .art-row-thumb,
    .video-thumb, .side-land-thumb, .dtl-acard .athumb { position: relative; }
    .tpl-thumb::before, .side-tpl-thumb::before,
    .dtl-acard .athumb::before, .video-thumb::before, .side-land-thumb::before,
    .art-thumb::before, .art-row-thumb::before {
        content: ""; display: block; padding-top: 56.25%;   /* 16 / 9 兜底 */
    }
    .tpl-thumb::before, .side-tpl-thumb::before { padding-top: 216.09%; }  /* 1044 / 2257 */
    .grid-land .tpl-thumb::before { padding-top: 56.25%; }
    .art-thumb::before, .art-row-thumb::before { padding-top: 62.5%; }     /* 16 / 10 */
    .tpl-thumb img, .side-tpl-thumb img, .art-thumb img, .art-row-thumb img,
    .video-thumb img, .side-land-thumb img, .dtl-acard .athumb img {
        position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    }
    /* 手机端（≤900px 触屏）相关文章缩略图改 16:9，与主样式媒体查询保持同口径 */
    @media (max-width: 900px) and (pointer: coarse) {
        .art-row-thumb::before { padding-top: 56.25%; }
    }
}