/* ==========================================================================
   La Heroica — Sistema de diagramación angular (Norma Gráfica 2026 · §07)
   Tercera Compañía de Bomberos de Santiago · 1863

   «La huella de la estrella»: tomamos los ángulos de la estrella del escudo para
   crear formas modulares (banners con punta, bloques en chevron, recortes de
   imagen). Lenguaje geométrico, limpio y reconocible. Regla del manual:
   composición limpia — no recargar las piezas.

   Depende de los tokens de marca (--lh-red, --lh-gold) que mapea main.css desde
   theme.json; todos llevan fallback literal para degradar sin el theme (editor/QA).
   ========================================================================== */

:root {
	/* Profundidad de la punta/ángulo del sistema (alto del «pico» de la estrella). */
	--lh-angle: 26px;
}

/* --------------------------------------------------------------------------
   BANNER CON PUNTA — bloque con remate inferior en pico central (como el
   gallardete del manual, p.13/22). Pensado para titulares cortos sobre color.
   El padding inferior reserva el espacio del pico para que el texto no se corte.
   -------------------------------------------------------------------------- */
.lh-banner--point,
.wp-block-group.is-style-lh-banner-point {
	position: relative;
	background: var(--lh-red, #C3360E);
	color: #FFFFFF;
	padding: 1.4rem clamp(1.2rem, 4vw, 2.4rem) calc(1.4rem + var(--lh-angle));
	clip-path: polygon(
		0 0, 100% 0,
		100% calc(100% - var(--lh-angle)),
		50% 100%,
		0 calc(100% - var(--lh-angle))
	);
}
/* Variante en oro patrimonial. */
.lh-banner--point.lh-banner--gold,
.wp-block-group.is-style-lh-banner-point.has-gold-background-color {
	background: var(--lh-gold, #BA9E60);
	color: var(--lh-ink, #1A1A1A);
}
.lh-banner--point :where(h1, h2, h3, p) {
	margin: 0;
}

/* --------------------------------------------------------------------------
   CHEVRON — bloque con el borde derecho inclinado (como «Composición limpia»).
   Útil para tiras/etiquetas de sección. El padding derecho deja aire tras el corte.
   -------------------------------------------------------------------------- */
.lh-chevron {
	position: relative;
	display: inline-block;
	background: var(--lh-red, #C3360E);
	color: #FFFFFF;
	padding: 0.7rem calc(1.6rem + var(--lh-angle)) 0.7rem 1.4rem;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--lh-angle)) 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   ACENTO ANGULAR — «pico» de la estrella que sustituye al subrayado recto bajo
   los títulos de sección. Geometría de la marca, mínimo peso. Se engancha a las
   clases REALES del contenido (la portada vive horneada en BD, no en patterns),
   por eso aparece sin depender de marcado nuevo. Respeta la alineación: centrado
   bajo títulos centrados (`has-text-align-center`), a la izquierda si no.
   -------------------------------------------------------------------------- */
.lh-angular-accent::after,
.lh-section-title::after,
.lh-about__title::after,
.lh-cta__title::after,
.lh-page__title::after,
.lh-banner__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 12px;
	margin: 0.9rem 0 0;
	background: var(--lh-gold, #BA9E60);
	clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}
/* Centrado cuando el título lo está (secciones, CTA y el banner —siempre
   centrado—). Los títulos de página/noticia (`lh-page__title`) van a la izq. */
.has-text-align-center.lh-section-title::after,
.has-text-align-center.lh-cta__title::after,
.lh-banner__title::after,
.has-text-align-center .lh-angular-accent::after {
	margin-inline: auto;
}
/* El acento del título de sección reabsorbe el margen inferior original del
   título (2.4rem) para no separar de más del contenido que le sigue. */
.lh-section-title::after {
	margin-bottom: -1.4rem;
}

/* --------------------------------------------------------------------------
   FOTO ANGULAR DE «QUIÉNES SOMOS» — la forma recorta la imagen (esquina inf.
   izquierda achaflanada). Se aplica directo a la figura horneada; el borde
   inferior dorado se mantiene como remate patrimonial.
   -------------------------------------------------------------------------- */
.lh-about__figure {
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--lh-angle) 100%, 0 calc(100% - var(--lh-angle)));
	border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   RECORTE ANGULAR DE IMAGEN — «la forma recorta la imagen» (p.22). Esquina
   inferior izquierda achaflanada, evocando el ángulo de la estrella.
   -------------------------------------------------------------------------- */
.lh-angular-img img,
.wp-block-image.is-style-lh-angular img {
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--lh-angle) 100%, 0 calc(100% - var(--lh-angle)));
}

/* --------------------------------------------------------------------------
   HERO — remate angular inferior sobrio: una banda en pico que ancla el hero
   al contenido sin tapar la fotografía (no se recorta el fondo, es un acento).
   -------------------------------------------------------------------------- */
.lh-hero {
	position: relative;
}
.lh-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	transform: translateX(-50%);
	width: clamp(120px, 24vw, 260px);
	height: var(--lh-angle);
	background: var(--lh-red, #C3360E);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	pointer-events: none;
}

/* Respeta el movimiento reducido: las formas son estáticas, sin animación, así
   que no hay nada que desactivar; se documenta para futuras ampliaciones. */