/* ── 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;
}

/* ── Bugfix: featured proportions ─────────────────────────────────────────
   grid-row: span 2 (above) makes the *grid cell* taller, but the card's own
   layout was still the normal row-flex (icon left, text right) with
   align-items:flex-start — CSS Grid's default align-items:stretch then
   forces the card to fill that tall cell while its content just packs to
   the top and stops, leaving a dead gap underneath (worse still for
   smart-visual cards, whose image was pinned to a flat 160px regardless of
   cell height). Fix: featured cards get a real vertical layout instead —
   the visual grows to fill whatever height the tile ends up with (flex,
   not a guessed fixed number, so it adapts to actual row height), the text
   block keeps its natural size below it, and the description gets more
   room instead of clamping to 2 lines. Applies to both an explicit
   layoutHint="featured" and the auto-variety nth-child(5n+1) fallback. ── */
[data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"],
[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1) {
  flex-direction: column;
  align-items: stretch;
}

/* Plain emoji fallback (no image/video/map): let it grow into a real
   visual panel instead of a small glyph stranded at the top. */
[data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"] > .activity-card__emoji:not(.activity-card__emoji--smart),
[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1) > .activity-card__emoji:not(.activity-card__emoji--smart) {
  width: 100%;
  flex: 1 1 auto;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt, rgba(0,0,0,0.035));
  border-radius: var(--border-radius-md, 12px);
}

/* Smart visual (real image/video/map): grow past the normal 160px cap
   instead of staying pinned to it while the tile is twice as tall, and
   restore true edge-to-edge bleed (the existing 24px featured padding,
   just above, would otherwise inset the image on all four sides). */
[data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"]:has(.activity-card__emoji--smart),
[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1):has(.activity-card__emoji--smart) {
  padding: 0;
  gap: 0;
}
[data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"] > .activity-card__emoji--smart,
[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1) > .activity-card__emoji--smart {
  height: auto;
  min-height: 220px;
  flex: 1 1 auto;
}
[data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"] .activity-card__fav,
[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1) .activity-card__fav {
  top: var(--spacing-sm, 10px);
}

/* Text block: natural height (don't stretch to match the visual), more
   room for the description instead of clamping to 2 lines. */
[data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"] > .activity-card__body,
[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1) > .activity-card__body {
  flex: 0 0 auto;
}
[data-grid-style="mosaic"] .activity-card[data-layout-hint="featured"] .activity-card__description,
[data-grid-style="mosaic"] .activity-card[data-layout-hint=""]:nth-child(5n+1) .activity-card__description {
  -webkit-line-clamp: 4;
}

/* 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;
  }
}