/* InvestIdealHome — listing card.
   Variants: .lcard--default · .lcard--large · .lcard--compact · .lcard--horizontal
   Hooks for other pages: .lcard[data-id] · .lcard__media · .lcard__pic · .lcard__title ·
   .lcard__link (stretched link) · .lcard__price · .lcard__specs · .lcard__btn[data-action]
   Dark sections: .section--dark .lcard is styled automatically. */

/* ---------- Card shell ---------- */
.lcard {
  --lc-pad: 0.875rem;
  --lc-muted: var(--stone);
  --lc-hair: var(--line);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

/* Stretched title link: covers the whole card. Buttons sit above it (z-index 2). */
.lcard__link { color: inherit; transition: color var(--dur) var(--ease-out); }
.lcard__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* Body is a non-positioned flex item; z-index keeps text above the absolutely
   positioned media in the large variant, and holds the link overlay in its context. */
.lcard__body { position: static; z-index: 1; display: flex; flex-direction: column; min-width: 0; }

.lcard__eyebrow { font-size: 0.6875rem; }

.lcard__title {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-variation-settings: 'opsz' 48;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Image area (shared) ---------- */
.lcard__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.lcard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 12%, transparent);
}
.lcard__pics { position: absolute; inset: 0; }
.lcard__pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.6s var(--ease-out), transform 1.2s var(--ease-out);
}
.lcard__pic.is-active { opacity: 1; }
.lcard:hover .lcard__pic { transform: scale(1.06); }

.lcard__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--stone-light);
}
.lcard__empty .icon { width: 2rem; height: 2rem; }

.lcard__shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 52%, transparent), transparent);
  pointer-events: none;
}

.lcard__badges {
  position: absolute;
  top: var(--lc-pad);
  left: var(--lc-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: calc(100% - 6.5rem);
  pointer-events: none;
}
.lcard__badges--inline { position: static; max-width: none; margin-bottom: 0.25rem; }

/* Glass round buttons (favorite + compare) */
.lcard__actions {
  position: absolute;
  top: var(--lc-pad);
  right: var(--lc-pad);
  z-index: 2;
  display: flex;
  gap: 0.4rem;
}
.lcard__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--glass);
  color: var(--white);
  border: 1px solid color-mix(in srgb, var(--white) 24%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  transition:
    background-color 0.5s var(--ease-out),
    color 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    transform 0.6s var(--ease-spring),
    opacity 0.5s var(--ease-out);
}
.lcard__btn .icon { width: 18px; height: 18px; }
.lcard__btn:hover { background: var(--glass-light); color: var(--ink); transform: scale(1.08); }
.lcard__btn:active { transform: scale(0.92); transition-duration: 0.15s; }
.lcard__btn:focus-visible { outline-offset: 3px; }

.lcard__fav[aria-pressed='true'] { background: var(--gold); border-color: transparent; color: var(--white); }
.lcard__fav[aria-pressed='true'] .icon { fill: currentColor; }
.lcard__fav[aria-pressed='true']:hover { background: var(--gold-bright); color: var(--ink); }

.lcard__cmp { opacity: 0; transform: translateY(-6px) scale(0.9); }
.lcard:hover .lcard__cmp,
.lcard:focus-within .lcard__cmp,
.lcard__cmp[aria-pressed='true'] { opacity: 1; transform: none; }
.lcard__cmp[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: none) {
  .lcard__cmp { opacity: 1; transform: none; }
}

/* Favorite burst: heart pops, ring expands, gold sparks radiate. */
.lcard__btn.is-pop .icon { animation: lcard-heart 0.7s var(--ease-spring); }
.lcard__btn.is-pop::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--gold-bright);
  pointer-events: none;
  animation: lcard-ring 0.9s var(--ease-out) forwards;
}
.lcard__btn.is-pop::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--gold-bright);
  pointer-events: none;
  box-shadow:
    0 -24px var(--gold-bright), 17px -17px var(--gold-bright), 24px 0 var(--gold-bright),
    17px 17px var(--gold-bright), 0 24px var(--gold-bright), -17px 17px var(--gold-bright),
    -24px 0 var(--gold-bright), -17px -17px var(--gold-bright);
  animation: lcard-burst 0.8s var(--ease-out) forwards;
}
@keyframes lcard-heart {
  0% { transform: scale(0.6); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes lcard-ring {
  from { transform: scale(0.7); opacity: 0.9; }
  to { transform: scale(2.1); opacity: 0; }
}
@keyframes lcard-burst {
  0% { transform: scale(0.3); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Gallery progress dashes (appear on hover, only for multi-photo listings) */
.lcard__dashes {
  position: absolute;
  left: var(--lc-pad);
  right: var(--lc-pad);
  bottom: var(--lc-pad);
  display: flex;
  gap: 5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none;
}
.lcard:hover .lcard__dashes { opacity: 1; transform: none; }
.lcard__dash {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--white) 35%, transparent);
}
.lcard__dash > span {
  display: block;
  height: 100%;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
}
.lcard__dash.is-done > span,
.lcard__dash.is-active > span { transform: scaleX(1); }

/* Sold: muted photo + corner ribbon (bottom-right) */
.lcard__ribbon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
  pointer-events: none;
}
.lcard__ribbon > span {
  position: absolute;
  left: -5px;
  top: 68px;
  width: 170px;
  height: 24px;
  line-height: 24px;
  padding-left: 0.22em;
  text-align: center;
  transform: rotate(-45deg);
  background: var(--status-sold);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--ink) 70%, transparent);
}
.lcard--sold .lcard__pic { filter: saturate(0.4); }
.lcard--sold .lcard__dashes { right: 6.5rem; }
.lcard--sold .lcard__price { color: var(--stone); }

