/* =========================================================
   AULA 01 — PATCH REAL DO LABORATÓRIO
   Corrige as classes reais:
   .lab-pro-grid, .lab-business-steps, .lab-pro-editor-wrap,
   .lab-pro-actions, .lab-actions-*, .lab-business-summary,
   .lab-evidence-business
   ========================================================= */

/* aumenta a área útil da aula no PC */
body:has(#laboratorio) .page {
  width: min(100% - 32px, 1400px) !important;
  max-width: 1400px !important;
}

body:has(#laboratorio) .layout {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 24px !important;
}

body:has(#laboratorio) .content {
  width: 100% !important;
  max-width: 1120px !important;
  min-width: 0 !important;
}

#laboratorio {
  width: 100% !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

#laboratorio *,
#laboratorio *::before,
#laboratorio *::after {
  box-sizing: border-box !important;
}

/* HERO do laboratório */
#laboratorio .lab-pro {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(18px, 3vw, 32px) !important;
  overflow: visible !important;
}

#laboratorio .lab-business-header {
  width: 100% !important;
  max-width: 100% !important;
}

#laboratorio .lab-business-meta,
#laboratorio .lab-pro-mission,
#laboratorio .lab-business-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

/* CORREÇÃO PRINCIPAL:
   Para de deixar Passos | Editor | Preview espremidos em 3 colunas */
#laboratorio .lab-pro-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* passos agora ficam em bloco horizontal/compacto acima do editor */
#laboratorio .lab-business-steps {
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  padding: 18px !important;
}

#laboratorio .lab-pro-steps {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 14px 0 0 !important;
}

/* Editor e preview lado a lado só quando tiver largura de verdade */
#laboratorio .lab-pro-editor-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
}

/* painel do editor */
#laboratorio .lab-pro-editor-wrap > div:first-child {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* textarea largo e usável */
#laboratorio #labProCode {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 520px !important;
  display: block !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  padding: 18px !important;
  resize: vertical !important;
}

/* preview largo e confortável */
#laboratorio .lab-preview-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#laboratorio #labProPreview {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 520px !important;
  display: block !important;
}

/* Ações principais/secundárias/terciárias */
#laboratorio .lab-pro-actions {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 22px !important;
}

#laboratorio .lab-actions-primary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

#laboratorio .lab-actions-secondary,
#laboratorio .lab-actions-tertiary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

#laboratorio .lab-pro-actions button,
#laboratorio .lab-evidence-business button {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: normal !important;
}

/* Avaliação */
#laboratorio .lab-business-summary-wrap,
#laboratorio .lab-pro-score,
#laboratorio .lab-score-meter,
#laboratorio .lab-delivery-next,
#laboratorio #labProFeedback,
#laboratorio #labProNextAction {
  width: 100% !important;
  max-width: 100% !important;
}

/* Entrega profissional mais aberta */
#laboratorio .lab-evidence-business {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 22px !important;
}

#laboratorio .lab-evidence-business h3 {
  grid-column: 1 / -1 !important;
}

#laboratorio .lab-evidence-business ul {
  margin: 0 !important;
  padding-left: 22px !important;
}

/* Tablet e PC estreito: remove sidebar e dá tela para aula */
@media (max-width: 1180px) {
  body:has(#laboratorio) .layout {
    grid-template-columns: 1fr !important;
  }

  body:has(#laboratorio) .nav {
    display: none !important;
  }

  body:has(#laboratorio) .content,
  #laboratorio {
    max-width: 100% !important;
  }
}

/* Mobile e janelas estreitas: TUDO vertical */
@media (max-width: 860px) {
  body:has(#laboratorio) .page {
    width: calc(100% - 18px) !important;
    max-width: 100% !important;
  }

  #laboratorio .lab-business-meta,
  #laboratorio .lab-pro-mission,
  #laboratorio .lab-business-summary,
  #laboratorio .lab-pro-editor-wrap,
  #laboratorio .lab-actions-primary,
  #laboratorio .lab-actions-secondary,
  #laboratorio .lab-actions-tertiary,
  #laboratorio .lab-evidence-business {
    grid-template-columns: 1fr !important;
  }

  #laboratorio .lab-pro-steps {
    grid-template-columns: 1fr !important;
  }

  #laboratorio #labProCode {
    min-height: 420px !important;
  }

  #laboratorio #labProPreview {
    min-height: 380px !important;
  }
}