/* ============================================================
   B9 — KOENIG / GHOST EDITOR CARDS (v8)
   O Ghost emite as classes .kg-* dentro de {{content}}. No tema v8 o
   conteúdo é renderizado em .prose, então adaptamos os cards do editor
   à identidade B9 (tokens v8: --red, --yellow, --ink, --display…).
   ============================================================ */

.prose .kg-card { margin: 36px 0; }

/* ── Imagens ─────────────────────────────────────────────── */
/* Regra global de segurança: imagem inserida no corpo NUNCA distorce.
   Preserva a proporção original (vertical ou horizontal). O crop
   controlado fica restrito à imagem de destaque (.art-media, fora do .prose). */
.prose img { max-width: 100%; height: auto; }
.prose .kg-image-card { margin: 40px 0; }
.prose .kg-image-card img { width: 100%; height: auto; display: block; }
.prose .kg-image-card figcaption,
.prose .kg-card-figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--fg-muted); text-align: center; margin-top: 12px; line-height: 1.5;
}
.prose .kg-width-wide { margin-left: 0; margin-right: var(--art-breakout, -40px); }
.prose .kg-width-full {
  margin-left: 0; margin-right: var(--art-breakout, calc(50% - 50vw));
}
.prose .kg-width-full img { width: 100%; height: auto; }

/* ── Galerias ────────────────────────────────────────────── */
/* Linhas com alturas iguais via flex-grow proporcional (padrão Ghost);
   object-fit: contain garante que nenhuma imagem seja esticada. */
.prose .kg-gallery-card { margin: 40px 0; }
.prose .kg-gallery-container { display: flex; flex-direction: column; gap: 8px; }
.prose .kg-gallery-row { display: flex; gap: 8px; }
.prose .kg-gallery-image { flex: 1; min-width: 0; }
.prose .kg-gallery-image img { width: 100%; height: auto; object-fit: contain; display: block; }

/* ── Big quote (blockquote-alt) → pullquote B9 ───────────── */
.prose blockquote.kg-blockquote-alt {
  margin: 40px -40px; padding: 32px 40px;
  background: var(--paper); border-left: 4px solid var(--red);
  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.18; color: var(--ink);
  position: relative;
}

/* ── Bookmark card → "Leia também" ───────────────────────── */
.prose .kg-bookmark-card { margin: 36px 0; }
.prose .kg-bookmark-container {
  display: flex; align-items: stretch; text-decoration: none; color: var(--fg);
  background: var(--paper); border: 1px solid var(--rule);
}
.prose .kg-bookmark-content { flex: 1; padding: 22px 24px 22px 28px; display: flex; flex-direction: column; gap: 6px; }
.prose .kg-bookmark-title { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }
.prose .kg-bookmark-card:hover .kg-bookmark-title { color: var(--red); }
.prose .kg-bookmark-description { font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--fg-soft); margin-top: 2px; }
.prose .kg-bookmark-metadata { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--fg-muted); margin-top: 6px; text-transform: uppercase; }
.prose .kg-bookmark-thumbnail { width: 180px; flex-shrink: 0; background: var(--bg); }
.prose .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Callout ─────────────────────────────────────────────── */
.prose .kg-callout-card {
  margin: 32px 0; padding: 22px 26px; display: flex; gap: 14px;
  font-family: var(--serif); font-size: 16px; line-height: 1.5;
}
.prose .kg-callout-card-grey { background: var(--paper-2); border-left: 4px solid var(--fg-muted); }
.prose .kg-callout-card-red { background: var(--red); color: #fff; }
.prose .kg-callout-card-yellow { background: var(--yellow); color: #000; }
.prose .kg-callout-emoji { font-size: 22px; line-height: 1; }
.prose .kg-callout-text { flex: 1; }

/* ── Botão (button card) ─────────────────────────────────── */
.prose .kg-button-card { margin: 28px 0; display: flex; }
.prose .kg-button-card.kg-align-center { justify-content: center; }
.prose .kg-btn {
  font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 15px 26px; text-decoration: none; transition: background .15s;
}
.prose .kg-btn:hover { background: var(--red-deep); }

/* ── Embeds / vídeo ──────────────────────────────────────── */
.prose .kg-embed-card, .prose .kg-video-card { margin: 36px 0; margin-right: var(--art-breakout, 0px); }
.prose .kg-embed-card iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.prose .kg-video-card video { width: 100%; display: block; }

/* ── Código ──────────────────────────────────────────────── */
.prose pre, .prose .kg-code-card {
  margin: 28px 0; padding: 20px 24px; background: var(--ink); color: #f5f3ee;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.6; overflow-x: auto;
}
.prose pre code { background: none; padding: 0; color: inherit; }

/* ── Toggle (collapsible) ────────────────────────────────── */
.prose .kg-toggle-card { margin: 28px 0; border: 1px solid var(--rule); padding: 0; }
.prose .kg-toggle-heading { margin: 0; padding: 18px 22px; font-family: var(--display); font-weight: 700; font-size: 18px; }
.prose .kg-toggle-content { padding: 0 22px 18px; }

/* ── Header card (divisor titulado dentro do artigo) ─────── */
.prose .kg-header-card { margin: 40px 0; padding: 60px 40px; text-align: center; background: var(--paper-2); }
.prose .kg-header-card .kg-header-card-heading { font-family: var(--display); font-weight: 900; letter-spacing: -0.02em; }

@media (max-width: 700px) {
  .prose .kg-width-wide { margin-left: 0; margin-right: 0; }
  .prose blockquote.kg-blockquote-alt { margin-left: 0; margin-right: 0; }
  .prose .kg-bookmark-container { flex-direction: column-reverse; }
  .prose .kg-bookmark-thumbnail { width: 100%; height: 180px; }
}