/* Properties page — implements Figma 289:1205 (desktop) and 351:902 (mobile).
   Values below are the design's, converted to the project's tokens where one
   exists: --moss-green is this project's --accent (#3b4126), --cream is
   #f1ecdb, and the card wash reuses the site's existing colour-burn treatment. */

.pp { background: var(--cream, #f1ecdb); }

/* Nav: the design puts a green logo and burger on cream, where the homepage
   nav is cream-on-video. Same block, recoloured. */
.pp .ch-nav__logo, .pp .ch-nav__wordmark { color: var(--accent, #3b4126); }
.pp .ch-nav__owl { filter: brightness(0) saturate(100%) invert(21%) sepia(11%) saturate(1430%) hue-rotate(43deg) brightness(94%) contrast(88%); }
.pp .ch-nav__toggle span[aria-hidden] { background-color: var(--accent, #3b4126); }
.pp .ch-nav__toggle:focus-visible { outline-color: var(--accent, #3b4126); }
.pp .ch-nav__menu a { color: var(--accent, #3b4126); text-shadow: none; }
@media screen and (max-width: 767px) { .pp .ch-nav__menu a { color: var(--brand, #efeed5); } }

/* ---- Page rhythm: 64px pad, 96px between blocks (desktop) -------------- */
.pp-content { display: flex; flex-direction: column; gap: 96px; padding: 64px; }
@media (max-width: 991px) { .pp-content { gap: 120px; padding: 64px 0; } }

/* ---- Search header + quick-pick tiles ---------------------------------- */
.pp-header { display: flex; flex-direction: column; gap: 46px; padding: 24px 0 48px; }
@media (max-width: 991px) { .pp-header { padding: 0 20px; } }

.pp-title {
  margin: 0; text-align: center;
  font-family: var(--font-family--heading, Crimsonpro), serif;
  font-weight: 300; font-size: 80px; line-height: 1.1; letter-spacing: -2.8px;
  color: var(--accent, #3b4126);
}
.pp-title em { font-style: italic; font-weight: 400; }
@media (max-width: 991px) { .pp-title { font-size: 56px; letter-spacing: -1.96px; } }

.pp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 991px) { .pp-tiles { grid-template-columns: 1fr; gap: 42px; } }
.pp-tile { display: flex; flex-direction: column; gap: 24px; align-items: center; text-decoration: none; }
@media (max-width: 991px) { .pp-tile { gap: 16px; } }

/* 4:3 frame from the design (390x294), with the site's colour-burn wash. */
.pp-frame {
  position: relative; width: 100%; aspect-ratio: 390 / 294; overflow: hidden;
  background-color: var(--accent, #3b4126);
  border: 1px solid rgba(59, 65, 38, .5); border-radius: 24px;
  box-shadow: 0 13.993px 22.388px 0 rgba(0, 0, 0, .03);
}
@media (max-width: 991px) { .pp-frame { border-radius: 16px; } }
.pp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gallery shots stack; only the current one shows. A single-photo property has
   one shot and no arrows, so nothing here changes for it. */
.pp-frame .pp-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.pp-frame .pp-shot[data-current] { opacity: 1; position: relative; }
.pp-frame:after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-color: #f5f4e6; mix-blend-mode: color-burn;
  opacity: var(--image-burn-strength, 1);
}

.pp-tile-name {
  margin: 0; text-align: center;
  font-family: var(--font-family--heading, Crimsonpro), serif;
  font-size: 48px; line-height: .8; letter-spacing: -1.68px; font-weight: 300;
  color: var(--accent, #3b4126);
}
.pp-tile-name em { font-style: italic; font-weight: 400; }
@media (max-width: 991px) { .pp-tile-name { font-size: 42px; letter-spacing: -1.47px; } }

/* ---- One property ------------------------------------------------------ */
/* The design's Content stack separates properties with a 96px gap (120 on
   mobile). The items live inside #pp-list, which must carry that gap itself --
   without it each property's closing description sits flush against the next
   card and reads as stray text wedged between properties. */
#pp-list { display: flex; flex-direction: column; gap: 96px; }
@media (max-width: 991px) { #pp-list { gap: 120px; } }

.pp-item { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.pp-item__row { display: flex; gap: 24px; align-items: stretch; justify-content: center; width: 100%; }
@media (max-width: 991px) { .pp-item__row { flex-direction: column; gap: 32px; } }

.pp-item__media { position: relative; flex: 0 0 762px; max-width: 762px; }
@media (max-width: 991px) { .pp-item__media { flex: 1 1 auto; max-width: none; } }
.pp-item__media .pp-frame { height: 100%; aspect-ratio: auto; min-height: 100%; }
@media (max-width: 991px) {
  /* The mobile frame runs full-bleed: no radius, no border. */
  .pp-item__media .pp-frame { aspect-ratio: 390 / 294; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
}

.pp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 20px; height: 43px; padding: 0; background: none; border: 0; cursor: pointer;
}
.pp-arrow img { width: 100%; height: 100%; display: block; }
.pp-arrow--prev { left: 4.2%; }
.pp-arrow--next { right: 4.2%; }
@media (max-width: 991px) { .pp-arrow { width: 12px; height: 21px; } .pp-arrow--prev { left: 16px; } .pp-arrow--next { right: 16px; } }

.pp-info {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 28px; align-items: center; justify-content: center;
  background: rgba(246, 245, 235, .3);
  border: 1px solid rgba(59, 65, 38, .2); border-radius: 24px;
  box-shadow: 0 13.993px 22.388px 0 rgba(0, 0, 0, .03);
  padding: 32px 12px 12px;
}
@media (max-width: 991px) { .pp-info { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 20px; } }

.pp-name {
  margin: 0; max-width: 380px; text-align: center;
  font-family: var(--font-family--heading, Crimsonpro), serif;
  font-size: 64px; line-height: .8; letter-spacing: -2.24px; font-weight: 500;
  color: var(--accent, #3b4126);
}
.pp-name em { font-style: italic; font-weight: 400; }
.pp-name .pp-name__light { font-weight: 300; }
@media (max-width: 991px) { .pp-name { font-size: 48px; letter-spacing: -1.68px; max-width: none; } }

.pp-meta { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
@media (max-width: 991px) { .pp-meta { gap: 20px; } }
.pp-meta li { display: flex; gap: 8px; align-items: center; font-size: 16px; line-height: 1.6; color: var(--accent, #3b4126); white-space: nowrap; }
@media (max-width: 991px) { .pp-meta li { font-size: 15px; } }
.pp-meta img { width: 24px; height: 24px; flex: none; display: block; }
@media (max-width: 991px) { .pp-meta img { width: 20px; height: 20px; } }

.pp-desc { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
.pp-desc p { margin: 0; text-align: center; font-size: 16px; line-height: 1.6; color: var(--accent, #3b4126); padding: 0 12px; }
@media (max-width: 991px) { .pp-desc p { font-size: 15px; padding: 0; } }

.pp-price { white-space: nowrap; font-size: 18px; line-height: 1.6; color: var(--accent, #3b4126); }
.pp-price strong { font-size: 24px; font-weight: 500; letter-spacing: -1.2px; }
.pp-price span { font-size: 18px; font-weight: 500; }

/* Occupies the panel the design reserved for the Checked.in widget, keeping its
   frame -- #e7e5c7, 1px border, 16px radius -- so the card's balance survives. */
.pp-book {
  width: 100%; display: flex; flex-direction: column; gap: 20px;
  align-items: center; justify-content: center; text-align: center;
  background: #e7e5c7; border: 1px solid rgba(59, 65, 38, .5); border-radius: 16px;
  padding: 28px 24px;
}
.pp-book__facts { display: flex; gap: 40px; margin: 0; flex-wrap: wrap; justify-content: center; }
.pp-book__facts div { display: flex; flex-direction: column; gap: 2px; }
.pp-book__facts dt {
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em; text-transform: uppercase;
  color: var(--accent, #3b4126); opacity: .65;
}
.pp-book__facts dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--accent, #3b4126); }
.pp-book .button { padding: 1rem 2rem; }
.pp-book__note { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--accent, #3b4126); opacity: .7; }
@media (max-width: 991px) { .pp-book__facts { gap: 28px; } }

/* Figma puts this under the image column, left-aligned in an items-start
   column -- not centred under the whole row, where it detaches from its own
   property and reads as loose text sitting in the gap before the next one. */
.pp-notes { width: 762px; max-width: 100%; margin: 0; padding: 0 12px; }
@media (max-width: 991px) { .pp-notes { width: 100%; padding: 0 28px; } }
.pp-notes p { margin: 0 0 1em; font-size: 16px; line-height: 1.35; color: var(--accent, #3b4126); }
.pp-notes p:last-child { margin-bottom: 0; }
.pp-notes .pp-notes__fine { font-size: 14px; }
@media (max-width: 991px) { .pp-notes p { font-size: 13px; } .pp-notes .pp-notes__fine { font-size: 11px; } }