/* =========================================================================
   Vibespot - demo embeds (partner pages, and one on the homepage)

   One card per demo: an Example badge, a title, one line on what the map is
   filtered to, a link to ask for the embed, and a still of the live map.
   The still turns into the live map only when someone asks for it
   (js/embed-demo.js), so no map is framed on page load.

   The frame's size comes from CSS alone, never from what it holds, so
   swapping the still for the live map moves nothing on the page (see "the
   frame" below for the three sizes). Below 560px it holds the phone still
   and loads the phone camera (data-src-narrow): the same widths as the
   <picture> in the markup and the breakpoint in embed-demo.js.

   Uses the tokens in styles.css (--vs-*), so styles.css loads first.
   ========================================================================= */

.ed-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 28px); margin-top: clamp(28px, 4vw, 44px); }

.ed-demo {
  position: relative;
  border-radius: 24px;
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  box-shadow: var(--vs-shadow-sm);
  overflow: hidden;
  text-align: left;
}

.ed-demo__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px 28px;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.8vw, 28px);
}
.ed-demo__text { flex: 1 1 300px; min-width: 0; }

.ed-badge {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 11px; border-radius: 999px;
  background: #eef4ff; border: 1px solid rgba(0, 93, 242, 0.16);
  color: var(--vs-accent); font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; line-height: 1;
}
.ed-demo__title { margin: 10px 0 0; font-size: clamp(19px, 0.9vw + 15px, 22px); line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: var(--vs-ink); }
.ed-demo__desc { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--vs-muted); }

.ed-demo__cta {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 10px 16px; border-radius: 999px;
  background: var(--vs-soft); border: 1px solid var(--vs-border-strong);
  color: var(--vs-accent); font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none;
  transition: background .2s var(--vs-ease), border-color .2s var(--vs-ease), box-shadow .2s var(--vs-ease);
}
.ed-demo__cta:hover { background: #eef4ff; border-color: rgba(0, 93, 242, 0.32); box-shadow: var(--vs-shadow-xs); }
.ed-demo__cta svg { flex: 0 0 auto; transition: transform .25s var(--vs-ease); }
.ed-demo__cta:hover svg { transform: translateX(3px); }

/* ---------- the frame: a still, then the live map ----------
   The frame takes the proportions of the still it shows, so the still is
   shown whole, and the live map takes the same box:
     below 560px      the phone still   (360 x 500), 640px tall at most
     560px to 905px   the tablet still  (720 x 520), 440px tall at least
     906px and wider  the desktop still (1024 x 520), 440px tall at least
   The floor keeps room for the live map under its header. Where the floor
   or the ceiling wins, the still is cut on the right and at the bottom
   only, so its back button, filter and date stay in view.
   The ratio is a percentage padding, not aspect-ratio: with aspect-ratio,
   the floor on the height comes back through the ratio as a floor on the
   width, and on a 560px screen the frame grew wider than its card. */
.ed-frame {
  position: relative;
  max-height: 640px;
  background: #e9eef0;
  border-top: 1px solid var(--vs-border);
  overflow: hidden;
}
.ed-frame::before { content: ""; display: block; padding-top: 138.89%; } /* 500 / 360 */
@media (min-width: 560px) {
  .ed-frame { min-height: 440px; max-height: none; }
  .ed-frame::before { padding-top: 72.22%; } /* 520 / 720 */
}
@media (min-width: 906px) { .ed-frame::before { padding-top: 50.78%; } } /* 780 / 1536 */

.ed-frame__still { position: absolute; inset: 0; display: block; }
.ed-frame__still img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* The whole still is the button, so a tap anywhere on it loads the map. */
.ed-frame__load {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  /* below the map's own header in the still, over the map itself */
  padding: 120px 16px 0;
  margin: 0; border: 0; border-radius: 0;
  background: linear-gradient(180deg, rgba(32, 34, 61, 0) 35%, rgba(32, 34, 61, 0.14) 100%);
  font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ed-frame__load:focus-visible { outline: 3px solid var(--vs-accent); outline-offset: -4px; border-radius: 0; }
.ed-frame__load:focus-visible .ed-frame__pill,
.ed-frame__load:hover .ed-frame__pill {
  transform: translateY(-2px);
  background-image: var(--vs-accent-grad-hover);
  box-shadow: 0 10px 22px rgba(0, 93, 242, 0.30), 0 22px 44px rgba(0, 93, 242, 0.26);
}
.ed-frame__pill { pointer-events: none; }
.ed-frame__load[disabled] { cursor: progress; }

.ed-spin {
  display: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
  animation: edSpin .8s linear infinite;
}
.ed-frame.is-loading .ed-spin { display: inline-block; }
.ed-frame.is-loading .ed-frame__pill svg { display: none; }
@keyframes edSpin { to { transform: rotate(360deg); } }

/* The live map waits, invisible, until it has loaded, then takes the
   still's place; js/embed-demo.js removes the button at that point. */
.ed-frame__map {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%; border: 0;
  opacity: 0; transition: opacity .35s var(--vs-ease);
}
.ed-frame.is-live .ed-frame__map { opacity: 1; }

/* =========================================================================
   "Build the map you need": what an embed can be filtered by
   (partner pages, directly under their demos)
   ========================================================================= */
.ed-build {
  margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(24px, 4vw, 40px);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f6ff 100%);
  border: 1px solid #e4e6f0;
  box-shadow: var(--vs-shadow-sm);
  text-align: left;
}
.ed-build__title { margin: 0; font-size: clamp(22px, 1.4vw + 16px, 28px); line-height: 1.2; font-weight: 900; letter-spacing: -0.02em; color: var(--vs-ink); }
.ed-build__intro { margin: 10px 0 0; font-size: var(--fs-lead); line-height: 1.6; font-weight: 500; color: var(--vs-text-2); }
.ed-build__list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ed-build__list li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 4px 14px;
  padding: 12px 16px; border-radius: 16px;
  background: var(--vs-surface); border: 1px solid var(--vs-border);
  font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--vs-muted);
}
.ed-build__icon {
  grid-row: span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; background: #eef4ff; font-size: 20px; line-height: 1;
}
.ed-build__list b { color: var(--vs-ink); font-weight: 800; }
@media (min-width: 640px) {
  .ed-build__list li { grid-template-columns: 40px 130px minmax(0, 1fr); }
  .ed-build__icon { grid-row: auto; }
}
.ed-build__close { margin: 20px 0 0; font-size: 16.5px; line-height: 1.6; font-weight: 600; color: var(--vs-text); }
.ed-build__close a { color: var(--vs-accent); font-weight: 800; text-decoration: none; }
.ed-build__close a:hover { text-decoration: underline; }