/**
 * Free Google Sheets templates gallery (/free-google-sheets-templates/).
 *
 * Its own file rather than a block in theme.css, same reasoning as
 * spreadsheet-health-check.css and checkout-onescreen.css: theme.css is the one
 * stylesheet every terminal edits, so a page-specific rule set added to it
 * cannot be deployed without also deploying whatever else is uncommitted there.
 *
 * Reuses .block / .wrap / .eyebrow / .display / .muted from theme.css. Only the
 * grid and the card are new.
 */

.sheet-gallery .sg-head { max-width: 720px; margin: 0 0 48px; }
.sheet-gallery .sg-head .display { margin: 0 0 16px; }
.sheet-gallery .sg-head .muted { margin: 0; font-size: 16px; line-height: 1.6; }

/* minmax(0,1fr), never 1fr: a 1536px image in a 1fr track sets the track's min
   width to its own intrinsic width and the grid overflows the page. */
.sheet-gallery .sg-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.sheet-gallery .sg-card { margin: 0; }

.sheet-gallery .sg-card__link {
  display: grid; gap: 0; height: 100%;
  text-decoration: none; color: inherit;
  border-radius: var(--radius); overflow: hidden;
  background: var(--paper-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sheet-gallery .sg-card__link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(28, 26, 23, .1); }
.sheet-gallery .sg-card__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The shot is the argument of the page, so the tile is fixed at 16:9 and the
   image fills it. The nine flat captures are 1536x864; the Monthly Budget card
   is a post hero at 1536x857 and would letterbox by 7px without the cover. */
.sheet-gallery .sg-card__shot { display: block; aspect-ratio: 16 / 9; background: var(--paper); }
.sheet-gallery .sg-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sheet-gallery .sg-card__body { display: grid; gap: 8px; padding: 22px 24px 24px; align-content: start; }
.sheet-gallery .sg-card__title { font-family: var(--font-serif); font-weight: 400; font-size: 20px; line-height: 1.25; }
.sheet-gallery .sg-card__blurb { font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.sheet-gallery .sg-card__cta { margin-top: 6px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

.sheet-gallery .sg-foot { max-width: 720px; margin: 48px 0 0; font-size: 14px; line-height: 1.6; }

@media (max-width: 760px) {
  .sheet-gallery .sg-grid { gap: 24px; }
  .sheet-gallery .sg-head { margin-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-gallery .sg-card__link { transition: none; }
  .sheet-gallery .sg-card__link:hover { transform: none; }
}