/* ==========================================================================
   360° tour spread (suite pages and Facilities), 2026-10-28
   InFocus360 / Google Street View embeds. The tour stays still until the
   visitor chooses "Explore in 360°", so the wheel and swipes keep paging
   the deck; it goes still again when they leave the spread.
   FLOW is the base; DECK is in the media block at the end.
   ========================================================================== */

.sp-tour .canvas { gap: 1.6rem; }
.tr-copy { display: flex; flex-direction: column; align-items: flex-start; }
.tr-title { margin-top: .7rem; font-size: clamp(2rem, 8vw, 2.7rem); line-height: 1.08; }
.tr-title span { display: block; color: var(--gold); }
.tr-rule { margin: 1.4rem 0 1.2rem; }
.tr-body { max-width: 34rem; }

.tr-tabs { display: flex; gap: 1.1rem; margin-top: 1.4rem; border-bottom: 1px solid var(--line); }
.tr-tabs button {
  position: relative;
  padding: .6rem 0 .8rem;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--grey-light);
  cursor: pointer;
  transition: color .3s;
}
.tr-tabs button:hover, .tr-tabs button[aria-selected="true"] { color: var(--grey-dark); }
.tr-tabs button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.tr-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.tr-more { margin-top: 1.5rem; }

/* tours page: every tour as a two-column list */
.tr-tabs--list { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 2.2rem; row-gap: 0; border-bottom: 0; }
.tr-tabs--list button { padding: .5rem 0 .55rem; text-align: left; }
.tr-tabs--list button::after { bottom: .2rem; }

/* closing slides: "360° tours" beside "Read our guest reviews" */
.cl-more, .bk-more { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.cl-more .cl-reviews, .bk-more .bk-reviews { margin-top: 0; }

.tr-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 72svh;
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gold-wash);
}
.tr-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tr-frame:not(.is-live) iframe { pointer-events: none; }
.tr-frame:not(.is-live)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(37 37 37 / 22%);
  pointer-events: none;
  transition: opacity .4s;
}
.tr-start {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 1em 1.6em;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: var(--grey-dark);
  font-family: var(--font-body);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgb(11 10 9 / 60%);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color .3s, color .3s;
}
.tr-start:hover { background: var(--gold-btn); color: var(--white); }
.tr-start[hidden] { display: none; }
.tr-start svg { width: 1.6em; height: 1.6em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 1200px) and (min-aspect-ratio: 1001/1000) and (min-height: 640px) {
  .tr-copy { left: 6cqw; top: 9cqw; width: 26cqw; }
  .tr-copy .kicker { font-size: max(11px, .76cqw); }
  .tr-title { margin-top: .9cqw; font-size: 3.9cqw; line-height: 1.04; }
  .tr-rule { width: 4.5cqw; margin: 2cqw 0 1.8cqw; }
  .tr-body { font-size: 1.04cqw; line-height: 1.75; }
  .tr-tabs { gap: 2cqw; margin-top: 2cqw; }
  .tr-tabs button { padding: .4cqw 0 .7cqw; font-size: 1.05cqw; }
  .tr-more { margin-top: 2.2cqw; }
  .tr-all .tr-copy { top: 5cqw; }
  .tr-tabs--list { column-gap: 3.2cqw; }
  .tr-tabs--list button { padding: .35cqw 0 .45cqw; }
  .cl-more, .bk-more { gap: 1cqw; margin-top: 2.4cqw; }
  .tr-frame { left: 36cqw; top: 5cqw; width: 58cqw; height: 46.25cqw; min-height: 0; max-height: none; aspect-ratio: auto; border-radius: .6cqw; }
  .tr-start { font-size: max(11px, .8cqw); }
}