/* Uniform symmetric showcase grid — live iframe previews */

.showcase-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

  margin-bottom: 48px;

}

.showcase-card {

  background: var(--card);

  border: 1px solid var(--rule);

  border-radius: 8px;

  display: flex;

  flex-direction: column;

  height: 100%;

  min-height: 620px;

  transition: box-shadow 0.2s, transform 0.2s;

}

.showcase-card:hover {

  box-shadow: 0 12px 32px rgba(0,0,0,0.12);

  transform: translateY(-2px);

}

.showcase-preview {

  position: relative;

  width: 100%;

  flex-shrink: 0;

  overflow: hidden;

  background: #111827;

  border-radius: 8px 8px 0 0;

}

.showcase-preview--live {

  display: flex;

  flex-direction: column;

}

.showcase-browser-chrome {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 8px 12px;

  background: #1f2937;

  border-bottom: 1px solid #374151;

  flex-shrink: 0;

}

.showcase-dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  flex-shrink: 0;

}

.showcase-dot--red { background: #ef4444; }

.showcase-dot--yellow { background: #eab308; }

.showcase-dot--green { background: #22c55e; }

.showcase-browser-url {

  margin-left: 8px;

  font-family: IBM Plex Mono, monospace;

  font-size: 10px;

  color: #9ca3af;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.showcase-live-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 10;

  background: #fff;

  overflow: hidden;

}

.showcase-live-frame {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  border: 0;

  background: #fff;

}

.showcase-type {

  position: absolute;

  top: 46px;

  left: 10px;

  z-index: 2;

  font-family: Inter, sans-serif;

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #fff;

  background: rgba(0,0,0,0.55);

  padding: 5px 10px;

  border-radius: 4px;

  pointer-events: none;

}

.showcase-fullscreen-btn {

  position: absolute;

  bottom: 10px;

  right: 10px;

  z-index: 3;

  font-size: 11px !important;

  padding: 8px 12px !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.25);

}

.showcase-card-body {

  padding: 18px 20px 20px;

  flex: 1 1 auto;

  min-height: 0;

  display: flex;

  flex-direction: column;

  text-align: left;

}

.showcase-card-body h2 {

  font-family: Fraunces, serif;

  font-size: 17px;

  font-weight: 500;

  margin: 0 0 8px;

  color: var(--ink);

  line-height: 1.3;

}

.showcase-desc {

  font-family: Inter, sans-serif;

  font-size: 13px;

  line-height: 1.55;

  color: var(--ink-soft);

  margin: 0 0 10px;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.showcase-features-list {

  font-family: Inter, sans-serif;

  font-size: 11px;

  color: var(--ink-soft);

  margin: 0 0 12px;

  padding-left: 16px;

}

.showcase-features-list li { margin-bottom: 3px; }

.showcase-stats {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 14px;

  font-family: IBM Plex Mono, monospace;

  font-size: 10px;

  color: var(--ink-soft);

  flex-shrink: 0;

}

.showcase-stat {

  background: var(--paper-2);

  border: 1px solid var(--rule);

  padding: 4px 8px;

  border-radius: 4px;

}

.showcase-actions {

  display: flex;

  gap: 8px;

  margin-top: auto;

  padding-top: 12px;

  border-top: 1px solid var(--rule);

  flex-shrink: 0;

}

.showcase-btn {

  flex: 1;

  text-align: center;

}

.showcase-btn--download {

  background: var(--card) !important;

  border-color: var(--card-accent, var(--accent)) !important;

  color: var(--card-accent, var(--accent)) !important;

}

.showcase-demo-login {

  font-family: Inter, sans-serif;

  font-size: 13px;

  color: var(--ink-soft);

}

.showcase-loading { text-align: center; color: var(--ink-soft); grid-column: 1 / -1; padding: 48px; }



@media (max-width: 1024px) {

  .showcase-grid { grid-template-columns: repeat(2, 1fr); }

  .showcase-card { min-height: 600px; }

}

@media (max-width: 640px) {

  .showcase-grid { grid-template-columns: 1fr; }

  .showcase-card { min-height: auto; }

  .showcase-actions {

    flex-direction: column;

  }

  .showcase-actions .site-btn {

    width: 100%;

  }

  .showcase-fullscreen-btn {

    position: static;

    display: block;

    margin: 8px 10px 10px;

    width: calc(100% - 20px);

    text-align: center;

  }

  .showcase-preview--live {

    display: block;

  }

}