.asset-placeholder.asset-photo {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d9ddd8;
}

.asset-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

/* Tukad Cepung is a relatively tight portrait-oriented composition. Show more
   of the original frame instead of cropping it aggressively to 16:9. */
.asset-photo[data-asset="ubud.tukad-cepung"] {
  background: #202924;
}

.asset-photo[data-asset="ubud.tukad-cepung"] img {
  object-fit: contain;
  padding: 2.5% 3.5%;
}

.card:hover > .asset-photo img,
.place-card:focus-within > .asset-photo img {
  transform: scale(1.018);
}

.asset-photo[data-asset="ubud.tukad-cepung"]:hover img,
.place-card:focus-within > .asset-photo[data-asset="ubud.tukad-cepung"] img {
  transform: scale(1.005);
}

.asset-credit {
  position: absolute;
  right: 8px;
  bottom: 7px;
  max-width: calc(100% - 16px);
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(20, 27, 24, .68);
  backdrop-filter: blur(5px);
  font-size: 10px;
  line-height: 1.25;
}

.asset-credit-link {
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

.asset-credit-link:hover,
.asset-credit-link:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.hotel-name-link {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.hotel-name-link:hover,
.hotel-name-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.hotel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.hotel-external-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(47, 107, 87, .22);
  border-radius: 9px;
  color: var(--accent);
  background: rgba(47, 107, 87, .055);
  text-decoration: none;
  font-size: 12px;
  font-weight: 720;
}

.hotel-external-link:hover,
.hotel-external-link:focus-visible {
  border-color: rgba(47, 107, 87, .48);
  background: rgba(47, 107, 87, .11);
}

/* Both scenario buttons on the overview intentionally use the same emphasis. */
.scenario-card .button.secondary {
  color: #fff;
  background: var(--accent);
  border-color: transparent;
}

.scenario-card .button.secondary:hover,
.scenario-card .button.secondary:focus-visible {
  filter: brightness(.96);
}

.route-location-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}

.route-location-link:hover,
.route-location-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 620px) {
  .asset-placeholder.asset-photo {
    aspect-ratio: 4 / 3;
  }

  .asset-photo[data-asset="ubud.tukad-cepung"] img {
    padding: 1.5% 2%;
  }

  .asset-credit {
    font-size: 9px;
  }

  .hotel-external-link {
    font-size: 11px;
  }
}