/**
 * content-media.css — 二级内容页（blog / how / project）的视觉媒体样式。
 * 仅由这些页面的局部 styles section 加载。
 * 不写全局 img / figure / body / .container 选择器，不改 main.css，
 * 因此首页不会因共享 CSS mtime 变化而改变资源 URL。
 * 只用现有设计 token：--bg --surface --ink --muted --subtle --line --line-strong --accent --accent-soft。
 */

/* ---- 通用响应式内容图 ---- */
.content-media {
    margin: 0;
    line-height: 0;
}
.content-media__image {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface);
    object-fit: cover;
}
.content-media__caption {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--subtle);
    text-align: center;
}

/* ---- 博客列表卡片封面缩略图 ---- */
/* 固定 1200:630（≈40:21）比例，图片填满并裁切，卡片自身 overflow-hidden 负责圆角 */
.blog-card__media {
    display: block;
    aspect-ratio: 40 / 21;
    overflow: hidden;
    background: var(--bg);
    line-height: 0;
}
.blog-card__media .content-media {
    height: 100%;
}
.blog-card__cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    background: var(--bg);
}

/* ---- 博客文章 hero 封面 ---- */
.blog-hero {
    margin: 0 0 32px;
}
.blog-hero__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 40 / 21;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface);
}

/* ---- How 步骤截图 ---- */
.how-figure {
    margin: 16px 0 0;
    max-width: 720px;
}
.how-figure .content-media__image {
    border-radius: var(--radius-lg, 12px);
}

/* ---- 工具页产物示例图（#tool 与 #features 之间） ---- */
.tool-showcase {
    margin: 0 auto;
}
.tool-showcase .content-media__image {
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

/* ---- 卡片内封面缩略图（首页博客卡 / 工具页相关阅读卡） ---- */
.related-card__media {
    display: block;
    aspect-ratio: 40 / 21;
    overflow: hidden;
    border-radius: var(--radius-sm, 4px);
    margin-bottom: 12px;
    background: var(--bg);
    line-height: 0;
}
.related-card__media .content-media {
    height: 100%;
}
.related-card__cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    background: var(--bg);
}

/* 静态内容图无 entrance / hover 漂浮；reduced-motion 也无非必要位移 */
@media (prefers-reduced-motion: reduce) {
    .content-media__image { transition: none; }
}

/* ---- 浏览器本地处理流程图（project 页与首页共用；project 局部样式与此一致） ---- */
.browser-flow { margin: 8px 0 0; }
.browser-flow__svg { display: block; width: 100%; max-width: 660px; height: auto; margin: 0 auto; }