/* CMS-rendered components. Reuses the site's design tokens so the look is unchanged. */

.cms-badge {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.cms-badge--for_sale { background: var(--color-accent, #b8860b); color: #fff; }
.cms-badge--spec,
.cms-badge--planned { background: #1e6f5c; color: #fff; }
.cms-badge--in_progress { background: #2b6cb0; color: #fff; }
.cms-badge--sold,
.cms-badge--reserved,
.cms-badge--rented { background: rgba(0, 0, 0, 0.08); color: var(--color-text, #2b2b2b); }
.cms-badge--completed { background: rgba(0, 0, 0, 0.05); color: var(--color-light, #6b6b6b); }

/* For sale card (homepage + sections) */
.cms-forsale-card {
  background: var(--color-background, #fff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 4px solid var(--color-accent, #b8860b);
  border-radius: var(--radius-xl, 16px);
  padding: var(--spacing-xl, 2rem);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
}

/* Announcement / upcoming project card */
.cms-announce-card {
  background: var(--color-background, #fff);
  border: 1px solid rgba(30, 111, 92, 0.25);
  border-left: 4px solid #1e6f5c;
  border-radius: var(--radius-xl, 16px);
  padding: var(--spacing-xl, 2rem);
}
.cms-section-announcement { border-top: 3px solid #1e6f5c; }

/* Anchor offset so #slug links land below the sticky header */
.cms-anchor {
  position: relative;
  display: block;
  height: 0;
  top: calc(-1 * var(--header-height, 72px));
  visibility: hidden;
  pointer-events: none;
}

/* metadata row (size / rooms / price) */
.cms-forsale-card .flex > div p,
section .flex > div p.font-semibold { margin: 0; }