/* Home page category cards (extension/module/home_tiles): three grey panels in a row,
   each a heading, four category photos in a 2x2 grid and a "See all" link. The panel
   matches the Trending strip above it (recommendations.css, 'home' variant) so the two
   read as one system.

   Link colours carry !important for the same reason the reco strip's do: the theme
   styles every <a> with a more specific selector. */

.home-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.home-tiles-card {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 18px 20px 16px;
  background: #f3f4f5; border: 1px solid #e8eaec; border-radius: 16px;
}
.home-tiles .home-tiles-title {
  margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: #1f2326;
}
.home-tiles-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px;
}
.home-tiles a.home-tiles-tile {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  color: #1f2326 !important; text-decoration: none !important;
}
.home-tiles-img {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: #fff; border-radius: 10px;
}
.home-tiles-img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s ease;
}
.home-tiles-tile:hover .home-tiles-img img,
.home-tiles-tile:focus-visible .home-tiles-img img { transform: scale(1.04); }
.home-tiles-tile:focus-visible { outline: 2px solid #195C5B; outline-offset: 2px; border-radius: 10px; }
.home-tiles-name {
  font-size: 14px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-tiles a.home-tiles-more {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: auto;
  font-size: 15px; font-weight: 600; color: #195C5B !important; text-decoration: none !important;
}
.home-tiles a.home-tiles-more:hover { text-decoration: underline !important; }
.home-tiles-more svg { display: block; }

/* Phone: one scrolling row - a card and the edge of the next, so it is plain there is
   more. No arrows and no auto-rotation; the visitor swipes. */
@media (max-width: 767px) {
  .home-tiles {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .home-tiles::-webkit-scrollbar { display: none; }
  .home-tiles-card {
    flex: 0 0 84%; scroll-snap-align: start;
    gap: 10px; padding: 14px 14px 12px; border-radius: 12px;
  }
  .home-tiles .home-tiles-title { font-size: 18px; }
  .home-tiles-grid { gap: 12px 10px; }
  .home-tiles-name { font-size: 13px; }
  .home-tiles a.home-tiles-more { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-tiles-img img { transition: none; }
}