/*** CMP-ARTICLE-HEADER.CSS v1.1
- Header chrome for the Article detail page (premeta ribbon, identity strip,
  byline meta, feature image figure).
- Used by: templates/components/mc/sections/beta/article/cmp-article-header.html
- All selectors scoped under .mp-article so the file is safe to load
  globally — rules only fire on the article detail page module.
##########################
***/

/* #region # PAGE-ROW CHROME ########################## */

.mp-article .d-header {
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-black);
}

.mp-article .d-header > .column {
  row-gap: var(--space-md);
}

/* #endregion */

/* #region # PREMETA (form + show breadcrumb) ########################## */
/* The premeta bar is tagged `.eyebrow` in the template so its small-caps
   typography comes from mp-general.css. Only the link-hover and icon-hide
   tweaks live here. */

.mp-article .post-premeta-category { width: fit-content; }
.mp-article .post-premeta-category .icon { display: none; }

/* #endregion */

/* #region # IDENTITY ########################## */
/* Title + excerpt centred in the reading column. */

.mp-article .post-identity {
  max-width: var(--width-text);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mp-article .post-title {
  font-family: var(--font-serif);
  font-weight: 400;
}

.mp-article .post-excerpt {
  font-size: var(--type-md);
  color: var(--color-night);
}

/* #endregion */

/* #region # META (byline / dates) ########################## */

.mp-article .post-meta {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-xs) var(--space-md);
  max-width: var(--width-text);
  margin-left: auto;
  margin-right: auto;
  color: var(--color-night);
}

.mp-article .post-meta .icon {
  height: 1em;
  width: 1em;
  margin-right: var(--space-xs);
}

.mp-article .post-meta-author a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.mp-article .post-meta-author a:hover {
  text-decoration: none;
}

.mp-article .post-meta-revision {
  color: var(--color-shade);
  font-style: italic;
}

/* #endregion */

/* #region # FEATURE IMAGE ########################## */

.mp-article .post-figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Cap the feature image so title + meta always stay visible above the fold.
     Budget ~32rem for the global header, pre-meta, title, excerpt, byline,
     stack margins and the d-header border rule. */
  max-height: calc(100vh - 28rem);
}

.mp-article .post-figure-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 28rem);
  object-fit: cover;
}

.mp-article .post-figure figcaption {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  max-width: 60%;
  padding: 0.25rem var(--space-xs);
  background-color: var(--color-overlay-strong);
  color: var(--color-theme-alpha, #fff);
  font-family: var(--font-sans);
  font-size: var(--type-2xs);
  letter-spacing: var(--track-wide);
  text-align: right;
  line-height: 1.3em;
}

/* #endregion */