/* Hotel Highlights carousel + "Read more" popup (aipHighlights.js), for the Highlights (1)
   field. Ported from CyprusParadise-NewDesigns/prototypes/hotel-highlights-pia-bella
   (page-refinements.css, october-14/21-refinements.css, mobile-refinements.css), with the
   values that prototype actually renders. The popup reuses .cp-photo-dialog from AipPhotoBrowser.css. */
#hotel-info.cp-highlights { min-width: 0; }
#hotel-info.cp-highlights > h2 {
  margin: 0 0 10px;
  font: 600 30px/1.3 Montserrat, Lato, sans-serif;
  color: #3c4e5a;
}

.cp-highlights-shell { position: relative; margin-top: 20px; }
.cp-highlights-track {
  display: flex;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 0 4px;
}
.cp-highlights-track::-webkit-scrollbar { display: none; }

.cp-highlight-card {
  flex: 0 0 280px;
  min-width: 0;
  border: 1px solid #d8e0e0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  scroll-snap-align: start;
}
.cp-highlight-card > img { display: block; width: 100%; height: 160px; object-fit: cover; }
.cp-highlight-card__body { padding: 16px; }
.cp-highlight-card h3 {
  margin: 0 0 10px;
  min-height: 26px;
  font: 600 18px/1.35 Montserrat, Lato, sans-serif;
  color: #3c4e5a;
}
.cp-highlight-copy {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 400 14px/1.6 Lato, "Segoe UI", sans-serif;
  letter-spacing: -0.24px;
  color: #3c4e5a;
}
.cp-highlight-copy p { margin: 0; }

.cp-highlight-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #218887;
  font: 700 16px/1.4 Lato, "Segoe UI", sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.cp-highlight-more:hover { text-decoration: underline; }
.cp-highlight-more .cp-chevron,
.cp-highlights-shell .cp-chevron,
#cpHighlightViewer .cp-chevron {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cp-highlights-shell .cp-chevron { width: 24px; height: 24px; }
.cp-chevron--left { transform: rotate(180deg); }

.cp-highlights-prev,
.cp-highlights-next {
  position: absolute;
  top: 64px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d8e0e0;
  border-radius: 10px;
  background: #fff;
  color: #3c4e5a;
  cursor: pointer;
  z-index: 2;
}
.cp-highlights-prev { left: -16px; }
.cp-highlights-next { right: -16px; }
.cp-highlights-prev[hidden],
.cp-highlights-next[hidden] { display: none; }
.cp-highlights-next:disabled { opacity: .35; cursor: default; }
.cp-highlights-prev:focus-visible,
.cp-highlights-next:focus-visible,
.cp-highlight-more:focus-visible { outline: 3px solid #218887; outline-offset: 3px; }

@media (min-width: 768px) {
  .cp-highlight-card { cursor: pointer; }
}

@media (max-width: 767px) {
  #hotel-info.cp-highlights { padding-left: 0; padding-right: 0; }
  #hotel-info.cp-highlights > h2 { padding-left: 16px; padding-right: 16px; font-size: 24px; }
  .cp-highlights-prev,
  .cp-highlights-next { top: 50%; transform: translateY(-50%); }
}

@media (max-width: 600px) {
  .cp-highlight-card { flex-basis: 260px; }
  .cp-highlights-prev { left: -10px; }
  .cp-highlights-next { right: -10px; }
}

/* "Read more" popup - shrinks to fit the whole photo (never cropped), text underneath. */
#cpHighlightViewer {
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
#cpHighlightViewer > header { position: relative; min-height: 64px; padding: 16px 64px 16px 20px; }
#cpHighlightViewer .cp-photo-close { position: absolute; top: 12px; right: 12px; margin: 0; }
#cpHighlightViewer h2:focus { outline: none; }
.cp-highlight-stage { position: relative; background: #edf3f3; }
.cp-highlight-stage[hidden] { display: none; }
.cp-highlight-stage > img { display: block; width: 100%; height: auto; margin: 0; }
.cp-highlight-caption { padding: 12px 20px 0; }
.cp-highlight-caption[hidden] { display: none; }
.cp-highlight-caption p { margin: 0; font-size: 13px; line-height: 1.5; color: #707070; }
.cp-highlight-overview { padding: 12px 20px 20px; font-size: 15px; line-height: 1.55; color: #3c4e5a; }
.cp-highlight-overview p { margin: 0 0 10px; }
.cp-highlight-overview p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  #cpHighlightViewer > header { padding: 16px 64px 16px 16px; }
  .cp-highlight-caption { padding: 10px 16px 0; }
  .cp-highlight-overview { padding: 10px 16px 16px; font-size: 14px; line-height: 1.5; }
}