/* ==========================================================================
   OmniResume — Examples Gallery
   ========================================================================== */

.page--examples .site-main { background: var(--color-background-soft); }

.ex-hero {
  padding: var(--space-3xl) 0 var(--space-2xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-background)), var(--color-background-soft));
  border-bottom: 1px solid var(--color-border);
}

.ex-hero__inner { display: flex; flex-direction: column; gap: var(--space-xl); }
.ex-hero__content { max-width: 720px; display: flex; flex-direction: column; gap: var(--space-sm); }

.ex-hero__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text-strong);
  margin: 0;
}

.ex-hero__sub {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 60ch;
}

.ex-hero__stats {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ex-hero__stats strong { color: var(--color-text-strong); font-weight: 700; }

.ex-hero__search {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .ex-hero__search { grid-template-columns: 1fr 220px; }
}

.ex-filter-host { display: flex; flex-direction: column; gap: var(--space-sm); }
.ex-filter-bar { display: flex; flex-direction: column; gap: var(--space-sm); }
.ex-filter-row { display: flex; align-items: flex-start; gap: var(--space-md); flex-wrap: wrap; }
.ex-filter-row__label {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding-top: 6px;
  min-width: 70px;
}
.ex-filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); flex: 1 1 auto; }

.ex-grid-section { padding: var(--space-2xl) 0 var(--space-3xl); }
.ex-grid-meta { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-md); }
.ex-grid-meta [data-example-live-count] { color: var(--color-text-strong); font-weight: 700; }

.example-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-lg);
}

.example-card-v2 {
  position: relative;
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--duration-base) var(--ease-out);
}

.example-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.example-card-v2__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  color: inherit;
  text-decoration: none;
}

.example-card-v2__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.example-card-v2__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.example-card-v2:hover .example-card-v2__icon {
  background: var(--color-brand-gradient);
  color: #fff;
  transition: all var(--duration-base) var(--ease-out);
}

.example-card-v2__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
}

.example-card-v2__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--font-weight-semibold);
}

.example-card-v2__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.example-card-v2__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

.example-card-v2__badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.example-card-v2--skeleton { padding: var(--space-lg); pointer-events: none; }

.ex-categories { padding: var(--space-3xl) 0; background: var(--color-background); border-top: 1px solid var(--color-border); }
.ex-seo { padding: var(--space-3xl) 0 var(--space-4xl); }