/* ── mosaic.css ────────────────────────────────────────────────────────────
   "Mosaic" view mode.

   Same ActivityCard markup as the plain "card" grid — there is no separate
   mosaic component. The only difference is the data-grid-style="mosaic"
   attribute AppShell puts on .app-shell while the user has Mosaic selected
   in the layout toggle (a single button that loops card → list → mosaic →
   card..., see AppShell.razor's CycleLayoutMode). That attribute activates
   the rules below, which size each card according to its
   Activity.LayoutHint ("featured" | "compact" | omitted = standard).

   Deliberately scoped to [data-grid-style="mosaic"] only — plain "Card"
   view stays 100% uniform even if a pack sets layoutHint, so the two modes
   read as genuinely different choices instead of Card "leaking" hierarchy.

   Mobile-first: the base rules below assume ONE column (a phone in
   portrait). Featured cards get extra height, bigger type, and the accent
   border — there's nothing to span widthwise yet, so the hierarchy comes
   from being taller/bolder, not wider. From ~600px there's room for a real
   multi-column grid, so featured cards start spanning width too. From
   ~900px a third column fits on most desktop windows.
───────────────────────────────────────────────────────────────────────────── */

/* ── Base / mobile: single column, dense packing ready for when columns appear ── */
[data-grid-style="mosaic"] .activity-grid {
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
}

/* Featured: taller + bolder, even with nothing to span yet */
[data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"] {
  grid-row: span 2;
  border: 2px solid var(--color-accent, #3b82f6);
  padding: var(--spacing-lg, 24px);
}

[data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"] .activity-card__emoji {
  font-size: 2.5rem;
}

[data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"] .activity-card__title {
  font-size: 1.15rem;
}

/* Compact: lower visual weight — tighter padding, no description */
[data-grid-style="mosaic"] .activity-card[data-layout-hint="compact"] {
  padding: var(--spacing-sm, 10px) var(--spacing-md, 16px);
}

[data-grid-style="mosaic"] .activity-card[data-layout-hint="compact"] .activity-card__description {
  display: none;
}

/* ── Tablet and up: real multi-column grid — featured cards span width too ── */
@media (min-width: 600px) {
  [data-grid-style="mosaic"] .activity-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md, 16px);
  }

  [data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"] {
    grid-column: span 2;
  }
}

/* ── Desktop: a little more breathing room between tiles ── */
@media (min-width: 900px) {
  [data-grid-style="mosaic"] .activity-grid {
    gap: var(--spacing-lg, 24px);
  }
}

/* ── Auto-variety fallback ────────────────────────────────────────────────
   Bugfix: mosaic mode only ever looked different from Card mode when a pack
   author had set Activity.layoutHint on individual activities. Most real
   packs (see badplatserisverige/samfunden) never set that field, so every
   card rendered with data-layout-hint="" and mosaic silently degraded into
   a plain uniform grid — which read as "mosaic doesn't work".

   Fix: when a card has NO explicit hint, assign one from a repeating
   pattern instead, so mosaic always shows visual variety out of the box.
   A pack that DOES set layoutHint keeps full control — the featured/compact
   rules above target [data-layout-hint="featured"/"compact"] explicitly,
   which is a different (and non-overlapping) attribute value than the
   [data-layout-hint=""] selector used here. ── */
[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1) {
  grid-row: span 2;
  border: 2px solid var(--color-accent, #3b82f6);
  padding: var(--spacing-lg, 24px);
}

[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1) .activity-card__emoji {
  font-size: 2.5rem;
}

[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1) .activity-card__title {
  font-size: 1.15rem;
}

[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+3) {
  padding: var(--spacing-sm, 10px) var(--spacing-md, 16px);
}

[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+3) .activity-card__description {
  display: none;
}

@media (min-width: 600px) {
  [data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1) {
    grid-column: span 2;
  }
}