@charset "UTF-8";
/* ===================================================================
   reviews.css — Tripadvisor trust strip (template-parts/site-reviews.php)
   Class prefix: ts-rev
   Loaded site-wide after ds.css, but the markup it styles renders only
   when a Tripadvisor embed or location id has been entered in Theme
   Settings. With both blank there is nothing on the page for any of
   this to apply to.
   ===================================================================

   WHY IT LOOKS LIKE THIS

   It is a seal, not a billboard. It is the last thing above a very long
   page's footer, and it makes one quiet statement: our reviews live
   somewhere we do not control.

   It does NOT repeat the footer's dark green. The footer directly below
   is a solid --ac slab; a second green slab stacked on it would read as
   one enormous block with a seam in it. So this band is --cream with a
   white card floating in it, which reads as a landing before the dark
   and gives the footer its own edge back. The country page's green
   .ts-ctry-recv band uses the same 3px gold top rule, so the two are
   recognisably the same family without being the same colour.

   Radii follow the house scale: 22px on the card, 12px on the button.
   Nothing square.
   =================================================================== */

.ts-rev {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding-block: clamp(38px, 5vw, 72px);
}

.ts-rev__shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(16px, 2.4vw, 28px);
}

/* ------------------------------------------------------------------
   The seal
   ------------------------------------------------------------------
   Deliberately narrower than the shell. A full-bleed card here would
   compete with the footer; a centred 820px card reads as a stamp on
   the bottom of the page.
   ------------------------------------------------------------------ */
.ts-rev__seal {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(26px, 3.4vw, 40px) clamp(18px, 3vw, 40px) clamp(24px, 3vw, 36px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(22, 33, 27, .04), 0 10px 30px rgba(22, 33, 27, .06);
  text-align: center;
  /*
   * Deliberately NOT overflow:hidden. The gold rule below is 160px wide and
   * centred, so it never reaches the rounded corners and needs no clipping —
   * and a clip here would cut off any tooltip or popover Tripadvisor's own
   * widget decides to open.
   */
}

/* The gold tab, echoing .ts-ctry-recv::before on the country page. */
.ts-rev__seal::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(160px, 46%);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, rgba(234, 185, 36, 0) 0%, var(--gold) 50%, rgba(234, 185, 36, 0) 100%);
}

/* ------------------------------------------------------------------
   Heading block — house pattern: green line, gold script line under it
   ------------------------------------------------------------------ */
.ts-rev__kick {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.ts-rev__title {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(23px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ac);
}

/* .sf is the global gold script line (style.css). It is display:block
   already; this only tunes its rhythm inside this card. */
.ts-rev__title .sf {
  margin-top: 2px;
  font-size: 1.16em;
  line-height: 1.05;
}

.ts-rev__note {
  margin: 14px auto 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--muted);
}

/* ------------------------------------------------------------------
   The Tripadvisor embed
   ------------------------------------------------------------------
   Tripadvisor injects branded markup we do not control and cannot
   restyle, and several of its widgets are a fixed pixel width. Two
   rules make that harmless:

   - .ts-rev__embed is the scroll container, so anything wider than the
     card scrolls inside the card instead of widening the document.
     Nothing is clipped and the page never gains a horizontal scrollbar.
   - .ts-rev__frame centres the widget when it is narrower than the
     card. min-width:min-content is the part that matters: without it,
     justify-content:center in an overflowing flex container pushes the
     left edge out of reach of the scrollbar.

   No fixed height, so the widget can be any depth it likes.
   ------------------------------------------------------------------ */
