/* Room cards: photographic evidence of the stay, with the booking information kept legible. */
.cl-room-card .cl-room-visual.cl-room-availability {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 560px;
  color: #f7f2e8;
  background-color: #234439;
  background-position: center;
  background-size: cover;
  box-shadow: none;
}

.cl-room-card:nth-child(1) .cl-room-visual.cl-room-availability {
  background-image: url("assets/casa-luminosa-room-garden.png");
  background-position: 52% center;
}

.cl-room-card:nth-child(2) .cl-room-visual.cl-room-availability {
  background-image: url("assets/casa-luminosa-room-olive.png");
  background-position: 50% center;
}

.cl-room-card:nth-child(3) .cl-room-visual.cl-room-availability {
  background-image: url("assets/casa-luminosa-room-dimora.png");
  background-position: 48% center;
}

.cl-room-card .cl-room-visual.cl-room-availability::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(13, 31, 25, 0.58) 0%, rgba(13, 31, 25, 0.04) 35%, rgba(13, 31, 25, 0.7) 100%),
    linear-gradient(90deg, rgba(13, 31, 25, 0.42), transparent 65%);
}

.cl-room-card .cl-room-availability > * {
  position: relative;
  z-index: 1;
}

.cl-room-card .cl-room-availability .cl-room-ui-top,
.cl-room-card .cl-room-availability .cl-room-ui-bottom {
  border-color: rgba(247, 242, 232, 0.62);
}

.cl-room-card .cl-room-availability .cl-room-ui-top b,
.cl-room-card .cl-room-availability .cl-room-ui-bottom strong {
  color: #f3c779;
}

.cl-room-card .cl-room-availability .cl-room-ui-main p,
.cl-room-card .cl-room-availability .cl-room-ui-main span,
.cl-room-card .cl-room-availability .cl-room-ui-bottom {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.cl-room-card .cl-room-availability .cl-room-ui-main i {
  background: #df8a67;
}

.cl-room-card .cl-room-visual.cl-room-availability {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms ease;
}

.cl-room-card:hover .cl-room-visual.cl-room-availability,
.cl-room-card:focus-within .cl-room-visual.cl-room-availability {
  transform: scale(1.025);
  filter: saturate(1.06);
}

.cl-room-card.is-selected .cl-room-visual.cl-room-availability {
  box-shadow: inset 0 0 0 2px #e6b765;
}

@media (max-width: 760px) {
  .cl-room-card .cl-room-visual.cl-room-availability {
    min-height: 470px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-room-card .cl-room-visual.cl-room-availability {
    transition: none;
  }
}