/* Galeria, vídeo e áudio */
/* ---------- Galeria: 4 colunas em masonry com deslocamento ----------
   Sem JS: grelha simples. Com JS: cada imagem entra na coluna mais curta. */
.gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}
.gallery.is-masonry { grid-auto-rows: 4px; row-gap: 0; }
/* Linha de tempo da galeria inteira: o parallax das imagens usa-a (R6, chat 17) */
.gallery { view-timeline: --gallery block; }
.gallery__item { margin: 0; }
/* Galeria com título por cima (lab 9): o parallax sobe as imagens até à deriva base;
   o espaço com o valor da deriva impede que passem por cima do título. */
.block-title + .gallery { padding-top: var(--parallax-drift); }
.gallery__item:nth-child(4n+1) { padding-top: var(--gallery-shift-1); }
.gallery__item:nth-child(4n+2) { padding-top: var(--gallery-shift-2); }
.gallery__item:nth-child(4n+3) { padding-top: var(--gallery-shift-3); }
.gallery__item:nth-child(4n+4) { padding-top: var(--gallery-shift-4); }
.gallery__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}
.gallery__open img { width: 100%; height: auto; }
/* Ícone de ampliar das galerias (C12): mais pequeno que o da imagem principal, para não tapar a
   imagem; 24px em telemóvel (a 320px a imagem tem 128px), 40px a partir de 768px */
.gallery__open .media-open__zoom { right: var(--space-2); bottom: var(--space-2); width: 1.5rem; height: 1.5rem; }
.gallery__open .media-open__zoom .icon { width: 0.875rem; height: 0.875rem; }
@media (min-width: 48em) {
  .gallery__open .media-open__zoom { right: var(--space-3); bottom: var(--space-3); width: 2.5rem; height: 2.5rem; }
  .gallery__open .media-open__zoom .icon { width: 1.25rem; height: 1.25rem; }
}

/* ---------- Vídeo: fachada com capa; o leitor abre na lightbox ---------- */
.figure-row { display: grid; gap: var(--space-6) var(--grid-gap); }
@media (min-width: 48em) { .figure-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.video-item { display: grid; gap: var(--space-3); align-content: start; }
.video-item .figure { margin: 0; }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.video__cover { position: absolute; inset: 0; }
.video__photo { position: absolute; inset: 0; background-position: center; background-size: cover; }
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--play-size);
  height: var(--play-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  color: var(--button-primary-text);
  background: var(--button-primary-bg);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background-color var(--duration-fade) var(--ease);
  --play-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E");
}
.video__play .icon { width: 40%; height: 40%; margin-inline-start: 6%; }
/* Play do site SCML (Bloco 46), sem contorno (chat 18, C18 e R5): o play em contorno enche-se
   da esquerda para a direita no hover e no foco. O ::after é o mesmo play cheio, por cima do SVG
   (40% do botão, deslocado 6% para a direita: começa a 33% e a 30%). */
.video__play::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 33%;
  width: 40%;
  height: 40%;
  background: currentColor;
  -webkit-mask: var(--play-fill) center / contain no-repeat;
  mask: var(--play-fill) center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.video__play:focus-visible::after { clip-path: inset(0); }
@media (hover: hover) {
  .video__play:hover { background: var(--button-primary-bg-hover); }
  .video__play:hover::after { clip-path: inset(0); }
}
/* Foco sobre imagem ou vídeo: anel branco com preto dos dois lados, visível sobre qualquer fundo */
.video__play:focus-visible {
  outline: var(--focus-width) solid var(--neutral-100);
  outline-offset: var(--focus-width);
  box-shadow: 0 0 0 calc(3 * var(--focus-width)) var(--neutral-0);
}
/* Cortina como nos botões: entra em 450ms, sai em 250ms. Sem transição com movimento reduzido. */
@media (prefers-reduced-motion: no-preference) {
  .video__play::after { transition: clip-path var(--duration-fade) var(--ease); }
  .video__play:focus-visible::after { transition: clip-path calc(var(--duration-hover) / 2) var(--ease-hover); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .video__play:hover::after { transition: clip-path calc(var(--duration-hover) / 2) var(--ease-hover); }
}


/* ---------- Áudio: comandos próprios, sem caixa ---------- */
.audio { display: grid; gap: var(--space-3); }
.audio__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--lh-heading); }
.audio__player { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.audio__time { font-size: var(--text-body-md); font-variant-numeric: tabular-nums; color: var(--color-text-muted); white-space: nowrap; }
.audio__progress { flex: 1 1 8rem; min-width: 8rem; }
.audio__volume { display: inline-flex; align-items: center; gap: var(--space-2); }
.audio__volume .range { width: 5rem; }

/* Barra de tempo e de volume: traço fino, cursor redondo */
.range { height: var(--target-min); margin: 0; background: transparent; accent-color: var(--color-accent); cursor: pointer; }
[data-theme="light"] .range { accent-color: var(--color-text); }

/* Galeria: colunas do bloco (campo da intranet, chat 27) a partir de 1024px; 4 por omissão.
   Abaixo, 2 (tokens.css). */
@media (min-width: 64em) {
  .gallery--3 { --gallery-columns: 3; }
  .gallery--5 { --gallery-columns: 5; }
}
/* Galeria de vídeos (decisões 2.29, agora no bloco Gallery): o vídeo do lab 3 em grelha;
   2 a partir de 768px, as colunas do bloco a partir de 1024px */
.video-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--grid-gap); align-items: start; }
@media (min-width: 48em) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .video-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .video-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Áudio a duas colunas (campo da intranet, chat 27): a partir de 768px */
.audio-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--grid-gap); align-items: start; }
@media (min-width: 48em) { .audio-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }