/* =========================================================
   DEMO 2 v5.1 · correção pontual (cenas 1 e 3 em palcos baixos e no celular)
   Acrescentar DEPOIS de demo23-v5.css. Escopo: #demo-2.
   A interface simulada sai de dentro dos celulares em todos os palcos: o texto
   do Status 1 aparece inteiro no cartão HTML externo .d2-stat (16px+) e a legenda
   do post já está fora em .d2-cap. Nos palcos altos o aparelho poderia conter o
   texto, mas cobria a arte; a mesma regra vale para todos, por consistência.
   Layout do cartão: ao lado dos aparelhos quando o palco tem 600px+ de largura,
   abaixo deles quando é mais estreito.
   ========================================================= */

@container (min-width: 0px) {
  /* interface simulada não disputa leitura */
  #demo-2 .ph-status-text,
  #demo-2 .ph-status-top,
  #demo-2 .ph-story-top,
  #demo-2 .ph-reply,
  #demo-2 .ph-actions,
  #demo-2 .ph-cap { display: none; }
  #demo-2 .ph-feed .ph-bar { display: none; }

  /* cena 3: dois aparelhos + cartão do Status 1 no espaço lateral */
  #demo-2 .d2-stat { display: block; margin: 0; background: var(--marfim); color: var(--carvao); border-radius: 16px; padding: 12px 16px; font-size: clamp(16px, 4.4cqh, 20px); line-height: 1.4; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
  #demo-2 .d2-stat small { display: block; font-size: 16px; font-weight: 700; color: var(--tinta-2); margin-bottom: 4px; }
}
@container (min-width: 600px) {
  #demo-2 .d2-p3 { flex-wrap: nowrap; gap: clamp(14px, 3cqw, 36px); }
  #demo-2 .d2-p3 .d2-phfig { width: auto; }
  #demo-2 .d2-p3 .d2-phfig .d2-phone { height: calc(100cqh - 2 * clamp(12px, 4cqh, 28px) - 38px); width: auto; }
  #demo-2 .d2-stat { flex: 0 1 340px; min-width: 220px; align-self: center; }
}
@container (max-width: 599px) {
  #demo-2 .d2-stat { font-size: 16px; padding: 8px 12px; }
  #demo-2 .d2-p3 .d2-phfig .d2-phone { width: min(40cqw, calc((100cqh - 175px) * 300 / 620)); }
}