/* ---------------------------------------------------------------------------
   Visual-editor element widgets, shared by the public site and the editor
   preview. These style the blocks the "Add element" palette inserts: map,
   button, columns, spacer, heading and video embed. Kept class-only and
   framework-free so they render identically inside and outside the editor.
   --------------------------------------------------------------------------- */
.sx-block .shell { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sx-block { padding: 40px 0; }

/* Map ------------------------------------------------------------------------ */
.sx-map { margin: 0; position: relative; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 34px -18px rgba(0,0,0,.45); }
.sx-map .sx-map-canvas { width: 100%; height: 360px; background: #223; }
.sx-map .leaflet-container { width: 100%; height: 100%; font: inherit; }
.sx-map__ph { display: grid; place-items: center; height: 360px; color: #8a969c;
  background: #1a2c27; font-size: .9rem; text-align: center; padding: 20px; }

/* Button --------------------------------------------------------------------- */
a.sx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px;
  border-radius: 10px; background: var(--sx-accent, #D4AF37); color: var(--sx-btn-text, #1a3025);
  font-weight: 700; text-decoration: none; font-size: .95rem; line-height: 1.2;
  transition: filter .12s ease; }
a.sx-btn:hover { filter: brightness(1.08); color: var(--sx-btn-text, #1a3025); }
a.sx-btn.sx-btn-ghost { background: transparent; color: var(--sx-accent, #D4AF37);
  border: 1px solid currentColor; }

/* Columns -------------------------------------------------------------------- */
.sx-cols { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.sx-cols.sx-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sx-col { min-width: 0; }
@media (max-width: 700px) { .sx-cols, .sx-cols.sx-cols-3 { grid-template-columns: 1fr; } }

/* Spacer --------------------------------------------------------------------- */
.sx-spacer { width: 100%; height: 40px; }

/* Heading / text element ----------------------------------------------------- */
.sx-heading { margin: 0 0 12px; }

/* Video embed (also used by the rich toolbar) -------------------------------- */
.sx-embed { position: relative; width: 100%; padding-top: 56.25%; margin: 0;
  border-radius: 12px; overflow: hidden; background: #000; }
.sx-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }