/**
 * Webgentic - Hero Demo, desktop mode
 *
 * The same four examples as hero-demo.css, in a browser window instead of a
 * phone. Nothing here is a second copy of the examples: the markup is shared
 * and every rule in this file hangs off .hero-demo--desktop, so switching
 * modes is one class on the root.
 *
 * Sections, in order:
 *   1. The Phone / Desktop switch
 *   2. The browser window
 *   3. The chat, docked to the right
 *   4. Each example, laid out wide (sale, landing, seo, form)
 */

/* ================================
   1. THE PHONE / DESKTOP SWITCH
   Sits above the mockup, in the same neutrals as the dots below it
   ================================ */

/* The mockup used to sit high in its column and overhang the top. Centring
   it gives the switch above and the dots below clear space either side */
.hero-demo {
  top: 50%;
}

.hero-visual {
  margin-top: 78px;
  margin-bottom: 88px;
}

.hero-demo-nav {
  bottom: -80px;
}

/* The WordPress file carries a wide transparent margin of its own: its
   artwork fills only 83% of the file's width, where Drupal's fills all of
   it. Scaling the artwork inside its box cancels that out, so all four read
   the same size without any of the boxes changing size or position. */
.floating-logo--wordpress img {
  transform: scale(1.2);
}

/* The platform logos keep their places in both modes and slide between them
   when the switch is used, so the two views read as one thing rearranging */
.floating-logo {
  transition:
    top 550ms var(--ease-in-out),
    bottom 550ms var(--ease-in-out),
    left 550ms var(--ease-in-out),
    right 550ms var(--ease-in-out),
    width 550ms var(--ease-in-out),
    transform 550ms var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  .floating-logo {
    transition: none;
  }
}

.hero-demo-modes {
  position: absolute;
  left: 50%;
  top: -70px;
  transform: translateX(-50%);
  z-index: 12;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(27, 27, 27, 0.12);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.6);
}

.hero-demo-mode {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  min-height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  transition:
    background-color 200ms var(--ease-in-out),
    color 200ms var(--ease-in-out);
}

.hero-demo-mode:hover {
  color: var(--color-text-body);
}

.hero-demo-mode.is-active {
  background: var(--color-text-body);
  color: #fff;
}

.hero-demo-mode:focus-visible {
  outline: 2px solid var(--color-text-body);
  outline-offset: 2px;
}

/* A browser window shrunk to phone width is unreadable, so below this the
   mockup stays on the phone and the switch is not offered */
@media (max-width: 768px) {
  .hero-visual {
    margin-top: 0;
    margin-bottom: 70px;
  }

  .hero-demo-modes {
    display: none;
  }

  .hero-demo-nav {
    bottom: -62px;
  }
}

/* ================================
   2. THE BROWSER WINDOW
   Same screen, different frame: the phone furniture is swapped for browser
   chrome, and the whole mockup is re-proportioned from its master font-size
   ================================ */

/* The window is wider and shorter than the phone, so the column changes
   shape around it: the switch and the dots come inside the column, and the
   bands they leave at the top and bottom are where the logos sit.
   Kept close to the phone's overall height so switching does not jump the
   page about. */
.hero-visual:has(.hero-demo--desktop) {
  container-type: inline-size;
  height: 560px;
  margin-top: 40px;
  margin-bottom: 50px;
}

.hero-visual:has(.hero-demo--desktop) .hero-demo-modes {
  top: 30px;
}

.hero-visual:has(.hero-demo--desktop) .hero-demo-nav {
  bottom: 10px;
}

/* The window is sized from the width of its column rather than a fixed
   number, so it fills the space it is given at every screen size */
.hero-visual:has(.hero-demo--desktop) .hero-demo--desktop {
  font-size: clamp(6px, 1.52cqw, 9.8px);
}

/* Above and below the window, at its four corners.
   The gap is measured off the WINDOW, not off the composition behind it:
   they are given the same font-size the window is sized from, so 21em is
   half its height and the clearance holds at every screen size. The
   composition behind changes shape at the breakpoints and cannot be used
   as the reference. */
.hero-visual:has(.hero-demo--desktop) .floating-logo {
  width: min(118px, 19%);
  font-size: clamp(6px, 1.52cqw, 9.8px);
  z-index: 11;
  /* The idle drift would carry them into the frame in these tighter bands */
  animation: none;
}

/* Each keeps the edge it was anchored to on the phone, so switching modes
   slides them rather than jumping them */
