/* public/css/fm/route-projetos.css
 *
 * Layout da rota /projetos reconstruída (fatia 3) — React-pura sobre o PageShell,
 * composta dos oficiais (fm-card, fm-chip, fm-badge). Só layout aqui; estilo de
 * componente nos fm/<componente>.css. Classes prefixadas fm- (check-fm).
 */

/* —— hero navy (sem imagem; diferencia do /blog) —— */
.fm-projetos-hero {
  box-sizing: border-box;
  min-height: 100vh; /* hero full-screen como as sections da home */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--fm-navy);
  color: var(--fm-white);
  border-radius: var(--fm-radius-screen) var(--fm-radius-screen) 0 0;
  padding: var(--fm-space-16) var(--fm-space-6);
}
.fm-projetos-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fm-space-4);
  max-width: 46rem;
}
.fm-projetos-hero-inner .fm-display {
  color: var(--fm-white);
}
.fm-projetos-hero-sub {
  margin: 0;
  color: var(--fm-white);
  opacity: 0.85;
}

/* —— pilha sticky de cases (espelha .projects-item da home) ——
   cada case prende no topo (sticky) ocupando 100vh; o seguinte, opaco (imagem cover)
   e também sticky top:0, rola POR CIMA do anterior. A "pista" ::after de 100vh segura
   o último case enquanto o CTA rola por cima. Cantos superiores via --fm-radius-screen
   (já escala 6→4→3→2rem por breakpoint). Sections full-bleed; só o texto respeita o
   container --fm-max-width. */
.fm-projetos-stack {
  position: relative;
  z-index: 2;
  /* sobreposição da assinatura do site: a pilha sobe pelo raio (= --fm-radius-screen)
     e os cantos arredondados do 1º case revelam o hero navy atrás (igual a
     .section-*{border-top-radius + margin-top:-6rem} do skin). */
  margin-top: calc(-1 * var(--fm-radius-screen));
}
.fm-projetos-stack::after {
  content: '';
  display: block;
  height: 100vh;
}

.fm-case {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transform: translateZ(0); /* containing block p/ a imagem absoluta */
  color: var(--fm-white);
  border-top-left-radius: var(--fm-radius-screen);
  border-top-right-radius: var(--fm-radius-screen);
}
.fm-case-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fm-case-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* token de scrim (= .overlay._30 da home): escurece a esquerda p/ o texto ler */
  background-image: var(--fm-scrim-photo);
}
@media (max-width: 479px) {
  .fm-case-overlay {
    background-image: var(--fm-scrim-photo-strong);
  }
}
.fm-case-content {
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  height: 100%;
  padding: 6vw; /* = .projects-item-content da home (full-bleed, sem container) */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* topo: logo + nome da empresa + descrição (estrutura exata da home —
   .projects-item-content-top: logotipo-cases + heading-large + text-size-xlarge) */
.fm-case-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* sem gap uniforme — espaçamentos específicos (portados da home): logo→nome 4rem
     (margin-bottom do logo), nome→descrição 2rem (margin-top da descrição). */
  max-width: 30%; /* = .projects-item-content-top da home */
  margin-bottom: 12rem;
}
@media (max-width: 991px) {
  .fm-case-top {
    max-width: 60%;
    margin-bottom: 4rem;
  }
}
@media (max-width: 479px) {
  .fm-case-top {
    max-width: 100%;
  }
}
.fm-case-logo {
  width: auto;
  height: auto;
  max-width: 120px; /* .logotipo-cases da home */
  max-height: 2.75rem;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1); /* logo branco sobre a foto */
  margin-bottom: var(--fm-space-16); /* 4rem logo→nome (= .margin-bottom.margin-medium da home) */
}
.fm-case-nome {
  margin: 0;
  font-family: var(--fm-font-body); /* Nunito Sans — = computado da .heading-large.* da home */
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--fm-white);
}
.fm-case-desc {
  margin: var(--fm-space-8) 0 0; /* 2rem nome→descrição (= margin-top do .max-width-small) */
  max-width: 20rem; /* = .max-width-small da home */
  font-family: var(--fm-font-body); /* Nunito — = .text-size-xlarge.white */
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--fm-white);
}

/* base: tags de serviço (chips brancos = .label.inverse da home) */
.fm-case-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--fm-space-6);
  max-width: 65rem; /* .projects-item-details da home */
}
.fm-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fm-space-4); /* 1rem = .projects-item-details (grid-gap) da home */
}
/* chips de serviço sobre a foto escura: brancos (transparente + borda/texto #fff),
   como o .label.inverse da home. Adapta o primitivo ao contexto escuro do case. */
.fm-case-tags .fm-chip {
  color: var(--fm-white);
  border-color: var(--fm-white);
  background: transparent;
}