/* ==========================================================================
   60 · ARTÍCULO
   --------------------------------------------------------------------------
   Se carga solo en is_singular('post') (ver p2080_ctx_single).

   El cuerpo del artículo NO se estiliza aquí: eso es el contrato de prosa de
   50-blocks.css. Este archivo cubre lo que rodea al texto — cabecera, pie,
   compartir, navegación, relacionados y comentarios.
   ========================================================================== */

/* ==========================================================================
   CABECERA
   ========================================================================== */

/* El antetítulo, la barra y la posición son los de `.section__head`, como en el
   blog. Aquí solo lo propio del artículo: la cabecera mide lo que la columna de
   lectura y el título va a tamaño H1, para que no se confunda con los H2 del texto. */
.post-single__head {
	max-width: var(--w-article);
}

.post-single__title {
	font-size: var(--fs-h1);
}

.post-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: var(--space-2);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.post-single__meta a {
	color: inherit;
}

.post-single__meta a:hover {
	color: var(--c-link-hover);
}

/* ==========================================================================
   PIE DEL ARTÍCULO
   ========================================================================== */

.post-single__tags {
	margin-block-start: var(--space-5);
}

/* ── Compartir ─────────────────────────────────────────────────────────────
   Sustituye a AddThis. Enlaces normales, sin JavaScript ni terceros.
   ────────────────────────────────────────────────────────────────────────── */

.post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: var(--space-4);
	padding-block: var(--space-3);
	border-block: 1px solid var(--c-border);
}

.post-share__label {
	color: var(--c-muted);
	font-size: var(--fs-small);
	font-weight: 600;
}

.post-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	padding: 0;
	list-style: none;
}

.post-share__list li + li {
	margin-block-start: 0;
}

.post-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-button);
	color: var(--c-muted);
	transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.post-share__link:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.post-share__link:hover {
		transform: translateY(-2px);
	}
}

/* «Copiar enlace» es un botón y no un enlace: se le quita el fondo y el relleno
   del navegador para que sea igual que sus vecinos. */
button.post-share__link {
	padding: 0;
	background: none;
}

.post-share__link.is-copied {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

/* Vacío no debe ocupar sitio, pero sigue en el DOM: es la región que anuncia el
   resultado al lector de pantalla. */
.post-share__status {
	color: var(--c-accent);
	font-size: var(--fs-small);
	font-weight: 600;
}

/* ── Anterior / siguiente ──────────────────────────────────────────────── */

.post-nav {
	margin-block-start: var(--space-4);
}

.post-nav .nav-links {
	display: grid;
	gap: var(--space-2);
}

@media (min-width: 640px) {
	.post-nav .nav-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Cuando solo hay siguiente, que se vaya a la derecha. */
	.post-nav .nav-next:only-child {
		grid-column: 2;
		text-align: end;
	}
}

.post-nav a {
	display: block;
	height: 100%;
	padding: var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	text-decoration: none;
	transition: border-color var(--t-fast);
}

.post-nav a:hover {
	border-color: var(--c-accent);
}

.post-nav__dir {
	display: block;
	color: var(--c-muted);
	font-size: var(--fs-data);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.post-nav__title {
	display: block;
	margin-block-start: 4px;
	color: var(--c-heading);
	font-weight: 600;
}

/* ── Relacionados ──────────────────────────────────────────────────────── */

.post-related {
	background-color: var(--c-bg-sunken);
}

.post-related .post-grid {
	margin-block-start: var(--space-4);
}

/* ==========================================================================
   COMENTARIOS
   --------------------------------------------------------------------------
   Marcado del walker del núcleo. No se reescribe: ya es accesible y trae los
   identificadores y los enlaces de respuesta bien puestos.
   ========================================================================== */

.comments {
	margin-block-start: var(--space-5);
}

.comments__title {
	font-size: var(--fs-h3);
}

.comments__list {
	margin-block: var(--space-4) 0;
	padding: 0;
	list-style: none;
}

/* Las respuestas anidadas del núcleo van en una <ol> dentro del <li>. */
.comments__list .children {
	margin-block-start: var(--space-3);
	padding-inline-start: var(--space-3);
	border-inline-start: 2px solid var(--c-border);
	list-style: none;
}

.comments__list li + li,
.comments__list .children li + li {
	margin-block-start: var(--space-3);
}

.comment-body {
	padding: var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--c-heading);
	font-weight: 700;
}

.comment-author img {
	border-radius: var(--radius-pill);
}

.comment-author .says {
	/* «dice:» del núcleo. Se anuncia, pero no se pinta. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.comment-meta {
	margin-block-start: 4px;
	color: var(--c-muted);
	font-size: var(--fs-data);
}

.comment-content {
	margin-block-start: var(--space-2);
}

.comment-content > * + * {
	margin-block-start: var(--space-2);
}

.reply {
	margin-block-start: var(--space-2);
}

.comment-reply-link {
	font-size: var(--fs-small);
	font-weight: 600;
}

/* El autor del artículo se distingue con un filo, no solo con un color. */
.comment-body .bypostauthor,
li.bypostauthor > .comment-body {
	border-color: var(--c-accent);
}

.comments__closed {
	margin-block-start: var(--space-3);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

/* ── Formulario ────────────────────────────────────────────────────────────
   Los campos son los `.field` de 40-components.css. Aquí solo el contenedor.
   ────────────────────────────────────────────────────────────────────────── */

.comment-respond {
	margin-block-start: var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised);
}

.comment-form {
	margin-block-start: var(--space-3);
}

@media (min-width: 640px) {
	.comment-form .field:has(#author),
	.comment-form .field:has(#email) {
		display: inline-flex;
		width: calc(50% - var(--space-1));
	}
}

#cancel-comment-reply-link {
	margin-inline-start: var(--space-2);
	font-size: var(--fs-small);
	font-weight: 600;
}