/* Related products + related stories as one paired row — the journal
   article's bottom block, reused by the product page. Mobile keeps the
   two sections stacked exactly as they render on their own, so the
   wrapper only becomes a layout box at the desktop breakpoint. */

.related-pair {
  display: contents;
}

@media (min-width: 72rem) {
  /* Related products and related stories share one row, each half the
     content width. A group whose section didn't render simply isn't in
     the DOM, so `fit-content` columns plus centring leave the surviving
     one at its own half-width rather than stretching it across. */
  .related-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, calc(50% - var(--space-4) / 2)));
    justify-content: center;
    column-gap: var(--space-4);
    align-items: stretch;
  }

  /* A lone item would otherwise sit in the left cell of its pair grid.
     Span both cells and centre within them, keeping the width it would
     have had beside a sibling. */
  .related-pair .products > :only-child,
  .related-pair .stories > :only-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.71875rem); /* half the pair, less half the 23px gap */
    justify-self: center;
  }

  /* A lone card is rendered `featured`, which sizes its type up for the
     full-width mobile treatment. Here it keeps a paired card's size — it
     is only centred, not promoted. */
  .related-pair .product-card--featured .product-card__name,
  .related-pair .product-card--featured .product-card__basket {
    font-size: var(--text-ui);
  }

  .related-pair .story-card--featured .story-card__title {
    font-size: var(--text-body);
  }

  .related-pair .story-card--featured .story-card__excerpt {
    font-size: var(--text-small);
  }

  .related-pair .story-card--featured .story-card__more {
    font-size: var(--text-ui);
  }

  /* Products and stories draw their photos at different ratios in their
     own listings (172:215 and 1:1); side by side here that alone makes
     one column taller, so both take the square. */
  .related-pair .product-card__img,
  .related-pair .product-card__slider,
  .related-pair .story-card__img {
    aspect-ratio: 1 / 1;
  }

  /* Both groups stretch to the taller of the two, and each card fills its
     group — the cards are flex columns whose button carries an auto top
     margin, so the buttons land on one line and the totals match. */
  .related-pair__group {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  /* Product name and story title start on the same line: the photos are
     equal squares, so one shared offset under them aligns the tops. The
     buttons keep their own auto margin to the card floor — with the
     story card trimmed (two excerpt lines, no title floor) the two
     columns' text runs are near-equal, so neither button drifts far
     from its copy. */
  .related-pair .product-card__name,
  .related-pair .story-card__title {
    margin-top: 0;
    padding-top: 1.125rem;
  }
  .related-pair .story-card__excerpt {
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

  .related-pair .story-card__title,
  .related-pair .story-card:not(.story-card--featured) .story-card__title {
    min-height: 0;
  }
}