/* Home page review photos (extension/module/home_reviews). The panel, heading, strip
   and arrows come from recommendations.css (the Trending strip's 'home' variant);
   this file draws the tiles, which sit in the same 190px columns as the Trending
   cards so the two strips line up.

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

.home-reviews .reco-row { scroll-snap-type: x proximity; }

.home-reviews a.home-reviews-tile {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  scroll-snap-align: start;
  padding: 8px 8px 12px;
  background: #fff; border: 1px solid #e6e8eb; border-radius: 14px;
  color: #1f2326 !important; text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.home-reviews a.home-reviews-tile:hover { border-color: #c9d3d2; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.home-reviews a.home-reviews-tile:focus-visible { outline: 2px solid #195C5B; outline-offset: 2px; }

/* Square: reviewer photos come in every shape (phone portrait, landscape, square),
   and cover keeps the strip even. The whole photo is one click away on the product. */
.home-reviews-photo {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 10px; background: #eef0f1;
}
.home-reviews-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-reviews-photo em {
  position: absolute; right: 6px; bottom: 6px;
  padding: 1px 7px; border-radius: 999px;
  font-style: normal; font-size: 11px; font-weight: 600; line-height: 1.5;
  color: #fff; background: rgba(0, 0, 0, .55);
}

.home-reviews-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; padding: 0 4px; min-width: 0; }

/* Three lines, the same height on every tile, so the bylines line up across the row. */
.home-reviews-text {
  font-size: 13px; line-height: 1.45; min-height: calc(3 * 1.45em);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.home-reviews-author { font-size: 12px; color: #5f676e; }

.home-reviews-product {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  margin-top: auto; padding-top: 8px; border-top: 1px solid #eef0f1;
  font-size: 12px; font-weight: 600; color: #195C5B;
}
.home-reviews-product img { flex: 0 0 auto; width: 20px; height: 27px; object-fit: contain; }
.home-reviews-product span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 480px) {
  .home-reviews-text { font-size: 12px; }
}

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