/* Elevation thumbnails on the Available Homes list (/inventory only).
   js/inventory.js puts a small picture of each home at the front of its row (thumbCell) and fades
   it in once the row scrolls into view and the picture has loaded (armThumbs: .in + .ok). Rows
   with no picture, or whose picture fails, keep the quiet ◆ tile. On phones the picture runs
   full width across the top of each card. The underlined address is at the end. */

.inv-table th.inv-thumb-h{width:1px;padding-right:0}
.inv-table td.inv-thumb{width:1px;padding-top:.55rem;padding-bottom:.55rem;padding-right:0}

.inv-thumb-box{position:relative;display:block;width:104px;height:70px;overflow:hidden;
  background:var(--sand);border:1px solid rgba(91,84,75,.18)}
.inv-thumb-box::before{content:'\25C6';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--gold);font-size:.95rem;opacity:.7}
.inv-thumb-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform .7s ease}
.inv-thumb.in.ok .inv-thumb-box img{opacity:1;transform:none}
.inv-thumb.err .inv-thumb-box img{display:none}
@media (hover:hover){
  .inv-row:hover .inv-thumb.in.ok .inv-thumb-box img{transform:scale(1.05)}
}

@media (min-width:701px) and (max-width:1399px){
  .inv-thumb-box{width:84px;height:56px}
  /* the picture column must not come out of the address: keep it to about two lines */
  .inv-table.has-thumbs td.inv-addr{min-width:12rem}
}
@media (min-width:701px) and (max-width:1000px){
  .inv-thumb-box{width:72px;height:48px}
  .inv-table.has-thumbs td.inv-addr{min-width:9.5rem}
}
/* tablets in portrait (768-834px): the table only just fitted before, so a smaller picture and
   slightly tighter cells; the address may wrap as it did */
@media (min-width:701px) and (max-width:900px){
  .inv-thumb-box{width:56px;height:38px}
  .inv-table.has-thumbs td.inv-addr{min-width:0}
  .inv-table.has-thumbs th,.inv-table.has-thumbs td{padding-left:.4rem;padding-right:.4rem}
  .inv-table.has-thumbs td.inv-thumb{padding-right:0}
}
@media (min-width:701px) and (max-width:760px){
  .inv-thumb-box{width:44px;height:30px}
  .inv-table.has-thumbs th,.inv-table.has-thumbs td{padding-left:.3rem;padding-right:.3rem}
  .inv-table.has-thumbs td.inv-thumb{padding-right:0}
}

/* Width. Above 1200px css/incentives.css keeps each address and its incentive line on one line,
   and the table needs ~1,140px for that — more than .inv's 1,150px box leaves (1,086px), so the
   Est. completion column was already clipped by ~55px before the pictures came. The picture adds
   ~120px. Wide screens get a wider box that fits all of it; between 1201 and 1399px the cells
   wrap as they do on smaller laptops (the same rules as incentives.css's 701-1200px block). */
@media (min-width:1201px){
  .inv{max-width:1340px}
}
@media (min-width:1201px) and (max-width:1399px){
  .inv-table.has-thumbs .inv-addr,.inv-table.has-thumbs .incA-rowtag{white-space:normal}
  .inv-table.has-thumbs th,.inv-table.has-thumbs td{padding-left:.75rem;padding-right:.75rem}
  .inv-table.has-thumbs th{font-size:.64rem;letter-spacing:.16em;white-space:normal}
  .inv-table.has-thumbs td{font-size:.9rem}
  .inv-table.has-thumbs td.inv-thumb{padding-right:0}
  /* and the Move-in ready emblem under the status pill wraps, as css/move-in-ready.css does it
     at 701-1200px, instead of holding the Status column ~170px wide */
  .inv-table.has-thumbs .inv-st .mir-badge{font-size:.55rem;letter-spacing:.1em;white-space:normal;max-width:6.4rem}
}

/* css/incentives.css hides the Package column here with th:nth-child(6). The picture column
   moves Package to the 7th header, so follow it — only once js/inventory.js has added that
   column (.has-thumbs); until then the edge function's pre-rendered rows still have nine cells. */
@media (min-width:701px) and (max-width:1050px){
  .inv-table.has-thumbs th:nth-child(6){display:table-cell}
  .inv-table.has-thumbs th:nth-child(7){display:none}
}

/* Phones: the row is a card on a small grid (css/style.css, "table -> cards on phones"). The
   picture takes the first grid row and bleeds to the card's edges (negative margins = the card's
   padding), so every other cell moves down one row and the chevron moves to the bottom corner. */
@media (max-width:700px){
  .inv-table tr.inv-row td.inv-thumb{grid-area:1/1/2/4;align-self:stretch;width:auto;
    padding:0;margin:-.8rem -2.3rem .5rem -.95rem}
  .inv-table tr.inv-row .inv-thumb-box{width:auto;height:auto;aspect-ratio:2/1;border:0;
    border-bottom:1px solid rgba(91,84,75,.14)}
  .inv-table tr.inv-row .inv-thumb-box::before{font-size:1.3rem}
  /* no picture: a slim labelled band instead of a big empty box, like the detail row's
     "Photo coming soon" */
  .inv-table tr.inv-row .inv-thumb.is-none .inv-thumb-box{aspect-ratio:auto;height:2.6rem}
  .inv-table tr.inv-row .inv-thumb.is-none .inv-thumb-box::before{content:'\25C6\00a0\00a0Photo coming soon';
    font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#9a9082;opacity:1}
  .inv-row td.inv-addr{grid-area:2/1/3/4}
  .inv-row td.inv-st{grid-area:3/1/4/3}
  .inv-row td.inv-price{grid-area:3/3/4/4}
  .inv-row td[data-l="Floor plan"]{grid-area:4/1/5/4}
  .inv-row td[data-l="Bed/Bath"]{grid-area:5/1/6/2}
  .inv-row td[data-l="Sq Ft"]{grid-area:5/2/6/3}
  .inv-row td[data-l="Est. completion"]{grid-area:5/3/6/4}
  .inv-chev{top:auto;bottom:.85rem}
}

/* Every row opens the home's own page, /homes/<slug> (no drop-down since 2026-10-07). The address
   is that link and is underlined so people can tell it opens (Juan). Also styles the edge
   function's pre-rendered rows, whose addresses are the same links. */
.inv-addr a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:rgba(46,42,37,.8);
  transition:color .2s ease,text-decoration-color .2s ease}
@media (hover:hover){
  .inv-row:hover .inv-addr a,.inv-addr a:hover{color:var(--gold-deep);text-decoration-color:currentColor}
}
.inv-addr a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .inv-thumb-box img{transition:none;transform:none}
  .inv-row:hover .inv-thumb.in.ok .inv-thumb-box img{transform:none}
}