/* The reference article page is a cover image with a white card lifted up
   over its bottom edge, everything else stacked inside that card. */

.alt-article { background: var(--alt-ar-bg); }

.alt-article__cover {
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
  border-radius: var(--alt-radius-card);
}
.alt-article__cover-img { width: 100%; height: 100%; object-fit: cover; }

.alt-article__inner {
  position: relative;
  padding-top: 16px;
}

.alt-article__card { background: var(--alt-ar-card-bg); }

/* ---------------------------------------------------------------- header */

.alt-article__head { text-align: center; margin-bottom: 40px; }

.alt-article__blog {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--alt-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
}
.alt-article__blog:hover { color: var(--alt-heading-color); }

.alt-article__title {
  margin: 0 0 10px;
  color: var(--alt-ar-heading);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-ar-title-d);
  font-weight: var(--alt-fw-heading);
  line-height: 1.444;
}

.alt-article__meta {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--alt-muted);
  font-size: calc(var(--alt-body-size) * 0.8125);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ body */

.alt-article__body {
  max-width: 100%;
  margin-bottom: 40px;
  color: var(--alt-ar-text);
  font-size: var(--alt-ar-size);
  line-height: 1.75;
}
.alt-article__body h2 { font-size: calc(var(--alt-ar-size) * 1.6); margin-top: 1.8em; }
.alt-article__body h3 { font-size: calc(var(--alt-ar-size) * 1.3); margin-top: 1.6em; }
.alt-article__body h2,
.alt-article__body h3,
.alt-article__body h4 { color: var(--alt-ar-heading); }

/* ----------------------------------------------------------------- share */

.alt-article__footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 40px;
}

.alt-article__share { display: flex; align-items: center; }

.alt-article__share-label { margin-right: 20px; font-weight: 500; }

.alt-article__share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--alt-heading-color);
  transition: color 0.25s ease;
}
.alt-article__share-link + .alt-article__share-link { margin-left: 16px; }
.alt-article__share-link:hover { color: var(--alt-brand); }
.alt-article__share-link svg { width: 18px; height: 18px; }

/* --------------------------------------------------------- previous/next */

.alt-article__nav {
  --alt-ar-nav-gap: 30px;
  display: flex;
  gap: var(--alt-ar-nav-gap);
  padding-top: 28px;
  border-top: 1px solid var(--alt-border);
}

.alt-article__nav-side { flex: 1 1 0%; min-width: 0; }

/* A single hairline sits between the two halves, centred in the gap. */
.alt-article__nav-side--prev { position: relative; }
.alt-article__nav-side--prev::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--alt-ar-nav-gap) / -2);
  width: 1px;
  height: 100%;
  background: var(--alt-border);
}

.alt-article__nav-side a {
  display: block;
  padding-block: 10px;
  color: var(--alt-heading-color);
  text-decoration: none;
}
.alt-article__nav-side--next { text-align: right; }

.alt-article__nav-label {
  display: block;
  margin-bottom: 4px;
  color: var(--alt-muted);
  font-size: calc(var(--alt-body-size) * 0.875);
}

.alt-article__nav-title {
  display: block;
  font-family: var(--alt-font-heading);
  font-weight: 500;
  line-height: 1.4;
}
.alt-article__nav-side a:hover .alt-article__nav-title { text-decoration: underline; }

/* --------------------------------------------------------------- related */

.alt-article__related { margin-top: 120px; }

.alt-article__related-heading {
  margin: 0 0 60px;
  color: var(--alt-ar-heading);
  font-family: var(--alt-font-heading);
  font-size: 30px;
  font-weight: var(--alt-fw-heading);
  line-height: 1.2;
  text-align: center;
}

.alt-article__related-grid {
  display: grid;
  grid-template-columns: repeat(var(--alt-ar-rel-cols, 3), minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 40px;
}

.alt-article__related .alt-article-card__media { aspect-ratio: 16 / 9; margin-bottom: 20px; }
.alt-article__related .alt-article-card__body { text-align: center; }
.alt-article__related .alt-article-card__title { font-size: 20px; margin-bottom: 0; }

/* ------------------------------------------------------------ responsive */

@media (min-width: 768px) {
  .alt-article__inner {
    padding-inline: var(--alt-ar-inset-t);
    margin-top: calc(var(--alt-ar-lift) * -1);
  }
  .alt-article__inner--flat { margin-top: 0; }
  .alt-article__card { padding: 24px; }
}

@media (min-width: 1280px) {
  .alt-article__inner { padding-inline: var(--alt-ar-inset-d); }
}

@media (max-width: 1023px) {
  .alt-article__title { font-size: var(--alt-ar-title-m); }
}

@media (max-width: 767px) {
  .alt-article__head { margin-bottom: 30px; }
  .alt-article__footer { flex-direction: column; }
  .alt-article__nav { padding-top: 20px; }
  .alt-article__related { margin-top: 60px; }
  .alt-article__related-heading { margin-bottom: 30px; font-size: 24px; }
  .alt-article__related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 30px; }
  .alt-article__related .alt-article-card__title { font-size: 18px; }
}