/* Photos and Videos collection and detail pages. */
.media-showcase {
  /* 20260929 按客户要求黑框下方卡片整体上移一些:上边距 clamp(42px,5vw,76px)→
     clamp(20px,2.5vw,40px)(1920 实测 76→40px,卡片整体上移 36px,各档约减半)。 */
  margin: clamp(20px, 2.5vw, 40px) auto 0;
  /* 20260929 对齐黑框宽度:上限 1615→1800(与 hero 同款,容器 1752@1920 内不截宽) */
  max-width: 1800px;
  width: 100%;
}

.media-showcase-heading {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  margin-bottom: clamp(22px, 3vw, 38px);
}

.media-showcase-heading h2 {
  color: var(--ink);
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.08;
  margin: 0;
}

.media-showcase-heading span {
  background: var(--yellow-strong);
  flex: 1;
  height: 6px;
  margin-bottom: 7px;
}

.media-showcase-grid {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.media-showcase-card {
  background: #fff;
  border-radius: 4px;
  min-width: 0;
  overflow: hidden;
}

.media-showcase-link {
  color: var(--ink);
  display: block;
  height: 100%;
  text-decoration: none;
}

.media-showcase-image {
  aspect-ratio: 16 / 10;
  background: #e9edf0;
  display: block;
  overflow: hidden;
  position: relative;
}

.media-showcase-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
  width: 100%;
}

.media-showcase-link:hover .media-showcase-image img,
.media-showcase-link:focus-visible .media-showcase-image img {
  transform: scale(1.025);
}

.media-showcase-link:focus-visible {
  box-shadow: 0 0 0 4px var(--yellow-strong);
  outline: 0;
}

.media-play-icon {
  background: var(--yellow-strong);
  border-radius: 50%;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .28);
  display: none;
  height: 64px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
}

.media-play-icon::after {
  border-bottom: 10px solid transparent;
  border-left: 16px solid #111820;
  border-top: 10px solid transparent;
  content: "";
  left: 26px;
  position: absolute;
  top: 22px;
}

.media-showcase-copy {
  display: block;
  padding: 22px 24px 26px;
}

