/**
 * Folha de estilo: Bloco Destaque Informativo
 * Descrição: Card de alta visibilidade com ícone lateral e borda de destaque.
 */

.escs-highlight-block-wrapper {
	margin: 2rem 0;
	max-width: var(--container-max-width);
}

.escs-highlight-container {
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	border-left: 4px solid var(--cor-primaria);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none; /* Caso seja link */
	cursor: default;
}

[href].escs-highlight-container {
	cursor: pointer;
}

@media (min-width: 768px) {
	.escs-highlight-container {
		flex-direction: row;
		padding: 2rem;
		border-top-right-radius: 1rem;
		border-bottom-right-radius: 1rem;
	}
}

.escs-highlight-container:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Icon Slot */
.escs-highlight-icon-slot {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.75rem;
	background-color: #fff3ed; /* Light version of primary orange */
	color: var(--cor-primaria);
	transition: transform 0.3s ease;
}

.escs-highlight-container:hover .escs-highlight-icon-slot {
	transform: scale(1.1);
}

.escs-highlight-icon-slot i {
	font-size: 1.875rem;
}

/* Variantes de Estilo */

/* Primary (Padrão) */
.escs-variant-primary {
	border-left-color: var(--cor-primaria);
}
.escs-variant-primary .escs-highlight-icon-slot {
	background-color: #fff3ed;
	color: var(--cor-primaria);
}

/* Info (Azul) */
.escs-variant-info {
	border-left-color: #0284c7;
}
.escs-variant-info .escs-highlight-icon-slot {
	background-color: #f0f9ff;
	color: #0284c7;
}

/* Warning (Amarelo) */
.escs-variant-warning {
	border-left-color: #ca8a04;
}
.escs-variant-warning .escs-highlight-icon-slot {
	background-color: #fefce8;
	color: #ca8a04;
}

/* Danger (Vermelho) */
.escs-variant-danger {
	border-left-color: #dc2626;
}
.escs-variant-danger .escs-highlight-icon-slot {
	background-color: #fef2f2;
	color: #dc2626;
}

/* Content Area */
.escs-highlight-content-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.escs-highlight-title {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--cor-texto-claro);
	margin: 0;
	line-height: 1.25;
}

.escs-highlight-text {
	color: #475569;
	line-height: 1.625;
	font-size: 1rem;
	margin: 0;
}

/* Editor Specifics */
.escs-highlight-block .escs-highlight-container {
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
}