/**
 * Ultra Desnivel — blocks.css
 * Estilos de bloques de Gutenberg en el front-end, alineados con los tokens
 * del theme. Se carga condicionalmente cuando hay bloques en la página.
 * Depende de: ud-variables, ud-base, ud-components.
 */

/* ============================================================= *
 * 1. Anchos de bloque coherentes con theme.json
 * ============================================================= */
.entry-content > *,
.wp-block-post-content > * {
	max-width: var(--ud-content);
	margin-inline: auto;
}

.entry-content > .alignwide,
.wp-block-post-content > .alignwide {
	max-width: var(--ud-wide);
}

.entry-content > .alignfull,
.wp-block-post-content > .alignfull {
	max-width: none;
}

/* ============================================================= *
 * 2. Títulos y párrafos
 * ============================================================= */
.wp-block-heading {
	font-family: var(--ud-font-heading);
	font-weight: var(--ud-weight-heading);
	line-height: var(--ud-lh-snug);
	color: var(--ud-color-primary);
	margin: var(--ud-space-50) 0 var(--ud-space-30);
}

.wp-block-heading:first-child {
	margin-top: 0;
}

/* ============================================================= *
 * 3. Botones (bloque core/button)
 * ============================================================= */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.5rem;
	font-weight: var(--ud-weight-bold);
	border-radius: var(--ud-radius-sm);
	background: var(--ud-color-accent);
	color: #fff;
	text-decoration: none;
	transition: background-color var(--ud-dur) var(--ud-ease), transform var(--ud-dur) var(--ud-ease);
}

.wp-block-button__link:hover {
	background: var(--ud-color-accent-dark);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--ud-color-primary);
	border: 2px solid var(--ud-color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ud-color-primary);
	color: #fff;
}

/* ============================================================= *
 * 4. Columnas y grupos
 * ============================================================= */
.wp-block-columns {
	gap: var(--ud-space-40);
}

.wp-block-group.has-background {
	padding: var(--ud-space-50);
	border-radius: var(--ud-radius);
}

/* ============================================================= *
 * 5. Imágenes y media
 * ============================================================= */
.wp-block-image img {
	border-radius: var(--ud-radius);
	height: auto;
}

.wp-block-image figcaption,
figcaption {
	font-size: var(--ud-fs-small);
	color: var(--ud-color-muted);
	text-align: center;
	margin-top: var(--ud-space-20);
}

/* ============================================================= *
 * 6. Citas
 * ============================================================= */
.wp-block-quote {
	border-inline-start: 4px solid var(--ud-color-accent);
	padding-inline-start: var(--ud-space-40);
	margin-inline: 0;
	font-style: normal;
	color: var(--ud-color-text);
}

.wp-block-quote cite {
	display: block;
	margin-top: var(--ud-space-20);
	font-size: var(--ud-fs-small);
	color: var(--ud-color-muted);
	font-style: normal;
}

/* ============================================================= *
 * 7. Listas, tablas, separadores
 * ============================================================= */
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.7rem var(--ud-space-30);
	border: 1px solid var(--ud-color-border);
	text-align: start;
}

.wp-block-table th {
	background: var(--ud-color-surface);
	font-weight: var(--ud-weight-bold);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--ud-color-border);
	max-width: var(--ud-content);
}

.wp-block-separator.is-style-wide {
	max-width: var(--ud-wide);
}

/* ============================================================= *
 * 8. Cover (portadas con imagen)
 * ============================================================= */
.wp-block-cover {
	border-radius: var(--ud-radius);
	overflow: hidden;
	min-height: 320px;
}

.wp-block-cover .wp-block-cover__inner-container {
	max-width: var(--ud-wide);
}

/* ============================================================= *
 * 9. Soporte de paleta de theme.json (clases generadas por WP)
 * ============================================================= */
.has-accent-color { color: var(--ud-color-accent); }
.has-accent-background-color { background-color: var(--ud-color-accent); }
.has-primary-color { color: var(--ud-color-primary); }
.has-primary-background-color { background-color: var(--ud-color-primary); }
.has-surface-background-color { background-color: var(--ud-color-surface); }

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition: none;
	}
}