/**
 * Related collections (sections/related-collections.liquid).
 *
 * A quiet wayfinding rail under a collection page's real content. The
 * header is the whole idea: a modest heading in the heading face with a
 * hairline running from its last word to the page edge - a signpost's
 * grammar, deliberately smaller than the shelf headings on the home page,
 * because this section suggests a next stop rather than selling one.
 *
 * Tiles are small and restrained: square media on the theme's media ground,
 * title on a hairline-ruled row beneath, and an arrow that only surfaces
 * when the tile is hovered or focused - at rest the rail is just names, so
 * it never competes with the product grid above it. Mobile is a
 * scroll-snap strip inside its own container; from tablet up the tiles
 * wrap. Every transition and transform sits behind the reduced-motion
 * gate.
 *
 * Class names are fresh (related-rail__*) rather than inherited from the
 * old copy of these styles in section-collection.css: that file still
 * loads on every collection page for the main grid, and shared names would
 * have left its legacy rules fighting these on the same element.
 */
/* Heading + hairline as one line: flex so the rule visibly starts where
   the words end, same annotation grammar as the counted rails elsewhere. */
.related-rail__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.related-rail__heading {
  margin: 0;
  flex-shrink: 0;
}

.related-rail__header::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--color-line);
}

.related-rail__strip {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(var(--page-margin) * -1);
  padding-inline: var(--page-margin);
}

.related-rail__strip::-webkit-scrollbar {
  display: none;
}

.related-rail__tile {
  flex: 0 0 140px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}

.related-rail__tile:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.related-rail__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-m);
  background-color: var(--color-line);
  overflow: hidden;
}

.related-rail__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-rail__placeholder {
  width: 100%;
  height: 100%;
}

.related-rail__placeholder svg {
  width: 100%;
  height: 100%;
}

/* The title row: name left, arrow right, on a hairline that inks up with
   the hover - the same underlined-row grammar the site's "View all" links
   use, shrunk to tile scale. */
.related-rail__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-line);
}

.related-rail__tile:hover .related-rail__row,
.related-rail__tile:focus-visible .related-rail__row {
  border-bottom-color: var(--color-ink);
}

.related-rail__title {
  margin: 0;
  text-transform: none;
  min-width: 0;
}

/* At rest the rail is just names; the arrow is the answer to a pointer,
   not part of the resting composition. Opacity, not display, so it can
   fade rather than pop - and it stays visible for keyboard focus. */
.related-rail__arrow {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0;
}

.related-rail__tile:hover .related-rail__arrow,
.related-rail__tile:focus-visible .related-rail__arrow {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .related-rail__image {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .related-rail__tile:hover .related-rail__image,
  .related-rail__tile:focus-visible .related-rail__image {
    transform: scale(1.04);
  }

  .related-rail__row {
    transition: border-bottom-color 0.2s ease;
  }

  .related-rail__arrow {
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(-4px);
  }

  .related-rail__tile:hover .related-rail__arrow,
  .related-rail__tile:focus-visible .related-rail__arrow {
    transform: translateX(0);
  }

  /* Tile-by-tile entrance, same delays and fourth-place cap as the card
     grids in base.css. */
  .related-rail__strip > [data-reveal]:nth-child(2) {
    transition-delay: 80ms;
  }

  .related-rail__strip > [data-reveal]:nth-child(3) {
    transition-delay: 160ms;
  }

  .related-rail__strip > [data-reveal]:nth-child(4) {
    transition-delay: 240ms;
  }
}

@media screen and (min-width: 750px) {
  .related-rail__strip {
    margin-inline: 0;
    padding-inline: 0;
    flex-wrap: wrap;
  }

  .related-rail__tile {
    flex: 0 0 180px;
  }
}