/* ================================================================
   表情包 — 列表页（不分页全量渲染）
   对应模板：content/memes.html
   布局与全站统一：.main-wrapper > .content + .sidebar（common.css 提供容器与 widget 样式）
   变量体系与 common.css 保持一致
   ================================================================ */

/* ===== Page Header =====
   .page-header / .page-title / .page-subtitle 已收敛至 common.css
   「Page Header 组件」区段（与 it-jokes、page.css 三处同款复制一并去重），
   本文件只保留 .meme-hero 系列差异化涂鸦样式。 ===== */

/* ===== Category Chips（与 it-jokes 同款语言） ===== */
.meme-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-8);
    padding: var(--space-12);
    margin-bottom: var(--space-24);
    box-shadow: var(--shadow-sm);
}
.meme-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(93, 151, 67, 0.22);
    color: var(--text-secondary);
    font-size: var(--fs-13);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.meme-cat-chip:hover {
    transform: translateY(-1px);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.meme-cat-chip.active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--text-light);
    box-shadow: 0 6px 16px rgba(93, 151, 67, 0.30);
}
.meme-cat-chip.active:hover {
    border-color: transparent;
    color: var(--text-light);
}
.meme-cat-chip.active .meme-cat-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.meme-cat-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.10);
    font-size: var(--fs-11);
    line-height: 16px;
    text-align: center;
    color: var(--primary-dark);
}

/* ===== Meme Grid（瀑布流：CSS columns 按列纵向填充，卡片高度随图片比例自适应） ===== */
.meme-grid {
    columns: 5 160px;
    column-gap: var(--space-16);
    margin-bottom: var(--space-24);
}
.meme-card {
    /* 瀑布流关键：卡片块级化 + 防跨列断裂，高度由图片比例自然撑开 */
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-12);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.meme-card:hover,
.meme-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.45);
    box-shadow: var(--shadow-md);
    outline: none;
}
.meme-thumb {
    position: relative;
    overflow: hidden;
    background:
        repeating-conic-gradient(rgba(0, 0, 0, 0.04) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}
.meme-img {
    /* 瀑布流：宽度撑满卡片，高度随图片比例自适应，形成参差瀑布效果 */
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.25s ease;
}
.meme-card:hover .meme-img {
    transform: scale(1.06);
}
/* ===== 图片预览（Viewer.js 全屏灯箱，见 dep/viewer + viewer-memes.css） =====
   点击网格图片即弹出全屏预览：Viewer.js 按视口计算图片实际尺寸并以
   flex/absolute 居中于整屏，切换图片时自动按新图大小重新计算，
   不再依赖任何手写灯箱 DOM 与尺寸规则。
   本页仅保留打开预览必要的交互钩子（网格点击 + 卡片键盘聚焦），
   具体样式与行为由插件承载。
   ===== */

/* ===== Empty State ===== */
.meme-empty {
    text-align: center;
    padding: 60px 0;
}
.meme-empty-icon {
    font-size: 40px;
    margin-bottom: var(--space-16);
}
.meme-empty-title {
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-8);
}
.meme-empty-desc {
    font-size: var(--fs-13);
    color: var(--text-muted);
}

/* ===== Sidebar Widgets ===== */
.meme-stats {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-6);
    padding: 6px 0;
}
.meme-stats-num {
    font-size: var(--fs-28);
    font-weight: 800;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}
.meme-stats-label {
    font-size: var(--fs-12);
    color: var(--text-muted);
}
.meme-tips {
    margin: 0; padding-left: var(--space-16);
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    /* .page-header 的窄屏内边距由 common.css 的 ≤767px 规则统一提供 */
    .meme-grid {
        columns: 3 96px;
        column-gap: var(--space-10);
    }
    .meme-card {
        margin-bottom: var(--space-10);
    }
}

/* ===== 网格图片可见性兜底 =====
   common.css 有 .js-ready img[loading="lazy"]{opacity:0}（脚本就绪后由 common.js 打 img-loaded 淡入）；
   common.js 首屏扫描能覆盖到 SSR 全量渲染的本页图片，但为防脚本时序竞态，
   这里对表情包网格图片显式兜底，确保任何情况下缩略图都可见可点。 */
.meme-grid img.meme-img {
    opacity: 1 !important;
}


