/* EMÉRITO · página de cases (v3, organização Pandorium)
   Lista vertical: cada case é uma faixa de largura total, 50% foto e 50%
   texto, alternando o lado da foto a cada case. No mobile empilha com a
   foto em cima. Sem filtros.
   Depende de home-v2.css (variáveis, .wrap, .botao, .rotulo, .reveal) e de
   theme.css, que reescreve as variáveis no tema claro. Regra do contrato de
   tema: NENHUMA cor hardcoded aqui, só var(--...). */

/* ---------- hero curto de prova ---------- */
.cs-hero {
  position: relative;
  padding: clamp(64px, 8vw, 108px) 0 clamp(34px, 4vw, 54px);
  overflow: hidden;
}
.cs-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -40%;
  width: min(92vw, 1040px);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--linha), transparent 62%);
  pointer-events: none;
}
.cs-hero .wrap { position: relative; z-index: 2; }
.cs-hero h1 {
  max-width: 16ch;
  margin-top: 20px;
  font-size: clamp(2.3rem, 6vw, 4.8rem);
}
.cs-hero-sub {
  max-width: 58ch;
  margin-top: clamp(20px, 2.6vw, 30px);
  color: var(--grafite);
  font-size: clamp(.96rem, 1.2vw, 1.06rem);
}
.cs-hero-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: clamp(24px, 3vw, 34px);
}

/* ---------- lista vertical de cases ---------- */
.cs-secao { padding: clamp(34px, 4vw, 60px) 0 clamp(72px, 9vw, 120px); }
.cs-lista {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 54px);
  margin-top: clamp(26px, 3vw, 40px);
}
.cs-item { scroll-margin-top: 104px; }

.cs-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 1px solid var(--linha-suave);
  border-radius: var(--raio-g);
  background: var(--carvao);
  overflow: hidden;
  transition: border-color .3s ease;
}
.cs-case:hover { border-color: var(--linha); }

/* alterna o lado da foto: pares recebem a foto à direita */
.cs-item:nth-child(even) .cs-case-imagem { order: 2; }

.cs-case-imagem {
  display: block;
  overflow: hidden;
  min-height: 100%;
}
.cs-case-imagem img {
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 30vw, 420px);
  object-fit: cover;
  object-position: center top;
  transition: transform .7s cubic-bezier(.2, .6, .2, 1);
}
.cs-case:hover .cs-case-imagem img { transform: scale(1.03); }

.cs-case-corpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: clamp(26px, 3.4vw, 56px);
}
.cs-categoria {
  color: var(--ouro-claro);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.cs-marca {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--papel);
}
.cs-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.08rem, 1.7vw, 1.4rem);
  line-height: 1.28;
  color: var(--ouro);
}
.cs-descricao {
  max-width: 54ch;
  color: var(--grafite);
  font-size: .95rem;
  line-height: 1.62;
}

/* ---------- fatos e métricas em destaque ---------- */
.cs-destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-top: 5px;
  padding-top: 20px;
  border-top: 1px solid var(--linha-suave);
}
.cs-destaque strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ouro);
}
.cs-destaque span {
  display: block;
  margin-top: 7px;
  color: var(--apagado);
  font-size: .68rem;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cs-case-pe { margin-top: 6px; }
.cs-ler {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ouro);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.cs-ler::after { content: "→"; transition: transform .3s ease; }
.cs-ler:hover::after { transform: translateX(5px); }

.cs-nota {
  max-width: var(--leitura);
  margin-top: clamp(38px, 4.4vw, 60px);
  color: var(--apagado);
  font-size: .86rem;
}

/* ---------- responsivo: empilha com a foto em cima ---------- */
@media (max-width: 860px) {
  .cs-case { grid-template-columns: 1fr; }
  .cs-item:nth-child(even) .cs-case-imagem { order: 0; }
  .cs-case-imagem img {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 620px) {
  .cs-hero { padding-top: 52px; }
  .cs-hero h1 { font-size: clamp(2rem, 9.5vw, 2.9rem); }
  .cs-hero-acoes { flex-direction: column; align-items: stretch; gap: 14px; }
  .cs-hero-acoes .botao { width: 100%; }
  .cs-hero-acoes .texto-seta { justify-content: center; }
  .cs-destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-case, .cs-case-imagem img, .cs-ler::after { transition: none; }
}