/**
 * Blog / posts index + archive hero — allowlist only.
 *
 * Listagem = hub.css (.posts-hub) + L3 patterns. Tipografia/spacing/cores = attrs
 * nos patterns. CSS só o que o support do bloco não cobre.
 * Zero !important (proto archive-meta tinha; não portamos).
 */

.page-hero {
  position: relative;
  overflow: hidden;
}

/* Proto wash + ornament vertical — sem equivalente nativo */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--wp--custom--fashion-wash),
    repeating-linear-gradient(
      90deg,
      var(--wp--custom--ornament-line) 0,
      var(--wp--custom--ornament-line) 1px,
      transparent 1px,
      transparent 5.5rem
    );
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

.page-hero > .wrap,
.page-hero > .wp-block-group.alignwide {
  position: relative;
  z-index: 1;
}

/* max-width do lede — paragraph não tem support de maxWidth */
.page-hero .has-text-align-center.has-xl-font-size {
  max-width: 42rem;
  margin-inline: auto;
}

/* Wordmark <em> no H1 (proto) */
.page-hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--wp--preset--color--primary);
}

/* ═══ Archive / categoria ═══
   Alinhamento = layout flex justifyContent:left no pattern.
   Ícone = core/icon + class archive-hero__icon; size = bento-icon (2.25rem);
   margin = attrs nativos no pattern (zera margin-bottom do svg.bento-icon legado). */

/* term-description: sem support de maxWidth */
.page-hero--archive .wp-block-term-description,
.page-hero--archive .wp-block-term-description p {
  max-width: 40rem;
}

.page-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
}

.page-crumb a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.page-crumb a:hover {
  color: var(--wp--preset--color--contrast);
}

.page-crumb__sep {
  opacity: 0.5;
}

/* Meta: wrappers query + post-template em linha no flex do group */
.archive-meta .archive-meta-count,
.archive-meta .archive-meta-updated-query,
.archive-meta .wp-block-post-template,
.archive-meta .wp-block-post-template > li {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.archive-meta__dot {
  width: 3px;
  height: 3px;
  padding: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  opacity: 0.7;
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.archive-meta time::before {
  content: "Atualizado ";
}