/*** CMP-CONTENT-IDENTITY.CSS v1.2
- Identity block for archive + index page headers.
- Used by: templates/components/mc/sections/archive/cmp-content-identity.html
- Typography for the eyebrow, title and meta-count strip comes from
  mp-general.css (`.eyebrow`, `.title-display`). This file holds only the
  layout grid and any element-local positioning hooks.
##########################
***/

/* #region # IDENTITY ########################## */
/* Two-column masthead at desktop: eyebrow top-left, count pill top-right
   baseline-aligned with the eyebrow, title spans row 2, excerpt spans
   row 3. */

.mp-archive .cmp-content-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-archive .archive-eyebrow {
  grid-area: eyebrow;
  align-self: center;
  display: block;
}

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

.mp-archive .archive-excerpt {
  grid-area: excerpt;
}

/* #endregion */

/* #region # META (count strip) ########################## */
/* Right-baselined count pill, mirrors label-identity-meta. */

.mp-archive .archive-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);
}

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

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

/* #endregion */

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

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

/* #endregion */

/* #region # LEGAL VARIANT ########################## */
/* Same identity block on legal pages (cookie policy etc.), but with no
   meta column — eyebrow / title / excerpt stack in a single track. */

.mp-legal .cmp-content-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "eyebrow"
    "title"
    "excerpt";
  row-gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-black);
}

/* #endregion */