/* ============================================================
   PROJETOS PAGE
   Carregado DEPOIS de styles.css.
   Figma: 572:506 (desktop) / 572:549 (mobile).
   Tema da pagina: Brand/Primary #FAFF43 (o padrao do styles.css,
   entao header e footer nao precisam de override).
   Os cases reusam as classes .block__* do styles.css — os valores
   do Figma sao identicos aos dos blocos da home (titulo 76/46,
   lead 38/28, lista 21 com filete de 3px, gap 24 / coluna 48).
   Aqui fica so' o que e' proprio da pagina.
   ============================================================ */

/* ============ TEMA ============ */
.proj-page { background: var(--color-primary); }

/* ============ HERO (Figma 572:509) ============ */
/* pt 48 abaixo da navbar de 120; a faixa de imagens fecha com py 48 */
.proj-hero {
  background: var(--color-primary);
  color: var(--color-black);
  padding: 168px 48px 0;
}
.proj-hero .hero__line { background: var(--color-primary); }

/* H1: 155px @1280 = 12.109375vw. O 2o termo so' entra quando "Projetos"
   (4.71x o font-size) nao caberia mais — assim a linha nunca quebra. */
.proj-hero .hero__line-text {
  --hero-fs-scale: 12.109375vw;
  --hero-fs-max: calc((100vw - 112px) / 4.75); /* 96 padding + 16 padding-right */
}

/* Faixa de recortes (Figma 572:519): tres larguras diferentes, sem gap,
   centralizadas. % sobre os 1184 do frame: 252.9 / 350.9 / 456 */
.proj-hero .hero__imgs {
  padding: 48px 0;
  justify-content: center;
}
.proj-hero .hero__img { flex: 0 0 auto; min-width: 0; }
.proj-hero .hero__img:nth-child(1) { width: 21.358%; }  /* img4 — caderno */
.proj-hero .hero__img:nth-child(2) { width: 29.635%; }  /* img5 — camera  */
.proj-hero .hero__img:nth-child(3) { width: 38.514%; }  /* img6 — laptop  */

/* ============ CASES ============ */
/* .block ja' traz padding 80/48 e width 100% */
.proj-case {
  background: var(--color-primary);
  color: var(--color-black);
}
/* O titulo fica no gap do .block__inner (48 desktop / 32 mobile);
   o resto do case tem gap fixo de 48 nos dois breakpoints. */
.proj-case__body {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.proj-case__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -0.04em;   /* -1.52px @38 */
  overflow-wrap: anywhere;
}
.proj-case .block__title { overflow-wrap: anywhere; }

/* ============ MOBILE ============ */
@media (max-width: 900px) {
  /* Figma 572:552 — pt 32 / px 24 / pb 64.
     O frame mobile nao traz o H1; incluido por decisao de projeto. */
  .proj-hero {
    padding: 152px 24px 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }
  /* 68px @402 = 16.9154vw */
  .proj-hero .hero__line-text {
    --hero-fs-scale: 16.9154vw;
    --hero-fs-max: calc((100vw - 64px) / 4.75);
  }

  /* slot unico: uma imagem por vez, trocada pelo scroll.
     A visibilidade (.is-live / .is-active) vem do styles.css. */
  .proj-hero .hero__imgs {
    padding: 0;
    aspect-ratio: 347 / 340;   /* slot do Figma 572:567 */
  }
  .proj-hero .hero__img,
  .proj-hero .hero__img:nth-child(1),
  .proj-hero .hero__img:nth-child(2),
  .proj-hero .hero__img:nth-child(3) { width: 100%; }

  /* Figma 581:1895 — no Masterchef a galeria vem antes do subtitulo no mobile.
     O -16 sobre o gap de 48 do .proj-case__body devolve os 32 do design. */
  .proj-case__body--gal-first .gal { order: -1; margin-bottom: -16px; }

  /* Figma: os cases encostam uns nos outros, so' com pb 80 */
  .proj-case { padding-top: 0; }
  .proj-case__text { font-size: 28px; letter-spacing: -0.04em; }
}

/* ============================================================
   GALERIA (Figma 585:1983 desktop / 586:2137 mobile)
   Faixa horizontal de 324px, tiles de 302px encostados.
   Comeca alinhada ao texto e sangra ate' a borda direita.
   ============================================================ */
