/* fx/ig-feed.css — "Latest from @lgrwebstudios" grid.
   Reuses the site's .cards grid rhythm (motion.css) at tile scale: square
   thumbnails, house border/hover treatment, no new visual language. */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
  /* DEAD-SPACE FIX (2026-07-24, mobile-perf pass): this used to reserve the
     MAX_TILES=9 footprint (aspect-ratio 1/1, ~920x920 at 1280px) up front so
     the async fetch swapping .ig-grid-fallback for the real tiles never
     shifted #prove-it below. Real production data broke the assumption behind
     that number — the live feed currently returns as few as 1 item (verified
     against the production endpoint), and tools/verify-ig-feed.mjs's own
     tile-count assertion was already loosened from 6-9 to 1-9 — so a fixed
     9-tile reservation left up to ~67% of the section as dead space (measured
     620px of empty space in a 920px box against 1 live item) whenever the
     count came in low, which is now the common case, not the exception.
     Reserving one row's worth (3 square tiles + 2 gaps) instead of 9 bounds
     the worst-case shift to at most one row — small and rare — while any
     count from 0 to 3 (today's real count: 1) needs no more than that single
     reserved row and shows ZERO dead space below it; additional real rows
     beyond the first grow the grid naturally with nothing reserved for them.
     Gap width isn't subtracted from this ratio (3/1 ignores the 24px of
     column gaps), same approximation precision the original 1/1 already used
     for the 9-tile case — a few px off, not a CLS-relevant amount. */
  aspect-ratio: 3 / 1;
  /* Fewer real posts than the reservation covers (or the fallback link, see
     .ig-grid-fallback) shouldn't be stretched/centered into it — pack rows to
     the top so any leftover reserved space collects at the bottom instead of
     surrounding the content. */
  align-content: start;
}

.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.ig-tile:hover { transform: translateY(-3px); border-color: var(--gold); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ig-grid-fallback {
  grid-column: 1 / -1;
  /* Without this the fallback link stretches to fill the whole reserved
     aspect-ratio box (e.g. 920x920 on desktop) instead of sitting as a
     compact strip — this is the permanent visible state if both the live
     and sample fetches fail, so it must not look like a broken blank box. */
  align-self: start;
  text-align: center;
  padding: 24px;
  color: var(--muted);
  text-decoration: underline;
}

@media (max-width: 680px) {
  /* 2 columns -> one row is 2 square tiles + 1 gap, so the one-row ratio
     above (sized for 3 columns) no longer approximates it; reserve the
     2-column one-row footprint instead. Same one-row bound as the default
     rule, same reasoning — see the comment there. */
  .ig-grid { grid-template-columns: repeat(2, 1fr); aspect-ratio: 2 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-tile { transition: none; }
}