/* ═══════════════════════════════════════════
   VERACI · PORTFÓLIO
   Só o que a landing não tem. A base (vidro,
   botões, rótulos, rodapé) vem de base.css.
   ═══════════════════════════════════════════ */

/* ── 01 · HERO EM VÍDEO ──────────────────────
   O loop do Surf ocupa a tela toda. O texto fica
   sobre um scrim em gradiente — sem o scrim, serif
   branco sobre onda dourada some por completo. */
.ph{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:8rem 3.5rem;
  overflow:hidden;
}
.ph__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.ph__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(5,15,13,.72) 32%, rgba(5,15,13,.28) 62%, rgba(5,15,13,.55) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(5,15,13,.85), transparent 70%);
}
.ph__inner{ position:relative; z-index:2; width:100%; }

.ph__h1{
  font-family:var(--f-serif); font-style:italic;
  font-size:var(--t-huge); letter-spacing:-.03em;
  line-height:.94;
}
.ph__h1 span{ display:block; }
.ph__h1 em{ color:var(--teal); font-style:italic; }

/* ── as três frentes ─────────────────────────
   Substituem os números do hero. O componente .pills já existe no
   base.css (vem da landing) — aqui só se alinha à esquerda e herda
   o traço separador que os números tinham. */
.pills--start{
  justify-content:flex-start;
  margin-top:2.4rem; padding-top:1.8rem;
  border-top:1px solid rgba(255,255,255,.14);
}

/* ── 02 · FILTROS ────────────────────────── */
.filtros{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:2.4rem;
}
.filtro{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  border-radius:var(--r-pill);
  padding:.46rem 1.1rem;
  font-family:var(--f-sans);
  font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx-faint); cursor:pointer;
  transition:color var(--d-fast), border-color var(--d-fast), background var(--d-fast);
}
.filtro:hover{ color:var(--tx-strong); border-color:var(--glass-brd-hi); }
.filtro.is-on{
  background:linear-gradient(135deg,var(--teal-hi),var(--teal));
  border-color:transparent; color:#04120f; font-weight:600;
}

/* ── 03 · GRADE ──────────────────────────────
   Masonry em colunas CSS. É o único jeito sem JS de
   deixar 16:9 e 9:16 convivendo sem esticar nem cortar
   nenhum dos dois — e o desencontro de alturas é
   justamente o que tira a cara de catálogo.

   DUAS colunas, não três: com três, o card horizontal fica 307x173 e o
   bloco de texto sozinho come 140 desses 173 px. Card pequeno não é capa
   chamativa, é miniatura. */
.grade{
  columns:2;
  column-gap:1.15rem;
}
.peca{
  break-inside:avoid;
  margin-bottom:1rem;
  position:relative;
  display:block; width:100%;
  /* container query em vez de media query: o que aperta o card é a
     largura DELE, não a da tela. Um card de 335 px aperta igual no
     celular em 1 coluna e no desktop em 3 — uma regra resolve os dois. */
  container-type:inline-size;
}
.peca[hidden]{ display:none; }

.peca__media{ position:relative; width:100%; background:var(--bg-deep); }
.peca__media img{ width:100%; height:auto; display:block; }

/* O <video> nasce só no clique e fica sobre a capa. Enquanto não
   toca, `visibility:hidden` em vez de `display:none`: o elemento
   mantém tamanho e o card não pula de altura ao aparecer. */
.peca__media video{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%;
  object-fit:cover; background:#000;
  visibility:hidden;
}
.peca.is-tocando .peca__media video{ visibility:visible; }

/* ── a capa clicável ─────────────────────────
   Botão cobrindo o card inteiro. Fica FORA do
   <video> de propósito: botão envolvendo player
   rouba o clique dos controles nativos. */
.peca__abrir{
  position:absolute; inset:0; z-index:3;
  display:block; width:100%;
  padding:0; border:0; background:none;
  font:inherit; color:inherit; text-align:left;
  cursor:pointer;
}
.peca.is-tocando .peca__abrir{ display:none; }

.peca__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(2,8,7,.92) 0%, rgba(2,8,7,.38) 34%, transparent 62%);
  pointer-events:none;
}
.peca__meta{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:block;
  padding:1.3rem 1.35rem 1.15rem;
  pointer-events:none;
}
.peca__cat{
  display:block;
  font-size:var(--t-label); letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal); margin-bottom:.3rem;
}
.peca__nome{
  display:block;
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.15rem,1rem + .6vw,1.6rem);
  color:var(--tx-strong); line-height:1.15;
}
.peca__ctx{
  display:block; margin-top:.35rem;
  font-size:var(--t-sm); color:var(--tx-body);
  /* uma linha só: o contexto que quebra em três empurra o texto para
     cima do botão de play e estoura a altura do card */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* etiqueta de canto — duração do arquivo que está na pasta */
.peca__tags{
  position:absolute; top:.9rem; right:.9rem; z-index:3;
  display:flex; gap:.4rem; pointer-events:none;
}
.tag{
  border-radius:var(--r-pill);
  padding:.26rem .66rem;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
  background:rgba(2,8,7,.6);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16);
  color:var(--tx-strong);
}

