/**
 * Pagina Au Pair (page-au-pair.php + padroes de bloco de inc/aupair-patterns.php).
 * Cards, modalidades, "o que inclui" e "por que Experimento". Prefixo .ap- em tudo.
 *
 * O markup vem de blocos nativos do editor (grupo, titulo, paragrafo, lista, botao) com estas classes
 * em className. Icones de lista e de destaques sao desenhados aqui por CSS (sem SVG no texto editavel).
 *
 * O typography.css do site forca tamanho e familia com !important em h1-h3, p, li e span, e pinta de roxo
 * todo h2/h3 de <main> com especificidade alta; por isso as regras de texto usam "body .ap-..." + !important.
 * Raio padrao 4px (igual aos cards da "Jornada do intercambista"). Roxo da marca #812990.
 */
.ap-section,
.ap-includes {
	--ap-purple: #812990;
	--ap-purple-dark: #5f1c6b;
	--ap-purple-soft: #f6eef8;
	--ap-ink: #26202a;
	--ap-muted: #4d4552;
	--ap-line: #e5dde8;
	--ap-radius: 4px;
	--ap-space: 72px;
	--ap-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23812990' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--ap-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Blocos de grupo do editor: sem espacamento automatico entre filhos (o gap e do grid/flex abaixo) */
.ap-section .wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.ap-section {
	padding: var(--ap-space) 0;
}

.ap-section--white {
	background: #fff;
}

.ap-section--soft {
	background: #faf7fb;
}

.ap-wrap {
	padding-left: 16px;
	padding-right: 16px;
}

.ap-icon {
	flex: none;
	display: block;
}

/* ---------- Tipografia compartilhada ---------- */
body .ap-section .ap-eyebrow {
	margin: 0 0 12px;
	font-family: var(--font-bold) !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ap-purple-dark);
}

body .ap-section .ap-title {
	margin: 0 0 20px;
	font-size: clamp(28px, 2.4vw, 36px) !important;
	line-height: 1.2 !important;
	color: var(--ap-purple);
}

body .ap-section .ap-lead {
	margin: 0;
	font-size: 18px !important;
	line-height: 28px !important;
	color: var(--ap-muted);
}

/* botao nativo do editor (core/button) */
.ap-section .ap-actions {
	display: flex;
	margin-top: 28px;
}

body .ap-section .ap-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding: 14px 24px;
	border: 0;
	border-radius: var(--ap-radius);
	background: var(--ap-purple);
	color: #fff;
	font-size: 16px !important;
	line-height: 24px !important;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

body .ap-section .ap-btn .wp-block-button__link:hover {
	background: var(--ap-purple-dark);
	color: #fff;
}

body .ap-section .ap-btn .wp-block-button__link:focus-visible {
	outline: 3px solid var(--ap-purple);
	outline-offset: 3px;
}

/* ---------- Duas colunas (modalidades e "por que Experimento") ---------- */
.ap-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* icone decorativo no topo da coluna esquerda (por CSS: nao ha imagem no conteudo editavel) */
.xp-ap-pattern-modalidades .ap-split__intro::before,
.xp-ap-pattern-porque .ap-split__intro::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 20px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.xp-ap-pattern-modalidades .ap-split__intro::before {
	background-image: url("../images/aupair/Trips.svg");
}

.xp-ap-pattern-porque .ap-split__intro::before {
	width: 56px;
	height: 56px;
	background-image: url("../images/aupair.png");
}

/* ---------- Cards (modulo de 6) ---------- */
.ap-cards-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px;
}

.ap-span-4,
.ap-span-5,
.ap-span-7,
.ap-span-12 {
	grid-column: span 12;
}

.ap-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--ap-line);
	border-top: 3px solid var(--ap-purple);
	border-radius: var(--ap-radius);
	box-shadow: 0 1px 2px rgba(38, 32, 42, 0.05);
	color: var(--ap-ink);
}

.ap-card .ap-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border-radius: var(--ap-radius);
	background: var(--ap-purple-soft);
	color: var(--ap-purple);
}

body .ap-card .ap-card__title {
	margin: 0 0 16px;
	font-size: 22px !important;
	line-height: 28px !important;
	color: var(--ap-purple);
}

