/* ===========================================================
   Menu mode: CATGRID — «شبكة الأقسام»
   The menu opens on a 2-column grid of photo tiles, one per
   category — no pills bar at the top. Tapping a tile opens the
   category with a sticky back bar. App-like, photo-forward.
   =========================================================== */

/* Home grid: 2 columns on mobile, fluid on wide screens */
.mode-catgrid .cat-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) {
  .mode-catgrid .cat-tiles { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
}

.mode-catgrid .cat-home-head { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 18px; }
.mode-catgrid .cat-home-head h2 { font-size: 30px; letter-spacing: -0.5px; }

/* Tiles: square photo, floating icon chip breaking out of the media */
.mode-catgrid .cat-tile { border-radius: 20px; }
.mode-catgrid .cat-tile-media { aspect-ratio: 1 / 1; }
@media (min-width: 720px) {
  .mode-catgrid .cat-tile-media { aspect-ratio: 4 / 3; }
}
.mode-catgrid .cat-tile-icon {
  margin-top: -30px; width: 46px; height: 46px; font-size: 23px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-light, #fff); border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 15px; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
  position: relative; z-index: 2;
}
.mode-catgrid .cat-tile-body { padding: 8px 12px 13px; gap: 2px; }
.mode-catgrid .cat-tile-name { font-size: 15.5px; }
.mode-catgrid .cat-tile-en { display: none; }
.mode-catgrid .cat-tile-teaser { display: none; }   /* keep tiles clean */
.mode-catgrid .cat-tile-go { display: none; }        /* the whole tile is the button */
.mode-catgrid .cat-tile-count { margin-top: 2px; }

/* Slight lift-off card feel */
.mode-catgrid .cat-tile { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07); }
.mode-catgrid .cat-tile:active { transform: scale(0.97); }