/*
 * Article detail (single work): hero, intro, editor content, download block, related articles.
 */

/* ---------- Hero ---------- */

/* 1440x500 in the mockup; the title sits 50px above the bottom edge and pushes the hero taller if it is long */
.article-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 34.722vw, 500px);
  padding-top: 50px;
  background: var(--c-ink);
  color: var(--c-white);
}
.article-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 41.5%, #000 100%);
}
.article-hero__inner {
  position: relative;
  z-index: 1;
  padding-bottom: 50px;
}
.article-hero__title {
  max-width: 1139px;
  font-size: var(--fs-h1);
  line-height: 1.1786;
}

/* ---------- Intro: category / date, lead, credits ---------- */

.article-intro {
  margin-top: 38px;
  padding-bottom: 79px;
}
.article-intro__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.article-intro__lead {
  flex: 0 1 717px;
  font-size: var(--fs-lead);
  line-height: 1.2778;
}
.article-intro__meta {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 24px;
  width: 293px;
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
}
.article-intro__meta div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-intro__meta dt {
  color: var(--c-text-muted);
}
.article-intro__meta dd {
  margin: 0;
}

/* ---------- Body frame: hairline above and below the editor content ---------- */

.article-body {
  padding: 53px 0 91px;
  border-block: 1px solid var(--c-line);
}

/* ---------- Editor content ----------
 *
 * Everything below styles the markup of the WordPress core blocks, so what
 * editors compose in the block editor comes out with the layout of the mockup:
 * text in a 1032px column, images and quotes on the full 1240px container,
 * side-by-side text in a narrower 882px measure.
 */

.entry-content {
  --content: 1032px;
  --narrow: 882px;
  /* WordPress core takes the gallery gap from this variable */
  --wp--style--gallery-gap-default: var(--gutter);
  font-size: var(--fs-body-l);
  line-height: 1.5;
}

.entry-content > * {
  max-width: var(--content);
  margin-block: 0;
  margin-inline: auto;
}
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-image,
.entry-content > .wp-block-quote,
.entry-content > .wp-block-pullquote,
.entry-content > .wp-block-separator {
  max-width: none;
}
.entry-content > .wp-block-columns {
  max-width: var(--narrow);
}

/*
 * Vertical rhythm, as distance from the previous block (measured on the mockup).
 * "After" rules come last, so they win when two wide blocks follow each other.
 */
.entry-content > * + * {
  margin-top: 1.5em;
}
.entry-content > * + h2 {
  margin-top: 56px;
}
.entry-content > * + h3,
.entry-content > * + h4 {
  margin-top: 48px;
}
.entry-content > h2 + *,
.entry-content > h3 + *,
.entry-content > h4 + * {
  margin-top: 22px;
}
.entry-content > * + .wp-block-gallery,
.entry-content > * + .wp-block-image {
  margin-top: 93px;
}
.entry-content > * + .wp-block-quote,
.entry-content > * + .wp-block-pullquote {
  margin-top: 80px;
}
.entry-content > * + .wp-block-columns,
.entry-content > * + .wp-block-separator {
  margin-top: 73px;
}
.entry-content > .wp-block-gallery + *,
.entry-content > .wp-block-image + * {
  margin-top: 80px;
}
.entry-content > .wp-block-quote + *,
.entry-content > .wp-block-pullquote + *,
.entry-content > .wp-block-columns + *,
.entry-content > .wp-block-separator + * {
  margin-top: 73px;
}

/* Text */

.entry-content h2 {
  font-size: var(--fs-lead);
  line-height: 1.2778;
}
.entry-content h3 {
  font-size: var(--fs-h3);
  line-height: 1.2857;
}
.entry-content h4 {
  font-size: inherit;
  font-weight: 600;
}
.entry-content strong,
.entry-content b {
  font-weight: 600;
}
.entry-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.entry-content a:hover {
  color: var(--c-blue);
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.25em;
}
.entry-content ul {
  list-style: disc;
}
.entry-content ol {
  list-style: decimal;
}
.entry-content li + li,
.entry-content li > ul,
.entry-content li > ol {
  margin-top: 8px;
}
.entry-content li::marker {
  color: var(--c-coral);
}

/* Images: a single image fills the container at its own ratio, with an optional caption */

.entry-content .wp-block-image img {
  width: 100%;
  height: auto;
}
.entry-content figcaption {
  margin-top: 12px;
  color: var(--c-text-muted);
  font-size: var(--fs-link);
  line-height: 20px;
}

/* Gallery: rows of equal crops (610x420 each when two-up), same flex model as WordPress core */

.entry-content .wp-block-gallery {
  --wp--style--unstable-gallery-gap: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
}
.entry-content .wp-block-gallery > .wp-block-image {
  flex: 1 0 auto;
  width: calc(50% - var(--gutter) / 2);
  margin: 0;
}
.entry-content .wp-block-gallery.columns-1 > .wp-block-image {
  width: 100%;
}
.entry-content .wp-block-gallery.columns-3 > .wp-block-image {
  width: calc(33.333% - var(--gutter) * 0.66667);
}
.entry-content .wp-block-gallery.columns-4 > .wp-block-image {
  width: calc(25% - var(--gutter) * 0.75);
}
.entry-content .wp-block-gallery img {
  aspect-ratio: 610 / 420;
  object-fit: cover;
}

/* Quote and pullquote: pale blue panel */

