/* ============================================================
   BIM Forum Chile v13.7 — Responsividad dura (mobile fixes)
   Corrige los defectos vistos en capturas móviles reales:
   · grids inline 2-col que NO colapsaban (texto partido palabra
     por palabra, columnas cortadas fuera de pantalla)
   · badge "DESTACADA" de empleos recortado por overflow:hidden
   · tarjeta bs "Chapter-in-Formation" apretada
   Se carga al final = máxima prioridad. Usa !important solo
   donde hay estilos inline que vencer.
   ============================================================ */

/* ── 0. Cinturón de seguridad: nada desborda el viewport ───── */
html, body { overflow-x: clip; max-width: 100%; }
img, video, canvas, svg { max-width: 100%; }

/* ── 1. Grids de 2 columnas → 1 columna en tablet/móvil ─────
   Vencen al gridTemplateColumns inline mediante !important.  */
@media (max-width: 860px) {
  .bs-2col,
  .resp-2col,
  .ev-hero-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(1.75rem, 5vw, 2.75rem) !important;
    align-items: stretch !important;
  }
  /* El timeline bSI: la columna derecha (tarjetas hexágono) queda
     debajo, a ancho completo, sin recortes horizontales. */
  .bs-2col--tl { align-items: start !important; }
}

/* ── 2. openBIM standards: 2→1 sólo en móvil chico ─────────── */
@media (max-width: 560px) {
  .bs-2col { gap: 1rem !important; }
}

/* ── 3. Tarjeta "Chapter-in-Formation": aire y marcas a escala ─ */
@media (max-width: 560px) {
  .bs-chapter-card { padding: 1.75rem 1.5rem !important; }
  .bs-chapter-card__mark { height: 30px !important; }
  .bs-chapter-card__n { font-size: 1.9rem !important; }
}

/* ── 4. Empleos — badge "Destacada" ya NO se corta ─────────── */
.emp-job { overflow: visible !important; }        /* deja ver el badge que sobresale */
.emp-list { padding-top: .5rem; }                 /* espacio para el badge -9px */
.emp-job-flag {
  top: -10px; left: 14px;
  box-shadow: 0 4px 12px rgba(1,50,110,.28);
  z-index: 3;
}
/* El acento lateral ::before se mantiene dentro del radio */
.emp-job::before { border-radius: 14px 0 0 14px; }

/* ── 5. Eventos: meta-grid del hero a 1 col en móvil ───────── */
@media (max-width: 640px) {
  .ev-meta-grid { grid-template-columns: 1fr !important; }
  .ev-hero-grid { gap: 2rem !important; }
}

/* ── 6. Timeline bSI: puntos y años sin solaparse en móvil ─── */
@media (max-width: 560px) {
  .bs-tl-year { font-size: .72rem !important; }
  .bs-timeline .bs-tl-item { grid-template-columns: auto 1fr !important; }
}

/* ── 7. Cualquier grid inline residual: evita min-content
   overflow (permite que el texto encoja en vez de cortarse). */
@media (max-width: 860px) {
  [style*="grid-template-columns"] > * { min-width: 0; }
}