/*
 * Blog LOBE - pagina publica de un post (blog_post_pruebas.php).
 * Se carga despues de blog_home.css: reutiliza sus colores (--bh-*), .bh-home y .bh-wrap. Todo lo nuevo cuelga de .bp-*
 */

.bp-post { padding-bottom: 70px; }
.bp-estrecho { max-width: 860px; }

/* ================= CABECERA DEL POST ================= */
/* style.css da a TODO <header> position:absolute/relative, top:20px y z-index:99 (es la cabecera de la web). Aqui se anula para que
   esta cabecera del post no tape la barra de redes ni la cabecera fija. Los 20px de top se compensan en el padding superior. */
.bp-post header, .bp-cabecera { position: static; top: auto; width: auto; z-index: auto; }
.bp-cabecera { background: linear-gradient(#efefef 0, #fff 100%); padding: 54px 0 30px; margin-bottom: 18px; }

.bp-migas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--bh-gris); margin-bottom: 22px; }
.bp-migas a { color: var(--bh-gris); text-decoration: none; }
.bp-migas a:hover { color: var(--bh-rojo); text-decoration: underline; }
.bp-flecha { opacity: .6; }

.bp-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bp-cats a { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
	color: var(--bh-rojo); border: 1px solid var(--bh-rojo); border-radius: 999px; padding: 7px 12px 6px; text-decoration: none; transition: background .2s, color .2s; }