/* ---------- Text blocks (shared) ---------- */
.lcard__priceRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.75rem;
  margin-top: 0.15rem;
}
.lcard__price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.lcard__sqm {
  font-size: var(--fs-xs);
  color: var(--lc-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lcard__specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
}
.lcard__spec {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0.9rem 0.15rem 0;
}
.lcard__spec + .lcard__spec { padding-left: 0.9rem; border-left: 1px solid var(--lc-hair); }
.lcard__spec .icon { width: 1.05em; height: 1.05em; color: var(--lc-muted); }

.lcard__more {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  transition: color var(--dur) var(--ease-out);
}
.lcard__more .icon { transition: transform var(--dur) var(--ease-out); }
.lcard:hover .lcard__more { color: var(--gold-deep); }
.lcard:hover .lcard__more .icon { transform: translateX(4px); }

/* Hover: title warms to gold */
.lcard:hover .lcard__title { color: var(--gold-deep); }

/* ---------- Default (vertical) ---------- */
.lcard--default .lcard__body { padding-top: 1.1rem; gap: 0.5rem; }
.lcard--default .lcard__specs {
  margin-top: 0.7rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--lc-hair);
}

/* ---------- Large (full-bleed showcase) ---------- */
.lcard--large {
  --lc-muted: color-mix(in srgb, var(--paper) 70%, transparent);
  --lc-hair: var(--line-light);
  min-height: 520px;
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  color: var(--paper);
  border-radius: var(--radius);
}
.lcard--large .lcard__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.lcard--large .lcard__shade {
  height: 100%;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 94%, transparent) 0%,
    color-mix(in srgb, var(--ink) 72%, transparent) 46%,
    color-mix(in srgb, var(--ink) 0%, transparent) 80%
  );
}
.lcard--large .lcard__body { max-width: 40rem; }
.lcard--large .lcard__eyebrow { color: var(--gold-bright); }
.lcard--large .lcard__title {
  margin-top: 0.6rem;
  color: var(--paper);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 330;
  line-height: 1.02;
  -webkit-line-clamp: 3;
}
.lcard--large:hover .lcard__title { color: var(--gold-bright); }
.lcard--large .lcard__priceRow { margin-top: 0.7rem; justify-content: flex-start; align-items: baseline; gap: 0.25rem 1rem; }
.lcard--large .lcard__price { color: var(--paper); font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.lcard--large .lcard__specs { color: color-mix(in srgb, var(--paper) 85%, transparent); }
.lcard--large .lcard__spec .icon { color: var(--gold-bright); }
.lcard--large .lcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--lc-hair);
}
.lcard--large .lcard__more {
  color: var(--paper);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out), color var(--dur) var(--ease-out);
}
.lcard--large:hover .lcard__more,
.lcard--large:focus-within .lcard__more { opacity: 1; transform: none; color: var(--gold-bright); }
.lcard--large .lcard__ribbon { top: 0; left: 0; right: auto; bottom: auto; }
.lcard--large .lcard__ribbon > span { left: -45px; top: 28px; }

