/* Reviews pages (/reviews, /reviews/<country|destination>), Figma "Testimonial" 339:93.
   Sand ground, centered Saol title, review badges, score, video, press logos, 3-column review cards. */
.reviews-page { background: var(--color-sand); padding-block: 71px 116px; }
.reviews-page .container { padding-inline: 25px; }
/* "Back to …" bar: sticks to the top of the window while the feed scrolls (Pavlo, 2026-10-22) */
.reviews-page__bar { position: sticky; top: 0; z-index: 5; margin-bottom: var(--space-30); padding-block: var(--space-15); background: var(--color-sand); }
.reviews-page__back .icon { width: 32px; height: auto; }

.reviews-page__title {
  max-width: 1019px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-ink);
  line-height: var(--h2-line); /* Figma: 60/78.6 */
}
.reviews-page__intro { max-width: 807px; margin: 0 auto 35px; text-align: center; }
.reviews-page__intro > :last-child { margin-bottom: 0; }
.reviews-page__intro--after { margin-top: var(--space-30); margin-bottom: 0; }

/* Badges, Figma 341:180 (Montserrat in Figma, Poppins here as elsewhere in v2) */
.review-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-10); margin-bottom: 31px; }
.review-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 38px;
  padding: 8px var(--space-20); /* Figma: 10px, but its 22px Facebook icon makes the pill 38px tall */
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-black);
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  text-decoration: none;
}

/* Score: stars + "4.9/5", Figma 339:308 / 339:325 / 339:326 */
.reviews-score { display: flex; justify-content: center; align-items: center; gap: 12px; }
.reviews-page__title + .reviews-score { margin-top: var(--space-30); }
.reviews-score__value { font-family: var(--font-display); font-size: 20px; line-height: 26px; color: var(--color-black); }
.reviews-score__note {
  margin: 4px auto 0;
  max-width: 652px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-ink);
}

.review-stars { position: relative; display: inline-block; line-height: 0; }
.review-stars > span { display: flex; }
.review-stars .icon { flex: none; width: 25px; height: 25px; }
.review-stars__base { color: var(--color-line); }
.review-stars__fill { position: absolute; inset: 0 auto 0 0; width: var(--fill); overflow: hidden; color: #ffd601; /* Figma star fill, no token */ }

/* Our guest-rating data, not a Google score. Shared by Home, country, city and region pages. */
.rating-badge { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; margin: 0; font-size: 16px; line-height: 20px; }
.rating-badge strong { color: var(--color-ink); }
.rating-badge .review-stars .icon { width: 15px; height: 15px; }
.rating-badge > span:last-child { grid-column: 1 / -1; justify-self: end; color: var(--color-ink-muted); }

/* Play buttons (main video and video reviews). .videoLink is handled by public/javascript/main.js */
.video-play { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.video-play > img:last-child {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: .65; /* as the old .play-button */
  transition: opacity .15s;
}
.video-play:hover > img:last-child { opacity: .8; }

/* Video, Figma 339:328 (650x376) */
.reviews-video { width: 650px; max-width: 100%; margin: 56px auto 0; }
.reviews-video__thumb { width: 100%; aspect-ratio: 650 / 376; object-fit: cover; }

/* Press logos, Figma 340:6 (#999 vectors; the existing black PNGs are faded to match) */
.reviews-press {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-15) 34px;
  margin: 39px auto 157px;
}
.reviews-press img { width: auto; height: 18px; opacity: .4; }
/* Logo heights from Figma (base.css sets img height:auto, so the HTML height attributes don't apply) */
.reviews-press img:nth-child(1) { height: 16px; }
.reviews-press img:nth-child(2) { height: 17px; }
.reviews-press img:nth-child(3) { height: 20px; }
.reviews-press img:nth-child(5) { height: 25px; }
.reviews-press img:nth-child(6) { height: 23px; }
.reviews-press img:nth-child(7) { height: 19px; }

/* Review cards, Figma 340:49 / 340:119 / 340:118 */
.reviews-grid { margin-top: var(--space-60); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 11px; }
.review-card { text-align: center; }
.review-card:focus { outline: none; }
.review-card:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.review-card__media { position: relative; margin-bottom: 31px; }
.review-card__img { width: 100%; aspect-ratio: 482 / 242; object-fit: cover; }
.review-card__media .video-play { position: absolute; inset: 0; width: 100%; }
.review-card__headline { margin: 0 0 10px; font-family: var(--font-display); font-size: 24px; line-height: 31px; color: var(--color-ink); }
.review-card__text { max-width: 388px; margin: 0 auto; }
.review-card__text > :last-child { margin-bottom: 0; }
.review-card__by {
  max-width: 419px;
  margin: var(--space-20) auto 0;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
}


/* Video lightbox (framework/partials-v2/video-lightbox.pug). Not in Figma: ASK-DESIGN(video-lightbox).
   Move to a shared file when another v2 page uses it. */
#videoLightbox {
  position: fixed;
  inset: 0;
  z-index: 1128;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--space-20) var(--space-20);
  background: var(--color-image-scrim);
}
#videoLightbox.collapse { display: none; }
#videoLightboxInner { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc((100vh - 80px) * 16 / 9)); }
#videoLightboxInner.ratio-9x16 { aspect-ratio: 9 / 16; width: min(100%, calc((100vh - 80px) * 9 / 16)); }
#videoLightboxInner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#videoCloseButton {
  position: absolute;
  right: 0;
  bottom: 100%;
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  cursor: pointer;
}

/* Tablet and mobile are ours (no Figma) */
@media (max-width: 991.98px) {
  .reviews-page { padding-block: var(--space-30) var(--space-60); }
  .reviews-page .container { padding-inline: var(--space-20); }
  .reviews-page__title { line-height: var(--h1-line); }
  .reviews-press { margin-bottom: var(--space-60); }
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--space-20); }
}
@media (max-width: 575.98px) {
  .reviews-page .container { padding-inline: var(--space-15); }
  .reviews-video { margin-top: var(--space-30); }
  .reviews-press { gap: var(--space-15) var(--space-25); margin-top: var(--space-30); }
  .reviews-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .review-card__media { margin-bottom: var(--space-20); }
}