/* ==========================================================================
   Kalcfy — Responsividade
   Base mobile-first definida em style.css e calculators.css.
   Aqui ficam apenas os ajustes por faixa de largura, do maior para o menor,
   mais os refinamentos para telas grandes no fim do arquivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Até 1024px — notebooks pequenos e tablets em paisagem
   A barra lateral deixa de ser fixa e passa a ficar abaixo do conteúdo.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .calc-sidebar {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: var(--space-6);
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .category-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* --------------------------------------------------------------------------
   Até 860px — tablets em retrato e celulares grandes
   O menu principal vira menu sanfonado e a busca sai do cabeçalho.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .header-search { display: none; }
  .header-nav > a,
  .has-dropdown { display: none; }
  .menu-toggle { display: inline-flex; }

  .hero { padding: var(--space-6) 0 var(--space-5); }
  .hero h1 { max-width: none; }
  .section { padding: var(--space-6) 0; }

  .page-narrow { max-width: none; }
  .calc-sidebar { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  /* Anúncios não devem empurrar demais o conteúdo em telas médias. */
  .ad-slot-lg { min-height: 160px; }
}

/* --------------------------------------------------------------------------
   Até 640px — celulares
   Tudo passa a uma coluna e os controles ganham área de toque confortável.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body { font-size: 15.5px; }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.32rem; }

  .container { padding: 0 var(--space-4); }

  .tool-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: 1fr; }

  .hero-stats { gap: var(--space-5); }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-lead { font-size: 1rem; }

  .card { padding: var(--space-4); border-radius: var(--radius); }
  .calc-header .lead { font-size: .98rem; }

  /* Botões de ação ocupam mais largura para facilitar o toque. */
  .form-actions .btn,
  .consent-actions .btn { flex: 1 1 100%; }
  .calc-tools .btn,
  .result-actions .btn { flex: 1 1 calc(50% - var(--space-2)); justify-content: center; }

  .field-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .counter-grid { grid-template-columns: 1fr 1fr; }

  /* As abas de modo rolam na horizontal em vez de quebrar em várias linhas. */
  .mode-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .mode-tabs::-webkit-scrollbar { display: none; }
  .mode-tab { flex: 0 0 auto; }

  .keypad { gap: 6px; }
  .key { padding: 14px 2px; font-size: .95rem; }

  .footer-grid { grid-template-columns: 1fr; }
  .consent { padding: var(--space-4); bottom: 8px; left: 8px; right: 8px; }

  .breadcrumb { font-size: .8rem; }
  .side-card { padding: var(--space-4); }
}

/* --------------------------------------------------------------------------
   Até 480px — celulares comuns
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .category-grid { grid-template-columns: 1fr; }
  .calc-tools .btn,
  .result-actions .btn { flex: 1 1 100%; }
  .timer-actions .btn { flex: 1 1 calc(50% - var(--space-3)); }
  .dyn-row { grid-template-columns: 1fr auto; }
  .dyn-row .field { grid-column: 1 / -1; }
  .dyn-row .row-remove { grid-column: 2; justify-self: end; }
}

/* --------------------------------------------------------------------------
   Até 380px — menor tela suportada
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .container { padding: 0 12px; }

  .result-grid,
  .counter-grid,
  .field-grid { grid-template-columns: 1fr; }

  .brand-name { font-size: 1.1rem; }
  .key { padding: 12px 2px; font-size: .88rem; }
  .field input, .field select, .field textarea { padding: 11px 12px; }

  .timer-actions .btn { flex: 1 1 100%; }
  .result-main { font-size: 2rem; }
  table.data { font-size: .85rem; }
  table.data th, table.data td { padding: 9px 10px; }
}

/* --------------------------------------------------------------------------
   A partir de 1280px — telas largas
   Mais respiro entre as colunas, sem esticar a linha de leitura.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-7); }
  .section { padding: var(--space-8) 0; }
  .prose p, .prose li { max-width: 74ch; }
}

/* --------------------------------------------------------------------------
   Preferências do sistema
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Em telas de toque, alvos clicáveis respeitam a área mínima recomendada. */
@media (hover: none) {
  .btn, .mode-tab, .fav-btn, .icon-btn, .key, .row-remove { min-height: 44px; }
  .side-card a { padding: 11px 10px; }
}