/* ==========================================================================
   NEXUS — Override responsivo aditivo (carregado por último)
   Nao altera o template compilado. Remover o <link> reverte 100%.
   Autor: ajuste responsivo 2026-07-08
   ========================================================================== */

/* ----- MOBILE: ate 812px (breakpoint principal do template) ----- */
@media (max-width: 812px) {

  /* Evita overflow horizontal acidental da pagina */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ============ CARROSSEL LATERAL: projetos em destaque ============
     .project-list era grid (cards empilhados). Vira trilho horizontal
     com scroll-snap e "espiada" do proximo card. */
  .project-list {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    gap: 14px !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 2px;
    padding-bottom: 12px !important;
    /* trilho de scroll discreto */
    scrollbar-width: none;
  }
  .project-list::-webkit-scrollbar { height: 0; background: transparent; }

  .project-item {
    flex: 0 0 80% !important;
    max-width: 80% !important;
    width: 80% !important;
    float: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
  /* zera os margin-top de empilhamento vertical */
  .project-item:nth-child(n+3),
  .project-item:not(:first-child) { margin-top: 0 !important; }

  /* textos do card num tamanho legivel no carrossel (eram vw p/ grid) */
  .project-item-line-1 { font-size: 3.2vw !important; }
  .project-item-line-2 { font-size: 7vw !important; }

  /* dica visual de "arraste" abaixo do trilho */
  .project-list::after {
    content: "";
  }
}

/* Telas bem estreitas: card ocupa mais, espiada menor */
@media (max-width: 480px) {
  .project-item { flex-basis: 82% !important; max-width: 82% !important; width: 82% !important; }
}