/* feature-plans/swipe-card-rows.md: card rows that never squeeze.
   Arthur, 2026-10-16: cards that would get squeezed become a swipeable row,
   and only on touch screens (a mouse can't swipe, so on desktop the row
   was stuck).

   <div class="hpz-card-row" role="region" aria-label="…"> cards… </div>

   Mouse and trackpad (desktop): a grid that wraps; each card gets at least
   --hpz-card-min, so cards move to the next line instead of squeezing.

   Touch screens (phones, tablets): cards sit in one grid row. While each
   gets at least --hpz-card-min they share the width (up to --hpz-card-max
   each); when they don't, the row swipes sideways with snap and the next
   card peeks in. On phones each card is the same width and stops in the
   centre, its neighbours peeking in on both sides. static/js/card_row.js fades the edge that still has cards
   past it (the tab-strip masks) and makes the row focusable while it
   scrolls.

   Either way grid rows stretch, so cards in a row are the same height.

   .hpz-card-row--wrap (inside a .hpz-card-row-host) is for lists that can be
   long: on touch screens too it wraps as a grid while two cards fit side by
   side, and swipes only below that. */

.hpz-card-row {
  --hpz-card-min: 240px;
  --hpz-card-max: 340px;
  --hpz-card-gap: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--hpz-card-min), 100%), 1fr));
  gap: var(--hpz-card-gap);
  align-items: stretch;
  list-style: none;
  /* Room for hover lifts and shadows, which a scroll container would clip
     (same box in both modes so the spacing around the row doesn't change). */
  padding: 6px 4px 12px;
  margin: -6px -4px -12px;
}

.hpz-card-row > * {
  min-width: 0;
}

@media (hover: none) and (pointer: coarse) {
  .hpz-card-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(var(--hpz-card-min), 82%), var(--hpz-card-max));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Snap to the padding edge, or the first card starts scrolled by 4px. */
    scroll-padding-inline: 4px;
  }

  .hpz-card-row::-webkit-scrollbar {
    display: none;
  }

  .hpz-card-row > * {
    scroll-snap-align: start;
  }
}

/* Phones (Arthur, 2026-10-17): every card is the same width and stops in
   the centre, the first one starting there too. The side padding is the gap
   left beside a centred card, so the neighbours peek in on both sides and
   only they sit under the edge fade. */
@media (hover: none) and (pointer: coarse) and (max-width: 640px) {
  /* The padding (a percentage of the row's container) sets the gap beside
     a centred card, about 9% a side or more to keep a card at most
     --hpz-card-max; each card then fills exactly what is left (a grid
     track's percentage is of the row's inner width), so it is centred. */
  .hpz-card-row {
    grid-auto-columns: 100%;
    padding-inline: max(9%, calc((100% - var(--hpz-card-max)) / 2));
  }

  .hpz-card-row > * {
    scroll-snap-align: center;
  }
}

.hpz-card-row.can-scroll-right {
  -webkit-mask-image: linear-gradient(to right, #000 93%, transparent);
  mask-image: linear-gradient(to right, #000 93%, transparent);
}

.hpz-card-row.can-scroll-left {
  -webkit-mask-image: linear-gradient(to left, #000 93%, transparent);
  mask-image: linear-gradient(to left, #000 93%, transparent);
}

/* The fades cover only the strip beside a centred card (its 82% width
   leaves 9% each side), never the card itself. */
.hpz-card-row.can-scroll-left.can-scroll-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* Keyboard focus shows the whole row: no fades, a gold ring. */
.hpz-card-row:focus-visible {
  outline: 2px solid var(--gold, #d9a72c);
  outline-offset: -2px;
  border-radius: 14px;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Long lists on touch screens: a wrapping grid while two cards fit side by
   side. The
   threshold is two --hpz-card-min cards plus a gap (container queries
   can't read custom properties). */
.hpz-card-row-host {
  container-type: inline-size;
  container-name: hpz-card-row;
}

@container hpz-card-row (min-width: 500px) {
  .hpz-card-row--wrap {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(var(--hpz-card-min), 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media print {
  .hpz-card-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}