/*
 * GruposPro — Mobile Overrides
 * Garante que o layout mobile funcione mesmo com plugins ou CSS externos
 */

/* Viewport obrigatório — impede zoom involuntário */
@media (max-width: 767px) {

  /* === Layout base === */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
  }

  /* === Header === */
  .main-nav,
  .btn-submit   { display: none !important; }
  .btn-menu-toggle { display: flex !important; }
  .site-logo    { font-size: 17px !important; }

  /* === Grids === */
  .groups-grid,
  .groups-grid.featured {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* === Cards === */
  .group-card-thumb { aspect-ratio: 1/1 !important; }
  .group-card-body  { padding: 8px !important; }
  .group-card-footer{ padding: 0 8px 8px !important; }
  .group-card-title { font-size: 11px !important; }
  .btn-enter {
    font-size: 11px !important;
    padding: 9px 6px !important;
    width: 100% !important;
  }
  .btn-enter svg { display: none !important; }

  /* === Single grupo === */
  .single-group-header {
    flex-direction: row !important;
    gap: 12px !important;
  }
  .single-group-thumb {
    width: 68px !important;
    height: 68px !important;
    flex-shrink: 0 !important;
  }
  .single-group-title { font-size: 17px !important; }
  .btn-enter-large {
    width: 100% !important;
    font-size: 15px !important;
    min-height: 52px !important;
    display: flex !important;
    justify-content: center !important;
  }
  .vote-copy-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }
  .single-group-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* === Footer === */
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* === Filtros === */
  .filter-bar { overflow-x: auto !important; flex-wrap: nowrap !important; }

  /* === Imagens não quebram o layout === */
  img { max-width: 100% !important; height: auto !important; }

  /* === Textos não transbordam === */
  .group-card-title,
  .single-group-title,
  .page-hero-title {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}