.gal {
  --gal-w: 302px;                   /* largura do tile no mobile e padrao do desktop */
  --gal-h: var(--gal-h-sm, 324px);  /* altura da faixa no mobile */
  --gal-open: 580px;                /* largura no hover das 16:9 (324 x 2880/1608) */
  /* sangra dos dois lados: o container vai de borda a borda e o padding-left
     recoloca o primeiro tile alinhado ao texto, sem cortar o que corre pro lado */
  margin-inline: -48px;
  padding-left: 48px;
  scroll-padding-left: 48px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.gal::-webkit-scrollbar { display: none; }
.gal.is-dragging { cursor: grabbing; }

@media (min-width: 901px) {
  .gal { --gal-w: var(--gal-w-lg, 302px); --gal-h: var(--gal-h-lg, 324px); }
  /* alguns tiles tem largura propria no desktop (declarada inline no item);
     no mobile o --item-w-lg e' ignorado e todos voltam ao --gal-w */
  .gal__item { width: var(--item-w-lg, var(--gal-w)); }
}

.gal__track {
  display: flex;
  width: max-content;
  align-items: stretch;
}

.gal__item {
  position: relative;
  flex: 0 0 auto;
  width: var(--gal-w);
  height: var(--gal-h);
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: width 0.45s var(--ease-organic);
}
/* o scrollLeft fica fracionario depois do arrasto e os tiles renderizam em meio
   pixel: 1px de sobreposicao mata a costura entre eles */
.gal__item + .gal__item { margin-left: -1px; }
.gal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Imagens 16:9 ficam muito cortadas no tile — no mouseover o tile abre
   ate' a proporcao original (324 x 2880/1608 = 580) e empurra os vizinhos. */
@media (hover: hover) and (pointer: fine) {
  .gal:not(.is-dragging) .gal__item--wide:hover { width: var(--gal-open); }
}

/* Tile de video: veu preto + play amarelo de 100px */
.gal__item--video {
  background: var(--color-black);   /* preenche a tarja quando o poster nao cobre */
  border: 0;
  appearance: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.gal__item--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: background 0.3s var(--ease-organic);
}
.gal__item--video:hover::after { background: rgba(0, 0, 0, 0.35); }
.gal__play {
  position: absolute;
  color: var(--color-primary);   /* o triangulo e' vazado: mostra a foto por baixo */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.3s var(--ease-spring);
}
.gal__item--video:hover .gal__play { transform: translate(-50%, -50%) scale(1.06); }
.gal__play svg { width: 100%; height: 100%; display: block; }
.gal__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- LIGHTBOX (so' os videos abrem) ---- */
.gal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(18, 17, 17, 0.94);
  opacity: 0;
  transition: opacity 0.3s var(--ease-organic);
}
.gal-lightbox[hidden] { display: none; }   /* display:flex ignora o atributo hidden */
.gal-lightbox.is-open { opacity: 1; }
.gal-lightbox__video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}
.gal-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 76px;
  height: 76px;
  border-radius: 100px;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring), background 0.3s;
}
.gal-lightbox__close:hover {
  transform: scale(1.06);
  background: rgba(250, 255, 67, 0.1);
}

@media (max-width: 900px) {
  .gal { margin-inline: -24px; padding-left: 24px; scroll-padding-left: 24px; }
  .gal-lightbox { padding: 24px; }
  .gal-lightbox__close { top: 16px; right: 16px; width: 56px; height: 56px; }
  .gal-lightbox__close svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .gal__item, .gal__play, .gal-lightbox, .gal-lightbox__close { transition: none; }
}

/* A faixa entra com a mascara de baixo pra cima do .reveal (styles.css).
   Depois de revelar, libera o will-change — e' um container de scroll. */
.gal.is-visible { will-change: auto; }

/* Tile estreito do Figma: img_crocs003 e' 417x486, ou seja 278/324 */
.gal__item--narrow { width: 278px; }

/* Galeria de um tile so', na largura do texto: sem sangria e sem arrasto
   (Figma 605:778 desktop 1184x450 / 605:792 mobile 354x466) */
.gal--full {
  margin-inline: 0;
  padding-left: 0;
  overflow: hidden;
  cursor: default;
}
.gal--full .gal__track { width: 100%; }
.gal--full .gal__item { width: 100%; }

/* ============================================================
   SUBMENU DE PROJETOS (Figma 608:1144)
   Pina no topo depois que o hero sai da tela e continua visivel
   mesmo quando o header principal se esconde.
   ============================================================ */
.proj-subnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;                       /* o header e' 100 */
  background: var(--color-black);
  /* proporcao do Figma mantida em qualquer tela; o excesso resolve no scroll */
  font-size: 46px;
  padding: 0.522em 0.87em;            /* 24 e 40 a 46px */
  overflow-x: auto;
  cursor: grab;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.45s var(--ease-organic), visibility 0.45s;
}
.proj-subnav::-webkit-scrollbar { display: none; }
.proj-subnav.is-dragging { cursor: grabbing; }
.proj-subnav.is-dragging a { pointer-events: none; }

/* visivel: encaixa abaixo do header; se o header se esconder, sobe pro topo */
.proj-subnav.is-visible {
  visibility: visible;
  transform: translateY(120px);
}
.proj-subnav.is-visible.at-top { transform: translateY(0); }

.proj-subnav__inner {
  display: flex;
  align-items: center;
  gap: 1.043em;                       /* 48 a 46px */
  width: max-content;
  margin-inline: auto;                /* centraliza sem cortar a ponta ao rolar */
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;            /* -1.38px a 46px */
  text-transform: uppercase;
  white-space: nowrap;
}
.proj-subnav a {
  color: #fff;
  text-decoration: none;
  transition: color 0.25s var(--ease-organic);
}
.proj-subnav a:hover { color: var(--color-primary); }
.proj-subnav a.is-active {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

@media (max-width: 900px) {
  /* 46px ocupava quase um terco da tela; padding e gap acompanham por serem em */
  .proj-subnav { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .proj-subnav { transition: none; }
}