.bp-cats a:hover, .bp-cats a:focus { background: var(--bh-rojo); color: #fff; text-decoration: none; }

.bp-titulo { font-size: 44px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: #000; margin: 0 0 18px; }

.bp-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14px; font-weight: 500; color: var(--bh-texto); }
.bp-meta span:last-child { font-weight: 300; font-style: italic; opacity: .8; }
.bp-sep { opacity: .5; }

/* ================= TEXTO DEL POST ================= */
.bp-contenido { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--bh-texto); overflow-wrap: break-word; }
.bp-contenido > :first-child { margin-top: 0; }
.bp-contenido * { max-width: 100%; }
.bp-contenido p { margin: 0 0 1.25em; }
.bp-contenido a { color: var(--bh-rojo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bp-contenido a:hover { text-decoration-thickness: 2px; }
.bp-contenido strong, .bp-contenido b { font-weight: 700; }
.bp-contenido h2, .bp-contenido h3, .bp-contenido h4, .bp-contenido h5 { font-weight: 600; line-height: 1.25; color: #000; margin: 1.9em 0 .6em; }
.bp-contenido h2 { font-size: 30px; }
.bp-contenido h3 { font-size: 24px; }
.bp-contenido h4, .bp-contenido h5 { font-size: 20px; }
.bp-contenido ul, .bp-contenido ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.bp-contenido li { margin-bottom: .4em; }
.bp-contenido blockquote { margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--bh-rojo); font-size: 1.08em; font-style: italic; color: #333; }
.bp-contenido blockquote p:last-child { margin-bottom: 0; }
.bp-contenido hr { border: 0; border-top: 1px solid #e0e0e0; margin: 2.2em 0; }
.bp-contenido sup, .bp-contenido sub { line-height: 0; }

/* imagenes y pies de foto */
.bp-contenido img { height: auto; }
.bp-contenido figure { margin: 2em 0; }
.bp-contenido figure img { display: block; margin: 0 auto; border-radius: 10px; }
/* style.css de la web da a todo <figcaption> un fondo negro semitransparente y un marco (efecto de otras secciones): aqui se anula */
.bp-contenido figcaption, .bp-contenido .wp-caption-text { background: none; padding: 0; transition: none; position: static; }
.bp-contenido figcaption::before, .bp-contenido figcaption::after { content: none; display: none; }
.bp-contenido figcaption, .bp-contenido .wp-caption-text { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.45; color: var(--bh-gris); text-align: center; }
.bp-contenido p > img { border-radius: 10px; }
.bp-contenido .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
@media (min-width: 768px) {
	.bp-contenido .alignleft { float: left; max-width: 50%; margin: .3em 28px 1em 0; }
	.bp-contenido .alignright { float: right; max-width: 50%; margin: .3em 0 1em 28px; }
}
.bp-contenido::after { content: ''; display: table; clear: both; }

/* videos de YouTube a ancho completo (16:9) */
.bp-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 2em 0; border-radius: 12px; overflow: hidden; background: #000; }
.bp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bp-contenido iframe { border: 0; }
.bp-iframe-fb { display: block; margin: 2em auto; }

/* tablas: con desplazamiento horizontal si no caben */
.bp-tabla { overflow-x: auto; margin: 1.8em 0; }
.bp-contenido table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.bp-contenido th, .bp-contenido td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; vertical-align: top; }
.bp-contenido th { background: #efefef; font-weight: 600; }

/* ================= GALERIAS (formato de WordPress: antiguo con ul/li y nuevo con figuras anidadas) ================= */
.bp-contenido .wp-block-gallery { margin: 2em 0; }
.bp-contenido .blocks-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.bp-contenido .columns-1 .blocks-gallery-grid { grid-template-columns: 1fr; }
.bp-contenido .columns-2 .blocks-gallery-grid { grid-template-columns: repeat(2, 1fr); }
.bp-contenido .columns-4 .blocks-gallery-grid { grid-template-columns: repeat(4, 1fr); }
.bp-contenido .blocks-gallery-item { margin: 0; padding: 0; }
.bp-contenido .blocks-gallery-item figure { margin: 0; }
.bp-contenido .blocks-gallery-item img, .bp-contenido .has-nested-images figure img { width: 100%; display: block; border-radius: 10px; }
.bp-contenido .is-cropped .blocks-gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; }
.bp-contenido .wp-block-gallery.has-nested-images { display: flex; flex-wrap: wrap; gap: 12px; }
.bp-contenido .has-nested-images > figure { margin: 0; flex: 1 1 calc(33.33% - 12px); }
.bp-contenido .has-nested-images.columns-1 > figure { flex-basis: 100%; }
.bp-contenido .has-nested-images.columns-2 > figure { flex-basis: calc(50% - 12px); }
.bp-contenido .has-nested-images.columns-4 > figure { flex-basis: calc(25% - 12px); }
.bp-contenido .has-nested-images.is-cropped > figure img { height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bp-contenido .wp-block-gallery figcaption { font-size: 13px; }
.bp-contenido .wp-block-gallery img { cursor: zoom-in; }

/* ================= ETIQUETAS Y VOLVER ================= */
.bp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 52px; padding-top: 24px; border-top: 1px solid #e3e3e3; }
.bp-tags-t { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.bp-tags a { display: inline-block; font-size: 13px; font-weight: 400; line-height: 1; color: var(--bh-texto); border: 1px solid #cfcfcf; border-radius: 999px; padding: 7px 13px 6px; text-decoration: none; transition: border-color .2s, color .2s; }
.bp-tags a:hover, .bp-tags a:focus { color: var(--bh-rojo); border-color: var(--bh-rojo); text-decoration: none; }

.bp-volver { margin: 40px 0 0; }
.bp-volver a { display: inline-block; font-size: 15px; font-weight: 500; color: var(--bh-rojo); text-decoration: none; border-bottom: 1px solid transparent; }
.bp-volver a:hover { border-bottom-color: var(--bh-rojo); text-decoration: none; }

.bp-no-existe { padding: 60px 0 40px; min-height: 40vh; }
.bp-no-existe p { font-size: 18px; line-height: 1.6; }

/* ================= AMPLIACION DE FOTOS (galerias) ================= */
.bp-lb { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(10, 10, 10, .93); padding: 56px 64px 64px; }
.bp-lb.is-abierto { display: flex; }
.bp-lb img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.bp-lb-pie { margin-top: 14px; max-width: 900px; color: #e9e9e9; font: 300 15px/1.45 'Montserrat', sans-serif; text-align: center; min-height: 22px; }
.bp-lb-cuenta { position: absolute; top: 20px; left: 24px; color: #bbb; font: 400 13px/1 'Montserrat', sans-serif; }
.bp-lb button { position: absolute; border: 0; background: transparent; color: #fff; cursor: pointer; line-height: 1; padding: 12px 16px; font-family: Arial, sans-serif; opacity: .85; }
.bp-lb button:hover, .bp-lb button:focus-visible { opacity: 1; outline: 0; background: rgba(255, 255, 255, .12); }
.bp-lb-cerrar { top: 10px; right: 14px; font-size: 38px; }
.bp-lb-ant, .bp-lb-sig { top: 50%; transform: translateY(-50%); font-size: 46px; }
.bp-lb-ant { left: 8px; }
.bp-lb-sig { right: 8px; }
.bp-lb.es-una .bp-lb-ant, .bp-lb.es-una .bp-lb-sig, .bp-lb.es-una .bp-lb-cuenta { display: none; }
body.bp-lb-abierto { overflow: hidden; }

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
	.bp-titulo { font-size: 36px; }
}
@media (max-width: 767px) {
	.bp-cabecera { padding: 42px 0 20px; }
	.bp-migas { margin-bottom: 16px; }
	.bp-titulo { font-size: 28px; }
	.bp-contenido { font-size: 17px; line-height: 1.7; }
	.bp-contenido h2 { font-size: 25px; }
	.bp-contenido h3 { font-size: 21px; }
	.bp-contenido .blocks-gallery-grid, .bp-contenido .columns-4 .blocks-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.bp-contenido .columns-1 .blocks-gallery-grid { grid-template-columns: 1fr; }
	.bp-contenido .has-nested-images > figure, .bp-contenido .has-nested-images.columns-2 > figure, .bp-contenido .has-nested-images.columns-4 > figure { flex-basis: calc(50% - 8px); }
	.bp-contenido .wp-block-gallery.has-nested-images { gap: 8px; }
	.bp-lb { padding: 52px 10px 56px; }
	.bp-lb-ant, .bp-lb-sig { font-size: 38px; padding: 10px 8px; }
	.bp-tags { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.bp-cats a, .bp-tags a { transition: none; }
}