body .ap-card .ap-card__subtitle {
	margin: 24px 0 12px;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body .ap-card .ap-card__body p {
	margin: 0 0 14px;
	font-size: 16px !important;
	line-height: 26px !important;
}

body .ap-card .ap-card__body p:last-child {
	margin-bottom: 0;
}

/* card "Big Apple": fundo roxo */
.ap-card--brand {
	background: var(--ap-purple);
	border-color: var(--ap-purple);
	border-top-color: var(--ap-purple-dark);
	color: #fff;
}

.ap-card--brand .ap-card__icon {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

body .ap-card--brand .ap-card__title,
body .ap-card--brand .ap-card__subtitle,
body .ap-card--brand .ap-card__body p,
body .ap-card--brand .ap-checks li {
	color: #fff !important;
}

/* ---------- Listas com check (lista nativa; o check e desenhado por CSS) ---------- */
.ap-checks {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-checks li {
	position: relative;
	margin: 0;
	padding: 0 0 0 36px;
	min-height: 24px;
}

body .ap-checks li {
	font-size: 16px !important;
	line-height: 24px !important;
}

.ap-checks li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ap-purple-soft) var(--ap-check) center / 14px 14px no-repeat;
}

.ap-card--brand .ap-checks li::before {
	background-color: #fff;
}

.ap-card--brand .ap-checks li {
	padding-bottom: 12px;
	padding-left: 36px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.ap-card--brand .ap-checks li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* ---------- Card "Como a Experimento te apoia?" ---------- */
.ap-support__head {
	max-width: 760px;
}

.ap-section .ap-steps {
	display: grid;
	gap: 0;
	margin: 32px 0 0;
}

.ap-step {
	position: relative;
	margin: 0;
	padding: 0 0 28px 60px;
}

.ap-step:last-child {
	padding-bottom: 0;
}

/* linha vertical (mobile) ligando os passos */
.ap-step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 40px;
	bottom: 0;
	left: 19px;
	width: 2px;
	background: var(--ap-line);
}

body .ap-step .ap-step__num,
body .ap-reason .ap-reason__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 50%;
	background: var(--ap-purple);
	color: #fff;
	font-family: var(--font-bold) !important;
	font-size: 18px !important;
	line-height: 1 !important;
}

body .ap-step .ap-step__num {
	position: absolute;
	top: 0;
	left: 0;
}

body .ap-step .ap-step__title {
	margin: 0 0 8px;
	padding-top: 6px;
	font-size: 18px !important;
	line-height: 26px !important;
	color: var(--ap-ink) !important;
}

body .ap-step .ap-step__text {
	margin: 0;
	font-size: 16px !important;
	line-height: 26px !important;
	color: var(--ap-muted);
}

body .ap-card .ap-callout {
	margin: 32px 0 0;
	padding: 20px 24px;
	border-left: 4px solid var(--ap-purple);
	border-radius: var(--ap-radius);
	background: var(--ap-purple-soft);
	font-size: 16px !important;
	line-height: 26px !important;
	color: var(--ap-ink);
}

/* ---------- Card "Duvida": motivos numerados ---------- */
.ap-section .ap-reasons {
	margin: 24px 0 0;
	border-top: 1px solid var(--ap-line);
}

.ap-reason {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--ap-line);
}

.ap-reason:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

body .ap-reason .ap-reason__title {
	margin: 0 0 4px;
	font-size: 18px !important;
	line-height: 26px !important;
	color: var(--ap-ink) !important;
}

body .ap-reason .ap-reason__text {
	margin: 0;
	font-size: 16px !important;
	line-height: 26px !important;
	color: var(--ap-muted);
}

/* ---------- Modalidades ---------- */
.ap-modalities {
	display: grid;
	gap: 20px;
}

.ap-modality {
	padding: 24px 20px;
	background: #fff;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius);
	box-shadow: 0 1px 2px rgba(38, 32, 42, 0.05);
}

.ap-modality--exclusive {
	border-color: var(--ap-purple);
}

.ap-modality__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

body .ap-modality .ap-modality__name {
	margin: 0;
	font-size: 24px !important;
	line-height: 30px !important;
	color: var(--ap-ink) !important;
}

body .ap-modality .ap-modality__subtitle {
	margin: 4px 0 0;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--ap-purple);
}

body .ap-modality .ap-badge {
	display: inline-block;
	margin: 0;
	padding: 4px 10px;
	border-radius: var(--ap-radius);
	background: var(--ap-purple);
	color: #fff;
	font-family: var(--font-bold) !important;
	font-size: 13px !important;
	line-height: 18px !important;
	white-space: nowrap;
}

body .ap-modality .ap-modality__text {
	margin: 16px 0 20px;
	font-size: 16px !important;
	line-height: 26px !important;
	color: var(--ap-muted);
}

.ap-stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

/* destaque numerico: rotulo | valor | unidade (3 paragrafos editaveis). Mobile: linha; tablet+: coluna */
.ap-stat {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"label value"
		"label unit";
	align-items: center;
	column-gap: 12px;
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--ap-radius);
	background: var(--ap-purple-soft);
}

