/* ==========================================================================
   La Heroica — Tarjeta de publicación de Instagram (bloque laheroica/instagram)
   Tercera Compañía de Bomberos de Santiago · 1863

   El bloque lo aporta el plugin (módulo `instagram`) y es ESTÁTICO: guarda su
   marcado dentro de la noticia. El diseño, como el del resto del sitio, vive
   aquí, en el theme. Consecuencia práctica: cambiar estos estilos SÍ alcanza a
   las noticias ya publicadas —el CSS se aplica al marcado guardado—, a
   diferencia de cambiar el `save()` del bloque, que no las toca.

   Deliberadamente NO imita la caja blanca de Instagram: es una cita del sitio,
   con su tipografía y su oro, no un incrustado de Meta. No carga JavaScript de
   terceros ni cookies.

   Variables institucionales: se heredan de :root con el theme activo; los
   fallbacks hex mantienen la identidad si el marcado se renderiza fuera de él
   (correo, exportación, QA del admin).
   ========================================================================== */

/* --------------------------------------------------------------------------
   LA FORMA BASE ES LA COMPACTA: foto pequeña a la izquierda, texto al lado.
   Es lo que sale al insertar el bloque y lo que se aplica a toda tarjeta sin
   clase de estilo — incluidas las insertadas antes de que el estilo existiera.
   La vertical grande vive en `.is-style-lh-ig-ficha`, más abajo.
   -------------------------------------------------------------------------- */
