/* =========================
   Mobile overrides (≤ 768px)
   ========================= */
@media (max-width: 768px) {

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* NAV */
  nav {
    min-height: auto;
    padding: 12px 0;
  }
  nav .container {
    flex-direction: row;
    align-items: flex-start;
    align-items: center;
    gap: 12px;
    height: 80px;
  }
  nav .logo { font-size: 18px; }
  /* wp_nav_menu costuma renderizar <ul><li> — garante wrap vertical ou em linha quebrando */
  nav .links,
  nav .links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    margin: 0;
  }
  nav .links li { margin: 0; list-style: none; }
  nav a { font-size: 16px; line-height: 24px; }

  /* Títulos */
  h1 { font-size: 36px; line-height: 1.2; }
  h2 { font-size: 28px; line-height: 1.3; }
  h3 { font-size: 22px; line-height: 1.4; }

  .main-title {
    padding: 24px 0;
    gap: 6px;
  }

  /* MAIN BANNER */
  #main-banner { margin-bottom: 40px; }
  #main-banner iframe {
    height: 220px; /* evita 60vh gigante no mobile */
  }
  #main-banner .desc {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    align-items: normal;
  }
  #main-banner .desc .text { gap: 6px; }

  /* ABAS (roláveis) */
  .tabs {
    gap: 12px;
    padding-bottom: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .tab {
    height: 80px;
    padding: 0 12px;
    white-space: collapse;
    font-size: 14px;
  }

  /* GRID DE PROJETOS → 1 coluna */
  .projects {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* ABOUT (duas colunas → empilhado) */
  #about {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
  }
  #about .desc { padding: 16px; }
  #about .col .about-img {
    width: 100%;
    height: auto;
  }

  /* PÁGINA PADRÃO */
  .page-content {
    margin: 20px 0;
  }
  .page-cover img {
    height: auto;          /* em vez de 400px fixos */
  }

  /* GALERIA / SWIPER */
  .galeria { width: 100%; }
  .swiper { height: auto; }
  .swiper-slide {
    max-width: 100%;
    padding: 0;
  }
  .swiper-slide img {
    width: 100%;
    height: auto;          /* evita corte vertical */
    object-fit: cover;
  }

  /* SINGLE PROJECT (no seu CSS a classe é .project) — empilhar */
  .project {
    flex-direction: column-reverse !important;
    padding: 24px 0;
  }
  .project article {
    order: 1;
    gap: 16px;
    width: 100%;
  }
  .project .sidebar {
    order: 2;
    width: 100% !important;
    max-width: none !important;
    padding: 16px;
    gap: 12px;
  }
  .project .sidebar ul { gap: 10px; }

  /* BOTÕES */
  .btn-main {
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
  }

  /* FOOTER */
  footer { padding: 24px; text-align: center;}
  footer .container {
    flex-direction: column;
    gap: 12px;
  }
}