/* links.css: a página /links (design-system.md §4.5, §5.9). Mobile primeiro, coluna de até 480 px, sem JavaScript. */

.links { display: flex; justify-content: center; min-height: 100vh; min-height: 100dvh; }
.links__coluna { display: flex; flex-direction: column; gap: var(--esp-5); width: 100%; max-width: 30rem; padding: var(--esp-5); }

.links__topo { display: grid; justify-items: center; gap: var(--esp-4); padding-top: var(--esp-4); text-align: center; }
.links__marca a { display: block; border-radius: var(--raio); }
.links__marca .marca { width: 150px; height: auto; }
.links__bio { color: var(--cor-texto-suave); max-width: 24rem; }

/* vídeo em destaque: a área toda é o link */
.destaque {
  display: grid; gap: var(--esp-3); padding: var(--esp-3);
  border: var(--borda) solid var(--cor-borda); border-radius: var(--raio);
  background-color: var(--cor-superficie); text-decoration: none;
}
.destaque__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--raio); }
.destaque__thumb img { width: 100%; height: 100%; object-fit: cover; }
.destaque__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--raio-pilula);
  background-color: var(--cor-sobreposicao); color: var(--cor-pagina);
  transition: background-color var(--dur-micro) var(--curva-suave), color var(--dur-micro) var(--curva-suave);
}
.destaque__play .icone { width: 1.5rem; height: 1.5rem; fill: currentColor; translate: 2px 0; }
.destaque__texto { display: grid; gap: var(--esp-1); padding-inline: var(--esp-1); }
.destaque__titulo {
  font-family: var(--da-fonte-subtitulo); font-weight: var(--fw-h3); font-size: var(--fs-h3); line-height: var(--lh-h3);
}
@media (hover: hover) and (pointer: fine) {
  .destaque:hover .destaque__play { background-color: var(--cor-destaque); color: var(--cor-sobre-destaque); }
  .destaque:hover .destaque__titulo { text-decoration: underline; text-underline-offset: 3px; }
}

.links__lista { display: grid; gap: var(--esp-3); }
.links__lista .botao { justify-content: flex-start; width: 100%; padding-inline: var(--esp-4); }
.links__lista .botao > span:not(.sr):not(.icone) { flex: 1; text-align: left; }
/* 404: botões sem ícone, rótulo centrado */
.links__lista--centro .botao { justify-content: center; }
.links__lista--centro .botao > span:not(.sr):not(.icone) { flex: none; text-align: center; }

.links__rodape { margin-top: auto; padding-block: var(--esp-4) var(--esp-2); text-align: center; }
.links__rodape a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--esp-3); text-underline-offset: 3px; }