/* ============================================================
   Property rail card - the compact listing card used in the
   related / similar rails on the property detail page and in
   the "Latest Properties" rail on the homepage.
   Markup: frontend/components/related-property-card.blade.php
   and related-explore-card.blade.php.

   Moved here from the detail page's inline <style> so both pages
   share one copy. Colours read the detail page's CSS variables
   where they exist and fall back to the same brand values
   elsewhere.
   ============================================================ */
.property-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.15));
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.property-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.2));
}

.property-card-image {
  width: 100%;
  height: 180px;
  background: var(--bg-light, #f9f9f9);
  overflow: hidden;
  position: relative;
}

.property-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.property-card:hover .property-card-image img {
  transform: scale(1.05);
}

.property-card-content {
  padding: 15px;
}

.property-card-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color, #e40f15);
  margin-bottom: 8px;
}

/* As with .price-main--on-request above: "Price on request" in the red and
   weight of a real figure scans as a price while the eye runs down the
   related-listings strip. Size stays — at 18px it was never too big. */
.property-card-price--on-request {
  font-weight: 600;
  color: var(--text-primary, #222);
}

.property-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #222);
  margin-bottom: 8px;
}

.property-card-details {
  font-size: 12px;
  color: var(--text-secondary, #666);
  line-height: 1.6;
}

/* Title and the location line are both single-line with an ellipsis. The
   card is 250px wide; a long society name or locality used to reflow it and
   leave the grid with cards of visibly different text heights. */
.property-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-secondary, #666);
}

.property-card-features i {
  margin-right: 3px;
  color: var(--primary-color, #e40f15);
}

.property-card-details div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.property-card-details div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-card-details i {
  flex: 0 0 auto;
  width: 13px;
  text-align: center;
  color: var(--primary-color, #e40f15);
}

/* Stands in for a listing with no photo. */
.property-card-noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  color: #b5b5b5;
  font-size: 12px;
}

.property-card-noimg i {
  font-size: 22px;
}

/* The card's primary action. Matches the "View Details" button on the
   listing cards so the two pages read as one product.

   Deliberately NOT positioned. Its ::after below is stretched over the whole
   card with inset:0, which resolves against the nearest positioned ancestor
   - so the moment this anchor gets position:relative, the overlay shrinks to
   the button itself and only the button stays clickable. .property-card is
   the positioned ancestor this relies on. */
.property-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 16px;
  border-radius: 22px;
  background: var(--primary-color, #e40f15);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.property-card-cta i {
  font-size: 11px;
}

.property-card-cta:hover,
.property-card-cta:focus-visible {
  background: #b70c11;
  color: #fff;
}

.property-card-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.property-card:hover .property-card-title {
  color: var(--primary-color, #e40f15);
}

.property-card-rate {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #666);
}

.property-card-badge,
.property-card-photos {
  position: absolute;
  z-index: 2;
  pointer-events: none; /* clicks fall through to the card's link */
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.property-card-badge {
  top: 10px;
  left: 10px;
  background: var(--primary-color, #e40f15);
  color: #fff;
}

.property-card-photos {
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
}

/* Ends a short rail with a way forward instead of blank page. */
.property-card--explore {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 280px;
  padding: 24px;
  text-align: center;
  text-decoration: none;
  background: #fdf3f3;
  border: 2px dashed #f3c4c6;
  box-shadow: none;
}

.property-card--explore:hover {
  border-color: var(--primary-color, #e40f15);
}

.property-card-explore-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary-color, #e40f15);
  font-size: 22px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
}

.property-card-explore-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #222);
}

.property-card-explore-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-color, #e40f15);
}