/*** CMP-WORK-HEADER.CSS v2.1
- Header "Information" block for Work detail pages.
- Wraps the feature image (figure) + identity text (eyebrow / title /
  description) and nests the inlined work-meta strip (`.cmp-work-meta`).
- Used by: templates/components/mc/sections/media/work/cmp-work-header.html
- Editorial colophon treatment: single-column identity grid, justified
  two-column meta table, notes row folded into the meta block.
- Eyebrow / title / meta-label typography comes from mp-general.css; this
  file owns layout and the meta-value / notes / responsive treatment.
##########################
***/

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

.cmp-work-header .work-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-black);
  text-align: left;
}

.cmp-work-header .work-eyebrow {
  display: block;
  margin: 0;
}

/* Subtitle is currently not rendered (kept as a semantic hook in case Work
   gains an `original_title` display row later). */
.cmp-work-header .work-subtitle { display: none; }

/* #endregion */

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

.cmp-work-header .work-figure {
  margin: 0 0 var(--space-md) 0;
}

.cmp-work-header .work-figure-image {
  display: block;
  width: 100%;
  max-height: 540px;
  object-fit: cover;
  object-position: center;
}

/* Caption is currently suppressed; kept as a semantic hook. */
.cmp-work-header .work-figure-caption { display: none; }

/* #endregion */

/* #region # META (inlined work-meta strip) ########################## */
/* Justified two-column meta table. Notes row breaks to full width with a
   dotted divider above. */

.cmp-work-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  column-gap: 3rem;
  text-align: left;
}

.cmp-work-meta .work-meta-item {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-light);
}

/* Drop the bottom border on rows immediately followed by a Notes row,
   so the dotted divider above the Notes row reads cleanly. */
.cmp-work-meta .work-meta-item:has(+ .work-meta-item--notes),
.cmp-work-meta .work-meta-item:has(+ .work-meta-item + .work-meta-item--notes) {
  border-bottom: none;
}

.cmp-work-meta .work-meta-value {
  font-family: var(--font-serif);
  font-size: 1.05em;
  line-height: 1.5em;
  color: var(--color-black);
}

.cmp-work-meta .work-meta-value ul {
  display: inline;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cmp-work-meta .work-meta-value ul li { display: inline; }
.cmp-work-meta .work-meta-value ul li + li::before { content: ", "; }

.cmp-work-meta .work-meta-value a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Notes row — full width, italic prose, dotted top divider. */
.cmp-work-meta .work-meta-item--notes {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 1.25rem;
  padding-bottom: 0;
  border-top: 1px dotted var(--color-shade);
  border-bottom: none;
}

.cmp-work-meta .work-meta-item--notes .work-meta-value {
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.6em;
  color: var(--color-night);
}

.cmp-work-meta .work-original-title {
  font-style: italic;
  color: var(--color-black);
}

/* #endregion */

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

@media (max-width: 800px) {
  .cmp-work-meta {
    grid-template-columns: minmax(0, 1fr);
  }
  .cmp-work-meta .work-meta-item {
    grid-template-columns: 8rem 1fr;
    column-gap: var(--space-sm);
  }
}

/* #endregion */