/* Press article (site/templates/press.php): at most 1062px wide, centred.
   A title area (dates + title, lead image on the side set in the Panel), then
   content rows from the layout field, full width or two columns. Below 768px
   one column: dates, title, lead image, then the columns in order. */
.article {
  max-width: 1062px;
  margin-inline: auto;
  padding-block: calc(2 * var(--spacing-7));
  line-height: 1.15;

  & + & {
    border-block-start: 1px solid var(--color-invisible);
  }

  /* Content rows and blocks inside a column: the same spacing everywhere */
  > * + *,
  .article-column > * + *:not(p) {
    margin-block-start: var(--spacing-7);
  }

  p + p {
    margin-block-start: 1lh;
  }

  /* Images fill their box even when the original is smaller */
  img {
    width: 100%;
  }
}

/* Links written in the text */
.article-column a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.article-header,
.article-row {
  display: grid;
  gap: var(--spacing-5) var(--spacing-4);
  align-items: start;
}

.article-title {
  margin-block-start: var(--spacing-5);
  font-size: var(--font-size-xl);
  line-height: 1;
}

/* Small and Medium: a share of the full width (phones) or of its half */
.article-lead {
  &[data-size="s"] {
    width: 50%;
  }

  &[data-size="m"] {
    width: 75%;
  }
}

.article-link a {
  color: var(--color-muted);
  text-transform: uppercase;
  transition: color var(--transition);

  &:hover {
    color: var(--color-fg);
  }
}

@media (min-width: 768px) {
  .article-header {
    grid-template-columns: 1fr 1fr;

    > * {
      grid-row: 1;
    }
  }

  /* Dates at the top, the title well below them, as in the design */
  .article-title {
    margin-block-start: calc(var(--spacing-7) + var(--spacing-6));
  }

  /* The lead takes the chosen side, the heading the other one. Smaller
     leads sit centred in their half. */
  .article-lead {
    justify-self: center;
  }

  .article[data-lead-position="left"] {
    .article-lead {
      grid-column: 1;
    }

    .article-heading {
      grid-column: 2;
    }
  }

  .article[data-lead-position="right"] {
    .article-heading {
      grid-column: 1;
    }

    .article-lead {
      grid-column: 2;
    }
  }

  /* Columns span their share of 12 (--span from the layout, set inline) */
  .article-row {
    grid-template-columns: repeat(12, 1fr);
  }

  .article-column {
    grid-column: span var(--span);
  }
}