/* Ajustes responsivos — o layout base vem dos estilos inline do index.html.
   Como quase tudo lá é style="", quase todas as regras daqui precisam de
   !important. Nas telas estreitas as duas seções com scroll horizontal
   (Trajetória e Ferramentas) viram listas verticais; o app.js desliga o
   script delas no mesmo breakpoint (const NARROW). */

img { max-width: 100%; }

/* ================= até 900px ================= */
@media (max-width: 900px) {

  /* ---- Topo: marca + WhatsApp na 1ª linha, menu rolando na 2ª ---- */
  header > div:last-child {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    padding: 12px 16px !important;
  }
  header [data-brand-photo] { display: none !important; }
  header a[href="#inicio"] > span:last-child > span:first-child { font-size: 18px !important; }
  header a[href="#inicio"] > span:last-child > span:last-child { display: none !important; }

  header nav {
    order: 3;
    width: 100%;
    margin-left: 0 !important;
    gap: 2px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav > a { padding: 8px 11px !important; font-size: 14px !important; }

  header > div:last-child > a[href^="https://wa.me"] {
    margin-left: auto;
    padding: 11px 16px !important;
    font-size: 14px !important;
  }

  /* ---- Hero: parede de prints mais discreta para o texto ficar legível ---- */
  #inicio {
    justify-content: flex-start !important;   /* senão o conteúdo sobe por baixo do topo fixo */
    min-height: 0 !important;
    padding: 116px 20px 52px !important;
  }
  #inicio drift-wall { opacity: .34; }
  #inicio h1,
  #inicio p { mix-blend-mode: normal !important; }

  /* ---- Trajetória: lista vertical ---- */
  #trajetoria { height: auto !important; }
  #trajetoria [data-hsticky] {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  #trajetoria [data-hhead] { padding: 64px 20px 20px !important; }
  #trajetoria [data-hprogress] { display: none !important; }
  #trajetoria [data-hviewport] {
    display: block !important;
    overflow: visible !important;
  }
  #trajetoria [data-hstrip] {
    display: block !important;
    transform: none !important;
  }
  #trajetoria [data-htrackbox] {
    width: auto !important;
    height: auto !important;
  }
  #trajetoria [data-htrack] {
    position: static !important;
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    width: auto !important;
    height: auto !important;
    padding: 0 20px 76px !important;
    transform: none !important;
  }
  #trajetoria [data-htrack] > svg,
  #trajetoria [data-htrack] > div:not([data-stop]) { display: none !important; }
  #trajetoria [data-stop] {
    position: static !important;
    width: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #trajetoria [data-stop] p {
    display: block !important;
    -webkit-line-clamp: none !important;
  }

  /* ---- Ferramentas: seção normal, sem painel deslizante ---- */
  #ferramentas {
    margin-top: 0 !important;
    height: auto !important;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
  #ferramentas [data-fsticky] {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  #ferramentas [data-fpanel] {
    position: static !important;
    transform: none !important;
    padding: 64px 20px 76px !important;
    border-left: 0 !important;
    box-shadow: none !important;
  }
  #ferramentas [data-tile] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ================= até 640px ================= */
@media (max-width: 640px) {

  /* título e etiqueta dos cards param de brigar por espaço */
  #cases div:has(> h3),
  #projetos div:has(> h3) { flex-wrap: wrap !important; gap: 2px 12px !important; }
  #cases h3 { font-size: 19px !important; }

  /* alvos de toque maiores nos filtros */
  [data-tabs] button { padding: 12px 18px !important; }
}