/* ============================================================
   TOQUE DE LUZ — Desktop layout
   Celular (< 768px): ZERO mudança
   Desktop (>= 768px): centralizado, header no topo, sem bottom-nav
   ============================================================ */

@media (min-width: 768px) {

  /* Fundo da página */
  html, body {
    background: #f2ece8 !important;
  }

  /* App centralizado */
  .app {
    max-width: 860px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: transparent !important;
    display: block !important;
    padding-bottom: 3rem;
  }

  /* ---- HEADER: logo à esquerda, player à direita ---- */
  .header {
    background: linear-gradient(135deg, #3a0f1e 0%, #6a2038 100%);
    border-radius: 0 0 16px 16px;
    padding: 0.875rem 1.5rem !important;
    margin-bottom: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(58,15,30,0.2);
  }

  /* Linha do topo do header: logo + redes + player */
  .header-top {
    margin-bottom: 0.75rem;
  }

  /* Player ocupa largura toda no header desktop */
  .player {
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    margin: 0;
  }

  /* ---- NAV: fica abaixo do player no header ---- */
  .bottom-nav {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0.5rem 0 0 !important;
    display: flex !important;
    justify-content: center;
    gap: 4px;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }

  .nav-item {
    flex: 0 1 auto !important;
    flex-direction: row !important;
    gap: 5px;
    padding: 6px 16px !important;
    border-radius: 100px;
    font-size: 0.8rem !important;
    color: rgba(255,255,255,0.65) !important;
    height: auto !important;
    white-space: nowrap;
  }

  .nav-item .nav-icon { font-size: 0.95rem !important; }
  .nav-item:hover    { background: rgba(255,255,255,0.1) !important; color: white !important; }
  .nav-item.active   { background: rgba(194,96,122,0.4) !important; color: white !important; }

  /* Links que vão para páginas externas */
  a.nav-item, a.nav-evangelho {
    color: rgba(255,255,255,0.65) !important;
    text-decoration: none;
  }
  a.nav-item:hover { background: rgba(255,255,255,0.1) !important; color: white !important; }

  /* ---- CONTEÚDO ---- */
  .content {
    padding-bottom: 1rem !important;
    overflow: visible !important;
  }

  .screen.active {
    padding: 0 0.5rem;
  }

  /* section-pad com espaçamento desktop */
  .section-pad {
    padding: 1.25rem 0;
  }

  /* Cards ficam com sombra sutil */
  .card,
  .devo-card,
  .msg-card,
  .meta-card,
  .form-card,
  .reflexao-card,
  .pix-card {
    box-shadow: 0 2px 12px rgba(58,15,30,0.06);
  }

  /* Devocional um pouco maior */
  .devo-card {
    font-size: 1rem;
  }

  .devo-title {
    font-size: 1.5rem !important;
  }

  /* Grid de autores: 4 colunas no desktop */
  .autores-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Blog: 2 colunas */
  #screen-blog > div:last-child {
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem;
  }

  /* ---- MODAL centralizado ---- */
  .modal-overlay {
    max-width: 100vw !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .modal {
    border-radius: 16px !important;
    max-width: 580px !important;
    margin: 0 auto !important;
    max-height: 85vh;
  }

  /* Toast mais alto */
  .toast { bottom: 2rem; }

  /* PWA banner */
  #pwa-install-banner {
    bottom: 2rem;
    width: calc(100% - 2rem);
    max-width: 500px;
  }

  /* Esconder padding extra do section-pad no topo */
  .screen.active > .section-pad:first-child {
    padding-top: 0;
  }
}

/* ---- DESKTOP LARGO (>= 1024px) ---- */
@media (min-width: 1024px) {
  .app {
    max-width: 960px !important;
  }

  .autores-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  #screen-blog > div:last-child {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}