/**
 * Learn with IPOPI page wrapper and layout hooks — Figma nodes 241:9238+.
 */

.ipopi-learn-with-ipopi {
	background: var(--ipopi-color-background-base, #ffffff);
}

.ipopi-learn-with-ipopi > .entry-content,
.ipopi-learn-with-ipopi > .wp-block-post-content {
	width: 100%;
}

.ipopi-learn-with-ipopi__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ipopi-space-700, 48px);
	width: 100%;
}

.ipopi-learn-with-ipopi__hero > .wp-block-ipopi-page-intro,
.ipopi-learn-with-ipopi__hero > .wp-block-ipopi-stats-bar {
	width: 100%;
}

/* Figma 241:9238 — título centrado; texto e stats compartilham coluna de 816px alinhada à esquerda. */
.ipopi-learn-with-ipopi__hero > .wp-block-ipopi-page-intro .ipopi-page-intro__inner,
.ipopi-learn-with-ipopi__hero > .wp-block-ipopi-stats-bar .ipopi-stats-bar__inner {
	width: 100%;
	max-width: var(--ipopi-learn-hero-content-width, 816px);
	margin-inline: auto;
}

.ipopi-learn-with-ipopi__hero > .wp-block-ipopi-page-intro .ipopi-page-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: var(--ipopi-space-1000, 72px);
	padding-bottom: 0;
	gap: var(--ipopi-space-700, 48px);
}

.ipopi-learn-with-ipopi .wp-block-ipopi-page-intro .ipopi-page-intro__title {
	width: 100%;
	text-align: center;
	font-size: var(--ipopi-type-heading-4-mobile-size, 40px);
	line-height: var(--ipopi-type-heading-4-mobile-line-height, 48px);
	letter-spacing: var(--ipopi-type-heading-4-mobile-letter-spacing, -0.4px);
}

.ipopi-learn-with-ipopi__hero .wp-block-ipopi-page-intro .ipopi-page-intro__body {
	width: 100%;
	max-width: none;
	padding-block: var(--ipopi-space-100, 8px);
	text-align: left;
}

.ipopi-learn-with-ipopi__hero .wp-block-ipopi-stats-bar {
	padding-top: 0;
	padding-bottom: var(--ipopi-space-1000, 72px);
}

.ipopi-learn-with-ipopi__hero .wp-block-ipopi-stats-bar .ipopi-stats-bar__inner {
	margin-top: 0;
	text-align: center;
}

.ipopi-learn-with-ipopi__hero .wp-block-ipopi-stats-bar .ipopi-stats-bar__item {
	align-items: center;
}

/* Figma 241:14115 / 241:14119 — mobile: título à esquerda, intro e stats como blocos separados. */
@media (max-width: 767px) {
	.ipopi-learn-with-ipopi__hero {
		gap: 0;
		align-items: stretch;
	}

	.ipopi-learn-with-ipopi__hero > .wp-block-ipopi-page-intro .ipopi-page-intro__inner {
		padding-top: var(--ipopi-space-600, 40px);
		padding-bottom: var(--ipopi-space-400, 24px);
		padding-inline: var(--ipopi-space-400, 24px);
		gap: var(--ipopi-space-400, 24px);
	}

	.ipopi-learn-with-ipopi .wp-block-ipopi-page-intro .ipopi-page-intro__title,
	.ipopi-learn-with-ipopi .wp-block-ipopi-page-intro.ipopi-page-intro--title-heading-4 .ipopi-page-intro__title {
		text-align: left;
	}

	.ipopi-learn-with-ipopi__hero .wp-block-ipopi-stats-bar {
		padding-inline: var(--ipopi-space-400, 24px);
		padding-bottom: 0;
	}

	/* Figma 241:14119 / 241:14120 — card insetado com margens laterais de 24px. */
	.ipopi-learn-with-ipopi__hero > .wp-block-ipopi-stats-bar .ipopi-stats-bar__inner {
		width: 100%;
		max-width: 100%;
	}
}

@media (min-width: 768px) {
	.ipopi-learn-with-ipopi .wp-block-ipopi-page-intro .ipopi-page-intro__title,
	.ipopi-learn-with-ipopi .wp-block-ipopi-page-intro.ipopi-page-intro--title-heading-4 .ipopi-page-intro__title {
		font-size: var(--ipopi-type-heading-4-size, 48px);
		line-height: var(--ipopi-type-heading-4-line-height, 58px);
		letter-spacing: var(--ipopi-type-heading-4-letter-spacing, -0.48px);
	}

	.ipopi-learn-with-ipopi__hero > .wp-block-ipopi-page-intro .ipopi-page-intro__inner {
		padding-inline: 0;
	}

	.ipopi-learn-with-ipopi__hero > .wp-block-ipopi-stats-bar .ipopi-stats-bar__inner {
		width: 100%;
		max-width: var(--ipopi-learn-hero-content-width, 816px);
	}
}