.hero-visual:has(.hero-demo--desktop) .floating-logo--wordpress,
.hero-visual:has(.hero-demo--desktop) .floating-logo--drupal {
  top: 50%;
  transform: translateY(-24em) translateY(-100%);
}

.hero-visual:has(.hero-demo--desktop) .floating-logo--magento,
.hero-visual:has(.hero-demo--desktop) .floating-logo--shopify {
  bottom: 50%;
  transform: translateY(24em) translateY(100%);
}

/* Lined up with the window's own edges rather than the column's, so they
   stay at its corners however wide the column around it happens to be */
.hero-visual:has(.hero-demo--desktop) .floating-logo--wordpress,
.hero-visual:has(.hero-demo--desktop) .floating-logo--magento {
  left: calc(50% - 32em);
}

.hero-visual:has(.hero-demo--desktop) .floating-logo--drupal,
.hero-visual:has(.hero-demo--desktop) .floating-logo--shopify {
  right: calc(50% - 32em);
}

/* Where the hero stacks into one column the composition is shallower, so
   the window and the logos both come down a size to keep their clearance */
@media (max-width: 1024px) {
  .hero-visual:has(.hero-demo--desktop) .hero-demo--desktop {
    font-size: clamp(6px, 1.52cqw, 7.2px);
  }

  .hero-visual:has(.hero-demo--desktop) .floating-logo {
    width: min(88px, 12%);
    font-size: clamp(6px, 1.52cqw, 7.2px);
  }
}

.hero-demo--desktop {
  top: 50%;
  width: 64em;
  height: 42em;
  font-size: 8.4px;
}

.hero-demo--desktop .wg-phone {
  border-width: 0.7em;
  border-radius: 1.5em;
}

.hero-demo--desktop .wg-screen,
.hero-demo--desktop .wg-site {
  border-radius: 0.9em;
}

/* Phone furniture */
.hero-demo--desktop .wg-notch,
.hero-demo--desktop .wg-status,
.hero-demo--desktop .wg-homebar,
.hero-demo--desktop .wg-gesture {
  display: none;
}

.wg-chrome,
.wg-cursor {
  display: none;
}

.hero-demo--desktop .wg-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.4em;
  height: 3.6em;
  padding: 0 1.4em;
  background: #e7e4df;
  border-bottom: 0.1em solid rgba(27, 27, 27, 0.14);
}

.wg-chrome__dots {
  display: flex;
  gap: 0.55em;
  flex: none;
}

.wg-chrome__dots span {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: rgba(27, 27, 27, 0.22);
}

.wg-chrome__bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 2.2em;
  padding: 0 1em;
  border-radius: var(--radius-full);
  background: #f7f5f2;
  font-size: 1.05em;
  color: var(--color-text-secondary);
}

/* A padlock, drawn rather than an icon font, so it scales with the mockup */
.wg-chrome__lock {
  position: relative;
  flex: none;
  width: 0.85em;
  height: 0.7em;
  margin-top: 0.25em;
  border-radius: 0.15em;
  background: var(--color-text-muted);
}

.wg-chrome__lock::before {
  content: '';
  position: absolute;
  left: 0.16em;
  bottom: 0.6em;
  width: 0.53em;
  height: 0.45em;
  border: 0.14em solid var(--color-text-muted);
  border-bottom: 0;
  border-radius: 0.3em 0.3em 0 0;
}

