/* ==========================================================================
   Lark + Fir — Agent recent-listings slider ([lf_agent_listings])
   Reuses the site's existing Houzez-style .lfc card (same template/CSS as
   the main /listings/ page) laid out as a horizontal scroll-snap slider.
   ========================================================================== */

.lf-agent-listings{
  margin:24px 0;
  max-width:100%;
}
.lf-agent-listings__viewport{
  position:relative;
  max-width:100%;
}
.lf-agent-listings__slider{
  position:relative;
  max-width:100%;
  overflow:hidden;
}

/* prev/next arrow buttons, floating over the slider edges (same visual
   language as the property preview-modal gallery arrows elsewhere on site) */
.lf-agent-listings__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  box-sizing:border-box;
  width:40px;
  height:40px;
  min-width:40px;
  max-width:40px;
  min-height:40px;
  max-height:40px;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(32,29,26,.62);
  color:#fff;
  display:flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:background .2s ease;
}
.lf-agent-listings__nav:hover{
  background:rgba(32,29,26,.88);
}
/* CSS-drawn chevron instead of a text glyph (‹/›) -- text characters rely on
   each font's own baseline/ascent metrics, which rarely put the visible ink
   at true vertical center of its box, so it always looked slightly off no
   matter how the button itself was centered. A fixed-size bordered square
   rotated 45deg has no such ambiguity -- it centers exactly. */
.lf-agent-listings__nav-icon{
  display:block;
  width:9px;
  height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
}
.lf-agent-listings__nav--prev .lf-agent-listings__nav-icon{
  transform:rotate(135deg) translate(-1px,-1px);
}
.lf-agent-listings__nav--next .lf-agent-listings__nav-icon{
  transform:rotate(-45deg) translate(-1px,-1px);
}
.lf-agent-listings__nav--prev{ left:-4px; }
.lf-agent-listings__nav--next{ right:-4px; }
@media (min-width:820px){
  .lf-agent-listings__nav--prev{ left:-20px; }
  .lf-agent-listings__nav--next{ right:-20px; }
}

/* fade hint on the right edge so a partially-visible card reads as
   "scroll for more" rather than a layout mistake */
.lf-agent-listings__slider::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:16px;
  width:60px;
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.9));
  pointer-events:none;
}

/* The shortcode wraps its cards two levels deep: .es-listings__wrap-inner is
   just an outer scaffold div; its direct children are the REAL card list
   (.es-listings.es-listings--list, containing one #post-N per card) and an
   .es-powered attribution footer. The scroll/flex behavior belongs on that
   inner .es-listings--list — applying it to .wrap-inner too would nest two
   flex containers and break sizing, so .wrap-inner is intentionally left
   untouched (plain block passthrough). */
.lf-agent-listings__slider .es-listings.es-listings--list{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  /* no scroll-snap: it fights with JS drag-scrolling (see lf-agent-listings.js)
     — re-enabling snap right as a drag ends forces an immediate re-snap that
     discards the drag's resting position. Arrow-button clicks already move
     by exactly one card-width + gap, so alignment holds without CSS snap. */
  scroll-snap-type:none;
  -webkit-overflow-scrolling:touch;
  /* lf-card.css sets column-gap:0 !important (to kill CSS-columns on the
     main listings page); that also zeroes flexbox gap here unless matched */
  row-gap:32px !important;
  column-gap:32px !important;
  padding:4px 4px 16px;
  height:auto !important;
}
.lf-agent-listings__slider .es-listings.es-listings--list > [id^="post-"]{
  flex:0 0 380px !important;
  width:380px !important;
  max-width:85vw;
  scroll-snap-align:start;
  margin:0 !important;
}
.lf-agent-listings__slider .lfc.lfc--v1{
  margin-bottom:0;
  height:100%;
}
.lf-agent-listings__slider .lfc .lfc__inner{
  height:100%;
  box-shadow:none !important;
  border:1px solid #ececec;
}
.lf-agent-listings__slider .lfc .lfc__inner:hover{
  box-shadow:none !important;
}
/* The card's default side-by-side layout gives the text column only ~220px
   at a 480px card width, crushing titles into a single narrow line ("Bodaci
   ous Bull Mt..."). Force the same stacked (image-on-top) layout the card
   itself already uses at narrow *viewport* widths, regardless of viewport
   size, since here it's the *card*, not the screen, that's narrow. */
