/* Página de um trabalho (casamento/evento) — usa a base das páginas de categoria */

.page-trabalho .t-capa { padding: 0 12px 14px; }
.t-capa-card { display: block; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.t-capa-card img { width: 100%; max-height: 78svh; object-fit: cover; object-position: 50% 40%; transition: transform .8s var(--ease-out); }
.t-capa-card:hover img { transform: scale(1.02); }

.page-trabalho .t-video { padding: 0 12px 26px; }
.t-video-box {
  position: relative; display: grid; place-items: center; align-content: center; gap: 6px;
  aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #14130f; color: #fff;
}
.t-video-box video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.t-video-box.is-empty { aspect-ratio: auto; padding: 34px 16px; border: 1px dashed var(--gold); background: var(--soft); color: var(--ink); text-align: center; }
.t-video-box strong { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.t-video-box small { color: var(--ink-dim); letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }
.t-video-box .empty-mark { position: static; display: grid; place-items: center; font-size: 30px; color: var(--gold-deep); }
.t-video-box .empty-mark .icon { width: 1em; height: 1em; }

/* a altura vem da proporção da foto, nunca do atributo height (isso esticava tudo) */
.page-trabalho .cat-item img { width: 100%; height: auto; display: block; }

/* vídeo em pé (9:16) ao lado do texto no computador, empilhado no celular */
.t-anchor { display: block; scroll-margin-top: 70px; }
.t-video-wrap { display: grid; gap: 22px; justify-items: center; text-align: center; }
.t-video-box.vertical { aspect-ratio: 9 / 16; width: min(100%, 360px); max-height: 78svh; box-shadow: 0 30px 60px -34px #11111180; }
.t-video-box.vertical video { object-fit: contain; }
.t-video-wrap.horizontal .t-video-box { width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; }
.t-video-text { display: grid; gap: 12px; justify-items: center; }
.t-video-text h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.02; letter-spacing: -.02em; }
.t-video-text h2 em { font-weight: 400; }
.t-video-text p:not(.mono-label) { margin: 0; color: var(--ink-dim); font-size: 15px; line-height: 1.6; max-width: 34ch; }
.t-video-text .big-button { margin-top: 6px; }

.page-trabalho .t-fotos { padding-bottom: 8px; }
.t-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 18px; scrollbar-width: none; }
.t-chips::-webkit-scrollbar { display: none; }
.t-chips .chip { flex: none; }

@media (min-width: 760px) {
  .page-trabalho .t-capa, .page-trabalho .t-video { padding-left: 32px; padding-right: 32px; }
  .t-chips { padding-left: 32px; padding-right: 32px; flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 900px) {
  .t-video-wrap:not(.horizontal) { grid-template-columns: auto minmax(0, 420px); justify-content: center; gap: 72px; align-items: center; text-align: left; }
  .t-video-box.vertical { width: 380px; max-height: 82svh; }
  .t-video-wrap:not(.horizontal) .t-video-text { justify-items: start; }
  .t-video-text h2 { font-size: 56px; }
}
@media (min-width: 1200px) {
  .page-trabalho .cat-gallery { columns: 4; }
}
@media (min-width: 1024px) {
  /* tudo alinhado na mesma margem da galeria (6vw + 6px da moldura da foto) */
  /* --m: margem lateral; em telas muito largas o conteúdo fica centrado em 1680 px */
  .page-trabalho { --m: max(6vw, calc((100vw - 1680px) / 2)); }
  .page-trabalho .cat-gallery { padding-left: var(--m); padding-right: var(--m); }
  .page-trabalho .cat-cta { margin-left: var(--m); margin-right: var(--m); }
  .page-trabalho .see-also { padding-left: calc(var(--m) + 6px); padding-right: calc(var(--m) + 6px); }
  .page-trabalho .cat-head,
  .page-trabalho .t-capa, .page-trabalho .t-video,
  .t-chips { padding-left: calc(var(--m) + 6px); padding-right: calc(var(--m) + 6px); }
  .page-trabalho .t-capa-card img { max-height: 80svh; }
  .t-video-box { max-width: 1100px; margin: 0 auto; }
}