/* Home page trust panel (extension/module/home_trust): a light teal panel with a
   heading and four points in a row. Light on purpose: the dark teal band it replaced
   merged with the Top Rated panel below, which is the page's one dark teal block.
   Radius and padding match the grey panels around it (recommendations.css 'home'
   variant, home-tiles.css). */

.home-trust {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px;
  background: #e8f2f1; border-radius: 16px;
}
.home-trust .home-trust-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: #1f2326; }

.home-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.home-trust-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }

.home-trust-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #195C5B; color: #fff;
}
.home-trust-icon svg { display: block; width: 21px; height: 21px; }

.home-trust .home-trust-point { margin: 0 0 3px; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: #1f2326; }
.home-trust-text { margin: 0; font-size: 13px; line-height: 1.5; color: #47524f; }

/* Tablet: two by two. */
@media (max-width: 991px) {
  .home-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone: one scrolling row of white cards, a card and the edge of the next, like
   the category cards above. */
@media (max-width: 600px) {
  .home-trust { padding: 14px 12px; border-radius: 12px; }
  .home-trust .home-trust-title { font-size: 17px; }
  .home-trust-grid {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .home-trust-grid::-webkit-scrollbar { display: none; }
  .home-trust-item { flex: 0 0 80%; scroll-snap-align: start; padding: 12px; background: #fff; border-radius: 12px; }
}