.wp-block-laheroica-instagram.lht-ig-card {
	display: grid;
	grid-template-columns: var(--lh-ig-foto, 140px) 1fr;
	/* Filas EXPLÍCITAS y cada hijo colocado a mano. Dejándolo al flujo implícito,
	   el botón de la fachada —que solo existe en modo «incrustado»— empujaba el
	   texto a una tercera fila bajo la foto, en una columna de 140 px. Con la
	   colocación explícita da igual cuántos hijos haya y en qué orden vengan. */
	grid-template-rows: 1fr auto;
	align-items: stretch;
	margin-block: 1.6rem;
	padding: 0;
	border: 1px solid var(--lh-line, #EFEFEF);
	border-top: 3px solid var(--lh-gold, #BA9E60);
	border-radius: var(--lh-radius-lg, 6px);
	background: var(--lh-white, #FFFFFF);
	box-shadow: var(--lh-shadow-sm, 0 1px 3px rgba(63, 12, 17, 0.08));
	/* `overflow: hidden` para que la foto se recorte con las esquinas redondeadas
	   de la caja: sin él, sus esquinas superiores quedan en pico contra el borde y
	   el filete de oro del remate se ve partido. */
	overflow: hidden;
	max-width: 34rem;
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Realce sobrio al pasar por encima: la caja se levanta un punto y el filete
   inferior se tiñe de oro. Nada de mover la tarjeta: es una cita dentro de un
   texto, no un botón. */
.wp-block-laheroica-instagram.lht-ig-card:hover,
.wp-block-laheroica-instagram.lht-ig-card:focus-within {
	box-shadow: var(--lh-shadow-md, 0 6px 18px rgba(63, 12, 17, 0.10));
	border-color: var(--lh-gold-soft, #D8C79B);
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-laheroica-instagram.lht-ig-card {
		transition: none;
	}
}

/* Alineada a un lado, la tarjeta deja de ocupar el ancho del texto. */
.wp-block-laheroica-instagram.alignleft,
.wp-block-laheroica-instagram.alignright {
	max-width: 20rem;
}

.lht-ig-card__link {
	display: block;
	line-height: 0;
	grid-column: 1;
	grid-row: 1 / -1;
}

/* El recorte angular del sistema (Norma Gráfica 2026 §07, «la forma recorta la
   imagen»): esquina inferior IZQUIERDA achaflanada. Mismo polígono y mismo token
   `--lh-angle` que `.wp-block-image.is-style-lh-angular img` y que la foto de
   «Quiénes somos», en `diagramacion.css`. Si allí se reajusta el ángulo, esto lo
   sigue solo. */
.lht-ig-card__img {
	width: 100%;
	/* Cuadrada y recortada: la foto que da Instagram ya viene en 640×640, y así la
	   columna mantiene su altura sea cual sea la proporción de la que venga. */
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--lh-angle, 26px) 100%, 0 calc(100% - var(--lh-angle, 26px)));
}

.lht-ig-card__body {
	grid-column: 2;
	grid-row: 1;
	padding: 0.75rem 0.95rem 0.85rem;
	/* Sin font-family: la tarjeta hereda la tipografía del sitio (Figtree), que
	   es justo lo que la distingue del incrustado de Instagram. */
	color: var(--lh-ink, #1A1A1A);
	text-align: left;
	font-size: 0.88rem;
	line-height: 1.5;
}

/* La cuenta y la fecha: la línea de procedencia, en tono secundario. */
.lht-ig-card__meta {
	margin: 0 0 0.4rem;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--lh-muted, #5A5A5A);
}

/* El glifo de Instagram delante de la cuenta, como MÁSCARA y no como imagen:
   hereda el color del texto (así vale en claro, en oscuro y al imprimir), no
   añade una petición de red y no mete marcado en la entrada — que es lo que
   permitió rediseñar la tarjeta sin invalidar las ya publicadas. */
.lht-ig-card__cuenta::before {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-right: 0.35em;
	vertical-align: -0.12em;
	background-color: currentColor;
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2m0 2.2c-3.1 0-3.5 0-4.7.06-1.1.05-1.7.24-2.1.4-.5.2-.9.44-1.3.84-.4.4-.64.8-.84 1.3-.16.4-.35 1-.4 2.1C2.6 8.5 2.6 8.9 2.6 12s0 3.5.06 4.7c.05 1.1.24 1.7.4 2.1.2.5.44.9.84 1.3.4.4.8.64 1.3.84.4.16 1 .35 2.1.4 1.2.06 1.6.06 4.7.06s3.5 0 4.7-.06c1.1-.05 1.7-.24 2.1-.4.5-.2.9-.44 1.3-.84.4-.4.64-.8.84-1.3.16-.4.35-1 .4-2.1.06-1.2.06-1.6.06-4.7s0-3.5-.06-4.7c-.05-1.1-.24-1.7-.4-2.1-.2-.5-.44-.9-.84-1.3-.4-.4-.8-.64-1.3-.84-.4-.16-1-.35-2.1-.4-1.2-.06-1.6-.06-4.7-.06z'/%3E%3Cpath d='M12 6.9a5.1 5.1 0 1 0 0 10.2 5.1 5.1 0 0 0 0-10.2zm0 8.4a3.3 3.3 0 1 1 0-6.6 3.3 3.3 0 0 1 0 6.6z'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.2'/%3E%3C/svg%3E" );
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2m0 2.2c-3.1 0-3.5 0-4.7.06-1.1.05-1.7.24-2.1.4-.5.2-.9.44-1.3.84-.4.4-.64.8-.84 1.3-.16.4-.35 1-.4 2.1C2.6 8.5 2.6 8.9 2.6 12s0 3.5.06 4.7c.05 1.1.24 1.7.4 2.1.2.5.44.9.84 1.3.4.4.8.64 1.3.84.4.16 1 .35 2.1.4 1.2.06 1.6.06 4.7.06s3.5 0 4.7-.06c1.1-.05 1.7-.24 2.1-.4.5-.2.9-.44 1.3-.84.4-.4.64-.8.84-1.3.16-.4.35-1 .4-2.1.06-1.2.06-1.6.06-4.7s0-3.5-.06-4.7c-.05-1.1-.24-1.7-.4-2.1-.2-.5-.44-.9-.84-1.3-.4-.4-.8-.64-1.3-.84-.4-.16-1-.35-2.1-.4-1.2-.06-1.6-.06-4.7-.06z'/%3E%3Cpath d='M12 6.9a5.1 5.1 0 1 0 0 10.2 5.1 5.1 0 0 0 0-10.2zm0 8.4a3.3 3.3 0 1 1 0-6.6 3.3 3.3 0 0 1 0 6.6z'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.2'/%3E%3C/svg%3E" );
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

/* El punto medio entre la cuenta y la fecha: decorativo, se separa a los lados
   y no se selecciona al copiar la línea. */
.lht-ig-card__sep {
	margin-inline: 0.35em;
	color: var(--lh-gold, #BA9E60);
	user-select: none;
}

.lht-ig-card__cuenta {
	color: var(--lh-red, #C3360E);
	font-weight: 600;
}

/* El pie es de Instagram, no del sitio: se respetan sus saltos de línea, sus
   emojis y sus hashtags. Es una cita, y se recorta con puntos suspensivos si el
   redactor no la acortó (línea 8 ≈ el punto donde deja de aportar). */
/* Comillas de cita en el pie: el texto es de Instagram, no del sitio, y las
   comillas lo dicen sin necesidad de añadir marcado. Van en oro y en un tamaño
   mayor, como en `quote-historica.css`. */
.lht-ig-card__pie::before,
.lht-ig-card__pie::after {
	color: var(--lh-gold, #BA9E60);
	font-size: 1.15em;
	line-height: 0;
}

.lht-ig-card__pie::before {
	content: "\201C";
}

.lht-ig-card__pie::after {
	content: "\201D";
}

.lht-ig-card__pie {
	margin: 0 0 0.55rem;
	white-space: pre-line;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: var(--lh-ig-lineas, 3);
	line-clamp: var(--lh-ig-lineas, 3);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Filete corto de oro entre la cita y el enlace: remate patrimonial, el mismo
   recurso del pie de página. Solo en la ficha grande — en la compacta, con tres
   líneas de pie, un filete más sería ruido. */
.is-style-lh-ig-ficha .lht-ig-card__cta::before {
	content: "";
	display: block;
	width: 2.2rem;
	border-top: 2px solid var(--lh-gold, #BA9E60);
	margin-bottom: 0.7rem;
}

.lht-ig-card__cta {
	display: inline-block;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--lh-red, #C3360E);
	text-decoration: none;
	border-bottom: 1px solid var(--lh-gold, #BA9E60);
	padding-bottom: 1px;
}

.lht-ig-card__cta:hover,
.lht-ig-card__cta:focus {
	color: var(--lh-red-dark, #6E1D08);
	border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
   LA FACHADA DEL INCRUSTADO (modo «incrustado» del bloque)

   La tarjeta se pinta igual; este botón es el interruptor. Nada de Instagram se
   pide hasta que alguien lo pulsa: lo hace `assets/js/instagram-embed.js`.
   -------------------------------------------------------------------------- */
.lht-ig-card__abrir {
	display: block;
	width: 100%;
	grid-column: 2;
	grid-row: 2;
	border: 0;
	border-top: 1px solid var(--lh-line, #EFEFEF);
	background: var(--lh-paper, #EFEFEF);
	color: var(--lh-red, #C3360E);
	font: inherit;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.6rem 1.1rem;
	cursor: pointer;
	text-align: left;
}

.lht-ig-card__abrir::before {
	content: "▸";
	margin-right: 0.45em;
	color: var(--lh-gold, #BA9E60);
}

.lht-ig-card__abrir:hover,
.lht-ig-card__abrir:focus {
	background: var(--lh-white, #FFFFFF);
	color: var(--lh-red-dark, #6E1D08);
}

/* Ya abierto: el botón desaparece y el incrustado ocupa el lugar de la foto. La
   tarjeta NO se vacía —el pie y el enlace siguen ahí— para que un incrustado que
   no llegue a montarse no deje un hueco en la noticia. */
.lht-ig-card--abierta .lht-ig-card__abrir,
.lht-ig-card--abierta .lht-ig-card__link {
	display: none;
}

/* Abierta, el incrustado necesita el ancho entero: la rejilla se deshace. */
.lht-ig-card--abierta {
	display: block;
}

.lht-ig-card--abierta .instagram-media {
	margin: 0 auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.lht-ig-card__link:focus-visible,
.lht-ig-card__cta:focus-visible,
.lht-ig-card__abrir:focus-visible {
	outline: 2px solid var(--lh-focus-ring, #1A1A1A);
	outline-offset: var(--lh-focus-offset, 2px);
}

/* Modificador que el bloque escribe en modo «incrustado». No pinta nada por sí
   mismo —el trabajo lo hacen el botón y `--abierta`—, pero se declara aquí para
   que la clase guardada tenga su regla y `InstagramTarjetaEstilosTest` pueda
   comprobarlo. */
.lht-ig-card--incrustable {
	position: relative;
}

/* En el editor la tarjeta se pinta sin el enlace envolviendo la foto (para no
   navegar al hacer clic), así que la imagen necesita su propio redondeo. */
.lht-ig-card--editor .lht-ig-card__img {
	border-radius: 0;
}

@media print {
	.wp-block-laheroica-instagram.lht-ig-card {
		box-shadow: none;
	}

	/* En papel el enlace no se puede pulsar: se escribe. */
	.lht-ig-card__cta::after {
		content: " (" attr(href) ")";
		font-weight: 400;
		word-break: break-all;
	}
}

/* --------------------------------------------------------------------------
   ESTILO «FICHA GRANDE» — la tarjeta vertical: la foto a todo el ancho de la
   caja y el texto debajo. Es la forma con la que nació el bloque; se conserva
   como opción para cuando la publicación merece protagonismo.
   -------------------------------------------------------------------------- */
.wp-block-laheroica-instagram.lht-ig-card.is-style-lh-ig-ficha {
	display: block;
	max-width: 32rem;
	margin-block: 2rem;
}

.is-style-lh-ig-ficha .lht-ig-card__img {
	height: auto;
	aspect-ratio: auto;
	object-fit: fill;
}

.is-style-lh-ig-ficha .lht-ig-card__body {
	padding: 0.9rem 1.1rem 1.1rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.is-style-lh-ig-ficha .lht-ig-card__pie {
	margin: 0 0 0.8rem;
	--lh-ig-lineas: 8;
}

.is-style-lh-ig-ficha .lht-ig-card__cta {
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   PANTALLAS ESTRECHAS — la compacta se apila: 140 px de foto y el texto al lado
   dejan menos de 200 px para leer en un móvil, que no es leer.
   -------------------------------------------------------------------------- */
@media ( max-width: 30rem ) {
	.wp-block-laheroica-instagram.lht-ig-card {
		display: block;
	}

	.lht-ig-card__abrir,
	.lht-ig-card__body,
	.lht-ig-card__link {
		grid-column: auto;
		grid-row: auto;
	}

	.lht-ig-card__img {
		height: auto;
		aspect-ratio: auto;
		object-fit: fill;
	}
}