/* =========================================================
   AULA 01 — LABORATÓRIO MESTRE PRO
   Correção definitiva de layout mobile
   Objetivo: impedir colunas estreitas no celular
   ========================================================= */

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Garante que a página da aula continue fluindo normalmente */
  .page,
  .layout,
  .content,
  main,
  article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Some com sidebar/roteiro lateral se estiver comprimindo a aula no mobile */
  .layout > aside,
  .layout > nav,
  .lesson-sidebar,
  .aula-sidebar,
  .roteiro,
  .nav-aula {
    max-width: 100% !important;
  }

  /* Alvo principal: qualquer bloco de laboratório da Aula 1 */
  #laboratorio,
  #laboratorio *,
  .lab-pro,
  .lab-pro *,
  .laboratorio-mestre-pro,
  .laboratorio-mestre-pro *,
  [class*="lab"],
  [class*="laboratorio"] {
    box-sizing: border-box !important;
  }

  #laboratorio,
  .lab-pro,
  .laboratorio-mestre-pro,
  [class*="laboratorio"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Quebra TODAS as grades internas do laboratório para 1 coluna */
  #laboratorio .grid,
  #laboratorio [class*="grid"],
  #laboratorio [class*="cards"],
  #laboratorio [class*="kpi"],
  #laboratorio [class*="stats"],
  #laboratorio [class*="steps"],
  #laboratorio [class*="editor"],
  #laboratorio [class*="preview"],
  #laboratorio [class*="actions"],
  #laboratorio [class*="avaliacao"],
  #laboratorio [class*="entrega"],
  .lab-pro-grid,
  .lab-pro-mission,
  .lab-pro-editor-wrap,
  .lab-pro-actions,
  .lab-pro-score,
  .lab-pro-kpis,
  .lab-pro-steps,
  .lab-pro-delivery,
  .lab-pro-evidence,
  .lab-pro-panel,
  .lab-pro-main,
  .lab-pro-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
  }

  /* Remove qualquer layout lado a lado dentro do laboratório */
  #laboratorio [style*="grid-template-columns"],
  #laboratorio [style*="display: grid"],
  #laboratorio [style*="display:grid"],
  #laboratorio [style*="display: flex"],
  #laboratorio [style*="display:flex"],
  .lab-pro [style*="grid-template-columns"],
  .lab-pro [style*="display: grid"],
  .lab-pro [style*="display:grid"],
  .lab-pro [style*="display: flex"],
  .lab-pro [style*="display:flex"] {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Passos interativos: não pode virar coluna lateral gigante */
  #laboratorio [class*="passos"],
  #laboratorio [class*="steps"],
  .lab-pro-steps {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-bottom: 16px !important;
  }

  /* Editor: largura total e altura confortável */
  #laboratorio textarea,
  #laboratorio .editor,
  #laboratorio [class*="editor"] textarea,
  .lab-pro textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 360px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* Preview: sempre abaixo do editor e largo */
  #laboratorio iframe,
  #laboratorio .preview,
  #laboratorio [class*="preview"],
  .lab-pro iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 340px !important;
  }

  /* Botões principais e secundários */
  #laboratorio button,
  .lab-pro button,
  #laboratorio .btn,
  .lab-pro .btn {
    min-height: 42px !important;
    font-size: 13px !important;
    white-space: normal !important;
  }

  #laboratorio [class*="actions"],
  .lab-pro-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Cards: mais respiro, menos aperto */
  #laboratorio .card,
  #laboratorio [class*="card"],
  #laboratorio [class*="kpi"],
  #laboratorio [class*="painel"],
  .lab-pro-kpi,
  .lab-pro-card,
  .lab-pro-ok {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    overflow-wrap: anywhere !important;
  }

  /* Avaliação e entrega profissional */
  #laboratorio [class*="avaliacao"],
  #laboratorio [class*="progresso"],
  #laboratorio [class*="entrega"],
  #laboratorio [class*="evidence"],
  #laboratorio [class*="delivery"] {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  /* Evita texto microscópico no mobile */
  #laboratorio,
  #laboratorio p,
  #laboratorio li,
  #laboratorio span,
  #laboratorio small,
  .lab-pro,
  .lab-pro p,
  .lab-pro li,
  .lab-pro span,
  .lab-pro small {
    line-height: 1.45 !important;
  }
}

@media (max-width: 520px) {
  #laboratorio,
  .lab-pro,
  .laboratorio-mestre-pro {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #laboratorio textarea,
  .lab-pro textarea {
    min-height: 380px !important;
  }

  #laboratorio iframe,
  .lab-pro iframe {
    min-height: 360px !important;
  }

  #laboratorio button,
  .lab-pro button {
    width: 100% !important;
  }
}