/* Scoped overrides for the Customizer-managed review spec box. */
@media (min-width: 651px) {
  .review-spec .review-spec__ratings { justify-content: flex-start; }
}

@media (min-width: 651px) and (max-width: 767px) {
  .review-spec .review-spec__row:not(.hcdb-cast) {
    grid-template-columns: 135px minmax(0, 1fr);
    border-top-color: #b8c6d5;
  }
  .review-spec .review-spec__label {
    justify-content: flex-start;
    text-align: left;
    border-right: 1px solid #b8c6d5;
    border-bottom: 0;
    padding: 12px 14px;
  }
  .review-spec .review-spec__label::before {
    width: 3px;
    height: auto;
    inset: 0 auto 0 0;
  }
  .review-spec .review-spec__content {
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .review-spec .review-spec__row--title .review-spec__content { align-items: flex-start; }
  .review-spec .review-spec__row--badges .review-spec__content,
  .review-spec .review-spec__badges { justify-content: flex-start; }

  .review-spec .review-spec__row--production .review-spec__content {
    align-items: flex-start;
    text-align: left;
  }
  .review-spec .review-spec__row--production .review-spec__company-pair {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
  }
  .review-spec .review-spec__row--production .review-spec__meta-link {
    display: inline-flex;
    justify-content: flex-start;
    margin: 0;
    text-align: left;
    white-space: normal;
  }
  .review-spec .review-spec__row--production .review-spec__company-pair .review-spec__divider {
    display: none;
  }

  .review-spec .review-spec__row--score .review-spec__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 14px;
  }
  .review-spec .review-spec__row--score .review-spec__scores {
    justify-content: flex-start;
    gap: 8px;
  }
  .review-spec .review-spec__row--external .review-spec__content { justify-content: flex-start; }
  .review-spec .review-spec__ratings {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
  }
  .review-spec .review-spec__ratings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 523px; /* Three 169px badges plus two 8px gaps. */
  }
  .review-spec .review-spec__ratings .review-rating {
    box-sizing: border-box;
    align-items: center;
    width: auto;
    min-width: 0;
    /* Match the score label line-height, vertical padding and border. */
    min-height: calc(.84rem + 30px);
    padding: 5px 8px;
    gap: 4px;
    white-space: nowrap;
  }
}

@media (max-width: 650px) {
  .review-spec .review-rating__max {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .review-spec .review-spec__row--score .review-spec__scores {
    justify-content: center;
    gap: 8px;
  }
  .review-spec .review-spec__row--score .review-score {
    box-sizing: border-box;
    flex: 0 1 min(132px, calc(50% - 4px));
    min-width: 0;
    padding: 8px;
    gap: 6px;
  }
  .review-spec .review-spec__row--score .review-score__label {
    min-width: 0;
    padding: 5px 7px;
    font-size: 12px;
  }
  .review-spec .review-spec__row--score .review-score__value { font-size: 19px; white-space: nowrap; }
  .review-spec .review-spec__row--score .review-score__max { font-size: 12px; }
  .review-spec .review-spec__row--external .review-spec__content { display: flex; justify-content: center; }
  .review-spec .review-spec__ratings {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
  }
  .review-spec .review-spec__ratings .review-rating {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 min(112px, calc(33.333333% - 4px));
    width: auto;
    min-width: 0;
    min-height: 36px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 5px 4px;
    white-space: nowrap;
  }
  .review-spec .review-spec__ratings .review-rating__site { font-size: 12px; line-height: 1.2; }
  .review-spec .review-spec__ratings .review-rating__value { font-size: 14px; line-height: 1.2; }
}

@media (max-width: 360px) {
  .review-spec .review-spec__ratings .review-rating { flex-direction: column; gap: 2px; }
}