/* ══════════════════════════════════════════════════════════════
   projetos.css — Projetos Page Exclusive Styles
   Listing hero and project count section.
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.listing-hero {
  position: relative;
  min-height: clamp(520px, 68svh, 840px);
  display: grid;
  align-items: end;
  padding: clamp(120px, 12vw, 160px) var(--page-x) clamp(40px, 6vw, 82px);
  overflow: hidden;
  color: var(--surface);
  background: var(--ink-deep);
}

.listing-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 72% 36%, transparent 0 24%, color-mix(in oklch, black, transparent 92%) 54%, color-mix(in oklch, black, transparent 72%) 100%),
    linear-gradient(180deg, color-mix(in oklch, black, transparent 44%) 0%, transparent 34%, color-mix(in oklch, black, transparent 22%) 100%),
    linear-gradient(90deg, color-mix(in oklch, black, transparent 22%) 0%, transparent 60%);
  content: "";
  pointer-events: none;
}

.listing-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(0.96) brightness(0.92);
  transform: scale(1.04);
}

.motion-ready .listing-hero img {
  animation: hero-drift 12s ease-out forwards;
}

/* ── Hero copy ────────────────────────────────────────────── */
.listing-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
  gap: clamp(28px, 6vw, 96px);
  align-items: end;
  width: 100%;
}

.motion-ready .listing-hero-copy > * {
  opacity: 0;
  transform: translateY(28px);
  clip-path: inset(0 0 22% 0);
  filter: blur(8px);
  animation: reveal-up var(--motion-slow) var(--ease-golden) forwards;
}

.motion-ready .listing-hero-copy > :nth-child(2) {
  animation-delay: 180ms;
}

.kicker {
  margin: 0 0 24px;
  color: color-mix(in oklch, var(--surface), transparent 10%);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.listing-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 200;
  line-height: 1.08;
  text-wrap: balance;
}

.listing-hero p:not(.kicker) {
  margin: 0;
  max-width: 480px;
  color: color-mix(in oklch, var(--surface), transparent 14%);
  font-size: var(--text-body);
  line-height: 1.75;
  text-wrap: pretty;
}

/* ── Project Head & Count ─────────────────────────────────── */
.projects-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(28px, 5vw, 60px);
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 200;
  line-height: 1.12;
  text-wrap: balance;
}

.project-count {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: clamp(20px, 3vw, 32px);
  border-top: var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════
   Responsive — Projetos
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .listing-hero-copy {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .listing-hero {
    min-height: 100svh;
    padding-top: 136px;
  }

  .projects-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}