/* ════════════════════════════════════════════════════
   CF PRE-FOOTER — TEXTO SEO
   Ruta: prefooter/assets/css/cf-pf-seo.css
════════════════════════════════════════════════════ */

/* Contenedor centrado, con el mismo ancho real que usa el theme
   (--theme-container-width / --theme-normal-container-max-width son
   las variables que Blocksy usa para su propio .ct-container) — así
   esta sección queda alineada con el resto del sitio, en vez de un
   ancho fijo propio. 1200px queda solo como fallback para un theme
   sin esas variables (este plugin no depende de ningún theme en
   particular para funcionar). */
.cf-ancho-maximo {
    width: var(--theme-container-width, 100%);
    max-width: var(--theme-normal-container-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* Sin background propio a propósito: hereda limpio el fondo real del
   tema (a diferencia de las otras 5 secciones, esta no tiene "Fondo
   de la sección" — el pedido era solo padding acá).
   --hb-pf-seo-padding-v: "Espacio vertical (arriba y abajo)" del
   admin (ver cf_pf_padding_admin_field() en cf-prefooter.php),
   default 20px — reemplaza el valor fijo que había antes. */
.hb-pf-seo {
    padding-top: var(--hb-pf-seo-padding-v, 20px);
    padding-bottom: var(--hb-pf-seo-padding-v, 20px);
}

/* Grid real de 4 columnas: a diferencia de column-count (que balancea
   la altura total y puede terminar mostrando menos columnas de las
   declaradas si el contenido es poco), esto garantiza siempre 4
   columnas parejas — el contenido se reparte en PHP (ver
   cf_pf_seo_split_into_columns) en orden de lectura, y está bien que
   la última quede más corta que las demás. */
.hb-pf-seo-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 30px;
}

.hb-pf-seo-col { min-width: 0; }

/* Párrafos — colores/tamaño editables desde "Estilo del texto" en el
   admin (ver cf_pf_build_seo_style_css() en cf-prefooter-seo.php);
   los valores acá son solo el fallback si esas variables no existen. */
.hb-pf-seo-content p {
    font-size: var(--hb-pf-seo-text-font-size, 13px);
    color: var(--hb-pf-seo-text-color, #5a6480);
    margin: 0 0 16px;
}

/* Títulos dentro del texto SEO — mismo tamaño que el párrafo por
   defecto a propósito (ver nota arriba); solo color y grosor cambian. */
.hb-pf-seo-content strong {
    display: block;
    color: var(--hb-pf-seo-strong-color, #0d2d6e);
    font-size: var(--hb-pf-seo-strong-font-size, 13px);
    font-weight: var(--hb-pf-seo-strong-weight, 600);
}

/* Inline strong (sin salto) */
.hb-pf-seo-content p strong {
    display: inline;
    color: var(--hb-pf-seo-strong-color, #0d2d6e);
    font-size: var(--hb-pf-seo-strong-font-size, 13px);
    font-weight: var(--hb-pf-seo-strong-weight, 600);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .hb-pf-seo-content {
        grid-template-columns: 1fr;
    }
    .hb-pf-seo { padding-left: 16px; padding-right: 16px; }
}