/*
 * DHV Experience 13.78.14 — Story Card Identity & Headline Hierarchy.
 * Presentation-only refinement for the canonical FeedItem renderer shared by
 * Home, Category/Tag listings, Search and Author surfaces. The actor remains
 * the first semantic layer while repeated generic metadata recedes and the
 * story headline regains editorial presence. Media, commerce, actions,
 * reaction, ranking and continuity contracts are intentionally untouched.
 */

.dhvx-app .dhvx-post__actor {
  align-items: flex-start;
  gap: 11px;
}

.dhvx-app .dhvx-post__actor .dhvx-actor-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.dhvx-app .dhvx-post__actor .dhvx-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-color: color-mix(in srgb, var(--dhvx-border) 84%, transparent);
  background: color-mix(in srgb, var(--dhvx-surface-soft) 84%, var(--dhvx-surface));
}

.dhvx-app .dhvx-post__actor .dhvx-avatar__initial {
  font-size: 15px;
  font-weight: 760;
}

.dhvx-app .dhvx-post__actor .dhvx-actor-line {
  min-height: 19px;
  gap: 6px;
  line-height: 1.22;
}

.dhvx-app .dhvx-post__actor .dhvx-actor-line strong {
  color: var(--dhvx-text);
  font-size: 14.75px;
  font-weight: 745;
  letter-spacing: -.008em;
}

.dhvx-app .dhvx-post__actor .dhvx-actor-line a:hover strong,
.dhvx-app .dhvx-post__actor .dhvx-actor-line a:focus-visible strong {
  color: var(--dhvx-brand-strong);
}

.dhvx-app .dhvx-post__actor .dhvx-actor-meta {
  margin-top: 3px;
  gap: 2px 4px;
  color: color-mix(in srgb, var(--dhvx-text-muted) 92%, var(--dhvx-text-secondary));
  font-size: 11.75px;
  line-height: 1.4;
}

.dhvx-app .dhvx-post__actor .dhvx-actor-role {
  color: var(--dhvx-text-secondary);
  font-weight: 580;
}

.dhvx-app .dhvx-post__actor .dhvx-meta-topic {
  color: var(--dhvx-text-muted);
}

.dhvx-app .dhvx-post__actor .dhvx-meta-topic a {
  color: inherit;
  font-weight: 620;
  text-decoration: none;
}

.dhvx-app .dhvx-post__actor .dhvx-meta-topic a:hover,
.dhvx-app .dhvx-post__actor .dhvx-meta-topic a:focus-visible {
  color: var(--dhvx-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Collective publisher identity is already explicit in the name/avatar. The
 * renderer suppresses only the generic repeated "Nhà sáng tạo nội dung" role;
 * genuine personal professional roles remain visible. */
.dhvx-app .dhvx-post__actor.is-collective .dhvx-actor-line strong {
  white-space: nowrap;
}

.dhvx-app .dhvx-post__actor.is-collective .dhvx-actor-meta {
  margin-top: 2px;
}

.dhvx-app .dhvx-post__content {
  padding-top: 12px;
}

.dhvx-app .dhvx-post__title,
.dhvx-app .dhvx-post.is-featured .dhvx-post__title {
  max-width: 27.5em;
  margin: 0;
  color: var(--dhvx-text);
  font-family: var(--dhv-editorial-font, Cambria, Georgia, "Times New Roman", serif);
  font-synthesis: none;
  font-size: clamp(24.5px, 1.78vw, 27.5px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.014em;
  text-wrap: pretty;
}

.dhvx-app .dhvx-post.is-featured .dhvx-post__title {
  max-width: 26.5em;
  font-size: clamp(26px, 1.92vw, 29px);
  line-height: 1.18;
}

.dhvx-app .dhvx-post__title a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.dhvx-app .dhvx-post__title a:hover,
.dhvx-app .dhvx-post__title a:focus-visible {
  color: var(--dhvx-text);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--dhvx-brand) 68%, transparent);
}

/* Tablet is a first-class state: retain editorial hierarchy without letting a
 * long author role or topic consume the headline's first viewport. */
@media (min-width: 768px) and (max-width: 1119px) {
  .dhvx-app .dhvx-post__actor { gap: 10px; }
  .dhvx-app .dhvx-post__actor .dhvx-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  .dhvx-app .dhvx-post__actor .dhvx-actor-line strong { font-size: 14.25px; }
  .dhvx-app .dhvx-post__actor .dhvx-actor-meta {
    max-width: min(68ch, 100%);
    font-size: 11.5px;
  }
  .dhvx-app .dhvx-post__content { padding-top: 11px; }
  .dhvx-app .dhvx-post__title,
  .dhvx-app .dhvx-post.is-featured .dhvx-post__title {
    max-width: 29em;
    font-size: clamp(22.5px, 2.65vw, 25.5px);
    line-height: 1.21;
  }
  .dhvx-app .dhvx-post.is-featured .dhvx-post__title {
    font-size: clamp(23.5px, 2.85vw, 26.5px);
  }
}

/* Mobile is composed independently, not a shrunken desktop card. Human
 * identity stays legible, while the headline receives the first strong visual
 * beat after the actor line. */
@media (max-width: 767px) {
  .dhvx-app .dhvx-post__actor {
    align-items: center;
    gap: 9px;
  }
  .dhvx-app .dhvx-post__actor .dhvx-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .dhvx-app .dhvx-post__actor .dhvx-avatar__initial { font-size: 13px; }
  .dhvx-app .dhvx-post__actor .dhvx-actor-line strong {
    font-size: 13.65px;
    line-height: 1.23;
  }
  .dhvx-app .dhvx-post__actor .dhvx-actor-meta {
    margin-top: 1px;
    gap: 1px 3px;
    font-size: 11.15px;
    line-height: 1.34;
  }
  .dhvx-app .dhvx-post__actor .dhvx-meta-item + .dhvx-meta-item::before {
    padding-right: 3px;
  }
  .dhvx-app .dhvx-post__content { padding-top: 9px; }
  .dhvx-app .dhvx-post__title,
  .dhvx-app .dhvx-post.is-featured .dhvx-post__title {
    max-width: none;
    font-size: 20.5px;
    font-weight: 650;
    line-height: 1.22;
    letter-spacing: -.011em;
  }
  .dhvx-app .dhvx-post.is-featured .dhvx-post__title { font-size: 21.5px; }
}

@media (max-width: 359px) {
  .dhvx-app .dhvx-post__actor { gap: 8px; }
  .dhvx-app .dhvx-post__actor .dhvx-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .dhvx-app .dhvx-post__actor .dhvx-actor-line strong { font-size: 13.25px; }
  .dhvx-app .dhvx-post__actor .dhvx-actor-meta { font-size: 10.8px; }
  .dhvx-app .dhvx-post__title,
  .dhvx-app .dhvx-post.is-featured .dhvx-post__title { font-size: 19.75px; }
}

html[data-theme="dark"] .dhvx-app .dhvx-post__actor .dhvx-avatar {
  border-color: color-mix(in srgb, var(--dhvx-border) 86%, transparent);
  background: color-mix(in srgb, var(--dhvx-surface-soft) 82%, var(--dhvx-surface));
}

@media (forced-colors: active) {
  .dhvx-app .dhvx-post__actor .dhvx-avatar { border: 1px solid CanvasText; }
  .dhvx-app .dhvx-post__title a:hover,
  .dhvx-app .dhvx-post__title a:focus-visible { text-decoration-color: LinkText; }
}