/* BASOLS · post.css — artículo del blog (single.php). Los estilos del contenido están en prose.css */

.b-ph { padding: 56px var(--b-g) 64px; }
.b-ph__t { max-width: 22ch; margin: 28px 0 0; font: 400 clamp(36px, 4.6vw, 64px)/1.04 var(--b-font-display); letter-spacing: -.025em; }
.b-ph__lead { max-width: 60ch; margin: 24px 0 0; font: 400 19px/1.65 var(--b-font-sans); color: var(--b-ink-2); }

/* Autor + compartir */
.b-au { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--b-ink); }
.b-au__l { display: flex; align-items: center; gap: 14px; }
.b-au__l strong { display: block; font: 500 15px/1.2 var(--b-font-sans); }
.b-au__l .b-mono { display: block; margin-top: 6px; color: var(--b-ink-3); }
.b-av { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--b-ink); color: var(--b-bg); font: 500 13px/1 var(--b-font-mono); letter-spacing: .06em; }
.b-au__l strong a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.b-au__l strong a:hover { border-bottom-color: var(--b-sig); }
.b-abio__l { display: flex; flex-direction: column; gap: 20px; }
.b-abio__ph { display: block; width: 100%; max-width: 280px; }
.b-abio__ph .b-pf__in { font-size: 72px; }
.b-abio__ph .b-pf__ph img { transition: transform .6s var(--b-ease); }
.b-abio__ph:hover .b-pf__ph img { transform: scale(1.03); }
.b-abio__go { color: var(--b-ink); text-decoration: none; border-bottom: 1px solid var(--b-hair-2); white-space: nowrap; transition: border-color .2s; }
.b-abio__go:hover { border-bottom-color: var(--b-sig); }
.b-shr { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.b-shr a, .b-shr button { padding: 0 0 3px; border-bottom: 1px solid var(--b-hair-2); color: var(--b-ink); text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.b-shr a:hover, .b-shr button:hover { border-color: var(--b-ink); }
.b-shr button.is-done { border-color: var(--b-sig); color: var(--b-sig); }

/* Cuerpo a 3 columnas: índice | contenido | CTA */
.b-body3 { display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; gap: 64px; align-items: start; padding: 88px var(--b-g) 120px; border-top: 1px solid var(--b-hair); }
.b-body3--notoc { grid-template-columns: minmax(0, 1fr) 280px; }
.b-post__content { min-width: 0; }

.b-toc { position: sticky; top: calc(var(--b-admin) + var(--b-nav-h) + 40px); display: flex; flex-direction: column; max-height: calc(100vh - var(--b-admin) - var(--b-nav-h) - 80px); overflow-y: auto; }
.b-toc > .b-mono { padding-bottom: 14px; border-bottom: 1px solid var(--b-ink); color: var(--b-ink-3); }
.b-toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--b-hair); color: var(--b-ink-2); text-decoration: none; font: 400 14px/1.4 var(--b-font-sans); }
.b-toc a .b-mono { color: var(--b-ink-3); line-height: 1.4; }
.b-toc a:hover { color: var(--b-ink); }
.b-toc a.is-on { color: var(--b-ink); font-weight: 500; }
.b-toc a.is-on .b-mono { color: var(--b-sig); }
.b-toc__pr { margin-top: 16px; color: var(--b-ink-3); }
.b-toc__pb { height: 2px; margin-top: 10px; background: var(--b-hair); }
.b-toc__pb i { display: block; width: 0; height: 100%; background: var(--b-sig); }

.b-asd { position: sticky; top: calc(var(--b-admin) + var(--b-nav-h) + 40px); display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--b-ink); }
.b-asd > .b-mono { color: var(--b-sig); }
.b-asd__t { margin: 0; font: 500 22px/1.2 var(--b-font-display); letter-spacing: -.011em; }
.b-asd p { margin: 0; font: 400 14px/1.6 var(--b-font-sans); color: var(--b-ink-2); }
.b-asd .b-btn { align-self: flex-start; }

/* Autor (bio) */
.b-abio { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.b-abio p { margin: 0; font: 300 clamp(20px, 2vw, 26px)/1.35 var(--b-font-display); letter-spacing: -.011em; color: var(--b-ink); }

@media (max-width: 1200px) {
  .b-body3 { grid-template-columns: 220px minmax(0, 1fr); }
  .b-body3--notoc { grid-template-columns: minmax(0, 1fr); }
  .b-asd { position: static; grid-column: 2; max-width: 680px; }
  .b-body3--notoc .b-asd { grid-column: 1; }
}
@media (max-width: 900px) {
  .b-ph { padding: 40px var(--b-g) 48px; }
  .b-body3, .b-body3--notoc { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 48px; padding-bottom: 80px; }
  .b-toc { position: static; max-height: none; }
  .b-toc__pr, .b-toc__pb { display: none; }
  .b-asd { grid-column: 1; }
  .b-abio { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}