/* ==========================================================================
   Magazine layout for the detail pages (jwx-dashboard, design-systems,
   inplayer-onboarding). Newspaper and magazine devices in the site's own
   type and colors: a kicker and byline around the headline, a standfirst,
   numbers in the summary boxes, a contents box, numbered stories,
   and pull quotes.
   Scoped to body.mag so nothing else changes.
   ========================================================================== */

/* ---- Small labels: the mono type the site already uses for eyebrows ---- */

.mag .mag-label,
.mag .mag-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.mag .mag-kicker {
  margin: 0 0 var(--space-2);
}

.mag .mag-num {
  color: var(--color-text);
}

/* ---- Headline, byline ---- */

.mag .mag-headline {
  margin-bottom: var(--space-5);
}

/* A dateline under the headline: ruled above and below, items split by
   hairlines, each with its small label. */
.mag .mag-byline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--space-6);
  padding: var(--space-3) 0;
  list-style: none;
  border-top: var(--border-width) solid var(--color-text);
  border-bottom: var(--border-width) solid var(--color-border-strong);
  font-size: var(--fs-small);
  color: var(--color-text);
}

.mag .mag-byline li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-5);
  border-left: var(--border-width) solid var(--color-border);
}

.mag .mag-byline li:first-child {
  padding-left: 0;
  border-left: none;
}

/* ---- Standfirst, run-in head ---- */

.mag .mag-standfirst {
  margin-bottom: var(--space-5);
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-wrap: pretty;
}

.mag .mag-body {
  margin-bottom: var(--space-4);
  max-width: 68ch;
  text-wrap: pretty;
}

.mag .mag-runin {
  font-weight: 600;
  color: var(--color-text);
}

/* ---- Numbers inside the summary boxes: set large, like a figure in a
   magazine's fact box, above the line that explains them ---- */

.mag .mag-figure {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
  font-weight: 500;
  line-height: 1;
  color: var(--color-text);
}

/* An icon in place of a figure, for a point without a number: drawn as thin
   lines, the same height as the figures so the boxes line up. */
.mag .mag-figure--icon svg {
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Right under the summary box, the contents box needs no rules of its own:
   the box's bottom rule already separates them. */
.mag .glance:has(+ .mag-contents) {
  margin-bottom: var(--space-6);
}

.mag .glance + .mag-contents {
  padding-top: 0;
  border-top: none;
  border-bottom: none;
}

/* ---- In this story ---- */

.mag .mag-contents {
  margin: 0 0 var(--space-7);
  padding: var(--space-4) 0;
  border-top: var(--border-width) solid var(--color-border-strong);
  border-bottom: var(--border-width) solid var(--color-border-strong);
}

.mag .mag-contents .mag-label {
  margin: 0 0 var(--space-3);
}

/* One list of parts, set in columns across the box. */
.mag .mag-contents.mag-contents--single {
  display: block;
}

.mag .mag-contents.mag-contents--single ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
}

/* A longer list reads down two columns, split by a hairline. */
.mag .mag-contents.mag-contents--two ol {
  display: block;
  columns: 2;
  column-gap: var(--space-7);
  column-rule: var(--border-width) solid var(--color-border);
}

.mag .mag-contents.mag-contents--two li {
  break-inside: avoid;
  margin-bottom: var(--space-2);
}

/* Two groups side by side: the architecture work, then the quick wins. */
.mag .mag-contents {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mag .mag-contents__group + .mag-contents__group {
  padding-left: var(--space-6);
  margin-left: var(--space-6);
  border-left: var(--border-width) solid var(--color-border);
}

.mag .mag-contents ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mag .mag-contents li {
  break-inside: avoid;
  margin-bottom: var(--space-2);
}

.mag .mag-contents a {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-decoration: none;
}

.mag .mag-contents a:hover {
  color: var(--color-link);
}

.mag .mag-contents .mag-num {
  flex: none;
  padding-top: 0.2em;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
}

/* A part opener inside the page, like "Quick wins": the section head and one
   line that says what kind of stories follow. */
.mag .mag-part {
  margin-top: var(--space-8);
}

.mag .mag-part__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.mag .mag-part {
  margin-bottom: var(--space-5);
}

.mag .mag-part + .project__story .mag-kicker {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ---- Kicker over each story ---- */

.mag .page__section h3 {
  scroll-margin-top: var(--space-8);
}

.mag .mag-kicker + h3 {
  margin-top: 0;
}

.mag .project__story .mag-kicker {
  max-width: none;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

/* Each story opens with a hairline and its number hanging in the left
   margin, in the heading's serif and a soft gray, so the titles stay
   aligned with the text. Without room in the margin, the number sits inline. */
.mag .mag-story {
  position: relative;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.mag .mag-hang {
  position: absolute;
  right: 100%;
  margin-right: var(--space-4);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  color: #85847e; /* about 3.4:1 on the page background: enough for 24px type */
  font-variant-numeric: tabular-nums;
}

.mag .mag-contents + .mag-story,
.mag .mag-part + .project__story .mag-story {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

@media (max-width: 64em) {
  .mag .mag-hang {
    position: static;
    margin-right: var(--space-2);
  }
}

/* The first story follows the contents box, which already has a rule. */
.mag .mag-contents + .mag-kicker {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ---- Pull quote ---- */

.mag .mag-pullquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-top: var(--border-width) solid var(--color-text);
  border-bottom: var(--border-width) solid var(--color-text);
}

.mag .mag-pullquote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-wrap: balance;
}

.mag .mag-pullquote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--color-text-muted);
}

/* The contents box can hold four parts in a row as well as three. */
.mag .mag-contents.mag-contents--single ol:has(> li:nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---- Lists under a role or group heading: a short gray dash in the
   step-in, on the first line of each item ---- */

.mag h3 + .topics li,
.mag h4 + .topics li {
  position: relative;
}

.mag h3 + .topics li::before,
.mag h4 + .topics li::before {
  content: "\2013";
  position: absolute;
  left: calc(-1 * var(--space-5) + 0.35rem);
  top: var(--space-3);
  color: var(--color-text-muted);
}

/* ---- Phones: one column everywhere ---- */

@media (max-width: 40em) {
  .mag .mag-byline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mag .mag-byline li {
    padding: var(--space-2) 0;
    border-left: none;
  }

  .mag .mag-contents {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .mag .mag-contents.mag-contents--single ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .mag .mag-contents.mag-contents--two ol {
    columns: 1;
  }

  .mag .mag-contents__group + .mag-contents__group {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }

}