body .ap-stat .ap-stat__label {
	grid-area: label;
	margin: 0;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--ap-purple-dark);
}

/* icone do rotulo (mascara: herda a cor do texto) */
.ap-stat__label::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: -4px;
	background: currentColor;
	-webkit-mask: var(--ap-stat-icon) center / contain no-repeat;
	mask: var(--ap-stat-icon) center / contain no-repeat;
}

.ap-stat--hours {
	--ap-stat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.ap-stat--pay {
	--ap-stat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}

.ap-stat--grant {
	--ap-stat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11.5V16c0 1.5 2.7 3 6 3s6-1.5 6-3v-4.5'/%3E%3C/svg%3E");
}

body .ap-stat .ap-stat__value {
	grid-area: value;
	margin: 0;
	text-align: right;
	font-family: var(--font-bold) !important;
	font-size: 22px !important;
	line-height: 28px !important;
	color: var(--ap-purple);
}

body .ap-stat .ap-stat__unit {
	grid-area: unit;
	margin: 0;
	text-align: right;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--ap-muted);
}

/* ---------- Lista "por que Experimento" (cada item e um grupo: titulo + frase; o check e CSS) ---------- */
.ap-benefits {
	border-top: 1px solid var(--ap-line);
}

.ap-benefit {
	position: relative;
	margin: 0;
	padding: 20px 0 20px 52px;
	border-bottom: 1px solid var(--ap-line);
}

.ap-benefit::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--ap-radius);
	background: var(--ap-purple) var(--ap-check-white) center / 20px 20px no-repeat;
}

body .ap-benefit .ap-benefit__title {
	margin: 0 0 4px;
	font-size: 18px !important;
	line-height: 26px !important;
	color: var(--ap-ink) !important;
}

body .ap-benefit .ap-benefit__text {
	margin: 0;
	font-size: 16px !important;
	line-height: 26px !important;
	color: var(--ap-muted);
}

/* ---------- "O que inclui" (padrao proprio e coluna do box de preco) ---------- */
.ap-includes {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ap-includes > * {
	margin: 0;
}

body .ap-includes .ap-includes__title {
	margin: 0;
	font-size: 20px !important;
	line-height: 28px !important;
	color: var(--ap-purple);
}

body .ap-section .ap-includes .ap-includes__title {
	font-size: clamp(24px, 2vw, 30px) !important;
	line-height: 1.2 !important;
}

.ap-checks--cols {
	grid-template-columns: minmax(0, 1fr);
	gap: 14px 32px;
}

/* box de preco sem a lista (quando o padrao "O que inclui" esta no conteudo da pagina) */
.ap-preco--solo .ap-preco__price {
	width: 100%;
	max-width: 560px;
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
	.ap-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ap-stat {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"label"
			"value"
			"unit";
		row-gap: 6px;
		align-items: start;
		padding: 14px 16px;
	}

	body .ap-stat .ap-stat__value,
	body .ap-stat .ap-stat__unit {
		text-align: left;
	}

	.ap-checks--cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.ap-wrap {
		padding-left: 24px;
		padding-right: 24px;
	}

	.ap-card {
		padding: 32px;
	}

	.ap-modality {
		padding: 28px;
	}

	.ap-cards-grid .ap-span-4 {
		grid-column: span 6;
	}

	.ap-cards-grid .ap-card--wide-md {
		grid-column: span 12;
	}

	.ap-section .ap-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 32px;
	}

	.ap-step,
	.ap-step:last-child {
		padding-bottom: 0;
	}

	.ap-step:not(:last-child)::before {
		display: none;
	}
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
	.ap-section {
		--ap-space: 88px;
	}

	.ap-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 64px;
	}

	.ap-split__intro {
		position: sticky;
		top: 128px;
	}

	.ap-cards-grid .ap-span-4 {
		grid-column: span 4;
	}

	.ap-cards-grid .ap-card--wide-md {
		grid-column: span 4;
	}

	.ap-cards-grid .ap-span-5 {
		grid-column: span 5;
	}

	.ap-cards-grid .ap-span-7 {
		grid-column: span 7;
	}

	.ap-cards-grid .ap-span-12 {
		grid-column: span 12;
	}

	.ap-card--support {
		padding: 40px;
	}

	/* passos em linha, com a linha de tempo horizontal ligando os numeros */
	.ap-section .ap-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px;
	}

	.ap-step {
		padding: 56px 0 0;
	}

	.ap-step:not(:last-child)::before {
		display: block;
		top: 19px;
		bottom: auto;
		left: 52px;
		right: -24px;
		width: auto;
		height: 2px;
	}
}

@media (min-width: 1280px) {
	.ap-card {
		padding: 36px;
	}
}