/* ==========================================================================
   OUR LISTINGS  —  the full inventory grid

   The home page shows the same listings as a horizontal rail, because there
   it is one section competing with eight others. This is the page someone
   opens to see everything, so it is a grid: nothing behind an arrow, no
   scrolling sideways to find out how many there are.

   Card anatomy is deliberately the rail's, so the two read as the same
   object: photograph, status badge, address, area, spec, price. What differs
   is that the detail block sits BELOW the image here rather than over it. Over
   a photograph the text needs a scrim, and five of those stacked in a grid
   turns the page grey.
   ========================================================================== */

.yp-inv { padding: clamp(56px, 7vw, 96px) 0; }

.yp-inv-count {
  margin: 14px 0 0;
  padding: 0 !important;          /* Divi pads every block in this position */
  color: rgb(var(--yp-ink-rgb) / 0.62);
  font-size: 13px;
  letter-spacing: 0.1em !important;  /* Divi forces 1px onto <p> inline */
  text-transform: uppercase;
}

/* ---- the grid ------------------------------------------------------------ */

.yp-inv-grid {
  display: grid;
  /* auto-fit rather than fixed columns: five cards should not leave a hole in
     a rigid three-up, and the count will change as listings come and go. */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0 !important;          /* Divi indents every ul */
  list-style: none !important;    /* and gives it bullets */
}

.yp-inv-card { margin: 0; }

.yp-inv-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: inherit;
  background: var(--yp-white);
  border: 1px solid rgb(var(--yp-ink-rgb) / 0.09);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-inv-link:hover {
  border-color: rgb(var(--yp-ink-rgb) / 0.2);
  box-shadow: 0 18px 36px -22px rgb(var(--yp-ink-rgb) / 0.45);
  transform: translateY(-3px);
}

.yp-inv-link:focus-visible {
  outline: 2px solid var(--yp-ink);
  outline-offset: 3px;
}

/* ---- media --------------------------------------------------------------- */

.yp-inv-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgb(var(--yp-sand-rgb));
}

.yp-inv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-inv-link:hover .yp-inv-media img { transform: scale(1.035); }

.yp-inv-status {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: 3px;
  background: rgb(var(--yp-shell-rgb) / 0.94);
  color: var(--yp-ink);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- detail -------------------------------------------------------------- */

.yp-inv-detail {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 20px 20px;
}

.yp-inv-address {
  font-family: var(--yp-serif);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);
  line-height: 1.2;
  color: var(--yp-ink);
}

.yp-inv-area {
  margin-top: 6px;
  color: rgb(var(--yp-ink-rgb) / 0.6);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.yp-inv-spec {
  margin-top: 12px;
  color: rgb(var(--yp-ink-rgb) / 0.72);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* margin-top:auto pins the price to the bottom of the card whatever the
   address wraps to, so the prices line up across a row. */
.yp-inv-price {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--yp-serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
  letter-spacing: 0.12em;
  color: var(--yp-ink);
}

/* A rent figure that reads as a sale price is the one genuinely misleading
   thing this card could do, so the period stays on the price line. */
.yp-inv-unit {
  margin-left: 0.45em;
  font-size: 0.6em;
  letter-spacing: 0.08em;
  color: rgb(var(--yp-ink-rgb) / 0.66);
}

/* ---- narrow -------------------------------------------------------------- */

@media (max-width: 420px) {
  .yp-inv-grid { grid-template-columns: 1fr; }
  .yp-inv-detail { padding: 16px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .yp-inv-link,
  .yp-inv-media img { transition: none; }
  .yp-inv-link:hover { transform: none; }
  .yp-inv-link:hover .yp-inv-media img { transform: none; }
}