/* Home page Top Rated (extension/module/home_top_rated): a teal panel and the grey
   recommendation strip side by side, joined into one block. The strip is the
   Trending strip's 'home' variant (recommendations.css); this file only joins it to
   the panel and draws the panel.

   No overflow:hidden on the block: the strip's arrows sit on its outer edge, half
   outside it, and would be cut. Each half rounds its own outer corners instead.

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

.home-top-rated {
  display: grid; grid-template-columns: 230px minmax(0, 1fr);
}

/* The panel's content is one group - icon, heading, sentence, link - centred both
   ways. With the link pinned to the bottom (the first version) the heading sat at
   the top and the middle of the panel was an empty teal block. */
.home-top-rated-side {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 22px;
  background: #195C5B; color: #fff;
  border-radius: 16px 0 0 16px;
}
.home-top-rated-intro {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; max-width: 190px;
}
.home-top-rated-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 2px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #f5b942;
}
.home-top-rated-icon svg { display: block; width: 26px; height: 26px; }
.home-top-rated .home-top-rated-title { margin: 0; padding: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: #fff; }
.home-top-rated-sub { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.home-top-rated a.home-top-rated-browse {
  margin-top: 6px;
  padding: 8px 18px; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  color: #fff !important; text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.home-top-rated a.home-top-rated-browse:hover,
.home-top-rated a.home-top-rated-browse:focus-visible { background: #fff; color: #195C5B !important; }

/* The strip fills its half to the panel's height; its left edge is the panel. */
.home-top-rated-strip { min-width: 0; display: flex; }
.home-top-rated-strip > .reco-section--home.reco-section--row {
  flex: 1 1 auto; min-width: 0;
  border-left: 0; border-radius: 0 16px 16px 0;
}

/* Phone and small tablet: the panel becomes a header bar over the strip, the
   sentence goes (the heading and the link say enough at this width). */
@media (max-width: 767px) {
  .home-top-rated { grid-template-columns: minmax(0, 1fr); }
  .home-top-rated-side { justify-content: stretch; padding: 12px 14px; border-radius: 12px 12px 0 0; }
  .home-top-rated-intro {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
    max-width: none; width: 100%; text-align: left;
  }
  .home-top-rated-icon, .home-top-rated-sub { display: none; }
  .home-top-rated .home-top-rated-title { font-size: 19px; }
  .home-top-rated a.home-top-rated-browse { margin-top: 0; padding: 6px 12px; font-size: 13px; }
  .home-top-rated-strip > .reco-section--home.reco-section--row {
    border-left: 1px solid #e8eaec; border-top: 0; border-radius: 0 0 12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-top-rated a.home-top-rated-browse { transition: none; }
}