/**
 * Ghar Deal – World-class real estate design language
 * Trustworthy · Clean · Data-smart · Conversion-optimized
 * 12-col desktop, 4-col mobile · 8pt rhythm · Sparse accent
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* 8pt rhythm */
  --r1: 8px;
  --r2: 16px;
  --r3: 24px;
  --r4: 32px;
  --r5: 40px;
  --r6: 48px;
  --r8: 64px;
  --r10: 80px;
  --r12: 96px;
  --r16: 128px;

  /* Neutrals – calm, bank-like */
  --n0: #ffffff;
  --n50: #fafafa;
  --n100: #f4f4f5;
  --n200: #e4e4e7;
  --n300: #d4d4d8;
  --n400: #a1a1aa;
  --n500: #71717a;
  --n600: #52525b;
  --n700: #3f3f46;
  --n800: #27272a;
  --n900: #18181b;

  /* Single accent – used sparingly */
  --accent: #0d9488;
  --accent-hover: #0f766e;
  --accent-subtle: rgba(13, 148, 136, 0.08);
  --accent-muted: rgba(13, 148, 136, 0.15);

  /* Semantic */
  --bg: var(--n0);
  --bg-subtle: var(--n50);
  --bg-muted: var(--n100);
  --border: var(--n200);
  --border-strong: var(--n300);
  --text: var(--n900);
  --text-secondary: var(--n600);
  --text-muted: var(--n500);
  --surface: var(--n0);
  --overlay: rgba(24, 24, 27, 0.6);

  /* Typography – Display, Headings, Body */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --display: 3.5rem;
  --display-sm: 2.5rem;
  --heading-1: 2rem;
  --heading-2: 1.5rem;
  --heading-3: 1.25rem;
  --body: 1rem;
  --body-sm: 0.875rem;
  --caption: 0.8125rem;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-display: 1.1;
  --leading-heading: 1.25;
  --leading-body: 1.5;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* Radius – 14–18px cards */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-card: 16px;

  /* Shadows – soft, no hard borders */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur: 200ms;
  --dur-slow: 350ms;
}

/* Grid – 12 col desktop, 4 col mobile */
.g-grid {
  display: grid;
  gap: var(--r4);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--r3);
  padding-right: var(--r3);
}
@media (min-width: 768px) {
  .g-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--r4);
    padding-left: var(--r5);
    padding-right: var(--r5);
  }
}
.g-span-4 { grid-column: span 4; }
.g-span-6 { grid-column: span 6; }
.g-span-8 { grid-column: span 8; }
.g-span-12 { grid-column: span 12; }
@media (max-width: 767px) {
  .g-span-4, .g-span-6, .g-span-8, .g-span-12 { grid-column: span 4; }
}

/* Vertical rhythm – sections */
.g-section {
  padding-top: var(--r10);
  padding-bottom: var(--r10);
}
@media (min-width: 1024px) {
  .g-section { padding-top: var(--r12); padding-bottom: var(--r12); }
}
.g-section-title {
  font-size: var(--heading-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin-bottom: var(--r6);
  line-height: var(--leading-heading);
}
@media (min-width: 1024px) {
  .g-section-title { font-size: var(--heading-1); margin-bottom: var(--r8); }
}

/* Cards – premium, soft shadow */
.g-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.g-card:hover {
  box-shadow: var(--shadow-2);
}
.g-card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

/* Typography hierarchy */
.g-display {
  font-size: var(--display-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-display);
  color: var(--text);
}
@media (min-width: 1024px) {
  .g-display { font-size: var(--display); }
}
.g-heading-1 {
  font-size: var(--heading-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-heading);
  color: var(--text);
}
.g-heading-2 {
  font-size: var(--heading-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--text);
}
.g-body {
  font-size: var(--body);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--text-secondary);
}
.g-body-sm {
  font-size: var(--body-sm);
  color: var(--text-muted);
  line-height: var(--leading-body);
}
.g-caption {
  font-size: var(--caption);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Buttons – minimal, accent sparingly */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r1);
  padding: var(--r2) var(--r4);
  font-family: var(--font);
  font-size: var(--body-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.g-btn:active { transform: scale(0.98); }
.g-btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.g-btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-2);
}
.g-btn-secondary {
  background: var(--bg-muted);
  color: var(--text);
  border: 1px solid var(--border);
}
.g-btn-secondary:hover {
  background: var(--border);
}
.g-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.g-btn-ghost:hover { background: var(--bg-muted); }
.g-btn-lg { padding: var(--r3) var(--r5); font-size: var(--body); }

/* Skeleton loader */
.g-skeleton {
  background: linear-gradient(90deg, var(--n100) 25%, var(--n200) 50%, var(--n100) 75%);
  background-size: 200% 100%;
  animation: g-skeleton 1.2s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes g-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state */
.g-empty {
  text-align: center;
  padding: var(--r10) var(--r4);
}
.g-empty-icon {
  width: var(--r8);
  height: var(--r8);
  margin: 0 auto var(--r4);
  background: var(--bg-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--r4);
  color: var(--text-muted);
}
.g-empty-title {
  display: block;
  font-size: var(--heading-3);
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin-bottom: var(--r1);
}
.g-empty-text {
  display: block;
  font-size: var(--body-sm);
  color: var(--text-muted);
  max-width: 360px;
  margin: 0 auto;
}

/* Trust badge */
.g-trust {
  display: inline-flex;
  align-items: center;
  gap: var(--r1);
  font-size: var(--caption);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.g-trust-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* Animations – subtle */
.g-fade-in {
  animation: g-fade-in var(--dur-slow) var(--ease) forwards;
}
@keyframes g-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.g-scale-in {
  transition: transform var(--dur) var(--ease);
}
.g-scale-in:hover { transform: scale(1.01); }

/* Base – apply design tokens to body when .g-body */
.g-body {
  font-family: var(--font);
  font-size: var(--body);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
}

/* Mobile 4-col grid – explicit utility for grid children */
@media (max-width: 767px) {
  .g-grid-mobile-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}