/*
 * DHV Experience 13.78.21 — Listing Header Hierarchy.
 * Category and Tag/Taxonomy only. Presentation + public microcopy: the existing
 * WordPress archive query, taxonomy description, count and pagination remain
 * authoritative. The header becomes a quiet editorial orientation before Feed.
 */

.dhvx-listing-main[data-dhvx-listing-kind="category"] .dhvx-listing-head.is-contextual,
.dhvx-listing-main[data-dhvx-listing-kind="topic"] .dhvx-listing-head.is-contextual {
  position: relative;
  padding: 38px 28px 29px;
  border-bottom: 0;
  background: transparent;
}

.dhvx-listing-main[data-dhvx-listing-kind="category"] .dhvx-listing-head.is-contextual::after,
.dhvx-listing-main[data-dhvx-listing-kind="topic"] .dhvx-listing-head.is-contextual::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-top: 24px;
  background: color-mix(in srgb, var(--dhvx-border-strong) 72%, transparent);
}

.dhvx-listing-head.is-contextual .dhvx-listing-kicker {
  color: var(--dhvx-brand-strong);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .018em;
}

.dhvx-listing-head.is-contextual .dhvx-listing-title-row {
  display: block;
  margin-top: 7px;
}

.dhvx-listing-head.is-contextual .dhvx-listing-title-row h1 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--dhv-editorial-font);
  font-size: clamp(38px, 3.8vw, 46px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.dhvx-listing-head.is-contextual .dhvx-listing-description {
  max-width: 48ch;
  margin-top: 14px;
  color: color-mix(in srgb, var(--dhvx-text) 72%, var(--dhvx-canvas));
  font-size: 15.5px;
  line-height: 1.62;
  text-wrap: pretty;
}

.dhvx-listing-head.is-contextual .dhvx-listing-description p {
  margin: 0 0 .7em;
}
.dhvx-listing-head.is-contextual .dhvx-listing-description > :last-child { margin-bottom: 0; }

.dhvx-listing-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 11px;
  margin-top: 16px;
  color: var(--dhvx-text-muted);
  font-size: 11.75px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.dhvx-listing-head.is-contextual .dhvx-listing-count {
  padding: 0;
  color: var(--dhvx-text-secondary);
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  white-space: nowrap;
}

.dhvx-listing-page {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.dhvx-listing-page::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 11px;
  border-radius: 50%;
  background: currentColor;
  opacity: .48;
}

/* The first story follows the orientation naturally instead of starting behind
 * another archive divider. The Story Card itself remains untouched. */
.dhvx-listing-main[data-dhvx-listing-kind="category"] .dhvx-listing-feed .dhvx-post:first-child,
.dhvx-listing-main[data-dhvx-listing-kind="topic"] .dhvx-listing-feed .dhvx-post:first-child {
  border-top: 0;
}

/* Tablet is a deliberate composition, not a compressed desktop header. */
@media (min-width: 768px) and (max-width: 1119px) {
  .dhvx-listing-main[data-dhvx-listing-kind="category"] .dhvx-listing-head.is-contextual,
  .dhvx-listing-main[data-dhvx-listing-kind="topic"] .dhvx-listing-head.is-contextual {
    padding: 31px 24px 25px;
  }

  .dhvx-listing-head.is-contextual .dhvx-listing-title-row h1 {
    max-width: 16ch;
    font-size: clamp(35px, 4.9vw, 40px);
    line-height: 1.055;
  }

  .dhvx-listing-head.is-contextual .dhvx-listing-description {
    max-width: 52ch;
    margin-top: 13px;
    font-size: 15.25px;
  }

  .dhvx-listing-head.is-contextual .dhvx-listing-meta { margin-top: 15px; }

  .dhvx-listing-main[data-dhvx-listing-kind="category"] .dhvx-listing-head.is-contextual::after,
  .dhvx-listing-main[data-dhvx-listing-kind="topic"] .dhvx-listing-head.is-contextual::after {
    margin-top: 21px;
  }
}

/* Mobile is a compact destination header inside the platform viewport. */
@media (max-width: 767px) {
  .dhvx-listing-main[data-dhvx-listing-kind="category"] .dhvx-listing-head.is-contextual,
  .dhvx-listing-main[data-dhvx-listing-kind="topic"] .dhvx-listing-head.is-contextual {
    padding: 23px 16px 20px;
  }

  .dhvx-listing-head.is-contextual .dhvx-listing-kicker {
    font-size: 10.5px;
  }

  .dhvx-listing-head.is-contextual .dhvx-listing-title-row {
    margin-top: 6px;
  }

  .dhvx-listing-head.is-contextual .dhvx-listing-title-row h1 {
    max-width: 18ch;
    font-size: clamp(30px, 9vw, 34px);
    line-height: 1.065;
    letter-spacing: -.03em;
  }

  .dhvx-listing-head.is-contextual .dhvx-listing-description {
    max-width: none;
    margin-top: 11px;
    font-size: 14.75px;
    line-height: 1.58;
  }

  .dhvx-listing-meta {
    gap: 6px 9px;
    margin-top: 13px;
    font-size: 11.25px;
  }

  .dhvx-listing-page::before { margin-right: 9px; }

  .dhvx-listing-main[data-dhvx-listing-kind="category"] .dhvx-listing-head.is-contextual::after,
  .dhvx-listing-main[data-dhvx-listing-kind="topic"] .dhvx-listing-head.is-contextual::after {
    width: 36px;
    margin-top: 18px;
  }
}

@media (max-width: 359px) {
  .dhvx-listing-main[data-dhvx-listing-kind="category"] .dhvx-listing-head.is-contextual,
  .dhvx-listing-main[data-dhvx-listing-kind="topic"] .dhvx-listing-head.is-contextual {
    padding-left: 14px;
    padding-right: 14px;
  }
  .dhvx-listing-head.is-contextual .dhvx-listing-title-row h1 { font-size: 29px; }
  .dhvx-listing-head.is-contextual .dhvx-listing-description { font-size: 14.5px; }
}

html[data-theme="dark"] .dhvx-listing-head.is-contextual .dhvx-listing-description {
  color: color-mix(in srgb, var(--dhvx-text) 76%, var(--dhvx-canvas));
}

@media (forced-colors: active) {
  .dhvx-listing-main[data-dhvx-listing-kind="category"] .dhvx-listing-head.is-contextual::after,
  .dhvx-listing-main[data-dhvx-listing-kind="topic"] .dhvx-listing-head.is-contextual::after,
  .dhvx-listing-page::before {
    background: CanvasText;
    forced-color-adjust: auto;
  }
}