/* ===== Meme Hero（贴纸漫画风头部：贴纸描边标题 + 对话气泡标语） ===== */
.meme-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 130% at 12% 0%, rgba(93, 151, 67, 0.14), transparent 55%),
        radial-gradient(90% 130% at 88% 100%, rgba(255, 138, 168, 0.13), transparent 55%),
        repeating-linear-gradient(45deg, rgba(93, 151, 67, 0.05) 0 12px, transparent 12px 24px),
        rgba(255, 255, 255, 0.7);
}
/* 漂浮 emoji 贴纸：描边 + 微倾斜 + 缓慢上下浮动 */
.meme-hero-deco {
    position: absolute;
    display: inline-block;
    font-size: var(--fs-24);
    line-height: 1;
    transform: rotate(var(--r, 0deg));
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.16));
    opacity: 0.9;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    animation: meme-hero-float 5s ease-in-out infinite;
}
@keyframes meme-hero-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -9px; }
}
/* 主标题贴纸字：白底 + 深描边 + 底部硬阴影，右上压一枚倾斜红章点缀 */
.meme-hero-title {
    display: inline-block;
    position: relative;
    font-size: var(--fs-h1);
    color: #2c3a26;
    text-shadow:
        -1px -1px 0 #fff, 1px -1px 0 #fff,
        -1px 1px 0 #fff, 1px 1px 0 #fff,
        -2px 0 0 #fff, 2px 0 0 #fff,
        0 -2px 0 #fff, 0 2px 0 #fff,
        3px 4px 0 rgba(44, 58, 38, 0.28);
    letter-spacing: 2px;
}
.meme-hero-title::after {
    content: "斗图必胜";
    position: absolute;
    top: -0.7em;
    right: -2.6em;
    font-family: "lxgw-wenkai-gb", var(--font-kai);
    font-size: 0.28em;
    font-weight: 700;
    letter-spacing: 1px;
    color: #e5533d;
    border: 2px solid #e5533d;
    border-radius: var(--radius-6);
    padding: var(--space-2) var(--space-6);
    transform: rotate(12deg);
    opacity: 0.85;
    box-shadow: inset 0 0 6px rgba(229, 83, 61, 0.25);
}
/* 标语对话气泡：圆角 + 尾巴，荧光笔划重点三连 */
.meme-hero-slogan {
    position: relative;
    display: inline-block;
    margin-top: var(--space-8);
    padding: var(--space-12) var(--space-20);
    font-family: "lxgw-wenkai-gb", var(--font-kai);
    font-size: var(--fs-15);
    font-weight: 600;
    color: #3a4733;
    background: #fffdf5;
    border: 2px solid #2c3a26;
    border-radius: var(--radius-16);
    box-shadow: 3px 4px 0 rgba(44, 58, 38, 0.22);
    transform: rotate(-0.6deg);
}
.meme-hero-slogan::after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 50%;
    width: 18px;
    height: 18px;
    background: inherit;
    border-right: 2px solid #2c3a26;
    border-bottom: 2px solid #2c3a26;
    border-bottom-right-radius: 5px;
    transform: translateX(-50%) rotate(45deg);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 0 62%);
}
.slogan-emoji {
    margin-right: var(--space-4);
    font-size: 1.15em;
    vertical-align: -0.08em;
}
/* 荧光笔划重点：色块斜切衬底，随主题不变（自带白底可读） */
.slogan-mark {
    position: relative;
    padding: 0 2px;
    font-style: normal;
    color: #2c3a26;
}
.slogan-mark::before {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 1px;
    height: 0.62em;
    border-radius: var(--radius-2);
    z-index: -1;
    transform: skewX(-8deg);
}
.slogan-mark--green::before { background: rgba(122, 184, 94, 0.5); }
.slogan-mark--pink::before { background: rgba(255, 138, 168, 0.5); }
.slogan-mark--yellow::before { background: rgba(255, 209, 102, 0.62); }

@media (max-width: 600px) {
    .meme-hero-deco { font-size: var(--fs-20); }
    .meme-hero-title::after { right: -1.6em; padding: 1px var(--space-4); }
    .meme-hero-slogan { padding: var(--space-10) var(--space-12); font-size: var(--fs-13); }
}

/* ===== Category Chips 贴纸化：微倾斜散落感，hover 弹跳摆正 ===== */
.meme-cat-chip {
    font-family: "lxgw-wenkai-gb", var(--font-kai);
    transform: rotate(var(--tilt, 0deg));
}
.meme-cat-chip:nth-child(odd) { --tilt: -1.2deg; }
.meme-cat-chip:nth-child(even) { --tilt: 1.4deg; }
.meme-cat-chip:hover,
.meme-cat-chip.active {
    transform: rotate(0deg) translateY(-2px) scale(1.04);
}
/* ===== 滚动懒加载（data-src 占位图 → 真实图） =====
   视口外卡片输出 1x1 占位图 + data-src，进入视口前由 memes.js 换真实地址。
   未加载时留一段最小高度占位，避免 CSS columns 瀑布流因卡片塌陷抖动；
   真实图加载完成打 .img-loaded 淡入，观感与全站图片淡入一致。

   兼容性：占位高度原先写在 .meme-thumb:has(> img.meme-lazy:not(.img-loaded)) 上，
   :has() 直到 Firefox 121（2023-12）才支持，旧版 Firefox/Safari 整条规则会被丢弃，
   瀑布流在图片陆续加载时反复回跳。改写到 img 自身（只用 :not()，全浏览器可用），
   版式效果一致：img 撑起 120px，thumb 随之有高度。 */
.meme-lazy:not(.img-loaded) {
    min-height: 120px;
}
/* 未加载时藏住 1x1 占位图，加载完成再淡入真实图。
   选择器必须与上方 .meme-grid img.meme-img 同为 (0,2,1) 且声明在后，才能压过它的
   !important（原 .meme-lazy (0,1,0) 会输，占位图藏不住、淡入也看不到）；
   .img-loaded 需再高一档 (0,3,1)，否则又会被下面的隐藏规则压回去。 */
.meme-grid img.meme-lazy {
    opacity: 0 !important;
    transition: opacity 0.4s ease;
}
.meme-grid img.meme-lazy.img-loaded {
    opacity: 1 !important;
}
/* 减弱动画偏好下不播淡入，加载后直接显示 */
@media (prefers-reduced-motion: reduce) {
    .meme-grid img.meme-lazy {
        transition: none;
        opacity: 1 !important;
    }
}