/* ==========================================================================
   THE TWO LIVE BOXES IN A PRODUCT HERO

   Replaces the static screenshot with the product running twice, opened on a
   different screen in each box. Same monitor as the home page wall, only
   larger, because here there are two of them rather than six.
   ========================================================================== */

.pdemo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 46px;
  margin-bottom: 20px;
}

.pdemo__box {
  margin: 0;
  min-width: 0;
}

.pdemo__frame {
  position: relative;
  border-radius: 14px;
  /* Same light chrome as the home page wall, so a product page and the wall
     read as the same object at two sizes. */
  background: #efefef;
}

/* browser chrome */
.pdemo__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 8px;
}
.pdemo__bar i {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #4a5561;
}
.pdemo__bar i:nth-child(1) { background: #ec6a5e; }
.pdemo__bar i:nth-child(2) { background: #f4bf4f; }
.pdemo__bar i:nth-child(3) { background: #61c554; }
.pdemo__bar span {
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #8c98a6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdemo__screen {
  position: relative;
  /* The stage inside is a fixed 1380 x 840 desktop canvas, so the window keeps
     that ratio and the scale factor is the only thing that changes. */
  aspect-ratio: 1380 / 840;
  margin: 0 5px 5px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  /* The product inside is taller than the window, so without this the last
     row is sliced through the middle. Fading it out says there is more below
     instead. A mask rather than a white overlay, because not every demo sits
     on white. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), transparent);
}
.pdemo__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1380px;
  height: 840px;
  transform: scale(var(--pk, 0.34));
  transform-origin: top left;
  /* Clickable. A hero that answers nothing reads as a screenshot, which is
     the thing this replaced. What the box will not do is change screen:
     each one is pinned to the part of the product the caption names, and
     the demo's own script refuses its sidebar while it is pinned. */
}
.pdemo__stage .clk-demo-wrap,
.pdemo__stage .clk-demo-device-screen {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
}
.pdemo__stage .kore-demo__pane { position: absolute; inset: 0; display: block; }

/* The two ported demos run in their own document instead, because neither can
   be mounted twice in one. The iframe is the stage: same fixed canvas, same
   scale, no chrome of its own. */
.pdemo__stage--frame {
  display: block;
  border: 0;
  background: #fff;
}

/* the floating pill, as on the home page wall */
.pdemo__badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 22px);
  padding: 7px 13px 7px 10px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 28px -14px rgba(15, 32, 51, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  animation: pdemoFloat 5s ease-in-out infinite;
}
.pdemo__badge svg { flex: none; color: var(--accent, var(--blue)); }
.pdemo__badge--tl { left: -12px; top: 40px; }
.pdemo__badge--br { right: -12px; bottom: 26px; animation-delay: -2.5s; }

@keyframes pdemoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .pdemo__badge { animation: none; }
}

.pdemo__cap {
  margin: 22px 2px 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Two boxes side by side only while each is wide enough to read. Below this
   the canvas inside gets scaled past the point where the product is legible:
   at 1024px it was landing at a third of size, which made an iPad Pro worse
   than a phone. One full-width box beats two unreadable ones. */
@media (max-width: 1200px) {
  .pdemo {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}

/* Below this the products draw their own phone layout, so the box stops being
   a shrunken desktop and becomes a real window at real size.

   A tablet still gets two of them, side by side: one phone window per column
   reads as a pair of phones, where one centred in a full-width card leaves a
   lot of empty card beside it. */
@media (max-width: 900px) {
  .pdemo { gap: 18px; margin-top: 30px; }
  .pdemo__screen { aspect-ratio: 3 / 4; }
  .pdemo__stage { width: 100%; height: 100%; transform: none; }
  /* Onto the browser chrome, whose right half is empty. In the window it was
     landing on the product: at 314px across the pill is half the width. */
  .pdemo__badge--tl,
  .pdemo__badge--br {
    top: 6px;
    bottom: auto;
    left: auto;
    right: -8px;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .pdemo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* One window, and no wider than a phone. Left to fill the container it hit
   619px across at 700px wide, and a 3/4 ratio turned that into an 825px slab:
   six of them on the home wall came to five thousand pixels of scrolling. */
@media (max-width: 760px) {
  .pdemo { grid-template-columns: minmax(0, 1fr); }
  .pdemo__box { width: min(100%, 420px); margin-inline: auto; }
}

/* A pointer resting on a box must not trap the page. The inner scroll
   regions are left alone; product-demo.js hands their wheel events back to
   the window instead. */
.pdemo__screen { overscroll-behavior: contain; }

/* On the narrowest phones the pill on the chrome bar reaches back far enough
   to sit on the address. The address is decoration: the caption under the box
   already names what this is, so it goes and the three dots stay. */
@media (max-width: 380px) {
  .pdemo__bar span {
    display: none;
  }
}