/* NEED IDEAS?, THE TILES (COO hands 2026-10-14, Steven's words read back and
   confirmed, with his sketch of the home: the want card on top, then the
   ideas strip, a small tab label at its top left, "See all" at its top
   right, two rows of four small square tiles):
   templates/feed/_need_ideas_card.html.

   The frame and the tab are the home card's own (.start-ideas-card in
   ready-targets.css; .start-intro-card__tag in start-home.css, and
   home-cards.css on /home). "See all" rides the tab's row at the right, on
   the card's top edge where the tab sits, or in the card's flow where the
   tab is in it (the visitor deck's entry, visitor-deck.css).

   The tiles: rows of four at phone width, eight to a page (two rows), the
   pages side by side and scrolling sideways, a page at a time. A tile is
   its square picture, the title on one line and the price (or Free).
   Tokens only. */

.start-ideas-card.need-tiles { gap: 0; padding: var(--space-6) var(--space-4) var(--space-4); }

/* the tab at the left, See all at the right of the same row */
.need-tiles > .need-tiles__pills { right: var(--space-4); justify-content: space-between; }
.need-tiles__all {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--size-8);
  padding: 0 var(--space-3);
  border: var(--feed-card-border);
  border-radius: var(--radius-full);
  background: var(--feed-card-bg);
  color: var(--tb-brand-purple, var(--accent-tertiary));
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.need-tiles__all:hover { text-decoration: underline; }
.need-tiles__all:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; }
/* where the tab sits in the card's flow, See all needs no edge of its own */
.vd-entry .need-tiles__all { border: 0; background: transparent; padding-right: 0; }

.need-tiles__scroll {
  display: flex;
  gap: var(--space-4);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.need-tiles__scroll::-webkit-scrollbar { display: none; }
.need-tiles__page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: var(--space-3) var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}
/* with more than one page, the next one shows its edge so it reads as more */
.need-tiles__page:not(:only-child) { flex-basis: calc(100% - var(--space-6)); }

.need-tile { min-width: 0; }
.need-tile__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-primary);
  text-decoration: none;
}
.need-tile__link:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; border-radius: var(--radius-md); }
.need-tile__pic {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--tb-brand-purple, var(--accent-tertiary));
  color: var(--text-inverse);
}
.need-tile__pic img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.need-tile__pic iconify-icon { font-size: var(--size-8); }
.need-tile__title {
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.need-tile__price {
  overflow: hidden;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.need-tile__price .rt-fees { font-size: inherit; }
.need-tile__link:hover .need-tile__title { text-decoration: underline; }