/* ==============================================================================
   NEWS ITEM

   The page of a piece of news (templates/pages/news-item.html, ADR-054),
   set as Furnitor's blog-post-01 (doc/07). The container, the padding
   and the body's column of nine twelfths with its lead are the markdown
   block's (markdown.css), whose class the article carries; here is only
   what a piece adds to a legal text: its day over the headline, its
   photo over the body and the way to the pieces around it.
   ============================================================================== */

/* The day and the headline, centred, 70 px over what follows as the
   markdown block's own title has. */
.news-item__header {
  margin: 0 0 70px;
  text-align: center;
}

/* The day is the micro-label of the piece's card (cards.css), so the
   list and the page date a piece with the same voice. */
.news-item__date {
  display: block;
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--plain-label-size);
  font-weight: 600;
  letter-spacing: var(--plain-label-tracking);
  line-height: 1.4;
  text-transform: uppercase;
}

/* The headline is the page's title, with the measures the markdown
   block gives its own (an h2 there, the page's h1 here). */
.news-item__title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(var(--fs-40), 2.2rem + 0.8vw, var(--fs-title-46));
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}

/* The photo runs the container's whole width at the theme's 1170 × 600,
   60 px over the body, as a photo that opens a markdown body does. */
.news-item__figure {
  margin: 0 0 60px;
}

.news-item__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1170 / 600;
  object-fit: cover;
}

/* Under the body, in its column: the older piece on the left, the newer
   on the right and the way back to the list between them. The two
   neighbours are a project sheet's (gallery.css). On a phone the way
   back takes a row of its own under them; an end of the journal leaves
   its side empty, so the other neighbour keeps its place. */
.news-item__pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "previous next"
    "back back";
  gap: var(--grid-gap);
  align-items: start;
  max-width: 878px;
  margin: var(--mb-8) auto 0;
  padding-block-start: var(--grid-gap);
  border-top: 1px solid var(--border-light);
}

.news-item__previous {
  grid-area: previous;
}

.news-item__next {
  grid-area: next;
}

.news-item__back {
  grid-area: back;
  justify-self: center;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--tracking-05);
  line-height: 1.63;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color var(--transition-link);
}

.news-item__back:hover,
.news-item__back:focus-visible {
  border-bottom-color: var(--text-primary);
}

@media (min-width: 36em) {
  .news-item__pager {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "previous back next";
  }
}