/* ═══════════════════════════════════════════════════════════════
   Testemunhos em vídeo — estilos partilhados por /testemunhos/ e /en/testimonials/
   Layout: um vídeo em destaque no topo + grelha com os restantes.
   Só usa tokens de /shared/site.css (nada de hex soltos).
   ═══════════════════════════════════════════════════════════════ */

/* Contentor geral da secção de vídeos */
.tv { padding-block: 1rem 5rem; }
.tv__grid {
  display: grid;
  /* auto-fill: o browser decide quantas colunas cabem (mín. 280px cada) */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem 2rem;
  margin-top: 4rem;
}

/* ── Cartão (serve tanto o destaque como os da grelha) ── */
.tv-card { display: flex; flex-direction: column; gap: 1rem; margin: 0; }

/* O destaque ocupa a largura toda: vídeo à esquerda, texto à direita */
.tv-card--destaque {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

/* Moldura do vídeo. A proporção vem do atributo --ratio (16/9 por defeito,
   9/16 para vídeos gravados ao telemóvel na vertical). */
.tv-media {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-900);
  box-shadow: var(--shadow-card);
}
/* Vídeos verticais no destaque não podem ficar gigantes: limita a altura */
.tv-card--destaque .tv-media[style*="9 / 16"] { max-height: 78vh; margin-inline: auto; }

/* "Fachada": até o utilizador carregar, mostramos só a imagem de capa e um botão.
   O vídeo verdadeiro só é descarregado no clique — a página fica leve. */
.tv-play {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer;
  background: transparent;
}
.tv-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-play__icon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--ink-50);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur, .3s) var(--ease, ease);
}
.tv-play:hover .tv-play__icon { transform: translate(-50%, -50%) scale(1.08); }
/* Foco visível para quem navega por teclado (WCAG 2.4.7) */
.tv-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tv-card--destaque .tv-play__icon { width: 84px; height: 84px; }

/* Depois do clique, o <video> ou o <iframe> ocupam a moldura inteira */
.tv-media video, .tv-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Texto do cartão ── */
.tv-tag {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.tv-quote {
  margin: 0; font-family: var(--font-display); letter-spacing: -.02em;
  font-size: 1.15rem; line-height: 1.4; color: var(--ink-900);
}
.tv-card--destaque .tv-quote { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.tv-name { margin: 0; color: var(--ink-500); font-size: .9rem; }
.tv-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .8rem;
  color: var(--accent); text-decoration: none;
}
.tv-link:hover { text-decoration: underline; }

/* Transcrição escrita: acessibilidade (surdos, sem som) e SEO */
.tv-transcript summary { cursor: pointer; font-size: .85rem; color: var(--ink-500); }
.tv-transcript p { color: var(--ink-700); line-height: 1.65; font-size: .92rem; }

/* ── Esqueleto: blocos cinzentos enquanto não há vídeos na lista ── */
.tv-skel { display: contents; }
.tv-skel__block {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--ink-200) 0%, var(--ink-100) 50%, var(--ink-200) 100%);
  background-size: 200% 100%;
  animation: tv-shimmer 1.6s linear infinite;
}
.tv-skel .tv-media { background: none; box-shadow: none; }
.tv-skel .tv-media .tv-skel__block { position: absolute; inset: 0; border-radius: var(--r-lg); }
@keyframes tv-shimmer { to { background-position: -200% 0; } }
/* Quem pede menos movimento no sistema operativo não vê o brilho a correr */
@media (prefers-reduced-motion: reduce) { .tv-skel__block { animation: none; } }

/* ── Telemóvel: o destaque empilha (vídeo em cima, texto em baixo) ── */
@media (max-width: 900px) {
  .tv-card--destaque { grid-template-columns: 1fr; gap: 1.5rem; }
  .tv__grid { margin-top: 3rem; gap: 2.5rem; }
}