/* ═══════════════════════════════════════════════════════════════
   css/blocks.css — Canonical CSS for block content rendering.
   Single source of truth for both legacy app and Studio.
   
   Legacy: <link rel="stylesheet" href="css/blocks.css"> in index.html
   Studio: import '../../css/blocks.css' in studio/src/main.tsx
   ═══════════════════════════════════════════════════════════════ */

/* ── Heading ───────────────────────────────────────────────── */
.block-heading {
  color: var(--text-main, #1a1a2e);
  margin: 32px 0 12px;
  line-height: 1.3;
}
.block-heading-2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.block-heading-3 {
  font-size: 1.15rem;
  font-weight: 600;
}

/* ── Paragraph ─────────────────────────────────────────────── */
.block-paragraph {
  margin: 0 0 16px;
  line-height: 1.7;
  color: var(--text-main, #1a1a2e);
}
.block-paragraph code {
  background: var(--bg-secondary, #f0f0f5);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'Courier New', Courier, monospace;
}

/* ── List ──────────────────────────────────────────────────── */
.block-list {
  margin: 0 0 16px;
  padding-left: 24px;
  line-height: 1.7;
}
.block-list-item {
  margin-bottom: 4px;
}
.block-list-ordered {
  list-style-type: decimal;
}
.block-list-unordered {
  list-style-type: disc;
}

/* ── Formula ───────────────────────────────────────────────── */
.block-formula-display {
  text-align: center;
  padding: 20px 0;
  margin: 24px 0;
  overflow-x: auto;
}
.block-formula-inline {
  display: inline;
}
.block-formula-box {
  padding: 24px 32px;
  background: var(--bg-app, #f8f8fc);
  border: 1px solid var(--border, #e0e0e8);
  border-radius: 12px;
  text-align: center;
  font-size: 1.25rem;
  margin: 32px 0;
}

/* ── Callout ───────────────────────────────────────────────── */
.block-callout {
  padding: 24px 28px;
  border-radius: 12px;
  border: 1px solid var(--border, #e0e0e8);
  margin: 24px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.block-callout-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.block-callout-body {
  flex: 1;
  min-width: 0;
}
.block-callout-label {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.block-callout-text {
  line-height: 2;
  font-size: 0.95rem;
}
/* Variants */
.block-callout-tip {
  background: rgba(34, 197, 94, 0.06);
}
.block-callout-tip .block-callout-label {
  color: var(--success, #22c55e);
}
.block-callout-warning {
  background: rgba(245, 158, 11, 0.06);
}
.block-callout-warning .block-callout-label {
  color: var(--warning, #f59e0b);
}
.block-callout-important {
  background: rgba(239, 68, 68, 0.04);
}
.block-callout-important .block-callout-label {
  color: var(--danger, #ef4444);
}
.block-callout-note {
  background: rgba(108, 43, 255, 0.04);
}
.block-callout-note .block-callout-label {
  color: var(--primary, #6c2bff);
}

/* ── Image ─────────────────────────────────────────────────── */
.block-image {
  margin: 24px 0;
}
.block-image-figure {
  display: inline-block;
  width: 100%;
  margin: 0;
}
.block-image-img {
  width: 100%;
  border-radius: 8px;
  display: block;
}
.block-image-caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  margin-top: 8px;
}
.block-image-placeholder {
  width: 100%;
  min-height: 120px;
  background: var(--bg-secondary, #f0f0f5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #9ca3af);
  font-size: 0.9rem;
  border: 1px dashed var(--border, #e0e0e8);
}

/* ── Table ─────────────────────────────────────────────────── */
.block-table-wrapper {
  overflow-x: auto;
  margin: 16px 0;
}
.block-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.block-table-th {
  border: 1px solid var(--border, #e0e0e8);
  padding: 8px 12px;
  background: var(--bg-secondary, #f0f0f5);
  font-weight: 600;
  text-align: left;
}
.block-table-td {
  border: 1px solid var(--border, #e0e0e8);
  padding: 8px 12px;
}

/* ── Definition ────────────────────────────────────────────── */
.block-definition {
  margin: 16px 0;
  padding-left: 16px;
  border-left: 3px solid var(--primary, #6c2bff);
}
.block-definition-term {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.block-definition-text {
  margin: 0;
  line-height: 1.6;
}

/* ── Example ───────────────────────────────────────────────── */
.block-example {
  padding: 24px 28px;
  background: var(--bg-app, #f8f8fc);
  border-radius: 12px;
  border: 1px solid var(--border, #e0e0e8);
  margin: 24px 0;
}
.block-example-header {
  margin-bottom: 16px;
}
.block-example-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-main, #1a1a2e);
}
.block-example-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.block-example-step {
  padding-left: 8px;
  min-width: 0; /* Fix flexbox overflow bug */
  max-width: 100%;
}
.block-example-step-label {
  display: block;
  font-weight: 700;
  color: var(--primary, #6c2bff);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.block-example-step-content {
  font-size: 0.95rem;
  line-height: 2.2;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  overflow-x: auto;
}

/* ── KaTeX sizing inside blocks ───────────────────────────── */
.block-example-step-content .katex,
.block-callout-text .katex {
  font-size: 1.15em;
}
.block-example-step-content .katex-display,
.block-callout-text .katex-display {
  margin: 12px 0;
}
.block-paragraph .katex { font-size: 1.1em; }
.block-list-item .katex { font-size: 1.1em; }

/* ── Unknown Block ─────────────────────────────────────────── */
.block-unknown {
  color: var(--danger, #ef4444);
  font-style: italic;
}

/* ── Mobile Responsive Adjustments ───────────────────────────── */
@media (max-width: 768px) {
  .block-heading {
    margin: 24px 0 12px;
  }
  .block-heading-2 {
    font-size: clamp(1.2rem, 5vw, 1.35rem);
  }
  .block-heading-3 {
    font-size: clamp(1.05rem, 4.5vw, 1.15rem);
  }
  
  .block-paragraph, .block-list {
    margin: 0 0 12px;
    font-size: 1rem;
    overflow-wrap: break-word;
    word-break: normal;
  }
  
  .block-formula-box {
    padding: 16px;
    font-size: 1.1rem;
    margin: 20px 0;
    overflow-x: auto;
  }
  
  .block-formula-display {
    padding: 12px 0;
    margin: 16px 0;
    overflow-x: auto;
  }
  
  .block-callout {
    padding: 16px;
    margin: 16px 0;
    gap: 12px;
  }
  
  .block-callout-text {
    overflow-wrap: break-word;
    word-break: normal;
  }
  
  .block-image {
    margin: 16px 0;
  }
  
  .block-definition {
    margin: 16px 0;
    padding-left: 12px;
  }
  
  .block-definition-text {
    overflow-wrap: break-word;
    word-break: normal;
  }
  
  .block-example {
    padding: 16px;
    margin: 16px 0;
    overflow-x: auto; /* Opción A: Scroll for overflow in entire block */
    position: relative;
  }

  /* Add subtle scrollbar for mobile to indicate scrollability */
  .block-example::-webkit-scrollbar,
  .block-formula-box::-webkit-scrollbar,
  .block-formula-display::-webkit-scrollbar {
    height: 4px;
  }
  .block-example::-webkit-scrollbar-thumb,
  .block-formula-box::-webkit-scrollbar-thumb,
  .block-formula-display::-webkit-scrollbar-thumb {
    background: var(--border, #e0e0e8);
    border-radius: 4px;
  }
  
  .block-example-steps {
    padding-left: 12px; /* Reduce indent */
  }
  
  /* Make sure code/pre tags wrap if possible, scroll otherwise */
  .block-paragraph code {
    overflow-wrap: break-word;
    word-break: normal;
    white-space: pre-wrap;
  }
}