/* ClearGrow coming-soon page, main page only: "See it and try it" (the stills and the
   controller demo) and "See it" (the app screenshots). */

/* Screens ("See it and try it"): real captures only, from img/. */
.shot {
  margin: 2rem 0 0;
}

.shot img {
  border: 1px solid var(--grey-20);
  border-radius: var(--radius);
}

.shot figcaption {
  margin-top: 0.5rem;
  color: var(--grey-60);
  font-size: 0.875rem;
}

/* Controller stills: the dashboard full width, the probe and alert side by side below it. */
.controller-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 48rem;
  margin-top: 2rem;
}

.controller-shots .shot {
  margin: 0;
}

.controller-shots .shot-lead {
  grid-column: 1 / -1;
}

/* The controller demo (demo/demo.js, demo/demo.css). The canvas takes the lead still's
   place once the demo has started: demo.js hides #cg-demo-start then. */
.demo-intro {
  max-width: 48rem;
  margin-top: 1.5rem;
}

.demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.demo-label {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--tint-strong);
  font-size: 0.875rem;
  font-weight: 600;
}

.demo-note {
  max-width: 48rem;
  margin-top: 0.75rem;
  color: var(--grey-60);
  font-size: 0.9375rem;
}

#cg-demo {
  display: none;
}

#try:has(#cg-demo-start[hidden]) #cg-demo {
  display: block;
}

#try:has(#cg-demo-start[hidden]) .shot-lead img {
  display: none;
}

/* Without :has(), show the canvas under the still from the start. */
@supports not selector(:has(a)) {
  #cg-demo {
    display: block;
    margin-top: 1rem;
  }
}

/* App screenshots, four Dark screens: two by two on a phone, four across on a wider screen. */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 54rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .shots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.shots .shot {
  margin: 0;
}

.shots .shot-phone img {
  width: 100%;
  border-radius: var(--radius-large);
}

/* .button sets display, which would override the hidden attribute demo.js sets. */
#cg-demo-start[hidden] {
  display: none;
}