/* ============================================================
   Chrome compartilhado das páginas de case (Digital Flow Studio)
   Nav (dropdown, igual à home) + cards de "Outros projetos".
   Linkado DEPOIS do <style> inline de cada página → padroniza/override.
   Fonte de dados: cases.js
   ============================================================ */

/* ---------- Nav: fixo, transparente, sobre o hero escuro ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 22px 20px; background: transparent; border-bottom: 0; display: block;
}
.nav__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav__logo {
  font-family: 'Onest', sans-serif; font-weight: 700; letter-spacing: -0.03em;
  color: #fff; font-size: 1.0625rem; text-decoration: none;
  text-shadow: 0 1px 14px rgba(16, 24, 40, 0.45);
  transition: opacity 0.2s, visibility 0.2s;
}
.nav--solid .nav__logo { opacity: 0; visibility: hidden; }
.nav__logo:hover { opacity: 0.9; }
.nav__menu { display: flex; align-items: center; }
.nav__drop { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: 'Onest', sans-serif; font-size: 1rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.95); padding: 0.55rem 1.15rem;
  background: rgba(16, 24, 40, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.12); transition: background 0.2s;
}
.nav__link:hover { background: rgba(16, 24, 40, 0.6); }
.nav__link svg { transition: transform 0.2s; }
.nav__drop:hover .nav__link svg,
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__menu2 {
  position: absolute; top: calc(100% + 14px); right: 0; min-width: 244px;
  background: #fff; border: 1px solid #E4E7EC; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.1); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.nav__drop:hover .nav__menu2,
.nav__drop:focus-within .nav__menu2 { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__case { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.nav__case:hover { background: #F1F6FA; }
.nav__casename { font-family: 'Onest', sans-serif; font-weight: 600; color: #101828; font-size: 1rem; }
.nav__caseseg { font-family: 'Onest', sans-serif; font-size: 0.875rem; color: #667085; }

/* ---------- Cards de "Outros projetos": thumb maior e consistente ---------- */
.project-card-thumb {
  height: auto; aspect-ratio: 16 / 9;
  background: #F4F5F7; overflow: hidden;
}
.project-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 768px) {
  .nav { padding: 16px 16px; }
}