/* ==========================================================================
   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.
   ========================================================================== */

/* The Divi title section above the grid lost its h1 to the shared hero and is
   now one row holding one empty column, which Divi still pads (70px). The
   Loopt form section after it is nothing but hidden inputs and scripts, and
   carries 25px of bottom padding. Together: a 95px white band between the
   hero and the Shell ground at every width. The first is hidden, not deleted,
   like the Divi hero on the home page; the second only loses its padding, so
   its scripts stay where they are. */
.et_pb_section.custom-page-title:has(> .et_pb_row > .et_pb_column_empty:only-child) { display: none; }
.et_pb_section.custom-page-title:has(> .et_pb_row > .et_pb_column_empty:only-child) + .et_pb_section.et_pb_fullwidth_section { padding-bottom: 0; }

.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; }
}