/**
 * Acontece no Perini - Estilos do front-end.
 *
 * Todas as variáveis (--acp-*) são injetadas dinamicamente via
 * wp_add_inline_style() a partir das configurações salvas no admin
 * (ver includes/class-assets.php). Os valores abaixo em var(--x, fallback)
 * servem apenas como segurança caso a variável não tenha sido definida.
 */

.acp-wrapper {
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	font-family: var(--acp-font-family, 'Montserrat', sans-serif);
	padding-left: var(--acp-side-spacing-desktop, 0px);
	padding-right: var(--acp-side-spacing-desktop, 0px);
}

.acp-wrapper *,
.acp-wrapper *::before,
.acp-wrapper *::after {
	box-sizing: border-box;
}

.acp-empty {
	font-family: var(--acp-font-family, 'Montserrat', sans-serif);
	color: #666;
}

/* ---------------------------------------------------
 * Estrutura de empilhamento (scroll stack)
 * ---------------------------------------------------
 * top e z-index são aplicados via style="" inline (calculados em
 * PHP, ver includes/class-render.php) — mesma técnica usada e já
 * validada em produção no plugin isaHub - Obras: valores fixos em
 * px, sem depender de calc()/var() combinados para o posicionamento.
 */

.acp-card {
	position: -webkit-sticky;
	position: sticky;
	background-color: var(--acp-color-card-bg, #ffffff);
	border-top: var(--acp-line-top-thickness, 1px) solid var(--acp-line-top-color, #d9d9d9);
	padding: clamp(16px, var(--acp-card-padding, 32px), 80px) 0;
	margin-bottom: clamp(16px, var(--acp-card-gap, 40px), 120px);
	display: block;
}

.acp-card:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------
 * Título (linha própria, largura total)
 * --------------------------------------------------- */

.acp-card-category {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acp-color-button, #0a7d6f);
	margin-bottom: 10px;
}

.acp-card-title {
	font-size: var(--acp-title-size-desktop, 22px);
	font-weight: 700;
	line-height: 1.35;
	color: var(--acp-color-title, #1a1a1a);
	margin: 0 0 20px 0;
	padding-bottom: 20px;
	border-bottom: var(--acp-line-bottom-thickness, 1px) solid var(--acp-line-bottom-color, #d9d9d9);
}

.acp-card-title a {
	color: inherit !important;
	text-decoration: none !important;
}

.acp-card-title a:hover,
.acp-card-title a:focus-visible {
	text-decoration: underline !important;
}

/* ---------------------------------------------------
 * Linha de conteúdo (resumo + botão / imagem)
 * --------------------------------------------------- */

.acp-card-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: clamp(16px, var(--acp-gap-text-image, 40px), 120px);
}

.acp-card-content {
	flex: 1 1 50%;
	min-width: 0;
}

.acp-card-summary {
	font-size: var(--acp-summary-size-desktop, 15px);
	line-height: 1.6;
	color: var(--acp-color-summary, #33475b);
	margin: 0 0 24px 0;
}

/* !important nas propriedades visuais: .acp-card-button e
   .acp-card-title a são links (<a>), e temas costumam aplicar cor,
   fundo ou sublinhado próprios a links de forma ampla. Já confirmamos
   esse tipo de conflito em outro plugin neste mesmo site (isaHub Hero
   Slider), então blindamos aqui de forma preventiva. */
.acp-card-button {
	display: inline-block !important;
	background: none !important;
	border: none !important;
	font-size: var(--acp-button-size-desktop, 15px) !important;
	font-weight: var(--acp-button-weight, 700) !important;
	color: var(--acp-color-button, #0a7d6f) !important;
	text-decoration: var(--acp-button-underline, none) !important;
	transition: color 0.2s ease !important;
}

.acp-card-button:hover,
.acp-card-button:focus-visible {
	color: var(--acp-color-button-hover, #08655a) !important;
}

.acp-wrapper a:focus-visible {
	outline: 2px solid var(--acp-color-button, #0a7d6f) !important;
	outline-offset: 3px !important;
}

/* ---------------------------------------------------
 * Imagem
 * --------------------------------------------------- */

.acp-card-image {
	flex: 1 1 50%;
	min-width: 0;
}

.acp-card-image img {
	display: block;
	width: 100%;
	height: var(--acp-image-height-desktop, 320px);
	object-fit: var(--acp-image-object-fit, cover);
	object-position: var(--acp-image-position, center);
	border-radius: var(--acp-image-radius, 8px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ---------------------------------------------------
 * Mobile - imagem em cima, texto embaixo (empilhamento vertical)
 * --------------------------------------------------- */

@media (max-width: 782px) {

	.acp-wrapper {
		padding-left: var(--acp-side-spacing-mobile, 0px);
		padding-right: var(--acp-side-spacing-mobile, 0px);
	}

	.acp-card {
		top: var(--acp-top-mobile, 12px) !important;
	}

	.acp-card-row {
		flex-direction: column;
		flex-wrap: wrap;
	}

	.acp-card-content,
	.acp-card-image {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.acp-card-image {
		order: -1;
	}

	.acp-card-image img {
		height: var(--acp-image-height-mobile, 200px);
	}

	.acp-card-title {
		font-size: var(--acp-title-size-mobile, 18px);
	}

	.acp-card-summary {
		font-size: var(--acp-summary-size-mobile, 14px);
	}

	.acp-card-button {
		font-size: var(--acp-button-size-mobile, 14px);
	}
}