/* PR-VIBECURB-02 — correções do passe final de aceitação responsiva. */

@media (max-width: 1100px) {
  /* Mantém o fólio lateral, mas força todo o conteúdo da seção a compartilhar
     uma única coluna útil. Evita auto-placement em células concorrentes. */
  .vb-section-shell,
  .vb-section-shell--reverse {
    grid-template-columns: 70px minmax(0, 1fr);
    column-gap: clamp(1.25rem, 3vw, 2.25rem);
  }

  .vb-section-shell > :not(.vb-section-shell__index) {
    grid-column: 2 !important;
    grid-row: auto !important;
    min-width: 0;
    max-width: 100%;
  }

  .vb-section-shell__copy,
  .vb-fracture,
  .vb-route,
  .vb-management-layout,
  .vb-teacher-layout,
  .vb-governance-layout,
  .vb-luma-layout,
  .vb-section-actions,
  .vb-bridge,
  .vb-teacher-closing,
  .vb-luma-principles,
  .vb-role-notes,
  .vb-milestones,
  .vb-implementation-closing,
  .vb-plan-institutional,
  .vb-individual-access,
  .vb-section-shell__closing {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Em 1024 px os documentos deixam de disputar largura com a coluna textual. */
  .vb-management-layout,
  .vb-teacher-layout,
  .vb-governance-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .vb-dossier,
  .vb-teacher-stage,
  .vb-trace-card {
    position: static !important;
    top: auto !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: none;
    overflow: hidden;
  }

  .vb-dossier > header,
  .vb-teacher-stage header,
  .vb-trace-card > header {
    flex-wrap: wrap;
  }

  .vb-dossier__metrics,
  .vb-teacher-stage > div,
  .vb-trace-card ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vb-dossier *,
  .vb-teacher-stage *,
  .vb-trace-card * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 900px) {
  /* Tablet e mobile: índice, título, corpo e evidências passam a ocupar linhas próprias. */
  .vb-section-shell,
  .vb-section-shell--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .vb-section-shell > .vb-section-shell__index,
  .vb-section-shell > :not(.vb-section-shell__index) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .vb-section-shell__index {
    position: static;
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: .85rem;
    margin-bottom: .35rem;
  }

  .vb-section-shell__index small {
    writing-mode: horizontal-tb;
    min-height: 0;
  }

  .vb-section-shell__copy h2 {
    max-width: 100%;
  }

  .vb-section-shell__closing {
    position: static;
    margin-top: 1.5rem;
    text-align: left;
  }

  .vb-fracture,
  .vb-route,
  .vb-cycle,
  .vb-governance-principles {
    min-width: 0;
  }
}

@media (max-width: 620px) {
  .vb-section {
    padding-block: 3.75rem;
  }

  .vb-section-shell {
    row-gap: 1.35rem;
  }

  .vb-section-shell__index {
    padding-top: .5rem;
  }

  .vb-section-shell__index span {
    font-size: 3.3rem;
  }

  .vb-section-shell__copy,
  .vb-section-shell__copy h2,
  .vb-section-shell__copy p,
  .vb-section-shell__closing {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .vb-section-shell__copy h2 {
    font-size: clamp(2.55rem, 12.4vw, 3.65rem);
    line-height: .92;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Fraturas e fundamentos deixam de reservar colunas estreitas que comprimiam títulos. */
  .vb-fracture article,
  .vb-governance-principles article {
    grid-template-columns: minmax(0, 1fr);
    gap: .45rem;
  }

  .vb-fracture span,
  .vb-governance-principles article > span {
    grid-row: auto;
  }

  .vb-fracture h3,
  .vb-governance-principles h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .vb-route li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: .75rem;
  }

  .vb-route b {
    font-size: 2.15rem;
  }

  .vb-cycle li {
    padding-left: 60px;
  }

  .vb-cycle li::before {
    font-size: 1.95rem;
  }

  .vb-dossier,
  .vb-teacher-stage,
  .vb-trace-card {
    padding: 1rem;
  }

  .vb-dossier__metrics,
  .vb-teacher-stage > div,
  .vb-trace-card ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .vb-teacher-stage h3 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .vb-teacher-stage,
  .vb-trace-card {
    box-shadow: 8px 10px 0 var(--vb-ink);
  }

  .vb-trace-card {
    box-shadow: 8px 10px 0 var(--vb-teal);
  }
}