.lf-agent-listings__slider .lfc .lfc__inner{
  flex-direction:column;
}
.lf-agent-listings__slider .lfc__media{
  flex:0 0 auto;
  max-width:none;
  width:100%;
}
.lf-agent-listings__slider .lfc__image{
  min-height:200px;
}
.lf-agent-listings__slider .lfc__title{
  margin:10px 0;
}
.lf-agent-listings__slider .lfc__address{
  white-space:normal;
  text-overflow:clip;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* hide the native scrollbar entirely — the prev/next arrows are the only
   intended scroll control */
.lf-agent-listings__slider .es-listings.es-listings--list{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.lf-agent-listings__slider .es-listings.es-listings--list::-webkit-scrollbar{
  display:none;
  height:0;
}

/* click-and-drag affordance for mouse users (see lf-agent-listings.js) */
.lf-agent-listings__slider .es-listings.es-listings--list{
  cursor:grab;
}
.lf-agent-listings__slider .es-listings.es-listings--list.is-dragging{
  cursor:grabbing;
  user-select:none;
  -webkit-user-select:none;
}
.lf-agent-listings__slider .es-listings.es-listings--list.is-dragging > [id^="post-"]{
  pointer-events:none;
}

/* Section headings -- "{Agent Name} Listings" above the slider, and
   "{First Name}'s Posts" above the posts list below it. Shared style so the
   two sections read as a matched pair. */
.lf-agent-listings__heading{
  margin:0 0 16px;
  font-size:22px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#201d1a;
}
.lf-agent-listings__heading span{
  font-weight:400;
  color:#7a7f86;
}

/* "View all listings" button */
.lf-agent-listings__more{
  text-align:center;
  margin-top:8px;
}
.lf-agent-listings__more-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 30px;
  border-radius:8px;
  background:#f5c21f;
  color:#201d1a;
  font-weight:600;
  letter-spacing:.03em;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.lf-agent-listings__more-btn:hover{
  color:#201d1a;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  filter:brightness(1.05);
}

@media (max-width:600px){
  .lf-agent-listings__slider .es-listings.es-listings--list > [id^="post-"]{
    flex-basis:85vw !important;
    width:85vw !important;
  }
}

/* ==========================================================================
   "{Agent}'s Posts" -- blog posts by the agent's linked WP user account,
   shown below the listings slider (matches the old site's agent pages).
   ========================================================================== */
.lf-agent-posts{
  margin:40px 0 24px;
}
.lf-agent-posts__list{
  list-style:none;
  margin:0;
  padding:0;
}
.lf-agent-posts__item{
  padding:20px 0;
  border-top:1px solid #ececec;
}
.lf-agent-posts__item:last-child{
  border-bottom:1px solid #ececec;
}
.lf-agent-posts__date{
  display:block;
  font-size:13px;
  color:#9aa0a6;
  margin-bottom:6px;
}
.lf-agent-posts__title{
  margin:0 0 8px;
  font-size:19px;
  font-weight:700;
  line-height:1.3;
}
.lf-agent-posts__title a{
  color:#201d1a;
  text-decoration:none;
}
.lf-agent-posts__title a:hover{
  color:#000;
  text-decoration:underline;
}
.lf-agent-posts__excerpt{
  margin:0 0 8px;
  color:#54595f;
  line-height:1.6;
}
.lf-agent-posts__more{
  font-size:14px;
  font-weight:600;
  color:#201d1a;
  text-decoration:underline;
}
.lf-agent-posts__more:hover{
  color:#000;
}