/*** CMP-LABEL-IDENTITY.CSS v1.2
- Identity block for content-xt label detail pages (Category / Tag / Pseudo).
- Used by: templates/components/mc/sections/archive/cmp-label-identity.html
- Mirrors mp-archive + mp-work so the label archive and its detail pages
  read as one typographic system.
- Eyebrow / title / count strip typography comes from mp-general.css; this
  file holds only the layout grid.
##########################
***/

/* #region # IDENTITY ########################## */

.mp-label .label-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow meta"
    "title   title"
    "excerpt excerpt";
  column-gap: 3rem;
  row-gap: var(--space-md);
  align-items: baseline;
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-black);
}

.mp-label .label-eyebrow {
  grid-area: eyebrow;
  align-self: center;
  display: block;
}

.mp-label .label-title {
  grid-area: title;
}

.mp-label .label-description {
  grid-area: excerpt;
}

/* Meta row — count pill, right-baselined like mp-archive. */
.mp-label .label-identity-meta {
  grid-area: meta;
  justify-self: end;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  margin: 0;
}

.mp-label .label-identity-meta-item {
  display: inline-flex;
  align-items: baseline;
  column-gap: var(--space-xs);
}

.mp-label .label-identity-meta-count {
  color: var(--color-black);
  font-variant-numeric: tabular-nums lining-nums;
}

/* #endregion */

/* #region # RESPONSIVE ########################## */

@media (max-width: 800px) {
  .mp-label .label-identity {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "excerpt"
      "meta";
  }
  .mp-label .label-identity-meta { justify-self: start; }
}

/* #endregion */