/* ============================================================
   Koenig (editor de Ghost) → mapeo al sistema Magnific DS
   Cubre el markup que emite {{content}} y que main.css no conoce
   ============================================================ */

/* Imágenes en prosa (también las de HTML cards sin clases kg-) —
   forzadas al ancho de la columna, mismo radio que las image cards */
.article__body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 16px);
}

/* Vídeos incrustados en prosa (iframes de HTML cards con width/height
   fijos en el atributo) — mismo tratamiento que .kg-embed-card */
.article__body iframe[src*="youtube.com"],
.article__body iframe[src*="youtube-nocookie.com"],
.article__body iframe[src*="player.vimeo.com"],
.article__body video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-lg, 16px);
}

/* --- Image / gallery / embed cards ---
   Sin margen propio: .article__body es flex con gap de 28px y los márgenes
   no colapsan — se sumarían al gap y romperían el ritmo vertical */
.article__body .kg-card {
  margin: 0;
}

.article__body figure.kg-image-card,
.article__body figure.kg-gallery-card,
.article__body figure.kg-embed-card {
  margin: 0;
}

/* Figures de contenido migrado (WordPress) — traen width inline
   (style="width: 1024px"), se fuerzan al ancho de la columna */
.article__body figure {
  width: auto !important;
  max-width: 100%;
  margin: 0;
}

.article__body .kg-image-card img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg, 16px);
}

/* Anchos wide/full acotados al ancho de la columna del artículo */
.article__body .kg-width-wide,
.article__body .kg-width-full {
  max-width: 100%;
}

.article__body figcaption {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: var(--text-sm, 14px);
  color: var(--color-surface-foreground-4, #737373);
  text-align: center;
}

/* Embeds (YouTube, etc.) — mismo tratamiento que .media--video */
.article__body .kg-embed-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-lg, 16px);
}

/* --- Blockquote --- */
.article__body blockquote {
  margin: 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--color-surface-foreground-0, #1a1a1a);
  font-style: italic;
  color: var(--color-surface-foreground-1, #353535);
}

/* --- Callout card --- */
.article__body .kg-callout-card {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-radius: var(--radius-lg, 16px);
  background: var(--color-surface-1, #f5f5f5);
}

.article__body .kg-callout-card p {
  margin: 0;
}

/* --- Bookmark card --- */
.article__body .kg-bookmark-card a.kg-bookmark-container {
  display: flex;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-surface-border-alpha-1, #1010101a);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}

.article__body .kg-bookmark-content {
  padding: 20px;
  flex-grow: 1;
}

.article__body .kg-bookmark-title {
  font-weight: var(--font-semibold, 600);
}

.article__body .kg-bookmark-description {
  margin-top: 4px;
  font-size: var(--text-sm, 14px);
  color: var(--color-surface-foreground-4, #737373);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article__body .kg-bookmark-metadata {
  margin-top: 12px;
  font-size: var(--text-sm, 14px);
  color: var(--color-surface-foreground-4, #737373);
  display: flex;
  align-items: center;
  gap: 8px;
}

.article__body .kg-bookmark-icon {
  width: 18px;
  height: 18px;
  border-radius: 0;
}

.article__body .kg-bookmark-thumbnail {
  position: relative;
  flex-basis: 220px;
  flex-shrink: 0;
  min-width: 140px;
}

.article__body .kg-bookmark-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* --- Button card → skin ds-btn secondary --- */
.article__body .kg-button-card {
  display: flex;
}

.article__body .kg-button-card.kg-align-center {
  justify-content: center;
}

/* Misma geometría/estados que .ds-btn .ds-btn--secondary .ds-btn--rounded
   (el markup viene del contenido y no puede llevar clases del DS) */
.article__body .kg-button-card a.kg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--color-secondary-0, #1a1a1a);
  color: var(--color-secondary-foreground-0, #ffffff);
  font-family: var(--font-sans);
  font-size: var(--text-sm, 14px);
  line-height: var(--leading-sans-sm, 1.6);
  font-weight: var(--font-medium, 500);
  text-decoration: none;
  transition: background var(--duration-fast, 0.15s) var(--ease-standard, ease);
}

.article__body .kg-button-card a.kg-btn:hover {
  background: var(--color-secondary-1);
}

.article__body .kg-button-card a.kg-btn:active {
  background: var(--color-secondary-2);
}

.article__body .kg-button-card a.kg-btn:focus-visible,
.article__body .kg-bookmark-card a.kg-bookmark-container:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
}

/* --- Toggle card → skin del FAQ --- */
.article__body .kg-toggle-card {
  border: 1px solid var(--color-surface-border-alpha-1, #1010101a);
  border-radius: var(--radius-lg, 16px);
  padding: 20px 24px;
}

.article__body .kg-toggle-card + .kg-toggle-card {
  margin-top: 12px;
}

.article__body .kg-toggle-heading {
  font-weight: var(--font-semibold, 600);
}

/* --- Code cards (pre) sin clase autoral: el JS los promociona a
       .prompt-wrap/.prompt-block; esto cubre el primer render --- */
.article__body > pre {
  overflow-x: auto;
}

/* --- Divider --- */
.article__body hr {
  margin: 12px 0; /* + gap de 28px del flex = 40px por lado */
  border: 0;
  border-top: 1px solid var(--color-surface-border-alpha-1, #1010101a);
}

/* --- Tablas del editor / importadas de WP ---
   theme.js envuelve cada tabla en .table-wrap: las 326 tablas importadas
   no caben siempre en la columna de 760px y necesitan scroll horizontal */
.article__body .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.article__body table {
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm, 14px);
  line-height: var(--leading-sans-sm, 1.6);
}

.article__body table th,
.article__body table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-surface-border-alpha-1, #1010101a);
  text-align: left;
  vertical-align: top;
}

/* Cabecera: el contenido importado usa <tr><th> sin <thead> */
.article__body table th {
  font-weight: var(--font-semibold, 600);
  color: var(--color-surface-foreground-1);
  border-bottom-color: var(--color-surface-border-alpha-2);
}

/* --- FAQ importado de WP (details/summary en .fpk-faq) ---
   La base (bordes, paddings, animación de colapso, FocusStroke) la comparte
   con .ds-accordion en main.css; aquí solo su tipografía de summary */
.article__body .fpk-faq summary {
  font-weight: var(--font-semibold, 600);
  color: var(--color-surface-foreground-1);
}

.article__body .fpk-faq details > div {
  margin-top: 12px;
}