/* LP only. A shared page surface changes color as the guest stories enter view. */
body.guest-reviews-page {
  --guest-surface: #f5f0eb;
  --guest-ink: #26231f;
  --guest-muted: #60594f;
  --guest-rule: rgba(38, 35, 31, .25);
  background-color: var(--guest-surface);
  transition: background-color .5s cubic-bezier(.4, .4, 0, 1);
}
body.guest-reviews-visible {
  --guest-surface: #fff;
  --guest-ink: #26231f;
  --guest-muted: #60594f;
  --guest-rule: rgba(38, 35, 31, .25);
}
body.guest-reviews-page :is(#properties, #reviews, #faq) {
  --color-text: var(--guest-ink);
  --color-text-light: var(--guest-muted);
  --color-ink: var(--guest-ink);
  color: var(--guest-ink);
  background-color: transparent;
  transition: color .5s cubic-bezier(.4, .4, 0, 1);
}
body.guest-reviews-page :is(#properties, #faq) :is(h2, h3, p, a, span, summary, .faq-a) {
  transition: color .5s cubic-bezier(.4, .4, 0, 1);
}
body.guest-reviews-page #faq .faq-a { color: var(--guest-muted); }
body.guest-reviews-page #faq .faq-item { border-color: var(--guest-rule); }
body.guest-reviews-page #faq .faq-q::after { border-color: currentColor; }
body.guest-reviews-page :is(#properties, #faq) :is(.section-eyebrow, .property-feature-en, .chapter-en) { color: var(--guest-ink); }
body.guest-reviews-visible #header.scrolled { background-color: #f5f0eb; }
body.guest-reviews-visible #properties .pf-namelink:hover .property-feature-name { color: var(--guest-ink); }

#reviews.guest-reviews {
  --guest-view-height: calc(100vh - var(--guest-header-height, 100px));
  --guest-view-height: calc(100svh - var(--guest-header-height, 100px));
  padding: 0;
  text-align: left;
  scroll-margin-top: var(--guest-header-height, 100px);
}
.guest-reviews .guest-reviews-intro {
  width: 92%;
  max-width: 1440px;
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  column-gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding: clamp(22px, 3vh, 36px) 0 16px;
}
.guest-reviews .section-eyebrow {
  grid-column: 1;
  color: inherit;
  margin: 0 0 8px;
  font-size: 13px;
}
.guest-reviews .section-title {
  grid-column: 1;
  color: inherit;
  margin: 0;
  font-size: clamp(32px, 3.5vw, 46px);
  line-height: 1.3;
}
.guest-reviews-summary {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 4px 20px;
}
.guest-reviews-score {
  font-family: var(--font-heading-en);
  font-size: 40px;
  line-height: 1;
}
.guest-reviews-stars { font-size: 16px; letter-spacing: .07em; }
.guest-reviews-count { font-family: var(--font-ui); font-size: 13px; }
.guest-stay-navigation {
  width: min(92%, 1440px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--guest-rule);
}
.guest-stay-tabs {
  display: flex;
  flex: 1 1 auto;
  gap: clamp(10px, 1.3vw, 22px);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--guest-rule) transparent;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 8px;
}
.guest-stay-tabs button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 1px;
  color: inherit;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}
.guest-stay-tabs button[aria-selected="true"] { border-bottom-color: currentColor; font-weight: 500; }
.guest-stay-stage { position: relative; }
.guest-stay-arrow {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.guest-stay-arrow-prev { left: max(4px, calc((100% - 1440px) / 2 - 72px)); }
.guest-stay-arrow-next { right: max(4px, calc((100% - 1440px) / 2 - 72px)); }
.guest-chevron-canvas { width: 64px; height: 80px; display: block; background: transparent; opacity: 0; pointer-events: none; }
.guest-stay-arrow[data-webgl="ready"] .guest-chevron-canvas { opacity: 1; }
.guest-chevron-fallback {
  position: absolute;
  width: 24px;
  height: 24px;
  overflow: hidden;
  font-size: 0;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}
.guest-stay-arrow-next .guest-chevron-fallback { transform: rotate(225deg); }
.guest-stay-arrow[data-webgl="ready"] .guest-chevron-fallback { visibility: hidden; }
.guest-stays { display: grid; overflow: clip; }
.guest-stay {
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: min(calc(100% - 144px), 1440px);
  min-height: calc(var(--guest-view-height) - 240px);
  margin: 0 auto;
  padding: 22px 0 8px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(40px, 6vw, 100px);
  scroll-margin-top: var(--guest-header-height, 100px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease;
}
.guest-stay.is-current,
.guest-stays[data-direction="prev"] .guest-stay.is-current {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.guest-stay:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.guest-stay:nth-child(even) .guest-stay-media { grid-column: 2; grid-row: 1; }
.guest-stay:nth-child(even) .guest-stay-content { grid-column: 1; grid-row: 1; }
.guest-stay-media {
  width: 100%;
  height: clamp(260px, calc(var(--guest-view-height) - 290px), 460px);
  aspect-ratio: 4 / 3;
  margin: 0;
  align-self: center;
}
.guest-stay:nth-child(3n + 2) .guest-stay-media { width: 95%; justify-self: end; aspect-ratio: 3 / 2; }
.guest-stay:nth-child(3n) .guest-stay-media { width: 97%; aspect-ratio: 1.35; }
.guest-stay-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
/* Review photos stay still during scrolling, hover and quote changes. */
#reviews .guest-stay-media,
#reviews .guest-stay-media img {
  transform: none !important;
  scale: none !important;
  animation: none !important;
  transition: none !important;
}
.guest-stay-content { min-width: 0; }
.guest-stay-kicker {
  margin: 0 0 7px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .13em;
}
.guest-stay-name {
  margin: 0 0 16px;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}
.guest-stay[data-property="forestpark"] .guest-stay-name { font-size: clamp(26px, 2.5vw, 36px); }
.guest-quotes { display: grid; min-width: 0; }
.guest-quote {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease;
}
.guest-quote.is-active { opacity: 1; visibility: visible; }
.guest-quote-text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.guest-quote-credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
}
.guest-quote-trans { display: inline-block; margin-left: .4em; }
.guest-quote-src { text-decoration: underline; text-underline-offset: 3px; }
.guest-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--guest-rule);
  font-family: var(--font-ui);
}
.guest-controls button {
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  align-items: center;
  color: inherit;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  transition: transform .2s ease;
}
.guest-controls button:hover { transform: translateY(-2px); }
.guest-controls [data-review-status] { min-width: 58px; text-align: center; font-size: 12px; letter-spacing: .06em; }
.guest-controls [hidden] { display: none; }
.guest-reviews :is(button, a):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.guest-reviews-end { width: 92%; max-width: 1440px; padding: 0 0 20px; text-align: right; }
.guest-reviews-more { display: inline-block; padding: 9px 0; font-family: var(--font-ui); font-size: 13px; border-bottom: 1px solid currentColor; }

