/* ============================================================
   ORDO · DESKTOP.CSS — camada de layout para telas largas.

   REGRA DE OURO: tudo aqui vive dentro de @media (min-width: 1024px).
   Abaixo de 1024px NADA deste arquivo aplica — o app continua
   exatamente o mobile de sempre (uma coluna centralizada + bottom nav).

   No desktop: sidebar fixa à esquerda + conteúdo em coluna larga,
   com as faixas de cards virando GRADES que aproveitam a largura.
   ============================================================ */

/* A sidebar é sempre display:none fora do desktop (mesmo com hidden removido
   pelo JS). Isso garante que o celular nunca a veja. */
.dtop-side { display: none; }

@media (min-width: 1024px) {

  :root {
    --dtop-side-w: 248px;         /* largura da barra lateral */
    --dtop-conteudo: 1080px;      /* largura máxima da área de conteúdo */
    --dtop-gutter: 40px;          /* respiro lateral do conteúdo */
  }

  /* ---------- SIDEBAR ---------- */
  .dtop-side {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--dtop-side-w);
    z-index: 120;
    padding: 28px 16px 20px;
    background: linear-gradient(180deg, rgba(10,17,16,.92), rgba(5,8,9,.92));
    backdrop-filter: blur(30px) saturate(1.3);
    -webkit-backdrop-filter: blur(30px) saturate(1.3);
    border-right: 1px solid var(--borda);
    overflow-y: auto;
  }
  .dtop-side__marca { text-align: center; padding: 4px 8px 22px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; }
  .dtop-side__logo { width: 46px; height: 46px; object-fit: contain; margin: 0 auto 8px; display: block; }
  .dtop-side__nome { font-family: var(--serif); letter-spacing: 6px; color: var(--c-ouro); font-size: 18px; }
  .dtop-side__tag { color: var(--c-txt-3); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }

  .dtop-side__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .dtop-nav__item {
    display: flex; align-items: center; gap: 13px;
    width: 100%; text-align: left;
    padding: 11px 14px; border-radius: var(--r-md);
    color: var(--c-txt-2); font-size: 14.5px; font-weight: 500;
    background: transparent; border: 1px solid transparent;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
  }
  .dtop-nav__ic { font-size: 18px; width: 22px; text-align: center; flex: 0 0 auto; }
  .dtop-nav__lbl { flex: 1; }
  .dtop-nav__item:hover { background: var(--glass-1); color: var(--c-txt); }
  .dtop-nav__item[aria-current="page"] {
    background: linear-gradient(120deg, rgba(200,163,106,.16), rgba(200,163,106,.05));
    border-color: var(--borda-ouro);
    color: var(--c-ouro);
  }

  .dtop-side__rodape { border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 8px; }
  .dtop-side__perfil {
    display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
    padding: 11px 14px; border-radius: var(--r-md); color: var(--c-txt-2); font-size: 14.5px;
    background: transparent; border: 1px solid transparent; transition: background .16s ease, color .16s ease;
  }
  .dtop-side__perfil:hover { background: var(--glass-1); color: var(--c-txt); }
  .dtop-side__perfil[aria-current="page"] { color: var(--c-ouro); }
  .dtop-side__perfil-ic { font-size: 18px; width: 22px; text-align: center; }

  /* esconde a sidebar nas telas sem shell (splash/login/etc.) */
  body.dtop-sem-side .dtop-side { display: none; }

  /* ---------- APP FRAME: abre para a tela toda, deslocado pela sidebar ---------- */
  #app {
    max-width: none;
    width: auto;
    margin-left: var(--dtop-side-w);
    margin-right: 0;
  }
  /* sem sidebar (splash/login): volta a ser coluna centralizada como no mobile */
  body.dtop-sem-side #app {
    margin-left: auto; margin-right: auto;
    max-width: var(--largura-conteudo);
  }

  /* header e bottomnav do mobile são fixos e estreitos: no desktop o header
     acompanha a largura do conteúdo e a bottom nav some (nav vai pra sidebar) */
  .bottomnav { display: none !important; }
  body.dtop-sem-side .bottomnav { display: flex !important; }

  .header {
    left: var(--dtop-side-w); transform: none;
    width: auto; right: 0; max-width: none;
    padding-inline: var(--dtop-gutter);
  }
  .header__titulo { max-width: var(--dtop-conteudo); margin-inline: auto; width: 100%; }
  body.dtop-sem-side .header { left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--largura-conteudo); }

  /* ---------- ROTA: coluna de conteúdo larga e centralizada ---------- */
  .rota {
    padding-inline: var(--dtop-gutter);
    padding-top: calc(var(--h-header) + var(--sp-6));
  }
  /* a folga do rodapé no desktop não precisa reservar a bottom nav */
  .rota::after { height: var(--sp-10); }

  /* tudo que a rota renderiza fica numa coluna central de largura confortável */
  .rota > * { max-width: var(--dtop-conteudo); margin-inline: auto; }

  /* ---------- FAIXAS VIRAM GRADES (aproveitam a largura) ---------- */
  /* as "pilhas" de cards de conteúdo deixam de ser 1 coluna e viram grade */
  .pilha { gap: var(--sp-4); }

  /* A Início e telas com cards-portal: grade responsiva de 2–3 colunas.
     Aplicada à pilha principal das telas de conteúdo. */
  .dtop-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-4);
    align-items: start;
  }
  .dtop-grade > * { margin: 0; }

  /* fitas horizontais (hábitos, categorias, chips): no desktop cabem sem rolar,
     então deixamos quebrar em linha larga (mais itens visíveis). */
  .fita-rolavel { flex-wrap: wrap; overflow-x: visible; }
  .fita-rolavel::after { display: none; }

  /* player de música/podcast: mais largo e arejado no desktop */
  .player { max-width: 640px; }
  .player-ctrl { gap: var(--sp-6); }

  /* leitura de artigo: coluna de texto confortável */
  .leitura__corpo { max-width: 68ch; }

  /* cards um pouco mais generosos no hover (feedback desktop) */
  .card--press { transition: transform .14s ease, box-shadow .14s ease; }
  .card--press:hover { transform: translateY(-2px); box-shadow: var(--sombra-flutuante); }
}

/* telas MUITO largas: limita o crescimento e centraliza melhor */
@media (min-width: 1600px) {
  :root { --dtop-conteudo: 1200px; }
}