/* ============================================================================
   LISTING PAGES  ·  /real-estate/listings/<address>/
   Linked from listing pages only, so nothing else on the site changes. Uses the
   tokens and fonts from /styles.css (cream, ink, taupe, line, paper; Cormorant
   Garamond and Jost). Built 9 Oct 2026 for 3400 Gulf Shore Boulevard North.

   TO ADD A LISTING: copy the 3400-gulf-shore-blvd-n folder, rename it to the new
   address, swap the photos, the words and the facts. This file stays as it is.
   ============================================================================ */

.lst-back{max-width:1240px;margin:0 auto;padding:8.5rem 3.5vw 0}
/* a 44 px tap area on the back link, without moving its underline */
.lst-back a{position:relative}.lst-back a::after{content:"";position:absolute;inset:-12px -8px}

/* the head: address, price and availability (seasonal rental with its three month minimum, and the purchase price) */
.lst-head{max-width:1240px;margin:0 auto;padding:2.4rem 3.5vw 2.6rem}
.lst-head h1{font-size:clamp(2.3rem,5vw,4.1rem);font-weight:300;line-height:1.02;
  letter-spacing:-.025em;margin-top:.9rem;max-width:15em}
.lst-price{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink);margin-top:1.1rem;line-height:1.35;
  font-variant-numeric:lining-nums tabular-nums}
.lst-sub{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(1.2rem,2vw,1.55rem);color:var(--ink-soft);margin-top:1.1rem;line-height:1.4}
.lst-price span{white-space:nowrap}  /* it breaks only between the pieces, never inside one */
/* 11 Oct: the rental sentence is longer than a phone line, so on a phone it breaks after its comma
   and the purchase price always starts its own line; on a laptop all of it sits on one line */
@media (max-width:760px){ .lst-price .lst-buy{display:block} }
.lst-price + .lst-sub{margin-top:.3rem}

/* photographs: every image carries its width and height, so nothing jumps as it loads */
.lst-grid img{width:100%;height:auto;background:var(--cream-deep)}

/* the cover: a carousel through the interior photos (9 Oct; script in listing.js).
   The frame keeps the single cover's size and crop: 4:3 edge to edge on a phone, 16:9 on
   a laptop, set low in each photo (its own --pos on the slide) so the first screen shows
   the room, not the ceiling. Swipe is the browser's own scroll, so it feels native on a
   phone; without the script it still swipes, and the arrows and counter stay hidden. */
.lst-cover{max-width:1240px;margin:0 auto;padding:0 3.5vw}
.lst-stage{position:relative}
.lst-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  aspect-ratio:4/3;background:var(--cream-deep);outline:none}
.lst-track::-webkit-scrollbar{display:none}
.lst-track:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lst-slide{flex:0 0 100%;min-width:0;height:100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.lst-slide picture{display:block;height:100%}
.lst-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  background:var(--cream-deep)}
@media (min-width:761px){ .lst-track{aspect-ratio:16/9} }

.lst-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(37,33,29,.12);
  background:rgba(255,253,249,.9);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  -webkit-tap-highlight-color:transparent;transition:background .25s ease,border-color .25s ease}
.lst-arrow:hover{background:var(--white,#fffdf9);border-color:var(--ink)}
.lst-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lst-prev{left:1.1rem}
.lst-next{right:1.1rem}
.lst-count{position:absolute;right:1.1rem;bottom:1.1rem;z-index:2;margin:0;
  padding:.42rem .75rem;background:rgba(37,33,29,.58);color:#fffdf9;
  font-size:.66rem;letter-spacing:.18em;line-height:1;font-variant-numeric:tabular-nums;pointer-events:none}
.lst-carousel:not(.is-ready) .lst-arrow,.lst-carousel:not(.is-ready) .lst-count{display:none}
.lst-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:760px){
  .lst-arrow{width:2.75rem;height:2.75rem}   /* 44 px tap area */
  .lst-prev{left:.6rem}.lst-next{right:.6rem}
  .lst-count{right:.75rem;bottom:.75rem}
}

/* the words and the facts */
.lst-body{max-width:1240px;margin:0 auto;padding:4.5rem 3.5vw 1rem;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:4.5rem;align-items:start}
.lst-words p{font-size:1.02rem;color:var(--ink-soft);line-height:1.85;margin-bottom:1.3rem;max-width:36rem}
.lst-words p:last-child{margin-bottom:0}
.lst-words .lst-lead{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.42;color:var(--ink);margin-bottom:1.8rem}
.lst-facts{background:var(--paper);border:1px solid var(--line);padding:1.6rem 2rem 2.1rem}
.lst-facts dl > div{display:grid;grid-template-columns:8.2rem 1fr;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.lst-facts dt{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);padding-top:.32rem}
.lst-facts dd{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.22rem;color:var(--ink);line-height:1.35;font-variant-numeric:lining-nums tabular-nums}
.lst-facts .btn{margin-top:1.7rem;width:100%;justify-content:center}
.lst-direct{margin-top:.9rem;font-size:.78rem;letter-spacing:.04em;color:var(--taupe);text-align:center}

/* the gallery: one wide, then pairs; stacked on a phone */
.lst-gallery{max-width:1240px;margin:0 auto;padding:4.5rem 3.5vw 1rem}
.lst-gallery h2{font-family:Jost,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;margin-bottom:1.4rem}
.lst-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.lst-grid .wide{grid-column:1/-1}
@media (min-width:761px){
  .lst-grid img{aspect-ratio:4/3;object-fit:cover}
  .lst-grid .wide img{aspect-ratio:3/2;object-position:50% 60%}
  .lst-grid .tall img{object-position:50% 58%}
}

/* the credential and the closing line */
.lst-sign{max-width:1240px;margin:0 auto;padding:3.5rem 3.5vw 5.5rem}
.lst-sign-inner{border-top:1px solid var(--ink);padding-top:1.6rem;max-width:44rem}
.lst-cred{font-size:.86rem;color:var(--ink-soft);line-height:1.8}
.lst-listed{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-light);margin-top:.5rem}
/* the link to the listing on SERHANT. (11 Oct, Ceci's ask): the site's text link, with a 44 px tap area */
.lst-serhant{margin:1rem 0 .6rem}
.lst-serhant a{position:relative}.lst-serhant a::after{content:"";position:absolute;inset:-12px -8px}
.lst-close{margin-top:2rem;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.35rem;color:var(--ink);line-height:1.45}

/* tablet */
@media (max-width:900px){
  .lst-body{grid-template-columns:1fr;gap:2.6rem}
  .lst-facts{max-width:36rem}
}

/* phone: photographs edge to edge, words on the 5vw gutter used across the site */
@media (max-width:760px){
  .lst-back{padding:6.6rem 5vw 0}
  .lst-head{padding:1.8rem 5vw 1.9rem}
  .lst-cover{padding:0}
  .lst-body{padding:2.8rem 5vw .5rem}
  .lst-facts{padding:1.2rem 1.3rem 1.6rem}
  .lst-facts dl > div{grid-template-columns:6.6rem 1fr;gap:.8rem}
  .lst-gallery{padding:3.2rem 0 .5rem}
  .lst-gallery h2{padding:0 5vw}
  .lst-grid{grid-template-columns:1fr;gap:.6rem}
  .lst-sign{padding:2.8rem 5vw 4rem}
}