.wg-chrome__url {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wg-chrome__path {
  color: var(--color-text-body);
  font-weight: var(--weight-semibold);
}

/* Each example is somewhere different on the same site */
.hero-demo[data-example='sale'] .wg-chrome__path::after,
.hero-demo[data-example='landing'] .wg-chrome__path::after { content: '/'; }
.hero-demo[data-example='seo'] .wg-chrome__path::after { content: '/mugs'; }
.hero-demo[data-example='form'] .wg-chrome__path::after { content: '/custom-orders'; }

/* The landing page example ends up somewhere that did not exist before */
.hero-demo[data-example='landing'].is-edited .wg-chrome__path::after {
  content: '/pottery-classes';
}

/* The page starts below the chrome rather than below a status bar */
.hero-demo--desktop .wg-site {
  padding-top: 3.6em;
}

/* The title card covers the whole window, chrome included */
.hero-demo--desktop .wg-cover {
  z-index: 44;
  border-radius: 0.9em;
}

.hero-demo--desktop .wg-cover__headline {
  font-size: 4em;
}

.hero-demo--desktop .wg-cover__wordmark img {
  width: 14em;
}

/* A desktop site shows its menu; the hamburger is for the phone */
.wg-site__links {
  display: none;
}

.hero-demo--desktop .wg-site__links {
  display: flex;
  gap: 1.8em;
  font-size: 1.15em;
  color: var(--color-text-secondary);
}

.hero-demo--desktop .wg-site__menu {
  display: none;
}

.hero-demo--desktop .wg-site__nav {
  padding: 1.2em 2.4em;
}

/* The mockup keeps its proportions on narrower columns */
/* Only reached if the browser cannot size the window from its column */
@media (max-width: 1200px) {
  .hero-demo--desktop {
    font-size: 7.6px;
  }
}

@media (max-width: 1024px) {
  .hero-demo--desktop {
    font-size: 6.8px;
  }
}

/* ================================
   3. THE CHAT, DOCKED TO THE RIGHT
   On the phone the chat grows up over the page. Here it comes in from the
   right edge and the page snaps in beside it, so the page stays readable and
   the change can be watched landing while the conversation is still open.
   ================================ */

/* At rest Webgentic is a lit strip down the right edge, not along the bottom */
.hero-demo--desktop .wg-halo {
  left: auto;
  right: 0;
  top: 3.6em;
  bottom: 0;
  width: 0.3em;
  height: auto;
  box-shadow:
    0 0 1.4em 0.15em rgba(160, 225, 247, 0.65),
    -0.3em 0 2.2em rgba(160, 225, 247, 0.35);
}

/* The pointer travels to that strip and clicks it */
.hero-demo--desktop .wg-cursor {
  display: block;
  position: absolute;
  right: 1.4em;
  top: 46%;
  z-index: 36;
  width: 1.7em;
  height: 2.1em;
  color: var(--color-text-body);
  opacity: 0;
}

.hero-demo--desktop .wg-cursor svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0.2em 0.4em rgba(0, 0, 0, 0.3));
}

.hero-demo--desktop.is-tapped .wg-cursor {
  animation: wg-point 1100ms var(--ease-in-out) forwards;
}

@keyframes wg-point {
  0%   { opacity: 0; transform: translate(-9em, 4em); }
  22%  { opacity: 1; transform: translate(-5em, 2.2em); }
  58%  { opacity: 1; transform: translate(0, 0) scale(1); }
  68%  { opacity: 1; transform: translate(0, 0) scale(0.82); }
  80%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

/* The panel comes in from the right, below the chrome, and is a fixed width
   so the conversation reads exactly as it does on the phone */
.hero-demo--desktop .wg-sheet {
  left: auto;
  right: -1px;
  top: 3.6em;
  bottom: -1px;
  width: 0;
  height: auto;
  border-radius: 0;
  transition:
    width 800ms var(--ease-in-out),
    opacity 500ms var(--ease-in-out);
}

.hero-demo--desktop .wg-sheet.is-open {
  width: 24em;
  height: auto;
}

/* The page is not covered, so it keeps its own edge and its light chrome */
.hero-demo--desktop:not(.is-light) .wg-site {
  box-shadow: none;
}

.hero-demo--desktop .wg-site {
  transition:
    transform 1.1s var(--ease-in-out),
    right 800ms var(--ease-in-out);
}

/* The page snaps in beside the panel rather than disappearing behind it */
.hero-demo--desktop.is-chat .wg-site {
  right: 24em;
}

/* No notch to clear, so the conversation starts nearer the top */
.hero-demo--desktop .wg-messages {
  padding: 1.8em 1.4em 0.6em;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em);
}

.hero-demo--desktop .wg-barwrap {
  height: 6.2em;
  padding: 0 0.9em 1.4em;
}

/* The confirmation lands where a desktop notification would */
.hero-demo--desktop .wg-pill {
  left: auto;
  right: 2em;
  bottom: 2em;
  transform: translate(0, 2.2em);
}

.hero-demo--desktop .wg-pill.is-in {
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-demo--desktop .wg-sheet,
  .hero-demo--desktop .wg-site {
    transition: none;
  }

  .hero-demo--desktop.is-tapped .wg-cursor {
    animation: none;
    opacity: 1;
  }
}

/* ================================
   4a. EXAMPLE: sale, laid out wide
   ================================ */

.hero-demo--desktop .wg-site--sale .wg-site__hero {
  padding: 1.6em 2.4em 1em;
}

.hero-demo--desktop .wg-site--sale .wg-site__banner {
  height: 10em;
}

.hero-demo--desktop .wg-site--sale .wg-site__title {
  font-size: 2.4em;
}

