/* =============================================================
   DOCES PALESTINA — Responsividade
   Arquivo: assets/css/responsivo.css
   Desenvolvedor: Juliano Alves
   Descrição: Media queries mobile-first. Breakpoints:
              375px, 576px, 768px, 992px, 1200px
   ============================================================= */

/* -----------------------------------------------------------
   Base: Mobile-first (375px+)
   ----------------------------------------------------------- */

/* Header mobile */
@media (max-width: 991px) {
  .site-header { height: var(--header-altura-mobile); }
  .nav-desktop  { display: none; }
  .header-whatsapp { display: none; }
  .btn-hamburguer   { display: flex; }
  .nav-mobile       { display: flex; }

  .header-logo img      { height: 38px; }
  .header-logo-texto .nome { font-size: var(--tamanho-lg); }
  .header-logo-texto .slogan { display: none; }
}

/* Footer mobile */
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--esp-8);
  }
  .footer-barra {
    flex-direction: column;
    text-align: center;
  }
}

/* Hero mobile */
@media (max-width: 767px) {
  .hero { min-height: 90svh; }
  .hero-titulo { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .hero-subtitulo { font-size: var(--tamanho-base); }
  .hero-acoes { gap: var(--esp-3); }
  .hero-stats { gap: var(--esp-6); }
  .hero-stat-item .numero { font-size: var(--tamanho-2xl); }
  .hero-scroll { display: none; }
}

/* Seções */
@media (max-width: 767px) {
  .secao { padding-block: var(--esp-12); }
  .secao-cabecalho h2 { font-size: var(--tamanho-2xl); }
  .banner-pagina h1   { font-size: var(--tamanho-3xl); }
}

/* Mobile portrait: sempre 2 colunas */
@media (max-width: 767px) and (orientation: portrait) {
  .grid-cards,
  .grid-cards--2,
  .grid-cards--3,
  .grid-cards--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* Espaçamento menor entre os cards */
  }

  /* Ajustes para deixar o card de produto compacto no mobile vertical */
  .produto-card__badge {
    top: var(--esp-2);
    left: var(--esp-2);
    font-size: 9px;
    padding: 2px 6px;
  }

  .produto-card__corpo {
    padding: var(--esp-3);
  }

  .produto-card__categoria {
    font-size: 9px;
    margin-bottom: 2px;
  }

  .produto-card__nome {
    font-size: var(--tamanho-base);
    margin-bottom: var(--esp-1);
    line-height: 1.2;
  }

  .produto-card__descricao {
    display: none; /* Não exibe descrição no mobile vertical */
  }

  .produto-card__rodape {
    padding: var(--esp-3);
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-2);
  }

  .produto-card__info {
    gap: 2px;
  }

  .produto-card__info span {
    font-size: 10px;
    line-height: 1.2;
  }

  .produto-card__btn-detalhe {
    padding: var(--esp-1.5) var(--esp-3);
    font-size: 11px;
    width: 100%;
    text-align: center;
  }

  /* Na Home, mostrar no máximo 4 cards (esconde do 5º em diante) */
  #produtos-destaque .grid-cards .produto-card:nth-child(n+5),
  #produtos-destaque .grid-cards--3 .produto-card:nth-child(n+5) {
    display: none;
  }
}

/* Mobile landscape e tablets: 2 colunas para grids de 3 ou 4 */
@media (max-width: 767px) and (orientation: landscape) {
  .grid-cards--3,
  .grid-cards--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) and (orientation: landscape) {
  .grid-cards,
  .grid-cards--2 {
    grid-template-columns: 1fr;
  }
}

/* Modal de produto mobile */
@media (max-width: 639px) {
  .produto-modal__corpo {
    grid-template-columns: 1fr;
  }
  .produto-modal__foto {
    aspect-ratio: 16/9;
  }
  .produto-modal {
    max-height: 95vh;
  }
}

/* Contato grid */
@media (max-width: 767px) {
  .contato-grid {
    grid-template-columns: 1fr;
    gap: var(--esp-8);
  }
  .contato-form-box { padding: var(--esp-6); }
}

/* Admin responsivo */
@media (max-width: 1023px) {
  .admin-sidebar { display: none; }
  .admin-main    { padding: var(--esp-5); }
  .admin-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-tabela-wrapper { overflow-x: auto; }
}
@media (max-width: 575px) {
  .dashboard-stats { grid-template-columns: 1fr; }
}

/* Bloqueio portrait no painel admin */
@media (orientation: portrait) {
  .admin-portrait-lock { display: flex; }
}

/* -----------------------------------------------------------
   Desktop grande (1200px+)
   ----------------------------------------------------------- */
@media (min-width: 1200px) {
  :root { --container-pad: var(--esp-8); }
  .hero-imagem-deco { display: block; }
  .grid-cards--4 { grid-template-columns: repeat(4, 1fr); }
  .grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------
   Print
   ----------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .btn-whatsapp-flutuante,
  .nav-mobile,
  .btn-hamburguer { display: none !important; }
  body { background: #fff; color: #000; }
}