/* item.css —— 新闻条目：标题主链接、正文、焦点条目的加重处理。 */

/* ==========================================================================
   新闻条目
   ========================================================================== */

.item {
  padding: 17px 0;
  border-bottom: 1px solid var(--rule-2);
}
.item:last-child { border-bottom: 0; }

.item-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 7px;
}

/* 标题可收缩，徽章稳定居右 —— 徽章掉到标题下方会显得孤立 */
.item h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  flex: 1 1 auto;
  min-width: 0;
}
.item h3 a {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .22s var(--ease);
}
.item h3 a:hover { background-size: 100% 1px; }
.item h3 .ext {
  width: 11px;
  height: 11px;
  margin-left: 5px;
  color: var(--ink-3);
  display: inline-block;
  vertical-align: 1px;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.item h3 a:hover .ext { opacity: 1; }

.item-body {
  font-size: .93rem;
  line-height: 1.78;
  color: var(--ink-2);
  max-width: 44em;
}

/* 焦点条目：多给一点分量，但不做成卡片 */
.item-lead { padding: 22px 0; }
.item-lead h3 { font-size: 1.26rem; }
.item-lead .item-body { color: var(--ink); font-size: .95rem; }

/* 跳转落点的高亮。跳过去之后闪一下，让人知道"就是这一条"，
   否则长页面里容易失去焦点。 */
.item.flash {
  animation: flash-target 1.7s var(--ease);
}

@keyframes flash-target {
  0%, 22% { background: color-mix(in srgb, var(--moved) 13%, transparent); }
  100% { background: transparent; }
}

.item.flash h3 a {
  background-size: 100% 1px;
}

/* ── 配图 ─────────────────────────────────────────────
   普通条目：缩略图在右侧，正文占左侧。
   焦点条目：图在上方通栏（它本来就是页面最重的那一条）。
   没有 image 字段时完全不进这些规则，布局与从前一致。 */

.item-main { min-width: 0; }

.item.has-image {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.item.has-image .item-figure {
  flex: none;
  width: 300px;      /* 3:2 → 300×200。主栏加宽到 820 后，配图同步放大
                       （原来 244px 在新栏宽下显得太小） */
  margin: 0;
}

.item.has-image .item-main { flex: 1 1 auto; }

/* 3:2 —— Reuters 与 AP 都用这个比例（实测 757×504、472×314）。
   比 16:9 更高，图片更有存在感，也更接近新闻摄影的常规画幅。 */
.item-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--sunken);
  aspect-ratio: 3 / 2;
}

.item-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 图片来源署名。压在图角上，不占版面。 */
.item-figure .img-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: .62rem;
  line-height: 1.6;
  color: #fff;
  background: rgba(20, 22, 24, .55);
  padding: 0 5px;
  border-radius: 3px 0 0 0;
  pointer-events: none;
}

/* 焦点条目：图通栏在上。
   选择器必须带 .has-image —— 否则类数少于上面的
   `.item.has-image .item-figure`（3 个类），优先不过它，图会被压成缩略图。 */
.item-lead.has-image {
  display: block;
}

/* 焦点条目的图：通栏大图。
   Reuters 的 lead 图 757×504、约占栏宽的 62%，这里给到满栏 ——
   手机与宽屏下都比它更突出，因为我们的正文栏本来就窄（680px）。 */
.item-lead.has-image .item-figure {
  width: 100%;
  margin-bottom: 18px;
  aspect-ratio: 3 / 2;
}

/* 焦点标题再大一号，让它压得住下面那张图 */
.item-lead h3 { font-size: 1.34rem; }

/* 配图存在时，焦点条目的正文限制行宽 —— 图上标题下满行会显得散 */
.item-lead.has-image .item-body { max-width: none; }

@media (max-width: 860px) {
  .item-figure { aspect-ratio: 4 / 3; }

  /* 窄屏：图浮在左上角，正文绕到它的右侧与下方 —— 半包围。
     焦点条目（.item-lead）除外，它的图仍是顶部通栏大图。 */
  .item.has-image:not(.item-lead) { display: block; }
  /* 关键：标题行去掉 flex，否则它会作为独立 BFC 整块被挤到图右侧，
     与正文错位。改回 block 后，标题与正文在同一上下文里一起绕排浮动图。 */
  .item.has-image:not(.item-lead) .item-head { display: block; }
  .item.has-image:not(.item-lead) .item-figure {
    float: left;
    width: 44%;
    margin: 4px 15px 8px 0;
  }
  .item.has-image:not(.item-lead) .item-main { min-width: 0; }
  /* 清除浮动，避免正文不足时图溢出到下一条 */
  .item.has-image:not(.item-lead)::after { content: ""; display: table; clear: both; }
}