.hero-demo--desktop .wg-site--sale .wg-site__copy {
  margin-top: 0.9em;
}

/* The banner is taller here, so the outline round the changed area reaches
   further back up over it: 0.9em of margin plus the 10em banner */
.hero-demo--desktop .wg-site--sale .wg-ring {
  top: -11.4em;
  height: 14.3em;
}

.hero-demo--desktop .wg-site__grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2em;
  padding: 0.6em 2.4em 1.6em;
}

.hero-demo--desktop .wg-site__grid .wg-tile__img {
  height: 4.6em;
}

/* ================================
   4b. EXAMPLE: landing, laid out wide
   The address bar carries the new page's address, so the page does not
   need to state it a second time
   ================================ */

.hero-demo--desktop .wg-site--landing .wg-site__grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 34em;
}

.hero-demo--desktop .wg-site--landing .wg-newpage {
  top: 7.8em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 1.2em;
  padding: 2.2em 2.4em 1.4em;
  border-radius: 0 0 0.9em 0.9em;
}

.hero-demo--desktop .wg-site--landing .wg-newpage__url,
.hero-demo--desktop .wg-site--landing .wg-sk--url {
  display: none;
}

.hero-demo--desktop .wg-site--landing .wg-skeleton {
  padding: 2.2em 2.4em 0;
  border-radius: 0 0 0.9em 0.9em;
  gap: 1.2em;
}

.hero-demo--desktop .wg-site--landing .wg-sk--banner { height: 9em; }
.hero-demo--desktop .wg-site--landing .wg-sk--row { height: 5em; }

.hero-demo--desktop .wg-site--landing .wg-ring {
  top: 0.6em;
  bottom: 0.6em;
  left: 0.6em;
  right: 0.6em;
}

.hero-demo--desktop .wg-site--landing .wg-newpage__banner {
  height: 14em;
  margin: 0;
}

.hero-demo--desktop .wg-site--landing .wg-newpage__body {
  padding: 0;
}

.hero-demo--desktop .wg-site--landing .wg-newpage__title {
  font-size: 1.95em;
}

.hero-demo--desktop .wg-site--landing .wg-newpage .wg-site__cta {
  margin-top: 0.5em;
}

.hero-demo--desktop .wg-site--landing .wg-newpage__list {
  margin-top: 0.7em;
  gap: 0.45em;
}

/* Runs full width under the two columns above it */
.hero-demo--desktop .wg-site--landing .wg-newpage__more {
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 0;
}

.hero-demo--desktop .wg-site--landing .wg-newpage__thumbs .wg-tile__img {
  height: 4em;
}

.hero-demo--desktop .wg-site--landing .wg-newpage__more .wg-newpage__text {
  margin-top: 0.8em;
}

/* ================================
   4c. EXAMPLE: seo, laid out wide
   ================================ */

/* Two columns: the page down the left, the questions it answers to the right */
.hero-demo--desktop .wg-site--seo .wg-seo {
  padding: 1.8em 2.4em 1.6em;
  display: grid;
  grid-template-columns: minmax(0, 37em) minmax(0, 1fr);
  column-gap: 3em;
  align-items: start;
}

.hero-demo--desktop .wg-site--seo .wg-seo > * {
  grid-column: 1;
}

.hero-demo--desktop .wg-site--seo .wg-seo__faq {
  grid-column: 2;
  grid-row: 1 / span 6;
  align-self: start;
  margin-top: 0.4em;
}

/* The panel takes the width the second column was using */
.hero-demo--desktop.is-chat .wg-site--seo .wg-seo {
  grid-template-columns: minmax(0, 1fr);
}

.hero-demo--desktop.is-chat .wg-site--seo .wg-seo__faq {
  display: none;
}

/* Two terms to a row, with the source line spanning both */
.hero-demo--desktop .wg-site--seo .wg-seo__terms {
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 0.7em;
}

.hero-demo--desktop .wg-site--seo .wg-seo__from {
  grid-column: 1 / -1;
}

.hero-demo--desktop .wg-site--seo.is-edited .wg-seo__terms {
  max-height: 9em;
  margin-bottom: 1.6em;
}

.hero-demo--desktop .wg-site--seo .wg-seo__title {
  font-size: 2.1em;
  height: 1.25em;
}

.hero-demo--desktop .wg-site--seo.is-edited .wg-seo__title {
  height: 2.5em;
}

/* Only the column being rewritten, not the questions beside it.
   The frame is a grid item here, so its offsets are measured from the
   column's own edges rather than from the page's padding: a positive left
   would push it INSIDE the text it is meant to be holding. */
