/* Example sites gallery + iframe viewer */
@import url("examples-demo-bar.css?v=2026-07-08d");

.examples-page .section-hero-compact {
  padding: clamp(2rem, 5vw, 2.5rem) 0 1.5rem;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(118, 181, 164, 0.12), transparent),
    var(--bg);
}

.page-title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 0.75rem;
  line-height: 1.1;
}

.page-lead {
  margin: 0;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
}

.examples-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.example-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.example-card:hover {
  border-color: var(--border-teal);
  transform: translateY(-2px);
}

.example-thumb {
  aspect-ratio: 16 / 10;
  min-height: 160px;
}

.example-thumb-contractor {
  background:
    linear-gradient(180deg, transparent 40%, rgba(15, 20, 25, 0.85)),
    url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=800&q=80") center/cover;
}

.example-thumb-fitness {
  background:
    linear-gradient(180deg, transparent 30%, rgba(10, 10, 10, 0.9)),
    url("https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=800&q=80") center/cover;
}

.example-thumb-connect-plus {
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.75), rgba(139, 92, 246, 0.55)),
    url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80") center/cover;
}

.example-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
  gap: 0.75rem;
}

.example-body h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--gold);
}

.example-body p {
  margin: 0;
  flex: 1;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.example-body .btn {
  width: 100%;
}

/* Viewer chrome uses shared examples-demo-bar.css; override with site tokens */
.viewer-body {
  background: var(--bg);
}

.viewer-bar {
  background: var(--bg-elevated);
  border-bottom-color: var(--border);
}

.viewer-back,
.viewer-home {
  color: var(--teal);
}

.viewer-meta {
  color: var(--text-muted);
}

.viewer-badge {
  color: var(--teal);
  border-color: var(--border-teal);
}

@media (max-width: 767px) {
  .examples-page .section-hero-compact {
    padding-top: 1.75rem;
  }

  .page-title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

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

}