/* Narto · "Hvem vi bygger til" on the home page: two rows of trade photos that roll in opposite directions, and a
   row of hang tags between them (markup: tools/partials/trades.html, motion: assets/js/bands.js).
   On concrete, because the examples before it are on ink and the steps after it are on green.

   Never a strip to swipe. Moving: bands.js doubles the items (the copies are hidden from assistive tech and cannot be
   focused) and each track slides by half its width at an even speed, neighbouring rows in opposite directions.
   Still (reduced motion, or no script): the photo rows show their first six as an even grid (2, 3 or 6 across) and
   the tags wrap onto several lines. Decided by CSS, so nothing reflows when a row starts moving.

   This file holds every rule for the section. The older tag-only block in components.css ("the trades band: hang tags
   on a rail") is overridden here where it differs and can be deleted. */

.trades { overflow-x: clip; }
.trades .section__lead { margin-bottom: var(--space-xl); }

/* ---------- the rows ---------- */
.band { --band-gap: var(--space-s); position: relative; }
.band + .band { margin-top: var(--space-s); }
.band__viewport {
  overflow: hidden;
  padding-block: 3px; /* room for the focus outline */
}
.band__viewport:focus-visible { outline-offset: -3px; }
.band__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--band-gap);
  width: max-content;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}
.band.is-moving .band__track {
  padding-inline: 0 var(--band-gap); /* one gap after the last item, so half the track is exactly one cycle */
  animation: band-slide var(--band-time, 60s) linear infinite;
}
.band.is-moving[data-direction="reverse"] .band__track { animation-direction: reverse; }
/* A row holds still under the pointer (devices with hover only: on touch a hover sticks), while it has keyboard
   focus, after a tap (bands.js toggles .is-tapped; a second tap lets it go), off screen and in a hidden tab
   (.is-held). */
@media (hover: hover) { .band.is-moving:hover .band__track { animation-play-state: paused; } }
.band.is-moving .band__viewport:focus-visible .band__track,
.band.is-tapped .band__track,
.band.is-held .band__track { animation-play-state: paused; }
@keyframes band-slide { to { transform: translateX(-50%); } }

/* ---------- still: reduced motion, or no script ---------- */
@media (prefers-reduced-motion: reduce) {
  .band__track { animation: none !important; }
  .band .band__track { flex-wrap: wrap; width: auto; }
  .band.band--photos .band__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band--photos .trade { width: auto; }
  .band--photos .trade:nth-child(n+7) { display: none; }
}
html:not(.js) .band .band__track { flex-wrap: wrap; width: auto; }
html:not(.js) .band.band--photos .band__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:not(.js) .band--photos .trade { width: auto; }
html:not(.js) .band--photos .trade:nth-child(n+7) { display: none; }
@media (min-width: 641px) {
  @media (prefers-reduced-motion: reduce) { .band.band--photos .band__track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  html:not(.js) .band.band--photos .band__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  @media (prefers-reduced-motion: reduce) { .band.band--photos .band__track { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  html:not(.js) .band.band--photos .band__track { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- a trade with a photo: the work itself, 4:5, the trade under it ---------- */
.trade { flex: none; width: clamp(9.5rem, 8rem + 6vw, 13rem); }
.trade__img {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--rule);
}
.trade__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trade__name {
  display: block;
  margin-top: var(--space-xs);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}

/* ---------- the middle row: hang tags on a rail ---------- */
/* White, square, an eyelet on the left, the trade in the display face. Whole objects passing by, so a name is never
   chopped mid-word; clearly not the photo rows. */
.band--tags .band__track { padding-block: var(--space-xs); }
.tag {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: .55rem 1.25rem .55rem 2.4rem;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.tag::before { /* the eyelet: a hole showing the section behind, ringed in green */
  content: "";
  position: absolute;
  top: 50%;
  left: .9rem;
  width: .6rem;
  height: .6rem;
  margin-top: -.3rem;
  border-radius: 50%;
  background: var(--concrete);
  box-shadow: 0 0 0 2px var(--accent);
}
/* The older block in components.css shrinks the tags on phones whenever the row is not moving. Here they keep their
   size until the row is still for good (reduced motion, no script), so nothing jumps when the row starts. */
@media (max-width: 640px) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .band:not(.is-moving) { --band-gap: var(--space-s); }
    html.js .band:not(.is-moving) .tag { min-height: 3.5rem; padding: .55rem 1.25rem .55rem 2.4rem; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
    html.js .band:not(.is-moving) .tag::before { left: .9rem; width: .6rem; height: .6rem; margin-top: -.3rem; }
  }
  /* Still on a phone every tag shows at once: smaller tags, so the list stays a few rows. */
  @media (prefers-reduced-motion: reduce) {
    html .band--tags { --band-gap: var(--space-xs); }
    html .band--tags .tag { min-height: 2.75rem; padding: .4rem .75rem .4rem 1.9rem; font-size: 1.0625rem; }
    html .band--tags .tag::before { left: .75rem; width: .5rem; height: .5rem; margin-top: -.25rem; }
  }
  html:not(.js) .band--tags { --band-gap: var(--space-xs); }
  html:not(.js) .band--tags .tag { min-height: 2.75rem; padding: .4rem .75rem .4rem 1.9rem; font-size: 1.0625rem; }
  html:not(.js) .band--tags .tag::before { left: .75rem; width: .5rem; height: .5rem; margin-top: -.25rem; }
}