.entry-content .wp-block-quote,
.entry-content .wp-block-pullquote {
  /* 85px all round in Figma, around a text box 9px shorter than its four lines */
  padding: 85px clamp(24px, 6.944vw, 100px) 76px;
  border: 0;
  background: var(--c-sky-tint);
  font-size: var(--fs-h2);
  line-height: 1.1739;
  text-align: left;
}
.entry-content blockquote p + p {
  margin-top: 0.5em;
}
.entry-content blockquote cite {
  display: block;
  margin-top: 24px;
  color: var(--c-text-muted);
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
}

/* Columns: 23/34 text, 80px apart */

.entry-content .wp-block-columns {
  display: flex;
  gap: clamp(24px, 5.556vw, 80px);
}
.entry-content .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  font-size: clamp(18px, 1.597vw, 23px);
  line-height: 1.4783;
}
.entry-content .wp-block-column > * + * {
  margin-top: 1.4783em;
}

.entry-content .wp-block-separator {
  height: 0;
  border: 0;
  border-top: 1px solid var(--c-line);
}

/* ---------- Download block ---------- */

.article-download {
  margin-top: 86px;
}
/* Here the title follows the eyebrow directly and is one step smaller than on the home */
.article-download .section-head {
  gap: 0;
}
.article-download .section-head__title {
  font-size: var(--fs-h2);
  line-height: 1;
}

/* Cover 539.6px, 58.5px gap, text column 536px: the block stops 105px before the container edge */
.article-download__body {
  display: grid;
  grid-template-columns: 43.517% 43.226%;
  column-gap: 4.72%;
  margin-top: 60px;
}

/*
 * The cover is a scaled composition (x1.7216 in Figma): its type is sized on
 * the cover's own width, so it keeps its proportions wherever the block shrinks.
 * The px values are the mockup sizes, for browsers without container units.
 */
.article-download__cover {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  aspect-ratio: 539.61 / 760;
  padding: 10.21%;
  background: var(--c-ochre);
}
.article-download__kicker {
  font-size: 46.5px;
  font-size: 10.825cqw;
  font-weight: 600;
  line-height: 0.839;
  letter-spacing: -0.06em;
}
.article-download__name {
  margin-block: auto;
  font-size: 80px;
  font-size: 18.63cqw;
  line-height: 0.8875;
}
.article-download__issue {
  font-size: 20.7px;
  font-size: 4.811cqw;
  font-weight: 500;
  line-height: 1.5;
}

.article-download__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.article-download__text {
  font-size: clamp(22px, 2.391vw, 34.4px);
  line-height: 1.307;
}
.article-download__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 34.4px 0;
  border-block: 1.7px solid var(--c-line);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 36px;
  text-transform: uppercase;
}
/* The site's round chevron, x1.578 and with the arrow turned to point down */
.article-download__link .dot {
  width: 44px;
  height: 44px;
}
.article-download__link .dot::before {
  inset: 6.45px;
}
.article-download__link .dot svg {
  width: 6.31px;
  height: 14.2px;
  transform: rotate(90deg);
}
.article-download__link:hover .dot::before {
  transform: scale(1.2);
}
.article-download__link:hover .dot svg {
  transform: rotate(90deg) translateX(3px);
}

/* ---------- Related articles ---------- */

.article-related {
  margin-top: 138px;
  padding-bottom: 139px;
}
.article-related .section-head__title {
  font-size: var(--fs-lead);
  line-height: 60px;
}
.article-related .article-grid {
  margin-top: 50px;
}

/* ---------- Provisional small-screen rules (no mobile mockup yet) ---------- */

@media (max-width: 1000px) {
  .article-intro {
    padding-bottom: 56px;
  }
  .article-intro__row {
    flex-direction: column;
    gap: 32px;
  }
  .article-intro__lead {
    flex-basis: auto;
  }
  .article-intro__meta {
    flex-direction: row;
    gap: 40px;
    width: auto;
  }
  .article-body {
    padding: 48px 0 64px;
  }
  .entry-content > * + .wp-block-gallery,
  .entry-content > * + .wp-block-image,
  .entry-content > * + .wp-block-quote,
  .entry-content > * + .wp-block-pullquote,
  .entry-content > * + .wp-block-columns,
  .entry-content > * + .wp-block-separator,
  .entry-content > .wp-block-gallery + *,
  .entry-content > .wp-block-image + *,
  .entry-content > .wp-block-quote + *,
  .entry-content > .wp-block-pullquote + *,
  .entry-content > .wp-block-columns + *,
  .entry-content > .wp-block-separator + * {
    margin-top: 56px;
  }
  .entry-content .wp-block-quote,
  .entry-content .wp-block-pullquote {
    padding-block: 56px 50px;
  }
  .article-download {
    margin-top: 64px;
  }
  .article-download__body {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    margin-top: 40px;
  }
  .article-related {
    margin-top: 80px;
    padding-bottom: 80px;
  }
  .article-related .article-grid {
    margin-top: 40px;
  }
}

@media (max-width: 760px) {
  .article-hero__inner {
    padding-bottom: 32px;
  }
  .article-intro {
    margin-top: 16px;
  }
  .article-intro__meta {
    flex-wrap: wrap;
    gap: 24px 40px;
  }
  .entry-content .wp-block-gallery > .wp-block-image,
  .entry-content .wp-block-gallery.columns-3 > .wp-block-image,
  .entry-content .wp-block-gallery.columns-4 > .wp-block-image {
    width: 100%;
  }
  .entry-content .wp-block-columns {
    flex-direction: column;
    gap: 24px;
  }
  .entry-content .wp-block-quote,
  .entry-content .wp-block-pullquote {
    padding-block: 40px 36px;
    font-size: var(--fs-lead);
  }
  .article-download__body {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .article-download__cover {
    max-width: 420px;
  }
  .article-related .section-head__title {
    line-height: 1.3;
  }
}