.hero-demo--desktop .wg-site--seo .wg-ring {
  /* Both lines named. With only a start line the area runs to the container's
     own edge, so the frame reached past the questions beside it */
  grid-column: 1 / 2;
  top: 0.7em;
  left: -0.9em;
  right: -0.9em;
  width: auto;
  height: 15.2em;
}

/* Before the terms arrive there is only the headline and the line under it
   to read, so the frame holds just those two */
.hero-demo--desktop .wg-site--seo.is-scanning .wg-ring {
  height: 6.4em;
}

/* The page is narrower with the panel docked, so the frame comes in off
   its edge rather than running under the panel */
.hero-demo--desktop.is-chat .wg-site--seo .wg-ring {
  right: 0.6em;
}

.hero-demo--desktop .wg-site--seo .wg-seo__thumbs {
  max-width: 30em;
}

.hero-demo--desktop .wg-site--seo .wg-seo__thumbs .wg-tile__img {
  height: 3.6em;
}

/* Lines up under the questions in the right-hand column, so it covers
   nothing and the page reads left to right */
.hero-demo--desktop .wg-site--seo .wg-serp {
  left: auto;
  right: 2.4em;
  bottom: 2.4em;
  width: 21.5em;
}

.hero-demo--desktop .wg-site--seo .wg-serp::before,
.hero-demo--desktop .wg-site--seo .wg-serp::after {
  display: none;
}

/* Out of the way of the panel while the chat is open */
.hero-demo--desktop.is-chat .wg-site--seo .wg-serp {
  right: 1.6em;
  width: 22em;
}

/* ================================
   4d. EXAMPLE: form, laid out wide
   Copy on the left, and the space Webgentic picks out on the right
   ================================ */

.hero-demo--desktop .wg-site--form .wg-formpage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto 1fr;
  align-items: start;
  column-gap: 3em;
  row-gap: 0.7em;
  padding: 2.4em 2.4em 0;
}

.hero-demo--desktop .wg-site--form .wg-plain-title {
  grid-column: 1;
  font-size: 2.2em;
}

.hero-demo--desktop .wg-site--form .wg-site__text,
.hero-demo--desktop .wg-site--form .wg-formpage__list,
.hero-demo--desktop .wg-site--form .wg-formpage__note,
.hero-demo--desktop .wg-site--form .wg-formpage__where {
  grid-column: 1;
}

.hero-demo--desktop .wg-site--form .wg-formpage__where {
  display: block;
}

.hero-demo--desktop .wg-site--form .wg-formslot {
  grid-column: 2;
  grid-row: 1 / span 5;
  margin-top: 0;
  min-height: 26em;
}

/* ================================
   5. THE PAGE, WITH THE CHAT OPEN
   The page is narrower while the panel is docked, so it reflows the way a
   real responsive page would. It also keeps the part being changed on
   screen, which is the whole point of not covering the page up.
   ================================ */

.hero-demo--desktop.is-chat .wg-site--sale .wg-site__banner {
  height: 8em;
}

.hero-demo--desktop.is-chat .wg-site--sale .wg-site__title {
  font-size: 2em;
}

.hero-demo--desktop.is-chat .wg-site--sale .wg-ring {
  top: -9.4em;
  height: 12.3em;
}

.hero-demo--desktop.is-chat .wg-site__grid .wg-tile__img {
  height: 4em;
}

.hero-demo--desktop.is-chat .wg-site__grid .wg-tile__name {
  font-size: 0.95em;
}

.hero-demo--desktop.is-chat .wg-site--landing .wg-newpage__banner {
  height: 13em;
}

/* With the panel docked the page is a third narrower, so the form keeps the
   larger share and the copy beside it is set a little tighter */
.hero-demo--desktop.is-chat .wg-site--form .wg-formpage {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  column-gap: 2em;
  padding-left: 2em;
  padding-right: 2em;
}

.hero-demo--desktop.is-chat .wg-site--form .wg-plain-title {
  font-size: 1.8em;
}

.hero-demo--desktop.is-chat .wg-site--form .wg-site__text,
.hero-demo--desktop.is-chat .wg-site--form .wg-formpage__list,
.hero-demo--desktop.is-chat .wg-site--form .wg-formpage__note {
  font-size: 1em;
}

.hero-demo--desktop.is-chat .wg-site--form .wg-formpage__where {
  display: none;
}

.hero-demo--desktop.is-chat .wg-site--form .wg-formslot {
  min-height: 24em;
}