/**
 * Bloque "Ver también" — estilos (front + editor).
 * Cresciente — child theme de BuddyBoss.
 *
 * Ubicación: wp-content/themes/[tu-child]/assets/css/ver-tambien.css
 *
 * Los colores neutros usan color-mix sobre currentColor, así el bloque
 * se adapta solo a fondos claros y oscuros (BuddyBoss tiene ambos modos).
 * Para ajustar a tu paleta exacta, sobreescribe las variables --vt-* .
 */

.cresciente-vt {
	/* ---- Variables ajustables ---- */
	--vt-accent: #1d9e75;          /* verde/teal Cresciente (placeholder) */
	--vt-radius: 12px;

	display: block;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-radius: var(--vt-radius);

	/* Superficie y borde adaptativos (fallback + color-mix) */
	background: rgba(128, 128, 128, 0.06);
	background: color-mix(in srgb, currentColor 4%, transparent);
	border: 1px solid rgba(128, 128, 128, 0.22);
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.cresciente-vt__overline {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--vt-accent);
}

.cresciente-vt__title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vt-accent);
	text-decoration: none;
}

.cresciente-vt__title:hover .cresciente-vt__title-text,
.cresciente-vt__title:focus-visible .cresciente-vt__title-text {
	text-decoration: underline;
}

.cresciente-vt__crumb {
	margin-top: 5px;
	font-size: 13px;
	color: rgba(128, 128, 128, 0.85);
	color: color-mix(in srgb, currentColor 60%, transparent);
}

.cresciente-vt__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 10px;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	/* Tono informativo neutro, ajustable */
	background: rgba(55, 138, 221, 0.16);
	color: #5ea8ee;
}

.cresciente-vt__context {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.7;
	color: inherit;
}

.cresciente-vt__context > :first-child {
	margin-top: 0;
}

.cresciente-vt__context > :last-child {
	margin-bottom: 0;
}

/* ---- Íconos SVG inline ---- */
.cresciente-vt__icon,
.cresciente-vt__arrow,
.cresciente-vt__lock {
	display: inline-flex;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}

.cresciente-vt__icon { font-size: 14px; }
.cresciente-vt__arrow { font-size: 16px; }
.cresciente-vt__lock { font-size: 13px; }

.cresciente-vt__icon svg,
.cresciente-vt__arrow svg,
.cresciente-vt__lock svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- Ajustes específicos del editor ---- */
.editor-styles-wrapper .cresciente-vt {
	/* Evita que los estilos del editor le quiten el margen */
	margin: 1.5rem 0;
}