/* =============================================================================
 * restore-blog.css —— Track 3 设计稿还原（blog / Journal 列表页）
 *   home.php 专属。独立文件，避免与其它还原单元改 components.css 互相覆盖。
 *
 * 基准：.stitch/designs/05-blog.html（Figma 画板 1440×3650）
 *   实测 ref 目标值（1440px，measure.mjs 口径）：
 *     页面区块  ① 页头 214   ② 筛选条 80   ③ 卡片栅格 1566
 *     卡片      403×503（图 250 = 16:10 / 正文 168 / 页脚 61），间距 28，3 栏
 *     精选大卡  1264×452（图 736 = 7/12），下边距 64
 *
 * 原则：只做增量。颜色/圆角/阴影一律用 tokens.css 的变量；断点用设计稿的
 *       lg(1024) / sm(640)，与主题既有 768/900 断点不冲突（都是 max-width）。
 * ========================================================================== */

/* ---------- ① 页头：左 8 栏文案 + 右 4 栏订阅小卡 ---------- */
/* 上方 56px 用 margin 而不是 padding：视觉间距与设计稿一致，但区块盒子高度
 * 只算「内容 + 下内边距」，与 ref 的 214px 对得上（ref 的 56px 在主容器上）。 */
.sv-journal__head{padding:0 0 42px;border-bottom:1px solid var(--sv-line);margin:56px 0 40px}
/* components.css 给 .sv-crumb 加了 24px 上内边距（服务其它页面的页头留白）。
   本页的 56px 已经由上面 margin 提供，这里必须清零，否则页头整体高 24px。 */
.sv-journal__head .sv-crumb{padding-top:0;margin-bottom:16px}
.sv-journal__headgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:end}
.sv-journal__headtext{grid-column:span 8}
.sv-journal__headtext h1{font-size:clamp(2.25rem,4.2vw,3.5rem);margin:0 0 16px}
.sv-journal__headtext .sv-lead{font-size:1.125rem;line-height:1.67;max-width:42rem;margin-bottom:0}
.sv-journal__sub{grid-column:span 4;background:var(--sv-white);border:1px solid var(--sv-line);
  border-radius:var(--sv-r-card);padding:16px;box-shadow:var(--sv-shadow-sm)}
.sv-journal__sub-eyebrow{display:block;font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sv-forest-500);margin-bottom:10px}
.sv-journal__subform{display:flex;gap:8px}
.sv-journal__subform .sv-input{min-height:42px;flex:1 1 auto}
.sv-journal__subform .sv-btn{min-height:42px;padding:0 16px;white-space:nowrap;flex:0 0 auto}

/* ---------- ② 分类筛选条 ---------- */
.sv-journal__filter{padding:16px 0 20px}
.sv-journal__filterrow{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.sv-journal__filter .sv-chips{flex:1 1 auto}
.sv-journal__count{margin-inline-start:2px;font-size:.8125rem;opacity:.72}
.sv-journal__sort{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--sv-ink-600)}
.sv-journal__sort .sv-input{width:auto;min-height:40px;padding:8px 30px 8px 12px}

/* ---------- ③ 精选大卡（7/5 双栏）---------- */
.sv-journal__featurewrap{margin-bottom:64px}
.sv-journal__feature{display:grid;grid-template-columns:7fr 5fr;background:var(--sv-white);
  border:1px solid var(--sv-line);border-radius:var(--sv-r-card);overflow:hidden;
  box-shadow:var(--sv-shadow-sm);transition:transform .25s var(--sv-ease),box-shadow .25s var(--sv-ease)}
.sv-journal__feature:hover{transform:translateY(-2px);box-shadow:var(--sv-shadow-md)}
.sv-journal__feature-media{position:relative;display:block;min-height:450px;background:var(--sv-forest-900)}
.sv-journal__feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-journal__badge{position:absolute;top:16px;left:16px;background:var(--sv-forest-700);color:var(--sv-white);
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--sv-r-pill)}
.sv-journal__feature-body{display:flex;flex-direction:column;justify-content:space-between;padding:40px}
.sv-journal__kicker{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sv-forest-500)}
.sv-journal__feature-title{font-size:clamp(1.4rem,2.2vw,1.85rem);line-height:1.25;margin:12px 0}
.sv-journal__feature-title a{color:inherit}
.sv-journal__feature-title a:hover{color:var(--sv-clay-500)}
.sv-journal__dek{margin:0;color:var(--sv-ink-600);font-size:.9375rem;line-height:1.6}
.sv-journal__feature .sv-journal__dek{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sv-journal__byline{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--sv-line)}
.sv-journal__avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;
  width:36px;height:36px;border-radius:50%;background:var(--sv-sand-200);color:var(--sv-forest-700);
  font-size:.75rem;font-weight:700;text-transform:uppercase}
.sv-journal__byline-text{display:flex;flex-direction:column;gap:2px;font-size:.875rem;min-width:0}
.sv-journal__byline-text .sv-post__meta{margin:0;font-size:.8125rem}
.sv-journal__byline-text em{font-style:normal}
.sv-journal__readlink{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;
  color:var(--sv-forest-700);font-weight:600;font-size:.875rem;white-space:nowrap}
.sv-journal__readlink:hover{color:var(--sv-clay-500)}

/* ---------- ④ 栅格小标题（section 之外，与设计稿同层次）---------- */
.sv-journal__gridhead{margin-bottom:32px}
.sv-journal__gridheadrow{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;
  justify-content:space-between;border-bottom:1px solid var(--sv-line);padding-bottom:16px}
