/* Web projects (/web-projects/ and /web-projects/<slug>/).
   Builds on open-source.css: cards, hero, facts, pager and CTA come from there. */

.web-group-intro {
  margin: 0;
  color: var(--color-muted);
}

/* Browser window frame around a desktop screenshot */
.web-browser {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-surface-alt);
}

.web-browser__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem .7rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Three window dots: the span is the first one, its shadows the other two */
.web-browser__bar span {
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: .8rem 0 0 #febc2e, 1.6rem 0 0 #28c840;
  margin-right: 1.6rem;
}

.web-browser img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Overview cards ---------- */

.web-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
}

.web-cards .web-browser {
  margin-bottom: var(--space-2);
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--project-accent) 80%, transparent);
}

.web-cards .web-browser img {
  transition: transform var(--duration-slow) var(--ease-standard);
}

.web-cards article:hover .web-browser img,
.web-cards article:focus-within .web-browser img {
  transform: scale(1.04);
}

/* ---------- Project page ---------- */

.web-project .os-hero h1 + p {
  max-width: 56ch;
}

/* Desktop screenshot in a browser frame with the phone screenshot overlapping it */
.web-showcase {
  position: relative;
  isolation: isolate;
  margin: var(--space-5) 0 0;
  padding: 0 9% 7% 0;
}

.web-showcase::before {
  content: "";
  position: absolute;
  inset: 8% 4% 0 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--project-accent) 45%, transparent), transparent);
  filter: blur(40px);
  opacity: .55;
}

.web-showcase .web-browser {
  border-radius: var(--radius-l);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.85);
}

.web-showcase .web-browser__bar {
  padding: .6rem .9rem;
  font-size: var(--font-size-s);
}

.web-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 21%;
  min-width: 6.5rem;
  margin: 0;
  padding: 3.5%;
  border-radius: 18% / 8.5%;
  background: #0d0d0f;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 28px 60px -24px rgba(0,0,0,.9);
}

.web-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13% / 6%;
}

@media (max-width: 40rem) {
  .web-showcase {
    padding: 0 0 28% 0;
  }

  .web-phone {
    width: 30%;
    right: 4%;
  }
}

html[data-theme="light"] .web-showcase .web-browser {
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.4);
}

html[data-theme="light"] .web-phone {
  box-shadow: 0 22px 44px -22px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  .web-cards .web-browser img {
    transition: none;
  }

  .web-cards article:hover .web-browser img,
  .web-cards article:focus-within .web-browser img {
    transform: none;
  }
}

/* Extra screenshots in the article body */
.web-gallery {
  margin: 0 0 var(--space-4);
}

.web-gallery .web-browser {
  box-shadow: 0 20px 44px -28px rgba(0,0,0,.8);
}

.web-gallery figcaption {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-s);
}