/*
CSS de single.php (hero, layout y autor del post).
Solo estructura (flex, gaps, tamaños). Nada de color ni diseño real
(los colores de los border: 2px son solo para que ubiques cada bloque, sacalos cuando quieras).

Esto NO incluye:
- El índice           -> assets/css/toc.css
- El aside             -> assets/css/aside.css
- Las cards relacionadas -> assets/css/cards-related.css
- La caja de autor (al final del post) -> assets/css/post-author-box.css
- La tipografía global (fuente/tamaño de h1/h2/h3 en todo el sitio) -> assets/css/typography.css

=========================================================
GUÍA RÁPIDA — qué tocar acá para cada parte del post:
- Imagen del hero .................... #single-hero / #single-hero-image
- Título y byline del hero ........... #single-hero-text / #single-hero-meta
- Títulos DENTRO del contenido ....... .post-content h2 / .post-content h3
- Imágenes DENTRO del contenido ...... .post-content img
- Leyendas de imagen (captions) ...... .post-content figcaption
=========================================================
*/

/* ---------- HERO ---------- */

/* Esto es la sección que contiene SOLO la imagen del hero del post. */
#single-hero {
	border: 2px solid red; /* borde de 2px, color rojo, para ubicar este bloque mientras diseñás */
}

/* Esto es la imagen del hero en sí (la que subís con el meta box "Imagen de Hero"). */
#single-hero-image {
	width: 100%;    /* ocupa todo el ancho disponible */
	height: auto;   /* la altura se ajusta sola, manteniendo la proporción de la imagen */
	display: block; /* saca el espacio fantasma que dejan las imágenes por defecto (son inline) */
}

/* Esto es la sección con el título (h1) + el byline (autor/fecha), debajo de la imagen. */
#single-hero-text {
	margin-top: 12px; /* separación entre la imagen del hero y este bloque de texto */
	border: 2px solid blue; /* borde de 2px, color azul, para ubicar este bloque mientras diseñás */
}

/* Esto es específicamente la línea "by Autor / Fecha" debajo del título h1. */
#single-hero-meta {
	margin: 8px 0 0; /* separación arriba (entre el h1 y esta línea), nada a los costados ni abajo */
	border: 2px solid green; /* borde de 2px, color verde, para ubicar este bloque mientras diseñás */
}

/* ---------- TÍTULOS DENTRO DEL CONTENIDO (h2/h3 que el autor escribe en el editor) ---------- */

/* Esto son los subtítulos h2 que se ven dentro del texto del post. */
.post-content h2 {
	margin-top: 32px;    /* espacio ANTES del h2 (separa del párrafo anterior) */
	margin-bottom: 12px; /* espacio DESPUÉS del h2 (lo acerca al texto que le sigue) */
	border: 2px solid orange; /* borde de 2px, color naranja, para ubicar este bloque mientras diseñás */
}

/* Esto son los subtítulos h3 (un nivel más chico que h2) dentro del texto del post. */
.post-content h3 {
	margin-top: 24px;   /* espacio ANTES del h3, un poco menos que el h2 porque es más chico */
	margin-bottom: 8px; /* espacio DESPUÉS del h3 */
	border: 2px solid purple; /* borde de 2px, color violeta, para ubicar este bloque mientras diseñás */
}

/* ---------- IMÁGENES DENTRO DEL CONTENIDO ---------- */

/* Esto son las imágenes que el autor pone adentro del texto del post (desde el editor). */
.post-content img {
	max-width: 100%; /* nunca se pasan del ancho de la columna del artículo, aunque la imagen original sea más grande */
	height: auto;    /* la altura se ajusta sola, manteniendo la proporción */
	display: block;  /* saca el espacio fantasma que dejan las imágenes por defecto (son inline) */
	border: 2px solid teal; /* borde de 2px, color teal, para ubicar este bloque mientras diseñás */
}

/* ---------- LEYENDAS DE IMAGEN ----------
   WordPress envuelve las imágenes con leyenda en <figure><img><figcaption>.
   El bloque clásico usa .wp-caption-text, el editor de bloques usa figcaption directo. */

/* Esto es el texto de la leyenda que va debajo de una imagen con caption. */
.post-content figcaption,
.post-content .wp-caption-text {
	margin-top: 8px; /* separación entre la imagen y su leyenda */
	border: 2px solid deeppink; /* borde de 2px, color rosa fuerte, para ubicar este bloque mientras diseñás */
}

/* ---------- LAYOUT (artículo + aside) ---------- */

/* Esto es el layout de dos columnas: el artículo del post + el aside, lado a lado.
   Esta misma clase .post-layout se repite igual en search.php, category.php y author.php. */
.post-layout {
	display: flex;           /* pone los hijos directos en fila, uno al lado del otro */
	align-items: flex-start; /* los alinea arriba (no estira ambas columnas a la misma altura) */
	gap: 40px;                 /* espacio entre el artículo y el aside */
	border: 2px solid brown; /* borde de 2px, color marrón, para ubicar este bloque mientras diseñás */
}

/* Esto es la columna del artículo en sí (índice + contenido del post, sin el aside). */
.post-layout article {
	flex: 1;      /* ocupa todo el espacio sobrante (el aside tiene ancho fijo en aside.css) */
	min-width: 0; /* evita que esta columna desborde si el contenido de adentro es muy ancho */
	border: 2px solid olive; /* borde de 2px, color oliva, para ubicar este bloque mientras diseñás */
}

/* ---------- SECCIÓN DE RELACIONADOS (el wrapper nomás, la card en sí va en cards-related.css) ---------- */

/* Esto es el bloque completo de "relacionados" (el título de la sección + las 3 cards). */
#related-posts {
	margin-top: 48px; /* separación entre el layout de arriba (artículo+aside) y esta sección */
	border: 2px solid navy; /* borde de 2px, color navy, para ubicar este bloque mientras diseñás */
}