/* villa-card-overflow.css — Phase 5g
 *
 * Constraint layer over the existing .villa-card styles in components.css.
 * Goal: keep every existing badge/tag/chip/pill on the card, but never
 * let them overflow the card boundary, wrap unpredictably, or misalign
 * card heights across the grid.
 *
 * Loaded on /properties/ (grid) only. Detail pages keep their full,
 * uncapped presentation.
 */

/* ============================================================ */
/* 1. TOP-LEFT TAGS (.villa-tags)                                */
/* ============================================================ */
/* Original layout wraps at card width, stacking badges into a
 * jumbled second row. Cap horizontally + let CSS hide any tag
 * past position 2. Then reveal a "+N" counter via a data attribute
 * set by JS. */

.villa-card .villa-tags {
  /* Never wrap. Constrain width so long tag strings can't push past card. */
  flex-wrap: nowrap;
  max-width: calc(100% - 2rem); /* respect card padding on both sides */
  overflow: hidden;
  align-items: center;
}

/* Hide any tag beyond the 3rd. Show tag 1, 2, and the +N counter (which
 * is itself the 3rd DOM node when JS injects it). If fewer than 3 tags,
 * :nth-child(n+4) never matches. */
.villa-card .villa-tags .tag:nth-child(n+3):not(.tag-plus) {
  display: none;
}

/* The "+N" pill \u2014 injected by JS when there are more than 2 real tags. */
.villa-card .villa-tags .tag-plus {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0.28rem 0.55rem;
  font-size: 0.68rem;
  cursor: default;
}

/* Truncate a single very long tag with ellipsis instead of clipping mid-word. */
.villa-card .villa-tags .tag {
  max-width: 11ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================ */
/* 2. VILLA NAME (.villa-title)                                  */
/* ============================================================ */
/* Titles like "Villa Aruna \u00b7 5BR Seaview Estate with Cinema & Spa,
 * Chaweng Noi" wrap to 3 lines on some cards and 1 on others, so the
 * grid rows misalign. Clamp to 2 lines, reserve the space. */

.villa-card .villa-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em; /* ~2 lines at line-height 1.3 */
}

/* ============================================================ */
/* 3. AMENITY CHIPS (.villa-chips)                               */
/* ============================================================ */
/* Same 4 chips on every card. Constrain to 1 line max with subtle
 * horizontal scroll on tiny screens (never seen on desktop). */

.villa-card .villa-chips {
  flex-wrap: nowrap;
  overflow: hidden;
  max-width: 100%;
  align-items: center;
}
.villa-card .villa-chips .chip {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Fade the right edge to hint at overflow when chips run past the card. */
.villa-card .villa-chips {
  position: relative;
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

/* ============================================================ */
/* 4. BEST-FOR PILL (.villa-bestfor)                             */
/* ============================================================ */
/* Currently free-floating below chips \u2014 make sure it doesn't wrap and
 * stays inside the card. */

.villa-card .villa-bestfor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted, #6f6a5f);
  background: rgba(185, 143, 79, 0.10);
  border: 1px solid rgba(185, 143, 79, 0.25);
  border-radius: 999px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: flex-start;
}

/* ============================================================ */
/* 5. CARD HEIGHT ALIGNMENT                                      */
/* ============================================================ */
/* With clamped titles + capped chips, cards align. Push the footer to
 * the bottom so the price always sits at the same y-position. */

.villa-card .villa-body {
  min-height: 168px; /* Empirically stable given clamps above. */
}

.villa-card .villa-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
}