/*
 * Saiba Mais — layout da secção wrapper.style4 (sidebar + content + sidebar)
 */

body.saiba-mais #main > section.wrapper.style4.container {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: min(76rem, 94vw);
	margin-left: auto;
	margin-right: auto;
	background: var(--bora-surface-top) !important;
	background-image: none !important;
	background-size: auto !important;
	isolation: isolate;
}

body.saiba-mais #main .sidebar,
body.saiba-mais #main .content {
	width: 100%;
	max-width: 100%;
	float: none;
}

body.saiba-mais .saiba-mais-section-title {
	color: #2f5f36;
	font-size: clamp(1.55rem, 3.2vw, 2rem);
	font-weight: 900;
	letter-spacing: 0.14em;
	line-height: 1.25;
	margin: 0 auto 1.25em;
	max-width: none;
	white-space: nowrap;
	text-transform: uppercase;
}

@media screen and (max-width: 640px) {
	body.saiba-mais .saiba-mais-section-title {
		white-space: normal;
		font-size: clamp(1.25rem, 5.2vw, 1.55rem);
		letter-spacing: 0.1em;
	}
}

body.saiba-mais .saiba-mais-section-title::after {
	content: "";
	display: block;
	width: 3.25rem;
	height: 3px;
	margin: 0.65em auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, #4d8d52 0%, #3fb1a3 100%);
}

body.saiba-mais .saiba-mais-story-photo {
	margin: 1.5em auto 2em;
	max-width: min(20rem, 100%);
	border-radius: 0.75rem;
	overflow: hidden;
}

body.saiba-mais .saiba-mais-story-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 576 / 1024;
	object-fit: cover;
	border-radius: 0.75rem;
}

body.saiba-mais .saiba-mais-photo-row {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.5em auto 2em;
	width: 100%;
}

body.saiba-mais .saiba-mais-photo-row figure {
	flex: 0 1 20rem;
	width: 20rem;
	max-width: min(20rem, calc((100% - 1.5rem) / 3));
	margin: 0;
	border-radius: 0.75rem;
	overflow: hidden;
}

body.saiba-mais .saiba-mais-photo-row:has(> :nth-child(2):last-child) figure {
	max-width: min(20rem, calc((100% - 0.75rem) / 2));
}

body.saiba-mais .saiba-mais-photo-row img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 576 / 1024;
	object-fit: cover;
	border-radius: 0.75rem;
}

@media screen and (max-width: 840px) {
	body.saiba-mais #main > section.wrapper.style4.container {
		padding-left: max(1rem, env(safe-area-inset-left, 0px));
		padding-right: max(1rem, env(safe-area-inset-right, 0px));
	}

	body.saiba-mais #main .sidebar {
		border-top: solid 1px rgba(77, 141, 82, 0.12);
		padding-top: 2em;
		margin-top: 0;
	}

	body.saiba-mais #main .sidebar:first-of-type {
		border-top: 0;
		padding-top: 0;
	}

	body.saiba-mais #main .sidebar section,
	body.saiba-mais #main .content section {
		border-top: 0;
		padding-top: 0;
		margin-top: 0;
	}
}