/* ===================================================================
   Arte Leila — ajustes responsivos (mobile / tablet)
   Mantido em arquivo separado do index.html para organização.
   As regras usam !important porque o layout base é escrito com
   estilos inline (style="...") no HTML, que têm precedência maior
   que uma folha de estilo externa comum.
   =================================================================== */

/* ---------- Tablet e celulares grandes (<= 820px) ---------- */
@media (max-width: 820px) {

  /* Nav */
  .nav-inner { padding: 14px 20px !important; }
  .nav-logo-text { font-size: 26px !important; }
  .nav-links { gap: 16px !important; }

  /* Hero */
  .hero {
    padding: 48px 20px 56px !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .hero-eyebrow { display: none !important; }
  .hero-title { font-size: 40px !important; }
  .hero-sub { font-size: 17px !important; max-width: 100% !important; }
  .hero-cta-row { display: none !important; }
  .hero-image { height: 320px !important; }
  .hero-badge {
    left: 14px !important;
    bottom: -18px !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  /* Categorias */
  .cat-grid {
    padding: 40px 20px !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .cat-middle {
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid rgba(74,58,47,.14) !important;
    border-bottom: 1px solid rgba(74,58,47,.14) !important;
    padding: 24px 0 !important;
  }

  /* Peças / galeria */
  #pecas { padding: 40px 20px !important; }
  .pecas-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .pecas-actions { align-items: flex-start !important; width: 100% !important; }
  .pecas-desc { text-align: left !important; max-width: 100% !important; }
  .pecas-scroller { margin: 0 -20px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .peca-card {
    flex: 0 0 72vw !important;
    width: 72vw !important;
    height: 380px !important;
  }

  /* Sobre */
  .sobre-grid {
    padding: 48px 20px !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .sobre-image { height: 320px !important; }
  .sobre-badge { width: 72px !important; height: 72px !important; bottom: -14px !important; right: -14px !important; }
  .sobre-title { font-size: 42px !important; }
  .sobre-text { font-size: 17px !important; }

  /* CTA final */
  .cta-inner { padding: 56px 20px !important; }
  .cta-sub { font-size: 17px !important; max-width: 100% !important; }

  /* Headings compartilhados (h2 de seção) */
  .section-title { font-size: 32px !important; }

  /* Footer */
  .footer-inner { padding: 40px 20px 28px !important; gap: 28px !important; }
  .footer-links-wrap { gap: 28px !important; }
  .footer-bottom { padding: 16px 20px !important; flex-direction: column !important; text-align: center !important; gap: 8px !important; }
}

/* ---------- Celulares pequenos (<= 480px) ---------- */
@media (max-width: 480px) {

  /* Esconde links de texto do nav, mantém logo + botão de WhatsApp (CTA principal) */
  .nav-text-link { display: none !important; }

  .hero-title { font-size: 32px !important; }
  .hero-image { height: 260px !important; }

  .sobre-image { height: 260px !important; }
  .sobre-title { font-size: 34px !important; }

  .peca-card {
    flex: 0 0 80vw !important;
    width: 80vw !important;
    height: 340px !important;
  }

  .section-title { font-size: 28px !important; }
}