/* ============================================================
   T3 ARQUITETURA — Página de Projetos (portfólio por categoria)
   ============================================================ */

/* ---- Hero editorial flat full-bleed (estilo do hero da home) ---- */
.pindex-hero {
  position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden;
  background: var(--espresso); color: var(--paper);
  padding: calc(var(--header-h) + clamp(36px, 6vh, 80px)) var(--gutter) clamp(48px, 8vh, 98px);
}

/* Mosaico de projetos ao fundo — colunas que derivam lentamente */
.pmosaic {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 16px);
  padding: clamp(8px, 1vw, 16px);
}
.pmosaic__col { position: relative; overflow: hidden; }
.pmosaic__track { display: block; will-change: transform; animation: pmDrift 90s linear infinite; }
.pmosaic__col:nth-child(even) .pmosaic__track { animation-direction: reverse; animation-duration: 108s; }
.pmosaic__col:nth-child(3n) .pmosaic__track { animation-duration: 124s; }
/* margem (em vez de gap) garante loop perfeito ao transladar -50% */
.pmosaic__track img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: clamp(8px, 1vw, 16px);
  filter: grayscale(.22) brightness(.82) sepia(.14) contrast(.98);
}
@keyframes pmDrift { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* Véu espresso — mantém o marrom dominante, mosaico fica bem sutil */
.pindex-hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(47,40,39,.74) 0%, rgba(47,40,39,.80) 48%, rgba(47,40,39,.97) 100%),
    radial-gradient(125% 90% at 82% 8%, rgba(166,86,63,.22), transparent 58%);
}
.pindex-hero__pattern {
  position: absolute; top: 0; right: 0; width: 42%; height: 100%; z-index: 2; pointer-events: none;
  background-image: var(--pat-cream); background-size: 50px 50px; opacity: .07;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent);
}
.pindex-hero__inner { position: relative; z-index: 3; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.pindex-hero__title { font-size: clamp(2.6rem, 6vw, 5.4rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; max-width: 17ch; margin-top: 6px; }
.pindex-hero__title em { color: var(--clay-soft); font-style: normal; text-decoration: underline; text-decoration-color: rgba(201, 161, 143, .5); text-decoration-thickness: 1.5px; text-underline-offset: .14em; }

/* ---- Barra de filtros: flat, reta e full-width ---- */
/* Nesta página o header principal NÃO é fixo: rola embora com o conteúdo */
body .site-header { position: absolute; }

/* Barra de categorias: fixa no topo (sticky) ao rolar a página */
.pfilter { background: var(--espresso-deep); position: sticky; top: 0; z-index: 60; }
.pfilter__inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; padding: 0 var(--gutter); }
.pfilter__btn {
  position: relative; font-family: var(--font); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: clamp(16px, 1.7vw, 24px) clamp(22px, 2.2vw, 36px); border: 0; border-radius: 0; background: transparent;
  color: var(--clay-soft); cursor: pointer; transition: color .45s var(--ease);
  display: inline-flex; align-items: center; overflow: hidden; isolation: isolate;
}
/* fill terracota que sobe de baixo pra cima — igual ao btn da home */
.pfilter__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--clay);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .48s var(--ease);
}
.pfilter__btn:hover { color: var(--paper); }
.pfilter__btn:hover::before { transform: scaleY(1); }
.pfilter__btn.is-active { color: var(--paper); }
.pfilter__btn.is-active::before { transform: scaleY(1); }

/* ---- Seções por categoria ---- */
.pcats { background: var(--paper); }
.pcat { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter); border-top: 1px solid var(--line); }
.pcat:first-child { border-top: none; }
.pcat.is-hidden { display: none; }
.pcat__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.6vw, 52px); }
.pcat__title { font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.04; }
.pcat__count { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--clay-deep); white-space: nowrap; }

/* Reaproveita .portfolio__grid e .pcard do main.css. Cards um pouco mais altos. */
.pcat .pcard { aspect-ratio: 4 / 3.1; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 900px) {
  .pmosaic { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .pindex-hero { min-height: 62vh; }
  /* filtros com rolagem horizontal em vez de quebrar linha */
  .pfilter__inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
  .pfilter__inner::-webkit-scrollbar { display: none; }
  .pfilter__btn { white-space: nowrap; flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .pmosaic { grid-template-columns: repeat(2, 1fr); }
}
/* Respeita preferência de menos movimento */
@media (prefers-reduced-motion: reduce) {
  .pmosaic__track { animation: none; }
}
.reduce .pmosaic__track { animation: none; }