/* ==========================================================================
   Post content — PODS template (post_image_1 / post_image_2 / post_content)
   Basado en el design system "Modernist" (Archivo + paleta terracota).
   Requiere que las variables --color-*, --font-* estén definidas en :root
   (ya están en _ds/modernist.../styles.css). Si el child theme no carga ese
   archivo, se incluyen fallbacks en cada declaración.
   ========================================================================== */

/* — imágenes flotantes (tal cual las diste, sin tocar) — */
h1.entry-title {
    margin-top: 5rem;
}

.content-float {
    max-width: 400px;
    height: auto;
}

.content-float-left {
    float: left;
    margin: 0 20px 15px 0;
}

.content-float-right {
    float: right;
    margin: 0 0 15px 20px;
}

/* Clearfix para que el wrapper no colapse si el contenido es corto */
.post-content-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* — featured image (WP nativa, fuera del wrapper, a todo ancho) — */
.post-feature-image {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto 48px;
}

@media (max-width: 640px) {
    .post-feature-image {
        margin-bottom: 32px;
    }
}

/* — wrapper — */
.post-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 40px;
}

@media (max-width: 640px) {
    .post-content-wrapper {
        padding: 48px 20px;
    }
}

/* — tipografía del cuerpo — */
.content-text {
    font-family: var(--font-body, "Archivo", system-ui, sans-serif);
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-text, #201e1d);
}

.content-text > *:first-child {
    margin-top: 0;
}
.content-text > *:last-child {
    margin-bottom: 0;
}

.content-text p {
    margin: 0 0 24px;
}

.content-text h1,
.content-text h2,
.content-text h3,
.content-text h4 {
    font-family: var(--font-heading, "Archivo", system-ui, sans-serif);
    font-weight: var(--font-heading-weight, 800);
    line-height: 1.2;
    color: var(--color-text, #201e1d);
    margin: 40px 0 20px;
}

.content-text h1 { font-size: 42px; }
.content-text h2 { font-size: 28px; }
.content-text h3 { font-size: 22px; }
.content-text h4 { font-size: 18px; }

/* el primer heading no necesita el espacio superior extra */
.content-text > h1:first-child,
.content-text > h2:first-child,
.content-text > h3:first-child,
.content-text > h4:first-child {
    margin-top: 0;
}

.content-text ul,
.content-text ol {
    margin: 0 0 24px;
    padding-left: 1.2em;
}

.content-text li {
    margin-bottom: 8px;
}

.content-text a {
    color: var(--color-accent, #ec3013);
    text-underline-offset: 3px;
}
.content-text a:hover {
    color: var(--color-accent-600, #dd2b0f);
}

.content-text strong {
    font-weight: 600;
}

.content-text blockquote {
    margin: 32px 0;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--color-accent, #ec3013);
    font-style: italic;
    color: var(--color-neutral-700, #605d5d);
}

.content-text figcaption {
    font-size: 12px;
    margin-top: 6px;
    color: var(--color-neutral-600, #7d7979);
}

/* — separadores — */

/* separador simple: <hr> dentro del contenido (ej. desde el editor de WP) */
.content-text hr {
    height: 2px;
    border: 0;
    margin: 48px 0;
    background: var(--color-divider, rgba(32, 30, 29, 0.4));
    clear: both; /* evita que corte a mitad de una imagen flotante */
}

/* separador con etiqueta central, para usar manualmente en el HTML del post:
   <div class="section-divider"><span>continúa</span></div> */
.section-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    clear: both;
    margin: 56px 0;
}

.section-divider::before,
.section-divider::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--color-divider, rgba(32, 30, 29, 0.4));
}

.section-divider span {
    font-family: var(--font-body, "Archivo", system-ui, sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-600, #7d7979);
}

/* separador vacío (solo línea), variante sin etiqueta:
   <div class="section-divider section-divider--plain"></div> */
.section-divider--plain::before,
.section-divider--plain::after {
    flex: none;
    width: 100%;
}
.section-divider--plain span {
    display: none;
}