/* Partiu — desktop. O botão "Ver no celular" (classe phone-mode no <html>) desliga tudo isto e mostra a moldura do celular.
   Partiu — desktop. Acima de 900px o app deixa de ser um celular na tela: ocupa a janela toda,
   o conteúdo fica numa coluna central e, no mapa, o painel vira uma coluna lateral fixa. */
@media (min-width: 900px) {
  html:not(.phone-mode) body { display: block; }
  html:not(.phone-mode) .phone { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; background: var(--screen); }
  html:not(.phone-mode) .dev-link { top: auto; bottom: 16px; left: 16px; opacity: .85; }
  html:not(.phone-mode) .dev-wx { bottom: 64px; }

  /* apresentação: foto em tela cheia, texto e botão centralizados */
  html:not(.phone-mode) #intro { padding: 40px max(48px, 6vw) 48px; }
  html:not(.phone-mode) .intro-text { align-self: center; max-width: 680px; }
  html:not(.phone-mode) .intro-text h1 { font-size: clamp(44px, 4.6vw, 64px); }
  html:not(.phone-mode) .intro-text .sub { font-size: 20px; }
  html:not(.phone-mode) .intro-foot { align-self: center; width: min(460px, 100%); }

  /* login: foto grande à esquerda e o formulário à direita */
  html:not(.phone-mode) #login { flex-direction: row-reverse; background: var(--screen); }
  html:not(.phone-mode) #login .lg-hero { height: auto !important; flex: 1 1 56%; min-height: 0; margin: 16px 16px 16px 0; border-radius: 36px; }
  html:not(.phone-mode) #login .lg-top { top: 24px; left: 24px; right: 24px; }
  html:not(.phone-mode) #login .lg-body { flex: 0 0 min(520px, 44%); justify-content: center; padding: 48px clamp(32px, 4vw, 72px); gap: 18px; }

  /* perguntas e carregamento: coluna central */
  html:not(.phone-mode) #quiz > * { width: min(680px, 100%); margin-inline: auto; }
  html:not(.phone-mode) #quiz .q-head { padding-top: 32px; }
  html:not(.phone-mode) #quiz .q-foot { padding-bottom: 40px; }
  html:not(.phone-mode) .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* roteiro: coluna central; escolher lugares e horários como janelas no centro */
  html:not(.phone-mode) #plan .tab-head { padding-top: 36px; }
  html:not(.phone-mode) .disc { background: var(--screen); }
  html:not(.phone-mode) .disc > * { width: min(560px, 100%); margin-inline: auto; }
  html:not(.phone-mode) .when-wrap { align-items: center; justify-content: center; }
  html:not(.phone-mode) .when-panel { width: min(560px, calc(100% - 48px)); border-radius: 28px; max-height: 82%; padding-bottom: 24px; }
  html:not(.phone-mode) .toast { left: 50%; right: auto; transform: translateX(-50%); width: min(480px, calc(100% - 32px)); bottom: 40px; }

  /* mapa: tela cheia com o painel como coluna lateral */
  html:not(.phone-mode) #main .sheet { top: 16px; left: 16px; bottom: 16px; right: auto; width: 400px; height: auto; border-radius: 28px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .16); transition: none; }
  html:not(.phone-mode) #main .grabber-btn { display: none; }
  html:not(.phone-mode) #main .places-head { padding-top: 20px; }
  html:not(.phone-mode) #main .trip-card { left: calc(432px + (100% - 432px) / 2); right: auto; top: 16px; width: min(460px, calc(100% - 464px)); transform: translateX(-50%); }
  html:not(.phone-mode) #main .map-note { left: 432px; top: 140px; }
  html:not(.phone-mode) #main .pt-strip { left: 432px; top: 86px; justify-content: safe center; }
  html:not(.phone-mode) #main .fab { bottom: 24px; right: 24px; }
  html:not(.phone-mode) #main .fab.fab-search { bottom: 76px; }
  html:not(.phone-mode) #main .fab.fab-tilt { bottom: 128px; }
  html:not(.phone-mode) #main #map.gl .maplibregl-ctrl-bottom-left { bottom: 0; left: 432px; }
  html:not(.phone-mode) #main .found { left: 432px; right: auto; width: 380px; bottom: 24px; }
  html:not(.phone-mode) #main .search-view { inset: 16px auto 16px 16px; width: 400px; border-radius: 28px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .16); }
  html:not(.phone-mode) #main .leaflet-bottom.leaflet-right { margin-right: 76px; }
}
@media (min-width: 1400px) {
  html:not(.phone-mode) #main .sheet, html:not(.phone-mode) #main .search-view { width: 440px; }
  html:not(.phone-mode) #main .map-note, html:not(.phone-mode) #main .found, html:not(.phone-mode) #main .pt-strip { left: 472px; }
  html:not(.phone-mode) #main .trip-card { left: calc(472px + (100% - 472px) / 2); width: min(460px, calc(100% - 504px)); }
}
/* ilha do topo no centro da tela quando cabe sem encostar no painel */
@media (min-width: 1360px) {
  html:not(.phone-mode) #main .trip-card { left: 50%; width: min(460px, calc(100% - 2 * 488px)); }
}
@media (min-width: 900px) {
  html:not(.phone-mode) #main .list { padding-bottom: 96px; } /* espaço para a barra de navegação que flutua no fim do painel */
}
@media (min-width: 900px) {
  /* carregamento, calendário e escolher lugares: compactos e centralizados */
  html:not(.phone-mode) .load-wrap { width: min(480px, 100%); margin-inline: auto; }
  html:not(.phone-mode) #quiz .cal-head, html:not(.phone-mode) #quiz .cal-week, html:not(.phone-mode) #quiz .cal-grid { width: min(520px, 100%); margin-inline: auto; }
  html:not(.phone-mode) .disc > .stack { width: min(440px, calc(100% - 40px)); max-height: 600px; margin: 16px auto 0; }
  html:not(.phone-mode) .disc .disc-acts { padding-bottom: 32px; }
}
@media (min-width: 900px) {
  html:not(.phone-mode) .choose-body { width: min(820px, 100%); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 20px; }
  html:not(.phone-mode) .choose-body .q-title { grid-column: 1 / -1; }
  html:not(.phone-mode) .choice { min-height: 380px; max-height: none; }
}
@media (min-width: 900px) {
  /* feed e conta: coluna central */
  html:not(.phone-mode) #feed .tab-head, html:not(.phone-mode) .feed-scroll > *, html:not(.phone-mode) .conta-scroll > *, html:not(.phone-mode) .pf-head { width: min(680px, 100%); margin-inline: auto; }
  html:not(.phone-mode) #feed .tab-head { padding-top: 36px; }
  /* no desktop os destaques ocupam a largura da coluna, de borda a borda como as fotos */
  html:not(.phone-mode) .stories { justify-content: space-between; }
  /* destaques, título e fotos do feed na mesma borda da coluna */
  html:not(.phone-mode) .posts, html:not(.phone-mode) .stories, html:not(.phone-mode) #feed .tab-head { padding-inline: 0; }
  html:not(.phone-mode) #conta .tab-head { padding-top: 36px; }
  html:not(.phone-mode) .compose-wrap { align-items: center; justify-content: center; }
  html:not(.phone-mode) .tabbar { bottom: 22px; }
}
@media (min-width: 900px) {
}
@media (min-width: 900px) {
  html:not(.phone-mode) .trip-hero { min-height: 170px; padding: 22px 26px; }
  html:not(.phone-mode) .th-tx strong { font-size: 30px; }
}
@media (min-width: 900px) {
  html:not(.phone-mode) .lg-slide figcaption { left: 40px; bottom: 56px; }
  html:not(.phone-mode) .lg-slide strong { font-size: 34px; letter-spacing: -0.8px; }
  html:not(.phone-mode) .lg-slide span { font-size: 17px; }
  html:not(.phone-mode) .lg-dots { left: 40px; bottom: 32px; }
}
@media (min-width: 900px) { html:not(.phone-mode) #login .lg-hero { clip-path: inset(0 round 36px); } }

/* Roteiro, Feed e Conta: a mesma coluna centralizada, com a mesma largura nas três */
@media (min-width: 900px) {
  html:not(.phone-mode) #plan > :not(.disc):not(.when-wrap):not(.toast):not(.choose),
  html:not(.phone-mode) #feed .tab-head, html:not(.phone-mode) .feed-scroll > *,
  html:not(.phone-mode) .conta-scroll > * { width: min(760px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }
  html:not(.phone-mode) .feed-seg { width: min(760px, calc(100% - 48px)); }
  html:not(.phone-mode) .posts, html:not(.phone-mode) .stories { padding-left: 0; padding-right: 0; }
  html:not(.phone-mode) #plan .trip-hero { margin-left: auto; margin-right: auto; }
}
}
@media (min-width: 900px) {
  html:not(.phone-mode) #login .lg-hero { margin: 16px 16px 16px 0; flex: 1 1 56%; }
  html:not(.phone-mode) #login .lg-top { top: 24px; left: 24px; right: 24px; }
  html:not(.phone-mode) #login .lg-body { justify-content: center; }
}
@media (min-width: 900px) {
  html:not(.phone-mode) .ints { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 96px; }
  html:not(.phone-mode) .int-natureza { grid-column: span 2; }
  html:not(.phone-mode) .int-praia { grid-column: span 2; grid-row: span 3; }
  html:not(.phone-mode) .int-relax { grid-column: span 2; }
  html:not(.phone-mode) .int-compras { grid-row: span 5; }
  html:not(.phone-mode) .int-aventura { grid-row: span 3; }
}
@media (min-width: 900px) { html:not(.phone-mode) .bubbles { gap: 22px 26px; padding-top: 16px; } html:not(.phone-mode) .bub-ph { width: calc(var(--s) * 1.3); height: calc(var(--s) * 1.3); } html:not(.phone-mode) .bub { width: calc(var(--s) * 1.3 + 8px); } }
/* interesses: no desktop a galeria ganha altura fixa maior */
@media (min-width: 900px) { html:not(.phone-mode) .gal { grid-auto-rows: 110px; gap: 10px; } }
/* feed no desktop no mesmo ritmo do celular: coluna estreita, foto 4:5 e as mesmas margens */
@media (min-width: 900px) {
  html:not(.phone-mode) #feed .tab-head, html:not(.phone-mode) .feed-scroll > * { width: min(470px, calc(100% - 48px)); }
}