/* =============================================================================
   nav.css — barra de navegação e regras de telemóvel partilhadas
   Usada por projetos.html e audiovisual.html.

   Estas páginas não tinham UMA ÚNICA media query: a navbar era um flex numa
   só linha com `justify-content: space-between`, por isso em ecrãs estreitos
   o nome era espremido até partir em quatro linhas e os links saíam do ecrã.
   Esta folha entra DEPOIS do <style> de cada página, por isso ganha nos
   empates de especificidade.
   ============================================================================= */

/* ---------- o logo da lua ---------- */
.brand-avatar {
  width: 42px;
  height: 42px;
  /* sem isto o flex esmaga o círculo até virar uma elipse quando o
     espaço aperta — era o que se via no telemóvel */
  flex: 0 0 42px;
  border-radius: 50%;
  background: none;
  padding: 0;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(120, 170, 255, 0.42));
  transition: filter 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.brand-avatar img,
.brand-avatar svg { display: block; width: 100%; height: 100%; }
.brand:hover .brand-avatar {
  filter: drop-shadow(0 0 20px rgba(150, 200, 255, 0.7));
  transform: rotate(-6deg) scale(1.04);
}

/* o nome não deve partir a meio de uma palavra */
.brand > div { min-width: 0; }
.brand-name { line-height: 1.15; white-space: nowrap; }
.brand-role {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.25;
}

/* ---------- tablet: os links passam para baixo antes de espremerem ---------- */
@media (max-width: 900px) {
  .navbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem 1.1rem;
    padding: 1rem 1.25rem;
    border-radius: 28px;
    margin-bottom: 2.5rem;
  }
  .brand { flex: 1 1 100%; justify-content: center; text-align: left; }
  .nav-links { flex: 1 1 100%; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
}

/* ---------- ecrã estreito: a grelha cai para uma coluna quando aperta ----------
   Este bloco tem de vir ANTES do de 620px. Especificidade igual = ganha o
   último no ficheiro, por isso um `max-width` maior colocado depois anularia
   as regras do ecrã mais pequeno. Ordem: do mais largo para o mais estreito. */
@media (max-width: 820px) {
  .video-grid, .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  }
}

/* ---------- telemóvel ---------- */
@media (max-width: 620px) {
  .navbar {
    padding: 0.9rem 1rem;
    border-radius: 22px;
    gap: 0.7rem;
    margin-bottom: 2rem;
    /* blur em tempo real é caro e aqui não acrescenta nada */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.92);
  }
  .brand { gap: 0.6rem; font-size: 0.98rem; }
  .brand-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .brand-role { font-size: 0.68rem; }

  /* alvos de toque com 44px, como manda a norma de acessibilidade */
  .nav-link, .nav-btn, .filter-btn, .watch-btn, .action-btn, .btn-main {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-link { padding: 0 0.5rem; font-size: 0.92rem; }
  .nav-btn  { padding: 0.6rem 1.15rem; font-size: 0.88rem; }

  .container { padding: 1.25rem 1.15rem 4rem; }

  /* tipografia fluida: 2.8rem fixos transbordavam num ecrã de 390px */
  .header-title { font-size: clamp(1.85rem, 8vw, 2.4rem); line-height: 1.15; }
  .header-desc  { font-size: 0.98rem; }
  .header-section { margin-bottom: 2.5rem; }

  /* As grelhas usavam minmax(350px, 1fr). Num ecrã de 390px o conteúdo
     tem ~360px úteis, por isso a coluna de 350px forçava scroll lateral.
     min() faz a coluna encolher com o ecrã em vez de o empurrar. */
  .video-grid, .projects-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .filter-tabs { flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
  .tools-list, .tech-tags { flex-wrap: wrap; }
  .card-footer { flex-wrap: wrap; gap: 0.6rem; }
}

@media (max-width: 380px) {
  .container { padding: 1rem 0.85rem 3.5rem; }
  .brand-role { display: none; }   /* num ecrã destes só cabe o nome */
}

@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-avatar { transform: none; }
}