/* 首页/相关推荐媒体拼贴：按 Figma 原型保持统一画布比例。 */
.dx-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(253, 62, 136, 0.15);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.dx-avatar-fallback {
  position: relative;
  z-index: 0;
  pointer-events: none;
}

.dx-avatar-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.dx-avatar-img.is-loaded {
  opacity: 1;
}

.dx-avatar-img.is-wide-avatar {
  object-fit: contain;
  padding: 7%;
  background: #f5f5f5;
}

.detail-title,
.detail-copy {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.detail-copy {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.7;
}

.detail-copy p {
  margin: 0;
}

.detail-copy p + p {
  margin-top: 10px;
}

.detail-tags {
  min-width: 0;
  align-items: flex-start;
}

.detail-tags a {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.btn-follow:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* 详情页媒体按正文顺序单列展示，保留原始比例，不复用列表卡拼贴。 */
.dx-img-group.detail-media-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.detail-media-flow > .post-media-cell {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: auto;
}

.detail-media-flow > .post-media-cell > img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none;
  object-fit: contain !important;
  object-position: center;
}

/* 列表卡继续使用固定比例拼贴。 */
.post-media-grid {
  display: grid;
  width: 100%;
  gap: 12px;
}

/* 视频暂停态品牌播放层，对齐 91shex. + com 组合。 */
.dx-video-pause-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 26;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  width: min(220px, 52%);
  height: auto;
  aspect-ratio: 150 / 47;
  padding: 0 8% 0 6%;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease, visibility 120ms ease;
}

.dx-video-pause-brand.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.dx-video-pause-brand-play {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-primary);
}

.dx-video-pause-brand-play svg {
  width: 36.667%;
  height: 41.667%;
  color: #fff;
  transform: translateX(2px);
}

.dx-video-pause-brand-prefix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.dx-video-pause-brand-news {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 57.447%;
  margin: 0;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.post-media-grid > * {
  min-width: 0;
  min-height: 0;
}

.post-media-grid > .post-media-cell,
.post-media-grid > .relative > .post-media-cell {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* 铺满格子并居中裁切。 */
.post-media:not(.post-media-grid) > img,
.post-media-grid .post-media-cell > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.post-media-grid--1 {
  display: block;
  aspect-ratio: 389 / 204;
}

.post-media-grid--2 {
  column-gap: 2.44%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 65 / 34;
}

/* 与信息流卡片同一套 Figma 三图拼贴（左一高 + 右两格）。 */
.post-media-grid--3 {
  column-gap: 1.92%;
  row-gap: 3.69%;
  grid-template-columns: 33.2% minmax(0, 1fr) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 780 / 407;
}

.post-media-grid--3 > :nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.post-media-grid--3 > :nth-child(2),
.post-media-grid--3 > :nth-child(3) {
  grid-column: 2;
}

.post-media-grid--4 {
  column-gap: 2.57%;
  row-gap: 2.86%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 389 / 210;
}

/* 电影/视频封面右下角时长：对齐 Figma 577:5342（黑半透明胶囊 + 14 Medium） */
.post-video-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 640px) {
  .dx-video-pause-brand-news {
    border-radius: 5px;
    font-size: 15px;
  }
}

@media (max-width: 340px) {
  .dx-video-pause-brand-prefix,
  .dx-video-pause-brand-news {
    font-size: 12px;
  }
}