/* Trabalhos (mosaico) e página de caso. Depende de tokens.css e site.css. */

/* ---------- Abertura da página de trabalhos ---------- */
.tb-abertura { background: var(--noite); color: var(--branco); padding: clamp(8rem, 18vh, 11rem) 0 clamp(2.5rem, 5vw, 4rem); }
.tb-abertura h1 { font-size: var(--t-mega); font-weight: 800; letter-spacing: -0.035em; max-width: 14ch; }
.tb-abertura .sublinha { color: var(--branco); }
.tb-abertura__sub { margin-top: 1.4rem; max-width: 36rem; font-size: var(--t-3); font-weight: 500; opacity: .85; }

/* filtros por público */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.filtros button {
  font: 600 var(--t-legenda)/1 var(--f-titulo); color: var(--branco); background: transparent; cursor: pointer;
  padding: .8em 1.2em; border-radius: var(--pilula); border: 1.5px solid rgb(var(--branco-rgb) / .3);
  transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.filtros button sup { font-size: .8em; margin-left: .3em; opacity: .7; }
.filtros button:hover { border-color: var(--verde); }
.filtros button[aria-pressed="true"] { background: var(--verde); color: var(--roxo); border-color: var(--verde); }

/* ---------- Mosaico ---------- */
.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--noite); }
.mosaico--3 { grid-template-columns: repeat(3, 1fr); }
.obra { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--noite); }
.obra[hidden] { display: none; }
/* .obra__sem-link: trabalho sem destino válido (o PHP não faz link); mesmo desenho, sem clique */
.obra a, .obra__sem-link { position: absolute; inset: 0; color: var(--branco); text-decoration: none; }
.obra img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease), filter var(--dur-lenta); }
/* escurece de baixo para cima */
.obra a::after, .obra__sem-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--tinta-rgb) / .92) 0%, rgb(var(--tinta-rgb) / .35) 45%, transparent 75%); opacity: 0; transition: opacity var(--dur-lenta) var(--ease); }
.obra__legenda { position: absolute; z-index: 1; left: clamp(1rem, 2vw, 1.8rem); right: 1rem; bottom: clamp(1rem, 2vw, 1.6rem); display: grid; gap: .45rem; justify-items: start; }
.obra__tipo { font: 700 var(--t-rotulo)/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--branco-rgb) / .8); }
.obra__titulo { font-size: clamp(1.3rem, 1rem + 1.1vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; }
.obra__ver { font: 700 var(--t-mini)/1 var(--f-titulo); color: var(--verde); }
.obra__tipo, .obra__titulo, .obra__ver { opacity: 0; translate: 0 14px; transition: opacity var(--dur-lenta) var(--ease), translate var(--dur-lenta) var(--ease); }

/* hover: zoom lento de 7 s e legenda em cascata; as outras obras recuam */
@media (hover: hover) {
  .obra:hover img { transform: scale(1.17); transition: transform 7s cubic-bezier(.16, 1, .3, 1); }
  .obra:hover a::after, .obra:hover .obra__sem-link::after { opacity: 1; }
  .obra:hover .obra__tipo, .obra:hover .obra__titulo, .obra:hover .obra__ver { opacity: 1; translate: 0 0; }
  .obra:hover .obra__titulo { transition-delay: .08s; }
  .obra:hover .obra__ver { transition-delay: .16s; }
  .mosaico:hover .obra:not(:hover) img { filter: brightness(.55) saturate(.75); }
}
/* toque: legendas sempre visíveis */
@media (hover: none) {
  .obra a::after, .obra__sem-link::after { opacity: 1; }
  .obra__tipo, .obra__titulo, .obra__ver { opacity: 1; translate: 0 0; }
}
.obra a:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; }
.obra a:focus-visible::after, .obra a:focus-visible .obra__legenda > * { opacity: 1; translate: 0 0; }

.tb-vazio { grid-column: 1 / -1; padding: 4rem var(--gutter); color: var(--branco); text-align: center; }

/* ---------- Página de caso ---------- */
.caso-abertura { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--branco); background: var(--noite); }
.caso-abertura__img { position: absolute; inset: 0; }
.caso-abertura__img img { width: 100%; height: 100%; object-fit: cover; }
.caso-abertura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--tinta-rgb) / .95) 0%, rgb(var(--tinta-rgb) / .45) 45%, rgb(var(--tinta-rgb) / .15) 75%); }
.caso-abertura__texto { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(2.5rem, 8vh, 5.5rem); }
.caso-abertura__rotulo { display: inline-block; font: 700 var(--t-rotulo)/1 var(--f-titulo); letter-spacing: var(--espaco-rotulo); text-transform: uppercase; background: var(--verde); color: var(--roxo); padding: .6em 1em; border-radius: var(--pilula); }
.caso-abertura h1 { font-size: min(var(--t-mega), 13vw); overflow-wrap: break-word; font-weight: 800; letter-spacing: -0.035em; margin-top: 1.2rem; }
.caso-abertura__sub { font-size: var(--t-2); font-family: var(--f-titulo); font-weight: 300; margin-top: .6rem; }

