/* ==========================================================
   Review section (homepage) – "speech bubble" style
   Corners: 3px, same as the buttons on the site
   ========================================================== */
.reviews { padding: 40px 0 120px; --radius: 3px; }
.reviews .title { margin-bottom: 12px; }
.rv-stars { color: #C9A15B; letter-spacing: 2px; font-size: 13px; }

/* Heading with score */
.rv-head { text-align: center; margin-bottom: 56px; }
.rv-head .title em { font-style: normal; font-weight: 300; }
.rv-head p { font-size: 13px; display: flex; gap: 10px; justify-content: center; align-items: center; }

/* Intro + arrows on the left, cards on the right */
.rv-body { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; }
.rv-bigquote { display: block; width: 44px; height: auto; margin-bottom: 24px; fill: currentColor; opacity: .45; }
.rv-body aside h3 { font: 200 30px/1.25 var(--font-serif); margin: 0 0 28px; }
.rv-line { display: flex; align-items: center; gap: 4px; }
.rv-arrows { display: flex; }
.rv-arrows button {
  width: 32px; height: 40px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; color: var(--brown); font-size: 16px; transition: transform .2s;
}
.rv-arrows button:hover { transform: translateY(-1px); }
.rv-progress { position: relative; height: 2px; background: rgba(127,95,88,.15); flex: 1; overflow: hidden; }
.rv-progress span { position: absolute; inset: 0 auto 0 0; background: var(--brown); transition: margin .3s, width .3s; }

/* Carousel: 3 cards per "page" */
.rv-track {
  --gap: 24px;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 8px;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { scroll-snap-align: start; }

/* Card as speech bubble */
.rv-bubble {
  position: relative; background: var(--white); border-radius: var(--radius);
  padding: 28px 28px 24px; box-shadow: 0 10px 30px rgba(127,95,88,.08);
  display: grid; gap: 20px; min-height: 250px; align-content: space-between;
}
.rv-bubble::after {
  content: ""; position: absolute; left: 28px; bottom: -12px;
  border: 12px solid transparent; border-top-color: var(--white); border-bottom: 0;
}
.rv-bubble > * { min-width: 0; }   /* content must never make the bubble wider */
.rv-text {
  margin: 0; font-size: 14px; line-height: 1.65; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-card footer { padding: 22px 0 0 28px; overflow-wrap: break-word; }
.rv-card strong { display: block; font-weight: 600; font-size: 14px; }
.rv-card small { display: block; font-size: 11px; opacity: .75; margin-top: 2px; }

/* Hover: full text visible + button below the text to Tripadvisor / Google */
.rv-track { align-items: start; }
.rv-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; min-height: 34px; }
.rv-source {
  font: 500 12px/1 var(--font-sans); letter-spacing: .5px; text-decoration: none; white-space: nowrap;
  background: var(--brown); color: var(--white); border-radius: var(--radius); padding: 10px 14px;
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .3s, transform .3s;
}
.rv-card:hover .rv-text, .rv-card:focus-within .rv-text { -webkit-line-clamp: unset; }
/* Height grows smoothly while the text is typed */
.rv-card:hover .rv-text { display: block; overflow: hidden; transition: height .18s ease-out; }
.rv-card:hover .rv-source, .rv-card:focus-within .rv-source { opacity: 1; transform: none; pointer-events: auto; }
.rv-source:hover { opacity: .85 !important; }
/* Touchscreen: tap opens the review (same effect as hover on desktop) */
.rv-card.is-open .rv-text { -webkit-line-clamp: unset; display: block; overflow: hidden; transition: height .18s ease-out; }
.rv-more {
  justify-self: start; margin-top: -8px; padding: 6px 0; background: none; border: 0; cursor: pointer;
  font: 600 12px var(--font-sans); letter-spacing: .3px; color: var(--brown);
  text-decoration: underline; text-underline-offset: 3px;
}
.rv-card:has(.rv-more) { cursor: pointer; }
/* On touchscreens (no hover) the button is always visible */
@media (hover: none) { .rv-source { opacity: 1; transform: none; pointer-events: auto; } }

/* On a dark background (restaurant page): light text and arrows, bubble stays white */
.rv-bubble { color: var(--brown); }
.reviews--dark { color: var(--cream); }
.reviews--dark .rv-arrows button { color: var(--cream); }
.reviews--dark .rv-progress { background: rgba(252,248,242,.2); }
.reviews--dark .rv-progress span { background: var(--cream); }

/* Experience page: same spacing as the other sections there (120px top and bottom) */
.gradient-page .reviews { padding: 120px 0 0; }

/* Mobile */
/* Smaller laptop: 3 cards get too narrow, so 2 side by side */
@media (max-width: 1150px) {
  .rv-track { grid-auto-columns: calc((100% - var(--gap)) / 2); }
}
/* Tablet: intro above the cards, still 2 reviews side by side */
@media (max-width: 900px) {
  .rv-body { grid-template-columns: 1fr; gap: 28px; }
  .rv-track { --gap: 16px; }
}
/* Phone: 1 review at a time, with a peek of the next as a hint to swipe */
@media (max-width: 560px) {
  .rv-track { grid-auto-columns: 86%; }
}

/* Theme-proofing: themes (e.g. Salient) give .container, h2 and h3 their own width,
   colour and size, which beat the rules above. Salient forces a nested .container to
   width:100% !important, so the width is capped with max-width instead. */
.noma-reviews.reviews > .container {
  max-width: min(var(--container, 1240px), 100% - 32px);
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}
.noma-reviews .rv-head .title { color: inherit; }
.noma-reviews .rv-body aside h3 { font: 200 30px/1.25 var(--font-serif); letter-spacing: normal; color: inherit; }
.noma-reviews .rv-bubble p.rv-text { padding-bottom: 0; }