/* ==========================================================================
   PILARES — três cards com o texto DENTRO da foto
   Prefixo: pil-
   Tokens usados: --accent --dark --dark-rgb --display --radius-media --ease

   Card de mídia com legenda embutida. A ordem das camadas importa:
     img  ->  scrim (gradiente)  ->  veil (blur mascarado)  ->  lab (texto)
   O scrim garante contraste sempre; o veil separa o texto do detalhe da
   foto. Um sem o outro não resolve: só gradiente deixa o texto sobre
   textura, só blur deixa claro demais em foto clara.
   ========================================================================== */

.pil-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px);margin-top:clamp(44px,7vh,72px);
}

/* isolation:isolate cria contexto de empilhamento próprio: o blur do veil
   não vaza para os cards vizinhos. */
.pil-card{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius-media);
  aspect-ratio:3/4.15;
}

.pil-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pil-pos,50% 50%);
  filter:grayscale(.55) brightness(.72);
  transition:filter 1.1s var(--ease),transform 1.4s var(--ease);
  will-change:transform;
}
.pil-card:hover .pil-img{filter:grayscale(.1) brightness(.82);transform:scale(1.045)}

.pil-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(var(--dark-rgb),.92) 0%,
    rgba(var(--dark-rgb),.7) 24%,
    rgba(var(--dark-rgb),.26) 52%,
    transparent 74%);
}

/* Véu desfocado COM máscara em degradê. Sem a máscara vira faixa chapada
   com linha dura contra a parte nítida da foto. */
.pil-veil{
  position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;
  backdrop-filter:blur(9px) saturate(1.12);
  -webkit-backdrop-filter:blur(9px) saturate(1.12);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.92) 40%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.92) 40%,transparent 100%);
}

.pil-lab{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,2.4vw,30px)}
.pil-num{font-size:11px;letter-spacing:.18em;color:var(--accent)}
/* O texto vive dentro da foto escura, entao e' claro sempre --
   nao segue o escopo de tom da secao, que pode ser clara. */
.pil-title{
  font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,25px);
  letter-spacing:-.025em;color:var(--light);margin:10px 0 0;
}
.pil-text{font-size:14px;line-height:1.7;
  color:color-mix(in srgb,var(--light) 86%,transparent);margin-top:10px;max-width:34ch}

/* No mobile os cards empilham e ficam largos e baixos: o corte da foto muda
   de eixo, por isso o --pil-pos-mob. */
@media(max-width:860px){
  .pil-grid{grid-template-columns:1fr}
  .pil-card{aspect-ratio:4/3.2}
  .pil-img{object-position:var(--pil-pos-mob,var(--pil-pos,50% 30%))}
}

@media(prefers-reduced-motion:reduce){
  .pil-card:hover .pil-img{transform:none}
}