/* 文章内图文推荐：本地原生图片、两列卡片与清晰的操作按钮。 */
.journal .prose .article-recommend-grid{--recommend-bg:#fff;--recommend-media:#f0f2f4;--recommend-line:#d9dfe3;--recommend-copy:#535b65;--recommend-accent:#087d89;--recommend-soft:#e8f5f6;--recommend-button:#087d89;--recommend-button-text:#fff;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0 32px;padding:0;list-style:none}
:root.dark .journal .prose .article-recommend-grid{--recommend-bg:#1b1b1f;--recommend-media:#212227;--recommend-line:#3c3e46;--recommend-copy:#c4c5cc;--recommend-accent:#8cced6;--recommend-soft:#304b50;--recommend-button:#8cced6;--recommend-button-text:#16363a}
.journal .prose .article-recommend-card{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:1px solid var(--recommend-line);border-radius:9px;background:var(--recommend-bg);overflow:hidden;box-shadow:none;transition:border-color .18s ease}
.journal .prose .article-recommend-card:hover,.journal .prose .article-recommend-card:focus-within{border-color:var(--recommend-accent)}
.journal .prose .article-recommend-media{position:relative;aspect-ratio:16/9;flex:none;background:var(--recommend-media);overflow:hidden}
.journal .prose .article-recommend-media>a{display:block;width:100%;height:100%;margin:0;padding:0}
.journal .prose .article-recommend-media img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center;margin:0;border:0;border-radius:0}
.journal .prose .article-recommend-media img:focus-visible{outline:3px solid var(--recommend-accent);outline-offset:-4px}
.journal .prose .article-recommend-media.image-unavailable img{visibility:hidden}
.article-recommend-image-error{position:absolute;inset:0;display:grid;place-items:center;padding:20px;color:var(--recommend-copy);font-size:14px}
.article-recommend-image-error[hidden]{display:none}
.journal .prose .article-recommend-copy{display:flex;flex-direction:column;flex:1;min-width:0;padding:14px}
.journal .prose .article-recommend-heading{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px 10px;margin-bottom:9px}
.journal .prose .article-recommend-heading :is(h2,h3,h4,h5,h6){flex:1 1 150px;min-width:0;margin:0;font-size:20px;font-weight:600;line-height:1.4;color:var(--text);overflow-wrap:anywhere}
.journal .prose .article-recommend-heading a{color:inherit;text-decoration:none}
.journal .prose .article-recommend-price{display:inline-block;max-width:100%;padding:2px 8px;border:1px solid color-mix(in srgb,var(--recommend-accent) 40%,transparent);border-radius:20px;background:var(--recommend-soft);color:var(--recommend-accent);font-size:12px;font-weight:600;line-height:20px;overflow-wrap:anywhere}
.journal .prose .article-recommend-body{min-width:0;color:var(--recommend-copy);font-size:14px;line-height:1.75;overflow-wrap:anywhere}
.journal .prose .article-recommend-body>p{margin:0 0 10px}
.journal .prose .article-recommend-body>:last-child{margin-bottom:0}
.journal .prose .article-recommend-body a{color:var(--recommend-accent)}
.journal .prose .article-recommend-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.journal .prose .article-recommend-tags>span{max-width:100%;padding:1px 8px;border:1px solid var(--recommend-line);border-radius:20px;color:var(--recommend-copy);font-size:12px;line-height:20px;overflow-wrap:anywhere}
.journal .prose .article-recommend-actions{display:flex;gap:9px;margin-top:auto;padding-top:16px}
.journal .prose .article-recommend-actions>a{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;min-width:0;min-height:38px;margin:0;padding:7px 10px;border:1px solid var(--recommend-line);border-radius:6px;font-size:14px;font-weight:600;line-height:1.5;text-align:center;text-decoration:none;overflow-wrap:anywhere}
.journal .prose .article-recommend-actions>.recommend-primary{background:var(--recommend-button);border-color:var(--recommend-button);color:var(--recommend-button-text)}
.journal .prose .article-recommend-actions>.recommend-secondary{background:var(--recommend-media);color:var(--text)}
.journal .prose .article-recommend-actions>a:hover{border-color:var(--recommend-accent);text-decoration:underline;text-underline-offset:3px}
.journal .prose .article-recommend-actions>.recommend-external::after{content:"↗";font-size:12px}
@media(max-width:640px){.journal .prose .article-recommend-grid{grid-template-columns:minmax(0,1fr);gap:18px}.journal .prose .article-recommend-heading :is(h2,h3,h4,h5,h6){font-size:20px}}
@media(prefers-reduced-motion:reduce){.journal .prose .article-recommend-card{transition:none}}