/* lotcheck.com: the renderings reel on the home page. A row you can scroll or swipe;
   one unit sits in the middle with its neighbours showing at the sides. A picture opens its unit. */
.reel-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin-bottom:24px}
.reel-hint{margin:0;font-size:18px;color:var(--stone)}
.reel-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.reel:not(.is-js) .reel-ctrl{display:none}
.reel-count{min-width:5.4em;margin-right:6px;font-size:16px;color:var(--stone);text-align:right;font-variant-numeric:tabular-nums}
.reel-ctrl .btn--quiet{min-width:48px;min-height:48px}

/* the row breaks out to the page edges so the neighbours have room to show */
.reel-stage{margin:0 calc(-1 * clamp(20px,5vw,72px))}
.reel-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:6px 22% 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reel-track::-webkit-scrollbar{display:none}
.reel-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;background:var(--concrete)}
.reel-slide::before{content:"";display:block;padding-top:62.5%}
.reel-slide a{position:absolute;top:0;right:0;bottom:0;left:0;display:block;color:var(--paper);text-decoration:none}
.reel-slide img{width:100%;height:100%;object-fit:cover}

/* title plate: the unit name, as on a drawing's title block; gold is the light line, never text */
.reel-plate{position:absolute;left:0;bottom:0;max-width:calc(100% - 32px);padding:12px 20px 14px;background:var(--graphite);border-top:2px solid var(--gold)}
.reel-plate b{display:block;font-weight:500;font-size:clamp(18px,2vw,23px);line-height:1.2}
.reel-plate span{display:block;margin-top:2px;font-size:clamp(14px,1.5vw,16px);font-style:italic;line-height:1.35;color:#CFCAC1}
.reel-slide a:hover .reel-plate b,.reel-slide a:focus-visible .reel-plate b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.reel-slide a:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--graphite),inset 0 0 0 6px var(--paper)}

@media (max-width:760px){
  .reel-track{padding:6px 9%;gap:10px}
  .reel-plate{padding:8px 14px 10px}
}
@media (max-width:640px){
  .reel-ctrl{width:100%;gap:8px}
  .reel-count{min-width:0;margin-right:auto;text-align:left}
  .reel-ctrl .btn--quiet{padding:0 12px}
}