/* Reviews route placement and surface bands. Shared component internals live
   in assets/css/components/. .video-reviews/.rating stay data-route-scoped
   here because their unscoped defaults still live in page-composition.css
   with matching specificity — dropping the attribute would flip the cascade. */

.reviews-intro {
  padding-top: 148px;
  background: #fafafa;
}

body[data-route="reviews"] .video-reviews {
  background: linear-gradient(to bottom, #fafafa 100%, #fff 100%);
}

body[data-route="reviews"] .reviews-rating {
  background: #fff;
  box-shadow: none;
}

@media (min-width: 1440px) {
  body[data-route="reviews"] .reviews-rating {
    padding-bottom: 120px;
  }
}

@media (min-width: 768px) and (max-width: 1359px) {
  .reviews-intro {
    padding: 128px 0 0;
  }
}

@media (max-width: 767px) {
  .reviews-intro {
    padding-top: 122px;
  }

  body[data-route="reviews"] .video-reviews {
    margin-top: 0;
    background: #fafafa;
    box-shadow: 0 40px 0 #fafafa;
  }

  body[data-route="reviews"] .reviews-rating {
    margin-top: 40px;
  }

  body[data-route="reviews"]>.site-footer {
    margin-top: 40px;
    box-shadow: 0 -40px 0 #fafafa;
  }
}