/* ==========================================================================
   The Collection — live, auto-rotating featured-homes carousel
   Data comes from /listings.php (Hostaway API proxy). Shared by index.html
   (root) and escape/index.html. On-brand: square corners, gold accents, Jost.
   ========================================================================== */

.sr-homes{ font-family:'Jost',sans-serif; margin-top:6px; }

/* viewport wraps the track and holds the arrows */
.sr-viewport{ position:relative; }

/* horizontal scroll-snap track (native, touch-friendly) */
.sr-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding-bottom:4px;
  scrollbar-width:none;                 /* Firefox */
}
.sr-track::-webkit-scrollbar{ display:none; } /* WebKit */

/* card sizing: 3-up desktop / 2-up tablet / 1-up mobile */
.sr-card{ flex:0 0 calc((100% - 48px) / 3); scroll-snap-align:start; }
@media (max-width:1000px){ .sr-card{ flex-basis:calc((100% - 24px) / 2); } }
@media (max-width:640px){ .sr-card{ flex-basis:100%; } }

/* card look */
.sr-card a{
  display:flex; flex-direction:column; height:100%; text-decoration:none;
  background:#FFFDF8; border:1px solid rgba(139,100,40,0.18);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.sr-card a:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(47,45,41,0.14); }

.sr-photo{
  position:relative; aspect-ratio:4 / 3; background:#e9e2d4 center/cover no-repeat;
  overflow:hidden;
}
.sr-photo:after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(rgba(31,29,24,0.05), rgba(31,29,24,0.28));
}
.sr-photo img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.5s ease; }
.sr-card a:hover .sr-photo img{ transform:scale(1.05); }

.sr-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.sr-name{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:23px;
  line-height:1.15; color:#2F2D29; margin:0 0 4px;
}
.sr-loc{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#8B6428;
  margin:0 0 14px;
}
.sr-specs{
  display:flex; gap:16px; flex-wrap:wrap; margin:0 0 16px;
  font-size:13px; color:#5A4E3C; border-top:1px solid rgba(139,100,40,0.15);
  padding-top:14px;
}
.sr-specs span{ white-space:nowrap; }
.sr-specs b{ color:#2F2D29; font-weight:600; }
.sr-cta{
  margin-top:auto; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:#8B6428; display:inline-flex; align-items:center; gap:7px;
}
.sr-card a:hover .sr-cta{ color:#2F2D29; }
.sr-cta i{ transition:transform 0.25s ease; font-style:normal; }
.sr-card a:hover .sr-cta i{ transform:translateX(4px); }

/* arrows */
.sr-arrow{
  position:absolute; top:calc(50% - 40px); transform:translateY(-50%);
  width:44px; height:44px; border:none; cursor:pointer; z-index:3;
  background:#2F2D29; color:#D4BC8A; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, opacity 0.2s ease;
}
.sr-arrow:hover{ background:#3a372f; }
.sr-arrow[disabled]{ opacity:0; pointer-events:none; }
.sr-prev{ left:-10px; }
.sr-next{ right:-10px; }
@media (max-width:640px){ .sr-prev{ left:0; } .sr-next{ right:0; } }

/* dots */
.sr-dots{ display:flex; justify-content:center; gap:9px; margin-top:22px; }
.sr-dot{
  width:8px; height:8px; padding:0; border:none; cursor:pointer;
  background:rgba(139,100,40,0.28); transition:background 0.2s ease, width 0.2s ease;
}
.sr-dot.is-active{ background:#8B6428; width:22px; }

/* single-home / no-rotation state: center one card, hide controls */
.sr-homes.sr-single .sr-track{ justify-content:center; }
.sr-homes.sr-single .sr-arrow,
.sr-homes.sr-single .sr-dots{ display:none; }
.sr-homes.sr-single .sr-card{ flex-basis:min(420px, 100%); }