/* Creator Portal section — curated real-capture "Mini Portal" (2026-08-18).
   Replaces the frozen interactive mirror (mirror-embed.{css,js}) per Mena's
   redesign: one browser-framed REAL screenshot of the live portal, curated
   at capture time. Assets are produced by scripts/capture-portal-mini.mjs —
   never hand-edit them; refresh = re-run the script.

   Sizing: breaks out of .container-large (80rem) to min(1440px, 96vw) for
   desktop presence; 1440px is the retina limit of the 2x captures. */

.section_portal-demo .hvo-pd-stage {
  --pd-chrome-height: clamp(2.25rem, 2.6vw, 2.625rem);
  width: min(1440px, 96vw);
  margin-left: calc(50% - min(720px, 48vw));
  position: relative;
}

.hvo-pd-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 30px 80px -24px rgba(20, 16, 40, 0.3),
    0 0 0 1px rgba(120, 42, 250, 0.1);
}

html[data-theme="dark"] .hvo-pd-frame {
  background: #0a0a0a;
  box-shadow: 0 34px 90px -22px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hvo-pd-chrome {
  flex: 0 0 var(--pd-chrome-height);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0 1rem;
  background: #f0f0f2;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .hvo-pd-chrome {
  background: #17171a;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.hvo-pd-chrome-dots {
  display: flex;
  gap: 0.4375rem;
}

.hvo-pd-chrome-dots span {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
}

.hvo-pd-chrome-dots span:nth-child(1) { background: #ff5f57; }
.hvo-pd-chrome-dots span:nth-child(2) { background: #febc2e; }
.hvo-pd-chrome-dots span:nth-child(3) { background: #28c840; }

.hvo-pd-chrome-url {
  flex: 0 1 21.25rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #e2e2e6;
  color: #70707a;
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

html[data-theme="dark"] .hvo-pd-chrome-url {
  background: #232327;
  color: #9a9aa2;
}

.hvo-pd-chrome-spacer {
  width: 2.9375rem;
}

.hvo-pd-shot {
  display: none;
  width: 100%;
  height: auto;
}

/* The portal capture is deliberately real and non-recreated. This hit target
   sits only over the Preview control inside that capture and opens the site's
   real Nick DiGiovanni multi-language delivery player. */
.hvo-pd-preview-hit {
  position: absolute;
  z-index: 3;
  top: 63%;
  left: 50.4%;
  width: 6.7%;
  min-width: 5.5rem;
  height: max(2.75rem, 5.5%);
  padding: 0;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hvo-pd-preview-hit > img {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hvo-pd-preview-hit:focus-visible {
  outline: 3px solid var(--base--green, #d6fd70);
  outline-offset: 3px;
}

html[data-theme="dark"] .hvo-pd-shot--desktop.hvo-pd-shot-dark { display: block; }
html:not([data-theme="dark"]) .hvo-pd-shot--desktop.hvo-pd-shot-light { display: block; }

/* Below 1024px the desktop screenshot scales into squint territory while
   the rem-sized browser chrome stays big (Mena's catch) — phones AND
   tablets get the portal's REAL mobile UI instead. */
.hvo-pd-shot--mobile { display: none; }

@media (max-width: 1023px) {
  .section_portal-demo .hvo-pd-stage {
    width: min(440px, 92vw);
    margin-left: calc(50% - min(220px, 46vw));
  }
  .hvo-pd-shot--desktop { display: none !important; }
  html[data-theme="dark"] .hvo-pd-shot--mobile.hvo-pd-shot-dark { display: block; }
  html:not([data-theme="dark"]) .hvo-pd-shot--mobile.hvo-pd-shot-light { display: block; }

  .hvo-pd-preview-hit {
    top: 41.3%;
    left: 3.7%;
    width: 92.6%;
    min-width: 0;
    height: max(2.75rem, 6%);
    border-radius: 0.7rem;
  }
}