/* ══════════════════════════════════════════════════════════
   FlowZ — camada desktop compartilhada  (html.desktop)
   Ativada pela detecção injetada em cada página. Todo o escopo é
   html.desktop + @media (min-width:1024px) → o layout mobile fica
   100% intocado. Enriquecimentos por página vêm por cima disto.
   ══════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  html.desktop{ color-scheme:dark; }

  /* scrollbar fina, escura (combina com o tema) */
  html.desktop ::-webkit-scrollbar{ width:11px; height:11px; }
  html.desktop ::-webkit-scrollbar-track{ background:transparent; }
  html.desktop ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
  html.desktop ::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); background-clip:padding-box; }

  /* container: abre a coluna mobile (~440–680px) numa coluna desktop
     confortável e centralizada, sem esticar demais o conteúdo */
  html.desktop .app,
  html.desktop .wrap{ max-width:min(94vw, 900px); }

  /* grids que já existem no HTML viram multi-coluna no desktop */
  html.desktop .rooms-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:14px;
  }

  /* hover sutil em cards que são links */
  html.desktop a.show-card,
  html.desktop a.card,
  html.desktop .show-card-wrap > a{
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  html.desktop a.show-card:hover,
  html.desktop a.card:hover,
  html.desktop .show-card-wrap > a:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(0,0,0,.42);
  }
}

@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  html.desktop a.show-card,
  html.desktop a.card,
  html.desktop .show-card-wrap > a{ transition:none; }
  html.desktop a.show-card:hover,
  html.desktop a.card:hover,
  html.desktop .show-card-wrap > a:hover{ transform:none; }
}