.media-type-label {
  color: #65727d;
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.media-showcase-copy strong {
  color: var(--ink);
  display: block;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.media-summary {
  color: #4c5964;
  display: -webkit-box;
  font-size: 16px;
  line-height: 1.55;
  margin-top: 12px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.media-view-link {
  color: var(--ink);
  display: inline-block;
  font-size: 14px;
  font-weight: 900;
  margin-top: 18px;
  padding-bottom: 3px;
  border-bottom: 3px solid var(--yellow-strong);
}

.media-empty-notice {
  background: #fff;
  border-left: 7px solid var(--yellow-strong);
  color: #485661;
  display: grid;
  font-size: 16px;
  gap: 7px;
  line-height: 1.55;
  padding: 30px 34px;
}

.media-empty-notice strong {
  color: var(--ink);
  font-size: 21px;
}

.media-detail-page {
  margin: 0 auto;
  max-width: 1615px;
  padding: 0 clamp(18px, 4vw, 72px) clamp(54px, 7vw, 100px);
}

.media-detail-breadcrumb {
  /* 复用列表页 .breadcrumb 的白底圆角卡片样式(见 client-preview CSS)。
     关键:让详情页面包屑脱离 .media-detail-page 容器的宽度约束(它为文章可读性把内容
     限制在 max-width:1615px + 左右 padding clamp(18px,4vw,72px))。详情页面包屑补上
     「列表页水平内缩 − 详情页容器 padding」的差值,使其宽度与左右位置与列表页逐像素一致。
       列表页水平内缩 = standalone-page 的 clamp(10px,1.8vw,28px) + section.cases 的 clamp(18px,5vw,56px)
     在 >1615px 屏宽下,详情页容器因 max-width 居中、列表页仍贴满视口,二者左缘本就不可能对齐
     (属容器结构差异,非面包屑样式问题),此处只保证 ≤1615px 常见屏宽完全一致。 */
  margin: 24px calc(clamp(10px, 1.8vw, 28px) + clamp(18px, 5vw, 56px) - clamp(18px, 4vw, 72px)) 28px;
  /* 分类导航单行展示:面包屑(Home / Photos and Videos / 标题)强制一行不折行,
     超长的标题以省略号截断,不再撑到第二行。 */
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

.media-detail-breadcrumb strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 详情页最后一项是可点击的「Photos and Videos」返回链接,
   覆盖 .breadcrumb a:last-of-type 的 pointer-events:none。 */
.media-detail-breadcrumb a:last-of-type {
  cursor: pointer;
  pointer-events: auto;
}

.media-detail-breadcrumb a:last-of-type:hover {
  color: var(--yellow-strong);
}

.media-detail-article {
  margin: 0 auto;
  max-width: 1240px;
}

.media-detail-header {
  margin: 0 auto clamp(28px, 4vw, 48px);
  max-width: 940px;
  text-align: center;
}

.media-detail-header h1 {
  color: var(--ink);
  /* 字号由 clamp(36px,5vw,68px) 下调至 clamp(30px,2.8vw,40px),
     让超长标题每行容纳更多单词、从约 3 行收拢为约 2 行。 */
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.08;
  margin: 0;
  overflow-wrap: anywhere;
}

.media-detail-header p {
  color: #52606a;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  margin: 20px auto 0;
  max-width: 800px;
}

.media-detail-primary {
  aspect-ratio: 16 / 9;
  background: #111820;
  overflow: hidden;
  width: 100%;
}

.media-detail-primary img,
.media-detail-primary video,
.media-detail-primary iframe {
  border: 0;
  display: block;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.media-detail-content {
  color: #25313a;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.75;
  margin: clamp(34px, 5vw, 70px) auto 0;
  /* 容器宽对齐主图(.media-detail-article 的 1240px),让内部 figure 黑框与主标题下主图同宽;
     文字元素(p/h2 等)单独限制 940px 保持阅读宽度,见下方规则。 */
  max-width: 1240px;
  overflow-wrap: anywhere;
}

/* 文字元素保持 940px 阅读宽度并居中;figure 不受限,撑满容器与主图同宽 */
.media-detail-content > p,
.media-detail-content > h2,
.media-detail-content > h3,
.media-detail-content > ul,
.media-detail-content > ol {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}

.media-detail-content video,
.media-detail-content iframe,
.media-detail-content table {
  height: auto;
  max-width: 100%;
}

/* 正文插入图与主标题下主图(16:9 视频框)同宽:
   富文本(Summernote)插入图片自带内联 width 像素值(如 467px),需 !important 覆盖,
   使当前及以后新上传的图片都撑满正文容器宽度,与视频框大小一致。
   图片上下保留呼吸间隙;按要求不画分割线。 */
.media-detail-content img {
  border-top: 0;
  display: block;
  height: auto;
  margin: clamp(20px, 3vw, 34px) auto;
  max-width: 100%;
  padding-top: clamp(20px, 3vw, 34px);
  width: 100% !important;
}

/* 图片与图片之间:收窄间距,只留少量呼吸;
   上图 margin-bottom 设小,下图 margin-top 设小,两者发生外边距折叠后取较大者,
   实现图与图之间 ≈ 14px 的紧凑间距。 */
.media-detail-content img + img {
  margin-top: clamp(8px, 1.2vw, 14px);
  padding-top: 0;
}

.media-detail-content img:not(:last-child) {
  margin-bottom: clamp(8px, 1.2vw, 14px);
}

/* 简介文字 → 第一张图:同样收窄到与图间距一致(≈ 14px);
   img 可能嵌在内层 div,无法用 :first-child 选到,
   用"前面不是 img"判定它就是该容器内的第一张图。 */
.media-detail-content img:not(img + img) {
  margin-top: clamp(8px, 1.2vw, 14px);
}

/* 文章内图片(figure>img)与主标题下主图(16:9、contain、深色背景)大小完全一致:
   容器已对齐主图 1240px,figure 直接撑满,套用与 .media-detail-primary 完全相同的规则。 */
.media-detail-content figure {
  aspect-ratio: 16 / 9;
  background: #111820;
  margin: clamp(28px, 4vw, 44px) 0;
  overflow: hidden;
  width: 100%;
}

.media-detail-content figure img {
  border: 0;
  display: block;
  height: 100%;
  margin: 0;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.media-detail-content table {
  display: block;
  overflow-x: auto;
  width: 100%;
}

@media (max-width: 820px) {
  .media-showcase-grid {
    grid-template-columns: 1fr;
  }

  .media-showcase-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .media-showcase-heading span {
    flex: none;
    height: 5px;
    width: 74px;
  }
}

@media (max-width: 640px) {
  .media-showcase {
    margin-top: 34px;
  }

  .media-showcase-copy {
    padding: 18px 18px 22px;
  }

  .media-play-icon {
    height: 52px;
    width: 52px;
  }

  .media-play-icon::after {
    left: 21px;
    top: 16px;
  }

  .media-detail-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .media-detail-breadcrumb {
    /* 移动端:容器 padding 固定 16px(见上方 .media-detail-page 规则),
       这里把左右 margin 改为「列表页移动端内缩 − 16px」,与列表页逐像素对齐。 */
    margin-top: 16px;
    margin-left: calc(clamp(10px, 1.8vw, 28px) + clamp(18px, 6vw, 88px) - 16px);
    margin-right: calc(clamp(10px, 1.8vw, 28px) + clamp(18px, 6vw, 88px) - 16px);
  }

  .media-detail-header {
    text-align: left;
  }

  .media-detail-primary {
    aspect-ratio: 4 / 3;
  }

  .media-detail-content figure {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-showcase-image img {
    transition: none;
  }
}