.sv-journal__gridhead h3{font-size:clamp(1.15rem,1.6vw,1.4rem)}
.sv-journal__showing{font-size:.8125rem;color:var(--sv-ink-600)}

/* ---------- ⑤ 卡片栅格：3 栏 × 16:10 ---------- */
/* 设计稿内容列宽 1264（1440 − 2×48），栅格间距 28 → 卡片 402.67 宽，与 ref 逐像素对齐。
 * 只在本页/本横幅内覆盖；不动 theme.css 的 .sv-container（其它页面照旧）。 */
.sv-journal__gridwrap{padding:0}
.sv-journal__grid{row-gap:28px;column-gap:28px}
@media(min-width:1025px){
  .sv-journal .sv-container,.sv-newsband .sv-container{padding-inline:48px}
}
.sv-journal__card{display:flex;flex-direction:column;overflow:hidden}
.sv-journal__card .sv-post__media{position:relative;aspect-ratio:16/10}
.sv-journal__card .sv-post__body{display:flex;flex-direction:column;flex:1 1 auto;padding:24px 24px 8px}
.sv-journal__card .sv-post__body h4{margin:0 0 10px;font-size:1.125rem;line-height:1.45}
.sv-journal__card .sv-journal__dek{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:18px;font-size:.9375rem;line-height:1.5}
.sv-journal__tag{position:absolute;top:12px;left:12px;background:var(--sv-sand-200);color:var(--sv-forest-700);
  border-color:transparent;text-transform:uppercase;font-size:.6875rem;letter-spacing:.12em}
/* 页脚行：分隔线横跨整张卡（设计稿如此）。foot 在 .sv-post__body 内，
   用负外边距抵掉正文的 24px 内边距，再用同值内边距把内容放回原位。 */
.sv-journal__foot{display:flex;align-items:center;gap:10px;margin:auto -24px -8px;
  padding:14px 24px 16px;border-top:1px solid var(--sv-line)}
.sv-journal__foot .sv-post__meta{margin:0;font-size:.8125rem}
.sv-journal__foot .sv-journal__avatar{flex:0 0 30px;width:30px;height:30px;font-size:.6875rem}

/* ---------- ⑥ 分页 / 加载更多（section 之外）---------- */
.sv-journal__morewrap{margin-top:56px}
.sv-journal__more{display:flex;flex-direction:column;align-items:center;gap:8px}
.sv-journal__morebtn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 32px;
  border:1px solid var(--sv-forest-700);border-radius:var(--sv-r-btn);background:var(--sv-white);
  color:var(--sv-forest-700);font-weight:600;font-size:.9375rem;transition:background-color .2s var(--sv-ease)}
.sv-journal__morebtn:hover{background:var(--sv-sand-200)}
.sv-journal__more .sv-pager{margin-top:16px}

/* ---------- ⑦ 订阅横幅（<main> 之外）---------- */
.sv-newsband{background:var(--sv-sand-200);border-top:1px solid var(--sv-line);border-bottom:1px solid var(--sv-line);padding:64px 0}
.sv-newsband__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:40px;align-items:center}
.sv-newsband__text{grid-column:span 7}
.sv-newsband__text h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:8px 0 12px}
.sv-newsband__text p{margin:0;color:var(--sv-ink-600);max-width:52ch}
.sv-newsband__form{grid-column:span 5}
.sv-newsband__row{display:flex;gap:8px}
.sv-newsband__row .sv-input{flex:1 1 auto}
.sv-newsband__row .sv-btn{flex:0 0 auto;white-space:nowrap}
.sv-newsband__note{margin:12px 0 0;font-size:.8125rem;color:var(--sv-ink-600)}

/* ---------- 响应式（对齐设计稿 lg / sm 两档）---------- */
@media(max-width:1024px){
  .sv-journal__head{margin-top:40px}
  .sv-journal__headgrid,.sv-newsband__grid{grid-template-columns:1fr;gap:24px}
  .sv-journal__headtext,.sv-journal__sub,.sv-newsband__text,.sv-newsband__form{grid-column:1/-1}
  .sv-journal__feature{grid-template-columns:1fr}
  .sv-journal__feature-media{min-height:320px}
  .sv-journal__feature-body{padding:28px}
  .sv-journal__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .sv-journal__head{margin-top:32px}
  .sv-journal__filterrow{flex-direction:column;align-items:stretch}
  .sv-journal__sort .sv-input{width:100%}
  .sv-journal__subform,.sv-newsband__row{flex-direction:column}
  .sv-journal__byline{flex-wrap:wrap;row-gap:10px}
  .sv-journal__readlink{margin-inline-start:0}
  .sv-journal__grid{grid-template-columns:1fr}
  .sv-newsband{padding:48px 0}
}

/* ---------- RTL（阿拉伯语 / 希伯来语）：角标镜像到右上 ----------
 * 注意不能只写 inset-inline-end —— 本文件里显式的 left 不会被覆盖，
 * 两者同时生效会把角标横向拉伸（实测 133px 的标签被拉成 377px）。
 * 所以这里显式把 left 关掉。 */
[dir="rtl"] .sv-journal__tag,
[dir="rtl"] .sv-journal__badge{left:auto;right:12px}
[dir="rtl"] .sv-journal__badge{right:16px}
[dir="rtl"] .sv-journal__readlink{margin-inline-start:0;margin-inline-end:auto}
[dir="rtl"] .sv-journal__foot .sv-post__meta{direction:rtl}