/* ========================================
   FIX COMPLETO DE RESPONSIVIDADE MOBILE
   ======================================== */

/* Garantir que viewport funcione */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Containers - forçar responsividade */
@media (max-width: 768px) {

  /* Container principal */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Header do Jornal - TÍTULO CLASSIFICADOS */
  .newspaper-header {
    padding: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Título principal "Classificados" */
  .font-serif.text-6xl,
  .font-serif.text-9xl,
  .text-6xl,
  .text-9xl {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  .font-serif.text-5xl,
  .text-5xl {
    font-size: 1.75rem !important;
  }

  .font-serif.text-4xl,
  .text-4xl {
    font-size: 1.5rem !important;
  }

  .text-3xl {
    font-size: 1.25rem !important;
  }

  .text-2xl {
    font-size: 1.125rem !important;
  }

  /* Subtítulos e textos */
  .newspaper-subtitle {
    font-size: 0.875rem !important;
  }

  /* Elementos decorativos - linhas */
  .h-1.w-20,
  .w-20 {
    width: 2rem !important;
  }

  /* Ícones grandes */
  .w-8.h-8 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  .w-16.h-16 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  /* Grid de estatísticas */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  /* Bordas grossas que quebram layout */
  .border-4 {
    border-width: 2px !important;
  }

  .border-b-4 {
    border-bottom-width: 2px !important;
  }

  /* Padding excessivo */
  .p-8 {
    padding: 1rem !important;
  }

  .p-6 {
    padding: 0.75rem !important;
  }

  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-12,
  .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Margens grandes */
  .mb-12,
  .mt-12 {
    margin-bottom: 2rem !important;
    margin-top: 2rem !important;
  }

  .mb-8,
  .mt-8 {
    margin-bottom: 1.5rem !important;
    margin-top: 1.5rem !important;
  }

  /* Inputs e forms */
  input,
  select,
  textarea,
  button {
    font-size: 16px !important; /* Previne zoom no iOS */
    max-width: 100% !important;
  }

  /* Tabelas e elementos largos */
  table {
    width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }

  /* Imagens */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Flexbox que quebra */
  .flex {
    flex-wrap: wrap !important;
  }

  /* Sidebar/Aside em mobile - full width */
  aside,
  .lg\:col-span-1 {
    grid-column: span 1 / span 1 !important;
  }

  /* Main content - full width */
  main,
  .lg\:col-span-2,
  .lg\:col-span-3 {
    grid-column: span 1 / span 1 !important;
  }

  /* Grid layouts - stack em mobile */
  .grid-cols-1.md\:grid-cols-2,
  .grid-cols-1.md\:grid-cols-3,
  .grid-cols-1.md\:grid-cols-4,
  .grid-cols-1.lg\:grid-cols-4,
  .grid-cols-1.lg\:grid-cols-5 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Max widths que quebram mobile */
  .max-w-2xl,
  .max-w-3xl,
  .max-w-4xl,
  .max-w-6xl,
  .max-w-7xl,
  .max-w-md {
    max-width: 100% !important;
  }

  /* Elementos que saem da tela */
  * {
    max-width: 100vw !important;
    word-wrap: break-word !important;
  }

  /* Sticky elements problemáticos */
  .sticky {
    position: relative !important;
  }

  /* Shadow muito pesadas */
  .shadow-2xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  }
}

/* Para telas muito pequenas (< 375px) */
@media (max-width: 375px) {
  .font-serif.text-6xl,
  .font-serif.text-9xl,
  .text-6xl,
  .text-9xl {
    font-size: 1.5rem !important;
  }

  .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .p-4,
  .p-6,
  .p-8 {
    padding: 0.5rem !important;
  }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .font-serif.text-6xl,
  .font-serif.text-9xl {
    font-size: 1.5rem !important;
  }
}