.ts-rev__embed {
  margin-top: clamp(20px, 2.6vw, 30px);
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.ts-rev__frame {
  display: flex;
  justify-content: center;
  min-width: min-content;
}

.ts-rev__frame > * { max-width: 100%; }
.ts-rev__frame img { max-width: 100%; height: auto; }
.ts-rev__frame iframe { max-width: 100%; border: 0; }

/* Tripadvisor's own link lists arrive as bare <ul>; the theme resets
   list styling globally, but be explicit so an embed cannot inherit a
   footer bullet from somewhere. */
.ts-rev__frame ul,
.ts-rev__frame ol { list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------------
   Live mode — a widget is configured (.ts-rev--live)
   ------------------------------------------------------------------
   MEASURED, at 1440 with the wide 4-snippet widget on this listing:

     widget            468 x 344
     .ts-rev__embed    738 wide  (seal 820 minus 40px padding either side)

   468 in 738 is the problem. The widget is a FIXED pixel width — it has
   no fluid mode — so a full-width card leaves it marooned in the middle
   of a lot of white with no explanation for the gap. Two rules fix that,
   and neither of them touches what the widget says.

   1. The seal narrows to 640 in live mode. 640 - 80 padding = 560 of
      inner width, and 560 - 44 of well padding = 516 for a 468 widget:
      snug, with air either side rather than a void.
   2. The embed becomes a cream well. The widget then reads as something
      deliberately inset into the card — a quotation block — instead of
      a foreign object pasted onto it.
   ------------------------------------------------------------------ */
.ts-rev--live .ts-rev__seal {
  max-width: 640px;
}

.ts-rev--live .ts-rev__embed {
  padding: clamp(14px, 2vw, 22px);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* ------------------------------------------------------------------
   Setting the widget, not fighting it
   ------------------------------------------------------------------
   Tripadvisor injects its own stylesheet (static.tacdn.com/.../
   t4b_widget_self_serve_property-*.css) as a <link> at runtime, so it
   lands AFTER ours in the document and wins every specificity tie.

   !important here is measured, not lazy. Three classes deep (0,3,0
   against their 0,2,0) was tried first and lost; appending our sheet
   last so ours won on order lost too; setting the same property inline
   on the element won. The only declaration strong enough to lose to an
   inline style and beat everything else is theirs carrying !important —
   so ours has to as well. There is no other lever: their stylesheet is
   cross-origin, so its rules cannot even be read, let alone edited.

   Only two things are changed, and both are presentation:

   - `border=true` in the embed URL draws a 1px SQUARE border in
     rgb(0,235,91) — Tripadvisor's neon green. Against --ac #124933,
     inside a card the house rules say must never be square-cornered,
     that is the one thing that makes the widget look pasted on. The
     well now provides the frame, so theirs is dissolved rather than
     restyled. (Generating the snippet with the border switched off in
     the Widget Center gets the same result; this covers the case where
     it is left on.)
   - Their review snippets set 12.5px. "Readable" was the whole point of
     asking for this block, and 12.5px on a page whose body text is 17px
     is not. 14px/1.62 is a nudge, not a redesign: the snippets wrap
     inside a fixed-width widget, so larger type makes the widget taller
     and never wider, and nothing can overflow as a result.

   Everything else — the wording, the rating, the count, the ordering,
   the Tripadvisor typeface and brand colours — is left exactly as it
   arrives. It is their content and their mark.
   ------------------------------------------------------------------ */
.ts-rev .ts-rev__frame .widSSPData {
  border-color: transparent !important;
  background: transparent !important;
}

.ts-rev .ts-rev__frame .widSSPBullet li {
  font-size: 14px !important;
  line-height: 1.62 !important;
}

/* ------------------------------------------------------------------
   The listing link in live mode
   ------------------------------------------------------------------
   In state 2 the link is the only thing in the card and is a solid
   green button. In live mode the reviews themselves are the content,
   so the same link steps back to an outline: still a 48px target, still
   obviously a button, no longer shouting over the widget it sits under.
   ------------------------------------------------------------------ */
.ts-rev--live .ts-rev__act {
  margin-top: clamp(16px, 2vw, 22px);
}

.ts-rev.ts-rev--live .ts-rev__link {
  background: transparent;
  color: var(--ac);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.ts-rev.ts-rev--live .ts-rev__link:hover,
.ts-rev.ts-rev--live .ts-rev__link:focus-visible {
  background: var(--ac);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--ac);
}

.ts-rev.ts-rev--live .ts-rev__link:active {
  background: var(--ac-dark);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--ac-dark);
}

.ts-rev.ts-rev--live .ts-rev__link {
  transition: background-color .22s cubic-bezier(.22, .61, .36, 1),
              color .22s cubic-bezier(.22, .61, .36, 1),
              box-shadow .22s cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------
   The plain link — state 2, and inside <noscript> in state 1
   ------------------------------------------------------------------ */
.ts-rev__act {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
}

.ts-rev .ts-rev__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 clamp(18px, 2vw, 26px);
  border-radius: 12px;
  background: var(--ac);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color .22s cubic-bezier(.22, .61, .36, 1);
}

.ts-rev .ts-rev__link:hover,
.ts-rev .ts-rev__link:focus-visible { background: var(--ac-mid); color: #fff; }
.ts-rev .ts-rev__link:active { background: var(--ac-dark); }
.ts-rev .ts-rev__link:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }

.ts-rev__link svg { width: 15px; height: 15px; flex: none; }

.ts-rev__host {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .ts-rev__seal { border-radius: 18px; }
  .ts-rev__note { font-size: 14px; }
  .ts-rev .ts-rev__link { width: 100%; }
}

/* ------------------------------------------------------------------
   Phones — making a fixed-width widget fit
   ------------------------------------------------------------------
   Tripadvisor's widget is a hard 468px. At 390 that leaves a 318px well
   with 492px of content in it: the reviews are there, but reading them
   means dragging sideways, which is not what "readable" meant.

   Measured before writing this: forcing the three outer widget boxes to
   the container width reflows the whole thing cleanly. At 390 the
   widget becomes 294px, each snippet wraps from one line to three, the
   summary, popularity line, branding and both link lists all stay
   inside, and nothing overflows the well — verified by walking every
   descendant and comparing its right edge against the well's. So this
   is fitting the widget, not breaking it.

   max-width alone does NOT do it: their width:468px is !important too,
   and .ts-rev__frame's min-width:min-content holds the floor. Both have
   to give way, and only here — above 600px the widget keeps its native
   468px, which fits the well with room to spare (505px of space at the
   601px breakpoint, so there is no gap between the two behaviours).
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .ts-rev--live .ts-rev__embed { padding: 12px; border-radius: 14px; }

  .ts-rev--live .ts-rev__frame { min-width: 0; }

  .ts-rev--live .ts-rev__frame .TA_selfserveprop,
  .ts-rev--live .ts-rev__frame .widSSP,
  .ts-rev--live .ts-rev__frame .widSSPData {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts-rev .ts-rev__link,
  .ts-rev.ts-rev--live .ts-rev__link { transition: none; }
}