/* collections-nav component — GENERATED by tools/make-fixtures.py --emit-components
   from the same source ranges as widgets/collections-nav/fixture.html
   (../../site/css/shared-responsive.css + ../../site/css/blocks-responsive.css + build/css/responsive.css via fixtures.config.json). Byte-identical rules are
   the contract: edit the stage-2 source and regenerate, never this file. */
/* == collections-nav == STAGE 2. Frame 205's 1440 row of five 260×87 wordmarks becomes a wrapping grid —
   2 up on a phone, 3 from 600, the design's 5 from 1200 — each logo scaling inside its column (width 100%,
   aspect-ratio 260/87). At 1600 the container is 1440 and five 1fr columns with a 35 gap are exactly 260
   wide and 87 tall, so the grid IS the stage-1 row with the band's 80 of white below. */

.s-collections-nav { padding-bottom: var(--gap-section); }   /* the 80 of white under Frame 205 (band y1785 h167), fluid to 40 on a phone */
.collections-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pad-35); }   /* Frame 205's 35 gap — the shared 35-scale token, 20 on a phone */
.collections-nav__item { min-width: 0; }
/* the <a> is the tap target: at 320 the 2-up column is 130 wide and the logo only 43.5 tall, so it takes
   the 44 floor there (below 1024); from 560 the logo is taller than 44 and this never applies */
.collections-nav__link { display: block; min-height: 44px; }
.collections-nav__link img { width: 100%; height: auto; aspect-ratio: 260 / 87; }
@media (min-width: 600px)  { .collections-nav { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .collections-nav { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1600px) {
  .s-collections-nav { padding-bottom: 80px; }   /* Frame 205 87 tall + 80 of white below = the 167 band */
  .collections-nav { gap: 35px; }   /* 5 × 260 + 4 × 35 = 1440 = the container at 1600; the row is the wordmarks' 87 */
}
/* hover: the set's second variant, the collection's colour wordmark (12617:212 / :221 / :218 / :224 / :215).
   It sits on the link as a pseudo-element the image cross-fades into — drawn at the image's own box, loaded
   with the page (an opacity-0 background is still fetched), never hit-tested (pointer-events: none). */
.collections-nav__link { position: relative; }
.collections-nav__link img { transition: opacity 0.2s ease; }
.collections-nav__link::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 260 / 87;
  background: var(--logo-hover) center / 100% 100% no-repeat;
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.collections-nav__link:hover img, .collections-nav__link:focus-visible img { opacity: 0; }
.collections-nav__link:hover::after, .collections-nav__link:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .collections-nav__link img, .collections-nav__link::after { transition: none; } }