/* ==========================================================================
   projeto.css — template de página de projeto
   Estrutura de 9 blocos definida no Briefing Técnico v1.0, "TEMPLATE INTERNO".
   Um bloco só é renderizado quando há conteúdo real: os demais ficam como
   HTML comentado no arquivo da página. Ver README, "Regra de honestidade".
   ========================================================================== */

/* --- 01 · Hero do projeto ----------------------------------------------
   Base neutra: é o que a 404 usa. A variante com fotografia vem depois.
   ----------------------------------------------------------------------- */
.proj-hero {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.5rem));
  padding-bottom: var(--space-inner);
}

.proj-hero h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 500;
}

/* --- 01b · Variante faixa com fotografia ------------------------------
   Mesma dinâmica da faixa do Paulista na Home: a fotografia é fundo de largura
   cheia e o texto vem por cima. A faixa é baixa de propósito — não se estica
   para caber a imagem inteira, perde um pouco de cima e de baixo.
   Diferença em relação à Home: aqui ela abre a página, e o cabeçalho desta página
   é `header--solid` — opaco. Por isso a faixa desce com margin-top, não com
   padding-top: com padding a fotografia continuaria atrás do cabeçalho, recortada
   por uma barra que não deixa nada passar. Com margem, a altura declarada é a
   altura que se vê.

   As regras repetem o que .case faz em home.css em vez de compartilhar classe:
   página interna não carrega home.css. Alterar uma exige alterar a outra.
   ----------------------------------------------------------------------- */
.proj-hero--foto {
  display: grid;
  align-items: center;
  min-height: clamp(20rem, 26vw, 28rem);
  margin-top: var(--header-h);
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--grena-dark);
  background-image: url("../img/paulista-fc-fundo.jpg");
  background-image: image-set(url("../img/paulista-fc-fundo.webp") type("image/webp"),
                              url("../img/paulista-fc-fundo.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
}

/* Véu graná: quase opaco à esquerda, onde fica o texto, e transparente à
   direita, onde a camisa aparece. É o que garante contraste AA por cima da
   fotografia sem esconder a imagem. */
.proj-hero--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    rgba(23, 23, 23, .95) 0%,
    rgba(58, 16, 17, .90) 34%,
    rgba(58, 16, 17, .72) 52%,
    rgba(58, 16, 17, .30) 70%,
    rgba(58, 16, 17, 0) 86%);
}

.proj-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(2rem, 3.5vw, 3rem);
}

/* Sem grade de 12 colunas aqui: .grid12 vive em home.css. A largura máxima faz
   o mesmo serviço — mantém o texto do lado do espaço negativo da fotografia. */
.proj-hero__head {
  display: grid;
  gap: 1.125rem;
  justify-items: start;
  max-width: 44rem;
}

/* O nome do clube sai da serif editorial e vai para a sans em caixa-alta, igual
   ao .case__title da Home: dá o ar esportivo sem carregar uma terceira família,
   que o briefing proíbe. */
.proj-hero--foto h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}

.proj-hero__resumo { color: var(--text-dim); max-width: 42ch; }

/* Linha de força, igual à da Home. Vermelho fechado com piso de 24px: nessa
   medida a linha conta como texto grande no WCAG, cujo mínimo é 3:1, e este par
   dá 4,23:1 sobre o graná. Um vermelho saturado escuro não alcança 4,5:1 sobre
   esse fundo — é impossível, não é falta de ajuste. Não reduzir este font-size
   sem trocar a cor. */
.proj-hero__force {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem);
  font-weight: 500;
  color: var(--vermelho);
  letter-spacing: var(--ls-title);
}

@media (max-width: 900px) {
  /* Arquivo menor e véu vertical: no mobile o texto passa por cima da camisa. */
  .proj-hero--foto {
    min-height: 20rem;
    background-image: url("../img/paulista-fc-fundo-900.jpg");
    background-image: image-set(url("../img/paulista-fc-fundo-900.webp") type("image/webp"),
                                url("../img/paulista-fc-fundo-900.jpg") type("image/jpeg"));
    background-position: 70% center;
  }
  .proj-hero--foto::before {
    background: linear-gradient(180deg,
      rgba(23, 23, 23, .93) 0%,
      rgba(58, 16, 17, .88) 55%,
      rgba(58, 16, 17, .72) 100%);
  }
}

/* Metadados factuais, logo abaixo da faixa. Só entram os campos que o briefing
   declara — período e papel ficam comentados até serem validados. Sem borda em
   cima: a própria faixa já é a divisória. */
.proj-facts {
  position: relative;
  z-index: 2;
  padding-block: var(--space-inner);
}
.proj-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3rem;
  margin: 0;
}
.proj-meta > div { display: grid; gap: .375rem; }
.proj-meta dt {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.proj-meta dd { margin: 0; font-size: var(--fs-caption); color: var(--text); }

/* --- Blocos de conteúdo ------------------------------------------------ */
.proj-block {
  position: relative;
  z-index: 2;
  padding-block: var(--space-inner);
  border-top: var(--border);
}

.proj-block__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1.5rem var(--gutter);
  align-items: start;
}

.proj-block__head { display: grid; gap: .625rem; align-content: start; }
.proj-block__num {
  font-family: var(--font-serif);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
}
.proj-block__title { font-size: var(--fs-h3); }

.proj-block__body { display: grid; gap: 1.25rem; }
.proj-block__body p { color: var(--text-dim); max-width: var(--measure); }

/* Blocos que precisam da largura toda (galerias, filtro). */
.proj-block--wide .proj-block__inner { grid-template-columns: 1fr; }
.proj-block--wide .proj-block__head { margin-bottom: .5rem; }

@media (max-width: 768px) {
  .proj-block__inner { grid-template-columns: 1fr; }
}

/* Lista com traço dourado, usada em "o que o case reúne". */
.bullets { display: grid; gap: .75rem; max-width: var(--measure); }
.bullets li { position: relative; padding-left: 1.5rem; color: var(--text-dim); }
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 12px;
  height: 1px;
  background: var(--gold);
}

/* Bloco de reconhecimento oficial (Paulista FC). */
.recognition {
  display: grid;
  gap: .75rem;
  max-width: var(--measure);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.recognition__title {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.recognition__title svg { flex: none; color: var(--gold); }
.recognition p { color: var(--text-dim); }

/* --- 09 · Navegação entre projetos ------------------------------------ */
.proj-nav {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--gutter);
  align-items: center;
  padding-block: var(--space-inner);
  border-top: var(--border);
}
.proj-nav__prev { justify-self: start; }
.proj-nav__back { justify-self: center; }
.proj-nav__next { justify-self: end; text-align: right; }

/* Paulista FC é a única página de projeto: não há anterior nem próximo, só o
   retorno aos trabalhos. Os outros oito abrem em modal na Home. */
.proj-nav--solo { grid-template-columns: 1fr; justify-items: start; }
.proj-nav--solo .proj-nav__back { justify-self: start; }

.proj-nav a:not(.link-arrow) { display: grid; gap: .25rem; color: var(--text); }
.proj-nav__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.proj-nav__name {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--ls-title);
}

@media (max-width: 768px) {
  .proj-nav { grid-template-columns: 1fr; gap: var(--space-inner); }
  .proj-nav__prev, .proj-nav__back, .proj-nav__next {
    justify-self: start;
    text-align: left;
  }
}