@media (max-width: 760px) {
  #reviews.guest-reviews {
    --guest-view-height: calc(100vh - var(--guest-header-height, 64px));
    --guest-view-height: calc(100svh - var(--guest-header-height, 64px));
  }
  .guest-reviews .guest-reviews-intro { display: block; width: 92%; padding: 24px 0 12px; }
  .guest-reviews .section-eyebrow { font-size: 11px; margin-bottom: 5px; }
  .guest-reviews .section-title { font-size: 30px; margin-bottom: 12px; }
  .guest-reviews-summary { column-gap: 10px; }
  .guest-reviews-score { font-size: 32px; }
  .guest-reviews-stars { font-size: 13px; }
  .guest-reviews-count { font-size: 11px; line-height: 1.5; }
  .guest-stay-navigation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .guest-stay-tabs { width: 100%; gap: 22px; }
  .guest-stay-tabs button { font-size: 13px; padding-right: 5px; }
  .guest-stay-arrow {
    top: var(--guest-arrow-y, 150px);
    width: 44px;
    height: 64px;
    color: #fff;
    background: rgba(38, 35, 31, .5);
  }
  .guest-stay-arrow-prev { left: 4%; }
  .guest-stay-arrow-next { right: 4%; }
  .guest-chevron-canvas { width: 44px; height: 55px; }
  .guest-chevron-fallback { width: 18px; height: 18px; }
  .guest-stay, .guest-stay:nth-child(even) {
    width: 92%;
    height: var(--guest-view-height);
    min-height: 0;
    padding: 16px 0 18px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(64px, 1fr) max-content;
    align-items: stretch;
    gap: 15px;
  }
  .guest-stay .guest-stay-media,
  .guest-stay:nth-child(even) .guest-stay-media,
  .guest-stay:nth-child(3n + 2) .guest-stay-media,
  .guest-stay:nth-child(3n) .guest-stay-media {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 340px;
    aspect-ratio: auto;
    align-self: end;
  }
  .guest-stay .guest-stay-content,
  .guest-stay:nth-child(even) .guest-stay-content { grid-area: 2 / 1; }
  .guest-stay-kicker { font-size: 11px; margin-bottom: 3px; letter-spacing: .08em; }
  .guest-stay-name,
  .guest-stay[data-property="forestpark"] .guest-stay-name {
    font-size: 26px;
    line-height: 1.22;
    letter-spacing: .035em;
    margin-bottom: 12px;
  }
  .guest-stay[data-property="forestpark"] .guest-stay-name { font-size: 22px; }
  .guest-quote-text { font-size: 16px; line-height: 1.65; }
  .guest-quote-credit { font-size: 11px; margin-top: 10px; gap: 3px 8px; }
  .guest-controls { margin-top: 10px; padding-top: 3px; }
  .guest-controls button { font-size: 26px; }
  .guest-reviews-end { width: 92%; padding: 2px 0 22px; }
}

/* These height modes share the same stable mobile measurement as the photo. */
@media (max-width: 760px) {
  .guest-compact-viewport .guest-stay,
  .guest-compact-viewport .guest-stay:nth-child(even) { padding: 10px 0; gap: 10px; }
  .guest-compact-viewport .guest-stay[data-property="dourakutei"] .guest-stay-media img { object-position: center 25%; }
  .guest-compact-viewport .guest-stay-name,
  .guest-compact-viewport .guest-stay[data-property="forestpark"] .guest-stay-name { margin-bottom: 8px; }
  .guest-compact-viewport .guest-quote-text { line-height: 1.5; }
  .guest-compact-viewport .guest-quote-credit { margin-top: 8px; }
  .guest-compact-viewport .guest-controls { margin-top: 8px; padding-top: 0; }
}

/* At landscape / magnified text sizes, readable complete quotes take priority. */
.guest-short-viewport .guest-stay,
.guest-short-viewport .guest-stay:nth-child(even) { height: auto; min-height: var(--guest-view-height); padding-top: 24px; padding-bottom: 24px; }
.guest-short-viewport .guest-stay-media { max-height: 360px; }
@media (prefers-reduced-motion: reduce) {
  body.guest-reviews-page,
  body.guest-reviews-page :is(#properties, #reviews, #faq),
  body.guest-reviews-page :is(#properties, #faq) :is(h2, h3, p, a, span, summary, .faq-a),
  .guest-quote,
  .guest-controls button,
  .guest-stay,
  .guest-stay-tabs button { transition: none; }
}