/* PROPERTY PLUS photo album
   - every photo is shown WHOLE (object-fit: contain) inside the same size frame,
     so nothing is cropped and the watermark is never cut off
   - computer: one large photo + a grid of thumbnails beside it
   - tablet/phone: large photo you can swipe + a thumbnail strip below
   - click the photo (or "Full screen") for the full-screen viewer */
.ppg {
  --ppg-accent: #49c3d1;
  --ppg-frame: #eef3f4;      /* colour around photos that are not the frame's shape */
  --ppg-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  font-family: inherit;
}
.ppg-main {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  max-height: 640px;
  border-radius: var(--ppg-radius);
  overflow: hidden;
  background: var(--ppg-frame);
}
.ppg-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ppg-track::-webkit-scrollbar { display: none; }
.ppg-track:focus-visible { outline: 3px solid var(--ppg-accent); outline-offset: -3px; }
.ppg-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}
.ppg-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;      /* whole photo, never cropped */
  user-select: none;
  -webkit-user-drag: none;
}
.ppg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #10242a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  cursor: pointer;
}
.ppg-arrow svg { width: 22px; height: 22px; }
.ppg-arrow:hover { background: var(--ppg-accent); color: #fff; }
.ppg-arrow:focus-visible { outline: 3px solid var(--ppg-accent); outline-offset: 2px; }
.ppg-prev { left: 14px; }
.ppg-next { right: 14px; }
.ppg-counter {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(14, 26, 30, .72);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ppg-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #10242a;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  cursor: pointer;
}
.ppg-zoom svg { width: 16px; height: 16px; }
.ppg-zoom:hover { background: var(--ppg-accent); color: #fff; }
.ppg-zoom:focus-visible { outline: 3px solid var(--ppg-accent); outline-offset: 2px; }

/* thumbnails: same square frame for every photo, whole photo shown */
.ppg-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
  gap: 8px;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ppg-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--ppg-frame);
  overflow: hidden;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s ease, border-color .2s ease;
}
.ppg-thumb img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.ppg-thumb:hover { opacity: 1; }
.ppg-thumb[aria-current="true"] { border-color: var(--ppg-accent); opacity: 1; }
.ppg-thumb:focus-visible { outline: 2px solid var(--ppg-accent); outline-offset: 2px; }

/* one photo only: no thumbnail column */
.ppg--single { grid-template-columns: minmax(0, 1fr); }

/* tablet: thumbnails move under the photo */
@media (max-width: 991px) {
  .ppg { grid-template-columns: minmax(0, 1fr); }
  .ppg-main { max-height: none; }
  .ppg-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    height: auto !important;
  }
  .ppg-thumb { flex: 0 0 84px; height: 84px; }
}
/* phone: square frame (most listing photos are square), smaller controls */
@media (max-width: 700px) {
  .ppg-main { aspect-ratio: 1 / 1; border-radius: 10px; }
  .ppg-arrow { width: 38px; height: 38px; }
  .ppg-prev { left: 8px; }
  .ppg-next { right: 8px; }
  .ppg-zoom span { display: none; }
  .ppg-zoom { padding: 8px; }
  .ppg-thumb { flex-basis: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .ppg-track { scroll-behavior: auto; }
}

/* full-screen viewer */
.ppg-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(9, 16, 19, .97);
  color: #fff;
  font-family: inherit;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.ppg-lb[hidden] { display: none !important; }
.ppg-lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ppg-lb-title { opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ppg-lb-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
}
.ppg-lb-btn:hover { background: var(--ppg-accent); }
.ppg-lb-btn:focus-visible { outline: 3px solid var(--ppg-accent); outline-offset: 2px; }
.ppg-lb-btn svg { width: 20px; height: 20px; }
.ppg-lb-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 72px;
  touch-action: pan-y;
}
.ppg-lb-stage img {
  position: absolute;
  top: 0;
  left: 72px;
  width: calc(100% - 144px);
  height: 100%;
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.ppg-lb-prev, .ppg-lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.ppg-lb-prev { left: 16px; }
.ppg-lb-next { right: 16px; }
.ppg-lb-thumbs {
  display: flex;
  gap: 8px;
  padding: 14px 18px 18px;
  overflow-x: auto;
  justify-content: safe center;
  scrollbar-width: thin;
}
.ppg-lb-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  overflow: hidden;
  opacity: .55;
  cursor: pointer;
}
.ppg-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppg-lb-thumb[aria-current="true"] { border-color: var(--ppg-accent); opacity: 1; }
.ppg-lb-thumb:hover { opacity: 1; }
.ppg-lb-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 700px) {
  .ppg-lb-stage img { left: 8px; width: calc(100% - 16px); }
  .ppg-lb-prev, .ppg-lb-next { display: none; }
  .ppg-lb-thumb { width: 64px; height: 46px; }
}

/* Listing header above the gallery: title (H1), address, price */
.pp-listing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 20px;
}
.pp-listing-head__main { min-width: 0; flex: 1 1 420px; }
.pp-listing-head__title {
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.25;
  font-weight: 600;
  color: #10242a;
  text-wrap: balance;
}
.pp-listing-head__address {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #5d7177;
  font-size: 15px;
}
.pp-listing-head__address svg { width: 16px; height: 16px; flex: none; color: #49c3d1; }
.pp-listing-head__price { text-align: right; }
.pp-listing-head__price strong {
  display: block;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  color: #10242a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pp-listing-head__price span { color: #5d7177; font-size: 13px; text-transform: lowercase; }
@media (max-width: 700px) {
  .pp-listing-head { align-items: flex-start; }
  .pp-listing-head__price { text-align: left; }
}

/* Slim breadcrumb band on the property page (replaces the dark blurry photo banner).
   Solid brand colour, no photo. The site header sits on top of this band, so the
   top padding makes room for it (pp-gallery.js sets the exact value). */
.breadcrumbs__content.pp-crumbs {
  height: auto;
  min-height: 0;
  display: block;
  background: #12313a;
  background-image: none;
  padding-top: 212px;
  padding-bottom: 16px;
}
@media (max-width: 1199px) { .breadcrumbs__content.pp-crumbs { padding-top: 238px; } }
@media (max-width: 991px)  { .breadcrumbs__content.pp-crumbs { padding-top: 156px; } }
@media (max-width: 767px)  { .breadcrumbs__content.pp-crumbs { padding-top: 187px; } }
.pp-crumbs + section.pd-top-100 { padding-top: 32px; }
.pp-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}
.pp-crumbs__list li { min-width: 0; }
.pp-crumbs__list li + li::before { content: "›"; margin-right: 6px; color: rgba(255, 255, 255, .5); }
.pp-crumbs__list a { color: #7fd8e2; text-decoration: none; }
.pp-crumbs__list a:hover { text-decoration: underline; }
.pp-crumbs__list li[aria-current] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60ch;
}