/*
 * Estilos do Bloco "Cards de Páginas"
 * 
 * Implementação premium baseada em CSS puro, utilizando variáveis do tema.
 * Focado em grids responsivos, efeitos de vidro e animações suaves.
 */

.escs-page-cards {
	padding: var(--space-8) 0;
}

/* Correção para transbordamento no Editor Gutenberg Sidebar */
.components-panel__body
	.components-base-control
	.components-input-control__container,
.components-panel__body
	.components-base-control
	.components-input-control__input {
	max-width: 15vw !important;
	box-sizing: border-box !important;
}

.escs-page-cards-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.escs-page-cards-grid.cols-2,
	.escs-page-cards-grid.cols-3,
	.escs-page-cards-grid.cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.escs-page-cards-grid.cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.escs-page-cards-grid.cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.escs-page-card {
	background-color: #ffffff;
	padding: var(--space-8);
	border-radius: 0.75rem; /* 12px / rounded-xl */
	border: 1px solid #e5e7eb; /* cor suave para border-outline */
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	color: inherit;
}

.escs-page-card:hover {
	border-color: var(--cor-primaria);
	box-shadow:
		0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.escs-page-card-icon-wrapper {
	width: 4rem;
	height: 4rem;
	border-radius: 9999px;
	background-color: #fff7ed; /* cor suave similar ao background do icone */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-6);
	transition: transform 300ms ease;
}

.escs-page-card:hover .escs-page-card-icon-wrapper {
	transform: scale(1.1);
}

.escs-page-card-icon-wrapper i {
	color: var(--cor-primaria);
	font-size: 2.25rem;
}

.escs-page-card-title {
	font-size: var(--text-xl);
	font-weight: var(--peso-negrito);
	color: #1a1a1a;
	margin-bottom: var(--space-3) !important;
	margin-top: 0 !important;
}

.escs-page-card-description {
	font-size: var(--text-sm);
	color: #6b7280;
	margin-bottom: var(--space-6);
	flex: 1;
	line-height: 1.5;
}

.escs-page-card-link {
	color: var(--cor-primaria);
	font-weight: var(--peso-medio);
	font-size: var(--text-sm);
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	transition: gap 300ms ease;
}

.escs-page-card:hover .escs-page-card-link {
	gap: 0.5rem;
}

.escs-page-card-link i {
	font-size: 0.875rem;
}