/* Minimalist — Monochrome 3D screen panels */

.mn-showcase.showcase--hero::before {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 45%,
    transparent 70%
  );
}

[data-theme="light"] .mn-showcase.showcase--hero::before {
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.02) 50%,
    transparent 70%
  );
}

.mn-showcase .screen-panel__card {
  background: linear-gradient(
    165deg,
    #5a5a5e 0%,
    #3a3a3c 30%,
    #2c2c2e 60%,
    #1c1c1e 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35),
    0 24px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .mn-showcase .screen-panel__card {
  background: linear-gradient(
    165deg,
    #f5f5f7 0%,
    #e5e5ea 35%,
    #d1d1d6 65%,
    #aeaeb2 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}

.mn-showcase .screen-panel__card::after {
  background: #0a0a0a;
}

[data-theme="light"] .mn-showcase .screen-panel__card::after {
  background: #d1d1d6;
}

.mn-showcase .screen-panel__shadow {
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45) 0%, transparent 72%);
}

[data-theme="light"] .mn-showcase .screen-panel__shadow {
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.14) 0%, transparent 72%);
}

.mn-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.mn-showcase.showcase--hero {
  min-height: 580px;
  padding: 8px 0 24px;
}

.mn-showcase.showcase--hero .showcase-stack {
  width: min(360px, 100%);
  height: min(580px, 68vh);
}

.mn-showcase.showcase--hero .screen-panel--xl {
  --panel-w: min(340px, 94%);
}

.mn-showcase.showcase--hero::before {
  width: 400px;
  height: 400px;
}

/* Larger screenshots site-wide (vs base showcase-3d sizes) */
.mn-showcase .screen-panel--xl {
  --panel-w: min(340px, 94%);
}

.mn-showcase .screen-panel--lg {
  --panel-w: min(315px, 92%);
}

.mn-screenshot-item .showcase {
  min-height: 500px;
  width: 100%;
}

.mn-split-visual .showcase {
  min-height: 580px;
  width: 100%;
}

@media (max-width: 900px) {
  .mn-showcase.showcase--hero {
    min-height: 520px;
  }

  .mn-showcase.showcase--hero .showcase-stack {
    width: min(320px, 92vw);
    height: min(520px, 62vh);
  }

  .mn-showcase .screen-panel--xl {
    --panel-w: min(300px, 92vw);
  }

  .mn-showcase .screen-panel--lg {
    --panel-w: min(280px, 90vw);
  }

  .mn-screenshot-item .showcase {
    min-height: 460px;
  }

  .mn-split-visual .showcase {
    min-height: 520px;
  }
}

.mn-screenshot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mn-screenshot-item figcaption {
  margin-top: 14px;
}

.mn-split-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mn-hero-shot--light {
  display: none;
}

[data-theme="light"] .mn-hero-shot--dark {
  display: none;
}

[data-theme="light"] .mn-hero-shot--light {
  display: block;
}

.mn-hero-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.mn-showcase .showcase-stack:has(.screen-panel:only-child) .screen-panel {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 0 auto;
  scale: 1;
}