/* Shared listing-photo carousel — Property Transfer. All classes prefixed
   ptg- so nothing clashes with per-page styles. RTL-aware: works with the
   site's dir="rtl" pages, arrows placed like the existing sell.html photo
   controls (next = right / start side, prev = left / end side). */

.ptg-host{
  position:relative;
}

.ptg-track{
  position:absolute;
  inset:0;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scrollbar-width:none;
  outline:none;
}
.ptg-track::-webkit-scrollbar{display:none;}
.ptg-track:focus-visible{box-shadow:inset 0 0 0 2px #0e850f;}

.ptg-slide{
  flex:0 0 100%;
  min-width:100%;
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
/* a slide is either a plain <div class="ptg-slide"><img></div>, or (for
   the first/original photo) a <picture class="ptg-slide"> itself so its
   <source> media-query switching keeps working */
.ptg-slide img,
.ptg-slide picture img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Arrows we generate ourselves (search cards, unit gallery) */
button.ptg-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:34px;
  height:34px;
  border:0 !important;
  border-radius:50%;
  background:rgba(8,13,20,.45);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  opacity:0;
  transition:opacity .18s ease-out, background .18s ease-out;
}
button.ptg-arrow:hover{background:rgba(8,13,20,.68);}
button.ptg-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
button.ptg-next{right:10px;}
button.ptg-prev{left:10px;}

/* hover / focus reveal on devices that support hover (desktop); always
   shown on touch-only devices would just clutter the photo, so they stay
   hidden until interacted with, same as the rest of the card chrome */
@media (hover:hover) and (pointer:fine){
  .ptg-host:hover button.ptg-arrow,
  .ptg-host button.ptg-arrow:focus-visible{
    opacity:1;
  }
}

/* the unit page's main gallery keeps its arrows visible at all times */
.ptg-always-visible button.ptg-arrow{
  opacity:1;
}

/* dots we regenerate to match the real slide count */
.ptg-dot{
  transition:background .15s ease-out, opacity .15s ease-out;
}
.ptg-dot.ptg-active{
  background:#fff !important;
  opacity:1 !important;
}