/* ---------- Compact (map sidebar) ---------- */
.lcard--compact {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  border-radius: var(--radius);
  transition: background-color 0.6s var(--ease-out);
}
.lcard--compact:hover { background: var(--white); }
.lcard--compact .lcard__media { width: 112px; height: 112px; aspect-ratio: auto; border-radius: var(--radius-sm); }
.lcard--compact .lcard__actions { top: 6px; right: 6px; }
.lcard--compact .lcard__btn { width: 30px; height: 30px; }
.lcard--compact .lcard__btn .icon { width: 14px; height: 14px; }
.lcard--compact .lcard__badges { top: 6px; left: 6px; max-width: calc(100% - 3rem); }
.lcard--compact .lcard__badges .badge { font-size: 0.5625rem; padding: 0.35em 0.6em; }
.lcard--compact .lcard__body { gap: 0.3rem; }
.lcard--compact .lcard__title {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.lcard--compact .lcard__price { font-size: 1.1rem; }
.lcard--compact .lcard__specs { font-size: var(--fs-xs); }
.lcard--compact .lcard__spec { padding-right: 0.6rem; }
.lcard--compact .lcard__spec + .lcard__spec { padding-left: 0.6rem; }
.lcard--compact .lcard__spec .icon { width: 0.95em; height: 0.95em; }

/* ---------- Horizontal (list view) ---------- */
.lcard--horizontal {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 0.6s var(--ease-out);
}
.lcard--horizontal:hover { border-color: var(--line-strong); }
.lcard--horizontal .lcard__media {
  aspect-ratio: auto;
  min-height: 300px;
  border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px);
}
.lcard--horizontal .lcard__body {
  justify-content: flex-start;
  padding: clamp(1.25rem, 2.4vw, 2.5rem);
  gap: 0.6rem;
}
.lcard--horizontal .lcard__title {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem);
  font-weight: 360;
  line-height: 1.12;
}
.lcard__address {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  color: var(--lc-muted);
}
.lcard__address .icon { width: 1em; height: 1em; color: var(--gold); }
.lcard__excerpt {
  max-width: 60ch;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-soft);
}
.lcard--horizontal .lcard__specs {
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--lc-hair);
}
.lcard--horizontal .lcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: auto;
  padding-top: 1rem;
}
.lcard--horizontal .lcard__priceRow { margin-top: 0; }

/* ---------- Skeletons ---------- */
.lcard--skeleton { pointer-events: none; }
.lcard--skeleton .lcard__body { gap: 0.55rem; }
.sk-line { display: block; height: 0.8em; border-radius: var(--radius-pill); }
.sk-line--xs { width: 34%; height: 0.6rem; }
.sk-line--lg { width: 86%; height: 1.35rem; margin-top: 0.3rem; }
.sk-line--md { width: 40%; height: 1.3rem; margin-top: 0.8rem; }
.sk-line--sm { width: 64%; height: 0.75rem; margin-top: 0.5rem; }
.sk-line--full { width: 100%; height: 0.75rem; }
.lcard--default.lcard--skeleton .lcard__body { padding-top: 1.1rem; }
.lcard--large.lcard--skeleton .lcard__media { background: var(--ink-2); }
.lcard--large.lcard--skeleton .sk-line { background: color-mix(in srgb, var(--paper) 14%, transparent); }
.lcard--large.lcard--skeleton .skeleton::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 12%, transparent), transparent); }
.lcard--horizontal.lcard--skeleton .lcard__body { padding: clamp(1.25rem, 2.4vw, 2.5rem); }
.lcard--horizontal.lcard--skeleton .sk-line--md { margin-top: auto; }

/* ---------- Dark sections ---------- */
.section--dark .lcard {
  --lc-muted: color-mix(in srgb, var(--paper) 62%, transparent);
  --lc-hair: var(--line-light);
  color: var(--paper);
}
.section--dark .lcard__title { color: var(--paper); }
.section--dark .lcard__eyebrow { color: var(--gold-bright); }
.section--dark .lcard__specs,
.section--dark .lcard__excerpt { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.section--dark .lcard__more { color: var(--paper); }
.section--dark .lcard:hover .lcard__title { color: var(--gold-bright); }
.section--dark .lcard:hover .lcard__more { color: var(--gold-bright); }
.section--dark .lcard--sold .lcard__price { color: color-mix(in srgb, var(--paper) 55%, transparent); }
.section--dark .lcard--horizontal { background: var(--ink-2); border-color: var(--line-light); }
.section--dark .lcard--horizontal:hover { border-color: var(--line-light-strong); }
.section--dark .lcard--compact:hover { background: var(--ink-2); }
.section--dark .lcard--skeleton .lcard__media { background: var(--ink-2); }

/* ---------- Responsive ---------- */
@media (max-width: 699px) {
  .lcard--large {
    min-height: 0;
    aspect-ratio: 4 / 5;
    padding: 1.25rem;
  }
  .lcard--large .lcard__title { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem); }

  .lcard--horizontal { grid-template-columns: minmax(0, 1fr); }
  .lcard--horizontal .lcard__media {
    aspect-ratio: 4 / 3.2;
    min-height: 0;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  }
  .lcard--horizontal .lcard__body { padding: 1.25rem 1.25rem 1.5rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lcard,
  .lcard * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .lcard:hover .lcard__pic { transform: none; }
  .lcard--skeleton .skeleton::after { animation: none; }
}