/* ═══════════════════════════════════════════════════════════════
   tile-sizing.css — match West Hartford kiosk tile dimensions
   ───────────────────────────────────────────────────────────────
   Luke flag (2026-05-13): demo tiles felt enormous compared to
   the WH kiosk (tinkytown.com/ct/West-hartford/townhall).

   Demo defaults were:
     .demo-tile        aspect-ratio:1; (square, ~180px tall on 600px / 3-col)
     .demo-tile-emoji  font-size: 80px
   WH defaults were:
     .kiosk-tile       min-height: 110px (130px on wider screens)
     .kiosk-tile-emoji ~44px

   Override here so the demo's tiles read as the same shape +
   density as WH. Aspect-ratio is killed so tiles size by their
   min-height, not their (wide) parent column. Emoji shrinks to
   match. Labels stay the same — WH and demo both use the same
   uppercase-bold treatment.

   Loaded AFTER styles.css so the overrides win without !important
   (where the cascade allows it).
   ═══════════════════════════════════════════════════════════════ */

.demo-tile {
  /* WH style: rectangle with min-height, not square. */
  aspect-ratio: auto;
  min-height: 130px;
  border-radius: 14px;     /* WH uses --radius which renders ~14px */
}

.demo-tile-emoji {
  /* Was 80px — way bigger than WH. Match WH's ~44px. */
  font-size: 44px;
  padding: 8px 0;
}

.demo-tile-label {
  /* Slightly tighter label so the rectangle reads cleanly at the
     new shorter height. */
  font-size: 0.72rem;
  padding: 7px 5px;
}

/* Wider screens (tablet/desktop) get the WH-style bump. */
@media (min-width: 720px) {
  .demo-tile {
    min-height: 140px;
  }
  .demo-tile-emoji {
    font-size: 48px;
  }
}

/* Rich mode (horizontal bars) is unchanged — that's a different
   layout the user opts into via Settings → Display → Rich. */
.tablet-grid.rich-mode .demo-tile {
  min-height: 0;
}
.tablet-grid.rich-mode .demo-tile-emoji {
  font-size: 1.5rem;       /* matches the existing rich-mode rule */
  padding: 10px 14px;
}