/* ---------- FEATURED PROPERTIES (homepage) ---------- */
.featured-properties{
  background:var(--bg-dark);
  padding:clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 9vw, 11rem) clamp(2.5rem, 6vw, 4.5rem);
  border-bottom:1px solid var(--line);
}

.featured-head{
  max-width:1500px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-bottom:2.5rem;
}
.featured-head h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2rem, 4.5vw, 3rem);
  color:var(--white);
}
.featured-head p{
  margin-top:0.5rem;
  color:var(--text-muted);
  font-size:clamp(0.95rem, 1.2vw, 1.1rem);
}

.featured-view-all{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  color:var(--accent-light);
  font-family:var(--font-display);
  font-size:1.05rem;
  white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.featured-view-all:hover{
  border-color:var(--accent-light);
  color:var(--white);
}

/* Reuse .property-grid from properties.css for layout + .property-card for cards.
   featured-grid only needs to cap the row at 4 max and remove the page-level padding
   since .featured-properties already supplies its own padding. */
.featured-grid{
  max-width:1500px;
  margin:0 auto;
  padding:0;
}

.featured-view-all-mobile{
  display:none;
  justify-content:center;
  margin-top:2rem;
}
@media(max-width:700px){
  .featured-view-all-mobile{display:flex;}
  .featured-head .featured-view-all{display:none;}
}

/* ---------- PAGINATION CONTROLS ---------- */
.featured-grid-wrap{
  position:relative;
  max-width:1500px;
  margin:0 auto;
  touch-action:pan-y; /* allow vertical scroll, we handle horizontal swipe ourselves */
}

/* Inner clip container — only this clips the sliding grids. Nav buttons live
   in .featured-grid-wrap (above), outside this clip, so they aren't cut off. */
.featured-grid-clip{
  position:relative;
  overflow:hidden;
  transition:height 0.42s cubic-bezier(0.16,1,0.3,1);
}
@media(prefers-reduced-motion: reduce){
  .featured-grid-clip{transition:none;}
}

.featured-nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  border:1px solid var(--line);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  line-height:1;
  z-index:2;
  transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.featured-nav-prev{left:-1.5rem;}
.featured-nav-next{right:-1.5rem;}

@media(max-width:1300px){
  .featured-nav-prev{left:0.25rem;}
  .featured-nav-next{right:0.25rem;}
}

.featured-nav-btn:hover:not(:disabled){
  border-color:var(--accent-light);
  background:rgba(165,131,117,0.25);
  transform:translateY(-50%) translateY(-1px);
}
.featured-nav-btn:disabled{
  opacity:0.25;
  cursor:not-allowed;
}

@media(max-width:760px){
  .featured-nav-btn,
  .featured-dots{
    display:none !important;
  }
}

.featured-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  margin-top:1.75rem;
}
.featured-dots span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,0.3);
  transition:background 0.2s ease, transform 0.2s ease;
}
.featured-dots span.active{
  background:var(--accent-light);
  transform:scale(1.25);
}

/* ---------- SLIDE TRANSITION (page change) ----------
   Two grids briefly coexist absolutely-stacked: the outgoing one slides out
   while the incoming one slides in from the opposite side. */
.featured-grid-exit,
.featured-grid-enter{
  position:absolute;
  top:0;left:0;right:0;
  transition:transform 0.42s cubic-bezier(0.16,1,0.3,1), opacity 0.42s cubic-bezier(0.16,1,0.3,1);
  will-change:transform, opacity;
}
/* Clip container's height is locked to a fixed px value in JS for the duration
   of the transition, since absolutely-positioned children don't contribute to layout height. */

.featured-enter-right{transform:translateX(38px);opacity:0;}
.featured-enter-left{transform:translateX(-38px);opacity:0;}
.featured-grid-enter-active{transform:translateX(0);opacity:1;}

.featured-exit-left.featured-grid-exit-active{transform:translateX(-38px);opacity:0;}
.featured-exit-right.featured-grid-exit-active{transform:translateX(38px);opacity:0;}

@media(prefers-reduced-motion: reduce){
  .featured-grid-exit,
  .featured-grid-enter{transition:none;}
}

/* While a grid is sliding in/out as a whole, suppress the individual
   per-card fade-up animation (from .property-card) so they don't double-animate. */
.featured-grid-exit .property-card,
.featured-grid-enter .property-card{
  animation:none;
}

/* The slide transition already provides the enter animation for this carousel,
   so the per-card cardIn fade (from properties.css) should never apply here —
   otherwise it flashes back in right after the exit/enter classes are removed
   at the end of each transition. */
.featured-grid .property-card{
  animation:none;
}