/**
 * catalog-app-detail.css — the listing head on the SI application page.
 *
 * Its own stylesheet rather than components.css: this is one screen's
 * header, and the shared component layer is signed off. If a second screen
 * ever needs the same head, it moves there and this file goes away.
 *
 * Chosen from two options on 21 Sep 2026 (the other kept the four facts in
 * a side card). What it fixes in the first build of this page:
 *   · a 96px icon against four stacked lines of small text, so the icon
 *     outweighed the title and the block read as a list, not a heading;
 *   · the right half of the card was empty, because the facts that would
 *     fill it were sitting in a side card;
 *   · nothing in the block was sized to be read first.
 *
 * Every value comes from tokens.css, which carries Intel's Spark values — square
 * corners, Intel blue and Intel One are inherited, not re-declared.
 */

.listing-head {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

.listing-head__main {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-7);
}

/* Sized to the text block it stands beside (name row + meta + lede + tags),
   so the two line up top and bottom on a normal listing. Re-measured at
   140px after the name and lede moved onto Spark's steps — the block lost
   8px. Centred rather than top-aligned, so a name that wraps to two lines
   still reads as balanced instead of stranding the tile at the top. */
.listing-head__icon {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-app-icon-xl);
  background-size: 98px 98px;
}

.listing-head__body {
  flex: 1;
  min-width: 0;
}

.listing-head__name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.listing-head__name {
  font-family: var(--font-family-display);
  /* Spark font-size-350 (2rem). 34px was not on any scale; it sat between
     Spark's 32 and 36 for no reason. */
  font-size: var(--spark-font-size-350);
  font-weight: var(--font-weight-display);
  line-height: 1.1;
  color: var(--color-text-ink);
}

/* The publisher is the one part of this line a System Integrator weighs,
   so it carries the ink and the version stays quiet beside it. */
.listing-head__meta {
  padding-block-start: 6px;
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
}

.listing-head__meta strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-ink);
}

/* Held to a readable measure rather than run to the card's edge — this is
   the one line the eye should land on first. */
.listing-head__lede {
  max-width: 70ch;
  padding-block-start: var(--space-3);
  /* Spark font-size-100 (1rem). 17px was on neither Spark's scale nor
     ours — it sat one pixel off the step below it. */
  font-size: var(--spark-font-size-100);
  line-height: 1.5;
  color: var(--color-text-ink);
}

.listing-head__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block-start: var(--space-4);
}

/* Publisher, version, industry and region run along the foot of the head
   instead of sitting in a side card. That is what fills the empty right
   half, and it leaves the side column carrying only the tested devices, so
   the two columns end together. */
.listing-head__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-start: 1px solid var(--color-border);
  background: var(--color-bg-surface-sunken);
}

.listing-head__fact {
  padding: var(--space-4) var(--space-7);
  min-width: 0;
}

.listing-head__fact + .listing-head__fact {
  border-inline-start: 1px solid var(--color-border);
}

.listing-head__fact-label {
  display: block;
  font-size: var(--font-size-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Muted, not disabled: at 11px uppercase this is a label to read, and
     --color-text-disabled is 3.27:1, deliberately below AA for values that
     do not exist yet. */
  color: var(--color-text-muted);
}

.listing-head__fact-value {
  display: block;
  padding-block-start: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  /* Spark font-size-100 (1rem) — a step above our body, which the five
     tokens do not carry. */
  font-size: var(--spark-font-size-100);
  color: var(--color-text-ink);
}

@media (max-width: 900px) {
  .listing-head__main {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .listing-head__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* On two columns the third and fourth cells start a new row, so the
     vertical rule has to move with them. */
  .listing-head__fact:nth-child(odd) {
    border-inline-start: 0;
  }

  .listing-head__fact:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-border);
  }
}

/* ============================== Activity ============================== */

/* The side column's log. Too narrow for a table, so each event is a short
   block: a status dot beside the event, then who, what and when beneath it
   in the quiet meta size. Rules between events, none above the first. */
.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-list[hidden] {
  display: none;
}

.activity-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.activity-item:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

/* Centred on the event's first line rather than the whole block. */
.activity-item .state-dot {
  margin-block-start: 6px;
}

.activity-item__event {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-ink);
}

.activity-item__line {
  grid-column: 2;
  font-size: var(--font-size-meta);
  color: var(--color-text-muted);
}

.activity-more {
  align-self: flex-start;
}