/* Press · "Covered by leading media": the 97M+ reach and three clippings (outlet mark + headline). Short by
   design. The outlet marks are the site's one-colour wordmarks (site-2027/assets/press, SOURCES.md) used as
   masks, so each takes the band's own type colour. Shares .q, .q-grid and .q__title with questions.css.
   Nothing overlaps type. No motifs. */

.np-figure {
  font-family: var(--font-display);
  font-size: calc(var(--type-figure) * 1.3);
  line-height: 0.85;
}

.np-caption {
  max-width: 36ch;
  margin-top: var(--sp-stack-md);
  font-size: var(--type-body);
  line-height: var(--text-body--line-height);
  color: var(--quiet);
  text-wrap: pretty;
}

.np-title {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  color: var(--loud);
}

/* ---- A clipping: the outlet's mark, then its headline in quotes ----
   The mark sits on the foot of a fixed slot, so whichever outlet is tallest, the three headlines start on one
   line. */
.np-clip {
  display: grid;
  grid-template-rows: calc(var(--type-lead) * 1.5) auto;
  gap: var(--sp-stack-sm);
  align-content: start;
}

.np-clip .np-logo {
  align-self: end;
}

.np-logo {
  display: block;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: left center;
}

/* Widths set by eye so the three marks carry the same weight (Hindustan Times is the tallest mark per width). */
.np-logo--toi {
  width: calc(var(--sp-section) * 1.8);
  aspect-ratio: 323.4 / 22.7;
  mask-image: url('../site-2027/assets/press/times-of-india.svg');
}

.np-logo--ht {
  width: calc(var(--sp-section) * 1.3);
  aspect-ratio: 460.3 / 59;
  mask-image: url('../site-2027/assets/press/hindustan-times.svg');
}

.np-logo--et {
  width: calc(var(--sp-section) * 1.6);
  aspect-ratio: 114.4 / 10;
  mask-image: url('../site-2027/assets/press/economic-times.svg');
}

.np-headline {
  font-family: var(--font-display);
  font-size: var(--type-lead);
  line-height: var(--text-h3--line-height);
  text-wrap: balance;
}

/* ================= N1 · reach + clippings, paper ================= */
.np1__body {
  row-gap: var(--sp-section);
  align-items: start;
}

.np1__reach {
  grid-column: 2 / 5;
}

.np1__coverage {
  grid-column: 5 / 8;
  display: grid;
  gap: var(--sp-stack-lg);
}

.np1__clips {
  display: grid;
  gap: var(--sp-stack-lg);
}

.np1__clips .np-headline {
  font-size: calc(var(--type-heading) * 0.85);
  line-height: var(--text-h2--line-height);
}

/* ================= N2 · three pull quotes, crimson ================= */
.np2__head {
  row-gap: var(--sp-stack-md);
  align-items: end;
}

.np2__head .q__title {
  grid-column: 2 / 5;
  font-size: var(--type-display);
  line-height: var(--text-display--line-height);
}

.np2__head .q__title > span {
  display: block;
}

.np2__reach {
  grid-column: 5 / 8;
}

/* The quotes lead here: the reach steps down beside the title rather than competing with it. */
.np2__reach .np-figure {
  font-size: calc(var(--type-title) * 1.15);
}

.np2 .np-caption {
  color: var(--palette-rose-tint);
}

/* Three equal columns inside the gutters with one wide gutter between them, and quotes that fill their column
   line by line (not balanced, which shrank each to its own width: 293 / 405 / 344px with gaps of 144 and 33px
   at 1440 in round 2). Every quote now has the same measure, the same rag and the same space either side. */
.np2__clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-stack-lg) calc(var(--sp-stack-lg) * 1.5);
  margin-top: calc(var(--sp-section) * 0.6);
  padding-inline: var(--lay-gutter);
}

.np2__clips .np-headline {
  max-width: 19ch;
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  text-wrap: pretty;
}

/* ================= N3 · headline cascade, lapis ================= */
.np3__stage {
  display: grid;
  grid-template-columns: calc(var(--sp-section) * 3.3) minmax(0, 1fr);
  gap: var(--sp-stack-lg);
  width: min(100% - var(--lay-gutter) * 2, var(--lay-wide));
  margin-inline: auto;
  align-items: start;
}

.np3__head {
  grid-column: 1 / -1;
  margin-bottom: var(--sp-stack-md);
}

.np3__head h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  color: var(--palette-jodhpuri-blue);
}

.np3__card {
  padding: var(--sp-inset-lg);
  background: var(--background);
  color: var(--palette-lapis-blue);
  --quiet: var(--palette-lapis-blue);
}

.np3__card .np-figure {
  font-size: var(--type-figure);
}

/* The headlines step down the frame, each under its outlet's mark, at a size that holds a two-line quote. */
.np3__clips {
  display: grid;
  gap: var(--sp-stack-lg);
  container-type: inline-size;
}

.np3__clips .np-headline {
  max-width: 22em;
  font-size: 4.6cqi;
  line-height: var(--text-h1--line-height);
  text-wrap: balance;
}

.np3__clips .np-logo {
  color: var(--palette-jodhpuri-blue);
}

.np3__clips .np-clip:nth-child(1) { margin-inline-start: 0%; }
.np3__clips .np-clip:nth-child(2) { margin-inline-start: 14%; }
.np3__clips .np-clip:nth-child(3) { margin-inline-start: 6%; }

/* ================= N4 · press sheet, Jodhpuri ================= */
.np4__body {
  row-gap: var(--sp-section);
  align-items: start;
}

.np4__reach {
  grid-column: 2 / 4;
}

.np4__sheet {
  grid-column: 4 / 8;
  display: grid;
  gap: var(--sp-stack-lg);
}

.np4__sheet ul {
  display: grid;
  gap: var(--sp-stack-lg);
}

/* One line per clipping: the mark in a fixed first column, the headline on its baseline beside it. */
/* The mark sits on the headline's first baseline, not centred against a two-line quote. */
.np-row {
  display: grid;
  grid-template-columns: calc(var(--sp-section) * 1.9) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--sp-stack-lg);
}

.np-row .np-headline {
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
}

/* ================= Narrow ================= */
@media (max-width: 899px) {
  .np1__reach,
  .np1__coverage,
  .np2__head .q__title,
  .np2__reach,
  .np4__reach,
  .np4__sheet {
    grid-column: 2 / 8;
  }

  .np2__clips {
    grid-template-columns: 1fr;
  }

  .np-row {
    grid-template-columns: 1fr;
    row-gap: var(--sp-stack-sm);
  }

  .np3__stage {
    grid-template-columns: 1fr;
  }

  .np3__card {
    order: 2;
    max-width: var(--ms-sm);
  }

  .np3__clips .np-headline {
    font-size: 6.4cqi;
  }

  .np3__clips .np-clip:nth-child(n) {
    margin-inline-start: 0;
  }
}