/* Botão de play SEMPRE visível. Com o card em capa estática, ele é a
   única coisa que diz "isto toca" — escondê-lo no hover deixaria o
   portfólio parecendo uma galeria de fotos, e no celular não haveria
   hover nenhum para revelá-lo. */
.peca__play{
  /* 38% e não 50%: o miolo vertical do card é disputado com o bloco de
     texto, que cresce de baixo para cima. Subir o play tira a colisão
     sem precisar encolher nem o botão nem a legenda. */
  position:absolute; top:38%; left:50%; z-index:3;
  transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(2,8,7,.42);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  color:#fff;
  transition:transform var(--d-fast) var(--e-out),
             background var(--d-fast), border-color var(--d-fast);
  pointer-events:none;
}
.peca__abrir:hover .peca__play,
.peca__abrir:focus-visible .peca__play{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(62,207,178,.9);
  border-color:transparent;
  color:#04120f;
}
.peca__play .ico{ width:22px; height:22px; margin-left:3px; }

/* Card estreito: um 16:9 com 335 px de largura tem só 188 px de altura, e
   aí o botão de 62 px mais três linhas de texto não cabem juntos. Encolhe
   os dois em vez de esconder a legenda — o contexto do cliente é a prova
   social, e é justamente no celular que o cliente abre o link. */
@container (max-width: 430px){
  .peca__play{ width:48px; height:48px; }
  .peca__play .ico{ width:17px; height:17px; }
  .peca__meta{ padding:.95rem 1.05rem .85rem; }
  .peca__nome{ font-size:1.1rem; }
  .peca__ctx{ font-size:.8rem; margin-top:.22rem; }
  .peca__cat{ margin-bottom:.2rem; }
}

/* ── 04 · QUEM ASSINA ──────────────────────
   Um card só: a foto, e dentro dela o nome e o cargo. Nada mais — a grade
   acima já provou o trabalho, aqui só se mostra quem assina.

   O `img { display:block }` do base.css (veio do reset da landing) anula o
   `[hidden] { display:none }` do navegador: regra de autor vence regra de
   user-agent independente de especificidade. Sem a linha abaixo, a foto
   ausente aparece como ícone de imagem quebrada em cima do marcador. */
img[hidden]{ display:none; }

.assina{
  position:relative;
  margin:1.6rem auto 0;
  /* retrato, largura contida: um card único esticado em 1240 px viraria
     banner. 460 px lê como retrato, que é o que é. */
  width:min(460px, 100%);
  aspect-ratio:3 / 4;
  border-radius:var(--r-xl);
  overflow:hidden;
}
.assina img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
/* marcador enquanto não há assets/enzo.jpg — melhor um espaço que parece
   intencional do que o ícone de imagem quebrada do navegador */
.assina__ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  font-size:var(--t-label); letter-spacing:.24em; text-transform:uppercase;
  color:var(--tx-faint);
}
.assina__ph .ico{ width:30px; height:30px; opacity:.45; }
.assina.com-foto .assina__ph{ display:none; }

.assina__scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(2,8,7,.94) 0%, rgba(2,8,7,.42) 30%, transparent 58%);
  pointer-events:none;
}
.assina__meta{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:block;
  padding:1.6rem 1.6rem 1.5rem;
}
.assina__nome{
  display:block;
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem);
  color:var(--tx-strong); line-height:1.05;
  letter-spacing:-.02em;
}
.assina__cargo{
  display:block; margin-top:.5rem;
  font-size:var(--t-label); letter-spacing:.24em; text-transform:uppercase;
  color:var(--teal);
}

/* ── 05 · CTA FINAL ──────────────────────── */
.fecho{ text-align:center; padding-block:var(--sec-y); }
.fecho__h2{
  font-family:var(--f-serif); font-style:italic;
  font-size:var(--t-lg); letter-spacing:-.02em; margin-bottom:.9rem;
}
.fecho__p{ max-width:46ch; margin:0 auto 2rem; }

/* ── responsivo ──────────────────────────── */
@media (max-width:760px){
  .grade{ columns:1; }
  .ph{ align-items:flex-end; padding-block:6rem 2.5rem; }
}