/*
 * Shared base styles for every standalone public page. Loaded after the
 * Tailwind build so page-level <style> blocks only carry what's page-specific.
 * Static + versioned (not generated) so editing it is safe.
 */
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  color: #111;
  background: #fff;
}
h1, h2, h3 {
  font-family: "Fraunces", "Times New Roman", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}
/* Default page width; pages that need a different one redefine .container-main. */
.container-main { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
@media (min-width: 768px) { .container-main { width: min(1120px, calc(100% - 64px)); } }

/* Brand tokens + primary CTA gradient, used across every standalone page. */
:root {
  --pink: #e5348c;
  --pink-soft: #f472b6;
  --navy: #1e2a5a;
  --sky: #4db8e8;
}
.btn-grad {
  background: linear-gradient(135deg, var(--pink), var(--sky));
  background-size: 180% 180%;
  background-position: 0% 50%;
  transition: background-position .5s ease, transform .2s ease, box-shadow .3s ease;
  box-shadow: 0 14px 30px -12px rgba(229,52,140,.55);
}
.btn-grad:hover { background-position: 100% 50%; transform: translateY(-2px); }

/* Card hover used on the city / category / neighbourhood listings. */
.listing-card { transition: transform .25s ease, box-shadow .25s ease; }
.listing-card:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(0,0,0,.11); }
.listing-card img { transition: transform .5s ease; }
.listing-card:hover img { transform: scale(1.06); }