.ficha-rapida { background: var(--roxo); color: var(--branco); }
.ficha-rapida dl { margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.ficha-rapida div { padding: 1.4rem var(--gutter) 1.5rem 0; border-right: 1px solid rgb(var(--branco-rgb) / .18); }
.ficha-rapida div + div { padding-left: 1.4rem; }
.ficha-rapida div:last-child { border-right: 0; }
.ficha-rapida dt { font: 600 var(--t-rotulo)/1 var(--f-titulo); letter-spacing: var(--espaco-rotulo); text-transform: uppercase; color: var(--verde); margin-bottom: .5rem; }
.ficha-rapida dd { margin: 0; font-weight: 700; }

.cdi { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.cdi h3 { font-size: var(--t-3); color: var(--roxo); margin-bottom: .8rem; display: flex; align-items: center; gap: .6rem; }
.cdi h3 span { font-size: .75em; color: var(--tinta); opacity: .45; }
.cdi p { font-size: var(--t-corpo); }
.provisorio-bloco { display: inline-block; margin-top: 2rem; font-size: var(--t-mini); color: var(--texto-3); background: var(--nevoa); padding: .6em 1em; border-radius: var(--raio-p); }

/* filme: capa com play; o player do YouTube só carrega no clique */
.filme { background: var(--noite); color: var(--branco); padding-block: var(--secao); }
.filme__tela { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: var(--preto); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.filme__tela img, .filme__tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.filme__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(80px, 9vw, 120px); aspect-ratio: 1; border-radius: 50%;
  border: 0; background: var(--verde); color: var(--roxo); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgb(var(--verde-rgb) / .5); animation: chama 2.4s var(--ease) infinite; transition: scale var(--dur-lenta) var(--ease);
}
.filme__play:hover { scale: 1.08; }
.filme__play svg { width: 34%; margin-left: 8%; fill: currentColor; }
@keyframes chama { 0% { box-shadow: 0 0 0 0 rgb(var(--verde-rgb) / .45); } 100% { box-shadow: 0 0 0 28px rgb(var(--verde-rgb) / 0); } }
.filme__duracao { position: absolute; right: 1rem; bottom: 1rem; font: 700 var(--t-mini)/1 var(--f-titulo); background: rgb(var(--tinta-rgb) / .7); padding: .5em .8em; border-radius: 8px; }
.filme__yt { display: inline-block; margin-top: 1rem; padding-block: .5rem; color: var(--verde); font-weight: 700; }

.resultados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.resultados strong { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(2.6rem, 1.6rem + 4vw, 5.5rem); line-height: 1; color: var(--verde); letter-spacing: -0.03em; }
.resultados span { font-weight: 600; font-size: var(--t-3); }

.fotogramas { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(.8rem, 1.6vw, 1.4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.fotogramas figure { margin: 0; border-radius: var(--raio-p); overflow: hidden; }
.fotogramas figure:first-child { grid-row: span 2; }
.fotogramas img { width: 100%; height: 100%; object-fit: cover; }

.ficha-tecnica { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--roxo); }
.ficha-tecnica div { padding: 1.2rem 1rem 1.2rem 0; border-bottom: 1px solid rgb(var(--roxo-rgb) / .2); }
.ficha-tecnica dt { font: 600 var(--t-rotulo)/1 var(--f-titulo); letter-spacing: var(--espaco-rotulo); text-transform: uppercase; color: var(--roxo); margin-bottom: .45rem; }
.ficha-tecnica dd { margin: 0; font-weight: 700; }
.ficha-tecnica .a-confirmar { color: var(--texto-3); font-weight: 500; font-style: italic; }

.bastidores-caso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.bastidores-caso div { aspect-ratio: 4 / 5; border-radius: var(--raio-p); border: 2px dashed rgb(var(--roxo-rgb) / .35); display: grid; place-items: center; text-align: center; padding: 1rem; color: var(--texto-3); font-weight: 600; background: var(--nevoa); }

.outros { background: var(--noite); color: var(--branco); padding-top: var(--secao); }
.outros .titulo-secao { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .mosaico, .mosaico--3 { grid-template-columns: 1fr 1fr; }
  .ficha-rapida dl { grid-template-columns: 1fr 1fr; }
  .ficha-rapida div, .ficha-rapida div + div { padding: 1rem 1rem 1rem 0; border-right: 0; border-bottom: 1px solid rgb(var(--branco-rgb) / .18); }
  .cdi, .resultados { grid-template-columns: 1fr; }
  .fotogramas { grid-template-columns: 1fr; }
  .fotogramas figure:first-child { grid-row: auto; }
  .ficha-tecnica { grid-template-columns: 1fr 1fr; }
  .bastidores-caso { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mosaico, .mosaico--3 { grid-template-columns: 1fr; }
}

/* depoimento do cliente e subtítulo na página de caso */
.caso-depo { margin: var(--secao) 0 0; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--raio); background: var(--roxo); color: var(--branco); display: grid; gap: 1rem; }
.caso-depo blockquote { margin: 0; font: 600 clamp(1.2rem, 1rem + .8vw, 1.7rem)/1.4 var(--f-texto); }
.caso-depo figcaption { font-weight: 700; color: var(--verde); }
.caso-depo .provisorio { color: rgb(var(--branco-rgb) / .75); }
.caso-subtitulo { font-size: var(--t-2); margin-top: var(--secao); }