/* Uniform plum tint for the five-plate trial. */
:root {
  --five-plate-overlay: linear-gradient(rgb(40 31 49 / 63%), rgb(40 31 49 / 63%));
}

/* Local review option. The source factsheets informed the plate styles. */
.venue-comparison .visual-comparison thead th:nth-child(5) {
  --dish-zoom: 1.03839;
  /* Match The Renshaw's measured top and bottom rim. */
  background-position: center, center calc(50% - 1.20px);
}

:is(.visual-comparison thead th:nth-child(4), .mobile-restaurant-entry:nth-of-type(3)) {
  --dish-zoom: 1.08;
}
.venue-comparison .visual-comparison thead th:nth-child(4) {
  --dish-zoom: 1.0835;
  /* Hold the measured top rim as the image grows toward the bottom. */
  background-position: center, center calc(50% + .39px);
}


:is(.visual-comparison thead th:nth-child(2), .mobile-restaurant-entry:nth-of-type(1)) {
  --reference-dish: url("./champions-lamb-gold-rim-ai.jpg");
  --dish-zoom: 1.06;
}
:is(.visual-comparison thead th:nth-child(3), .mobile-restaurant-entry:nth-of-type(2)) {
  --reference-dish: url("./renshaw-cauliflower-white-plate-ai.jpg");
}

.venue-comparison .visual-comparison thead th:nth-child(3),
.venue-comparison .mobile-comparison .mobile-restaurant-entry:nth-of-type(2) .restaurant-nameplate {
  background-image:
    var(--five-plate-overlay),
    var(--reference-dish), var(--reference-dish);
  background-position: center, calc(50% + .89px) calc(50% - .51px), center;
  background-repeat: no-repeat;
}
.venue-comparison .visual-comparison thead th:nth-child(3) {
  /* Match the measured Champions’ Room rim height. The back layer fills the subpixel edges. */
  background-size: cover, max(100%, 253.36px) 255.97px, cover;
  background-position: center, calc(50% + .89px) calc(50% - 2.51px), center;
}
.venue-comparison .mobile-comparison .mobile-restaurant-entry:nth-of-type(2) .restaurant-nameplate {
  background-size: cover, 99.6% auto, cover;
}
.venue-comparison .visual-comparison .comparison-name-action .comparison-link:is(:hover, :focus-visible) {
  color: #0b3c39;
  background-color: #fff;
  border-color: #fff;
  text-shadow: none;
}

:is(.visual-comparison thead th:nth-child(5), .mobile-restaurant-entry:nth-of-type(4)) {
  --reference-dish: url("./veranda-carbonara-white-table-ai.jpg");
}

.venue-comparison .visual-comparison thead th:nth-child(6) {
  --dish-zoom: 1.04362;
  /* Optical correction for the brighter rim in the desktop comparison. */
  background-position: center, center calc(50% + 1.60px);
}

:is(.visual-comparison thead th:nth-child(6), .mobile-restaurant-entry:nth-of-type(5)) {
  --reference-dish: url("./centenary-mussels-white-plate-ai.jpg");
}

/* Give the restaurant name the lead on the mobile comparison cards. */
.mobile-comparison .restaurant-comparison-summary .restaurant-nameplate {
  min-height: 134px;
  padding-block: 26px;
}

.mobile-comparison .restaurant-comparison-summary .restaurant-nameplate-name {
  /* The shared mobile type rules otherwise make all spans inherit body size. */
  font-size: clamp(1.375rem, 8.6cqi, 2.125rem) !important;
  line-height: 1.08 !important;
  white-space: nowrap;
}

.mobile-comparison .restaurant-comparison-summary .restaurant-nameplate-name > span {
  display: inline;
}

.mobile-comparison .restaurant-comparison-summary .restaurant-nameplate-place {
  font-size: .875rem !important;
  line-height: 1.2 !important;
}

/* Local sample-menu experiment. Preserve the existing button size and focus treatment. */
html[data-wdo-sample-menu="photo"] #champions-room-section .menu-trigger.button {
  background-image: linear-gradient(rgb(8 47 50 / 72%), rgb(8 47 50 / 72%)),
    url("./champions-lamb-gold-rim-ai.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}