/* InvestIdealHome — base: reset, typography, layout utilities, buttons, forms, chips, badges. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
::selection { background: var(--gold); color: var(--white); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 350;
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 96;
}
h1 em, h2 em, h3 em, .serif em, [class^='display'] em { font-style: italic; font-weight: 300; color: var(--gold); }
.section--dark h1 em, .section--dark h2 em, .section--dark h3 em { color: var(--gold-bright); }

.display-hero { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 300; line-height: 0.94; letter-spacing: -0.035em; }
.display-xl   { font-family: var(--font-display); font-size: var(--fs-3xl);  font-weight: 300; line-height: var(--lh-tight); letter-spacing: -0.03em; }
.display-lg   { font-family: var(--font-display); font-size: var(--fs-2xl);  font-weight: 330; line-height: 1.06; letter-spacing: -0.025em; }
.display-md   { font-family: var(--font-display); font-size: var(--fs-xl);   font-weight: 360; line-height: var(--lh-snug); letter-spacing: -0.015em; }
.title-sm     { font-family: var(--font-display); font-size: var(--fs-lg);   font-weight: 400; line-height: 1.25; }
.serif { font-family: var(--font-display); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone);
}
.eyebrow::before { content: ''; width: 2.25em; height: 1px; background: currentColor; opacity: 0.7; }
.eyebrow--plain::before { display: none; }
.section--dark .eyebrow { color: var(--gold-bright); }

.lead { font-size: var(--fs-md); line-height: 1.7; color: var(--stone); max-width: 62ch; }
.section--dark .lead { color: rgba(245, 241, 234, 0.72); }
.muted { color: var(--stone); }
.section--dark .muted { color: rgba(245, 241, 234, 0.6); }
.prose p + p { margin-top: 1.1em; }
.prose { max-width: 68ch; color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.8; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.section { padding-block: var(--section-y); position: relative; }
.section--dark { background: var(--ink); color: var(--paper); }
.section--alt { background: var(--paper-2); }

.grid { display: grid; gap: clamp(1rem, 0.5rem + 1.6vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.split { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-end; justify-content: space-between; }
.divider { height: 1px; background: var(--line); border: 0; }
.section--dark .divider { background: var(--line-light); }

/* ---------- Icons ---------- */
.icon { flex-shrink: 0; width: 1.25em; height: 1.25em; vertical-align: middle; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.8em 1.6em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover-bg, var(--gold));
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--btn-hover-fg, var(--white)); border-color: var(--btn-hover-border, var(--btn-border)); }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }
.btn .icon { width: 1.15em; height: 1.15em; transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }

.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-hover-bg: var(--gold); }
.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--white); --btn-hover-bg: var(--ink); }
.btn--ghost { --btn-border: var(--line-strong); --btn-fg: var(--ink); --btn-hover-bg: var(--ink); --btn-hover-fg: var(--paper); --btn-hover-border: var(--ink); }
.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-hover-bg: var(--gold); }
.btn--outline-light { --btn-border: var(--line-light-strong); --btn-fg: var(--paper); --btn-hover-bg: var(--paper); --btn-hover-fg: var(--ink); --btn-hover-border: var(--paper); }
.btn--link { min-height: 0; padding: 0; border-radius: 0; --btn-fg: var(--ink); }
.btn--link::after { display: none; }
.btn--link:hover { color: var(--gold); }
.btn--danger { --btn-bg: transparent; --btn-border: rgba(168, 64, 47, 0.4); --btn-fg: var(--danger); --btn-hover-bg: var(--danger); }
.btn--sm { min-height: 38px; padding: 0.55em 1.1em; font-size: var(--fs-xs); }
.btn--lg { min-height: 58px; padding: 1em 2.1em; font-size: var(--fs-base); }
.btn--icon { width: 46px; min-height: 46px; height: 46px; padding: 0; }
.btn--icon.btn--sm { width: 36px; height: 36px; min-height: 36px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  padding-bottom: 0.3em;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast);
}
.link-arrow:hover { background-size: 0% 1px; background-position: right bottom; color: var(--gold); }
.link-arrow .icon { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.field__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }
.field__hint { font-size: var(--fs-xs); color: var(--stone); }
.field__error { font-size: var(--fs-xs); color: var(--danger); min-height: 0; }
.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: var(--danger); }

.input, .textarea, .select {
  width: 100%;
  min-height: 50px;
  padding: 0.8em 1em;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--stone-light); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--stone); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c675e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  cursor: pointer;
}
.input--dark, .section--dark .input, .section--dark .textarea, .section--dark .select {
  background-color: rgba(255, 253, 249, 0.04);
  border-color: var(--line-light-strong);
  color: var(--paper);
}
.input--dark::placeholder, .section--dark .input::placeholder, .section--dark .textarea::placeholder { color: rgba(245, 241, 234, 0.4); }
.checkbox { display: inline-flex; align-items: center; gap: 0.6em; cursor: pointer; font-size: var(--fs-sm); }
.checkbox input { width: 18px; height: 18px; accent-color: var(--gold); }

/* ---------- Chips & badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 40px;
  padding: 0.5em 1.1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  background: transparent;
  color: var(--ink);
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); }
.chip.is-active, .chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.section--dark .chip { color: var(--paper); border-color: var(--line-light-strong); }
.section--dark .chip.is-active { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.38em 0.8em;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--paper-2);
  color: var(--ink);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: none; }
.badge--for_sale, .badge--under_offer, .badge--sold { background: var(--white); }
.badge--for_sale::before, .badge--under_offer::before, .badge--sold::before { display: block; }
.badge--for_sale { color: var(--status-for_sale); }
.badge--under_offer { color: var(--status-under_offer); }
.badge--sold { color: var(--status-sold); }
.badge--featured { background: var(--gold); color: var(--white); }
.badge--glass { background: var(--glass); color: var(--white); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- Loading ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 253, 249, 0.55), transparent);
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }

/* ---------- Toasts (used by /js/ui.js) ---------- */
.toast-stack { position: fixed; z-index: var(--z-toast); bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.5rem; width: min(92vw, 420px); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.95rem 1.2rem; border-radius: var(--radius);
  background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm); pointer-events: auto;
  animation: toast-in var(--dur) var(--ease-out);
}
.toast--success .icon { color: var(--gold-bright); }
.toast--error { background: var(--danger); }
.toast.is-leaving { animation: toast-out var(--dur-fast) ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------- Misc ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.is-locked { overflow: hidden; }