.recent-posts-section .section-frame-label {
	--frame-text: var(--softone-color-text-primary);
	--frame-rail: rgba(245, 243, 239, 0.2);
	--frame-pulse: var(--softone-color-primary);

	display: inline-flex;
	max-width: 100%;
	align-items: center;
	gap: 12px;
	color: var(--frame-text);
}

.recent-posts-section .section-frame-label__symbol {
	display: inline-grid;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	overflow: hidden;
	place-items: center;
}

.recent-posts-section .section-frame-label__symbol img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 20px;
	max-height: 20px;
	object-fit: cover;
	transform: scale(1.99);
}

.recent-posts-section .section-frame-label__frame {
	position: relative;
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	padding: 10px 16px;
}

.recent-posts-section .section-frame-label__text {
	position: relative;
	z-index: 1;
	min-width: 0;
	color: var(--frame-text);
	font-family: var(--softone-font-mono);
	font-size: clamp(0.6875rem, 0.72vw, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.28em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.recent-posts-section .section-frame-label__trace {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.recent-posts-section .section-frame-label__rail,
.recent-posts-section .section-frame-label__pulse {
	fill: none;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.recent-posts-section .section-frame-label__rail {
	stroke: var(--frame-rail);
}

.recent-posts-section .section-frame-label__pulse {
	filter: drop-shadow(0 0 2px rgba(217, 74, 90, 0.22));
	stroke: var(--frame-pulse);
	stroke-dasharray: 9 91;
	stroke-linecap: round;
	animation: recentPostsSectionFrameTrace var(--softone-duration-trace) linear infinite;
}

.recent-posts-section .button {
	display: inline-flex;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: var(--softone-radius-button);
	color: inherit;
	cursor: pointer;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(217, 74, 90, 0.16);
	transition:
		transform var(--softone-duration-fast) var(--softone-ease-standard),
		background-color var(--softone-duration-fast) var(--softone-ease-standard),
		border-color var(--softone-duration-fast) var(--softone-ease-standard),
		color var(--softone-duration-fast) var(--softone-ease-standard);
}

.recent-posts-section .button:focus-visible {
	outline: 2px solid var(--softone-color-primary);
	outline-offset: 5px;
}

.recent-posts-section .button--offset {
	--button-front: #090a0c;
	--button-text: #f5f3ef;
	--button-border: rgba(245, 243, 239, 0.92);
	--button-plate: var(--softone-color-primary);
	--button-offset: var(--softone-offset-plate);

	position: relative;
	min-height: 54px;
	padding: 0 var(--button-offset) var(--button-offset) 0;
	border: 0;
	background: transparent;
	color: var(--button-text);
	isolation: isolate;
}

.recent-posts-section .button--offset-light {
	--button-front: #f5f3ef;
	--button-text: #090a0c;
	--button-border: rgba(245, 243, 239, 0.84);
}

.recent-posts-section .button--offset::before {
	content: "";
	position: absolute;
	inset: 0 var(--button-offset) var(--button-offset) 0;
	z-index: -1;
	border-radius: var(--softone-radius-button);
	background: var(--button-plate);
	transform: translate(var(--button-offset), var(--button-offset));
	transition: transform 220ms var(--softone-ease-standard);
}

.recent-posts-section .button__surface {
	display: inline-flex;
	width: 100%;
	min-height: inherit;
	align-items: center;
	justify-content: center;
	gap: 11px;
	border: 1px solid var(--button-border);
	border-radius: var(--softone-radius-button);
	padding: 14px 20px;
	background: var(--button-front);
	color: var(--button-text);
	transition:
		background-color 220ms var(--softone-ease-standard),
		border-color 220ms var(--softone-ease-standard),
		color 220ms var(--softone-ease-standard),
		transform 160ms var(--softone-ease-standard);
}

.recent-posts-section .button__label {
	min-width: 0;
}

.recent-posts-section .button__icon {
	position: relative;
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	flex: 0 0 1.2rem;
	overflow: hidden;
	color: currentColor;
}

.recent-posts-section .button__arrow {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask-image: url("../../icon/seta-diagonal.svg");
	mask-image: url("../../icon/seta-diagonal.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition:
		transform 260ms var(--softone-ease-standard),
		opacity 180ms ease;
}

.recent-posts-section .button__arrow--current {
	opacity: 1;
	transform: translate(0, 0);
}

.recent-posts-section .button__arrow--incoming {
	opacity: 0;
	transform: translate(-115%, 115%);
}

.recent-posts-section .button--secondary-arrow {
	--button-arrow-text: #f5f3ef;
	--button-arrow-border: rgba(245, 243, 239, 0.22);
	--button-arrow-hover-bg: rgba(245, 243, 239, 0.08);
	--button-arrow-hover-border: rgba(245, 243, 239, 0.38);

	min-height: 46px;
	gap: 10px;
	border-color: var(--button-arrow-border);
	padding: 12px 16px;
	background: transparent;
	color: var(--button-arrow-text);
}

.recent-posts-section .button--secondary-arrow:hover,
.recent-posts-section .button--secondary-arrow:focus-visible {
	border-color: var(--button-arrow-hover-border);
	background: var(--button-arrow-hover-bg);
}

.recent-posts-section .button:hover .button__arrow--current,
.recent-posts-section .button:focus-visible .button__arrow--current {
	opacity: 0;
	transform: translate(115%, -115%);
}

.recent-posts-section .button:hover .button__arrow--incoming,
.recent-posts-section .button:focus-visible .button__arrow--incoming {
	opacity: 1;
	transform: translate(0, 0);
}

.recent-posts-section .button--offset:hover::before,
.recent-posts-section .button--offset:focus-visible::before {
	transform: translate(calc(var(--button-offset) * 0.6), calc(var(--button-offset) * 0.6));
}

.recent-posts-section .button--offset:hover .button__surface,
.recent-posts-section .button--offset:focus-visible .button__surface {
	transform: translate(1px, 1px);
}

.recent-posts-section {
	position: relative;
	overflow: clip;
	padding-block: var(--softone-space-24);
	background: var(--softone-color-background-secondary);
	color: var(--softone-color-text-primary);
	scroll-margin-top: var(--softone-space-8);
}

.recent-posts-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	width: min(calc(100% - (var(--softone-gutter-mobile) * 2)), var(--softone-container-width));
	gap: var(--softone-space-16) var(--softone-space-8);
	align-items: end;
	margin-inline: auto;
}

.recent-posts-header {
	display: grid;
	grid-column: 1;
	max-width: 58rem;
	gap: var(--softone-space-8);
}

.recent-posts-header h2 {
	max-width: 15ch;
	margin: 0;
	font-size: clamp(2.75rem, 5.2vw, 5.5rem);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 0.96;
	text-wrap: balance;
}

.recent-posts-header > p {
	max-width: 45rem;
	margin: 0;
	color: var(--softone-color-text-secondary);
	font-size: clamp(1rem, 1.2vw, 1.18rem);
	line-height: 1.65;
	text-wrap: pretty;
}

.recent-posts-section__action {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
}

.recent-posts {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1.75fr) minmax(20rem, 1fr);
	gap: 0 clamp(2rem, 4vw, 4.5rem);
	min-width: 0;
}

.recent-post {
	min-width: 0;
}

.recent-post--featured {
	grid-row: span 2;
}

.recent-post--compact {
	display: grid;
	grid-template-columns: minmax(7rem, 10.5rem) minmax(0, 1fr);
	gap: var(--softone-space-6);
	align-content: center;
	padding-block: var(--softone-space-8);
}

.recent-post--compact + .recent-post--compact {
	border-top: 1px solid rgba(245, 243, 239, 0.12);
}

.recent-post__media {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: var(--softone-color-surface);
}

.recent-post__media--featured {
	aspect-ratio: 16 / 10;
	border-radius: var(--softone-radius-panel);
}

.recent-post__media--compact {
	aspect-ratio: 4 / 3;
	border-radius: var(--softone-radius-card);
}

.recent-post__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 220ms var(--softone-ease-standard);
}

.recent-post__content {
	min-width: 0;
}

.recent-post--featured .recent-post__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--softone-space-4) var(--softone-space-8);
	align-items: end;
	padding-top: var(--softone-space-8);
}

.recent-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--softone-space-2);
	align-items: center;
	margin: 0;
	color: var(--softone-color-text-tertiary);
	font-family: var(--softone-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.recent-post--featured .recent-post__meta,
.recent-post--featured .recent-post__title,
.recent-post--featured .recent-post__excerpt {
	grid-column: 1;
}

.recent-post__meta-separator {
	color: var(--softone-color-primary);
}

.recent-post__title {
	margin: var(--softone-space-3) 0 0;
	font-family: var(--softone-font-display);
	font-size: clamp(1.4rem, 2vw, 2.1rem);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.08;
	text-wrap: balance;
	transition: color var(--softone-duration-fast) var(--softone-ease-standard);
}

.recent-post--featured .recent-post__title {
	max-width: 24ch;
	font-size: clamp(2rem, 3.5vw, 3.8rem);
	line-height: 1;
}

.recent-post__excerpt {
	max-width: 54rem;
	margin: 0;
	color: var(--softone-color-text-secondary);
	line-height: 1.65;
	text-wrap: pretty;
}

.recent-post__link {
	justify-self: start;
	margin-top: var(--softone-space-6);
}

.recent-post--featured .recent-post__link {
	grid-column: 2;
	grid-row: 1 / 4;
	align-self: end;
	margin-top: 0;
}

.recent-post:hover .recent-post__media img,
.recent-post:focus-within .recent-post__media img {
	transform: scale(1.02);
}

.recent-post:hover .recent-post__title,
.recent-post:focus-within .recent-post__title {
	color: var(--softone-color-primary-soft);
}

.recent-post--without-image {
	align-content: end;
}

.recent-post--without-image.recent-post--featured {
	display: grid;
	min-height: 34rem;
	border-top: 1px solid rgba(245, 243, 239, 0.16);
	border-bottom: 1px solid rgba(245, 243, 239, 0.16);
}

.recent-post--without-image.recent-post--featured .recent-post__content {
	align-self: end;
	padding-block: var(--softone-space-12);
}

.recent-post--without-image.recent-post--compact {
	grid-template-columns: 1fr;
}

.recent-posts[data-count="1"] {
	grid-template-columns: minmax(0, 60rem);
}

.recent-posts[data-count="2"] {
	grid-template-columns: minmax(0, 1.75fr) minmax(20rem, 1fr);
}

.recent-posts__state {
	grid-column: 1 / -1;
	min-height: 15rem;
	align-content: center;
	border-top: 1px solid rgba(245, 243, 239, 0.12);
	border-bottom: 1px solid rgba(245, 243, 239, 0.12);
	color: var(--softone-color-text-secondary);
}

.recent-posts__state p {
	max-width: 46rem;
	margin: 0;
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	line-height: 1.55;
}

.recent-posts-live-region {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@keyframes recentPostsSectionFrameTrace {
	from {
		stroke-dashoffset: 0;
	}

	to {
		stroke-dashoffset: -100;
	}
}

@media (min-width: 768px) {
	.recent-posts-section__inner {
		width: min(calc(100% - (var(--softone-gutter-tablet) * 2)), var(--softone-container-width));
	}
}

@media (min-width: 1100px) {
	.recent-posts-section__inner {
		width: min(calc(100% - (var(--softone-gutter-desktop) * 2)), var(--softone-container-width));
	}
}

@media (min-width: 1025px) {
	.softone-artigos-recentes--hide-desktop {
		display: none;
	}
}

@media (max-width: 1024px) and (min-width: 701px) {
	.softone-artigos-recentes--hide-tablet {
		display: none;
	}
}

@media (max-width: 700px) {
	.softone-artigos-recentes--hide-mobile {
		display: none;
	}
}

@media (max-width: 900px) {
	.recent-posts-section__inner {
		grid-template-columns: 1fr;
	}

	.recent-posts-header,
	.recent-posts-section__action,
	.recent-posts {
		grid-column: 1;
	}

	.recent-posts-section__action {
		grid-row: auto;
		justify-self: start;
	}

	.recent-posts {
		grid-template-columns: 1fr;
	}

	.recent-post--featured {
		grid-row: auto;
	}

	.recent-post--compact {
		grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
	}

	.recent-post--featured + .recent-post--compact {
		margin-top: var(--softone-space-8);
		border-top: 1px solid rgba(245, 243, 239, 0.12);
	}
}

@media (max-width: 700px) {
	.recent-posts-section {
		padding-block: var(--softone-space-16);
	}

	.recent-posts-section__inner {
		gap: var(--softone-space-12);
	}

	.recent-posts-header {
		gap: var(--softone-space-6);
	}

	.recent-posts-header h2 {
		font-size: clamp(2.35rem, 11vw, 3.4rem);
	}

	.recent-post--featured .recent-post__content {
		grid-template-columns: 1fr;
		gap: var(--softone-space-4);
		padding-top: var(--softone-space-6);
	}

	.recent-post--featured .recent-post__link {
		grid-column: 1;
		grid-row: auto;
		margin-top: var(--softone-space-3);
	}

	.recent-post--without-image.recent-post--featured {
		min-height: 24rem;
	}

	.recent-posts-section__action,
	.recent-posts-section__action .button {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.recent-posts-section .section-frame-label {
		gap: 9px;
	}

	.recent-posts-section .section-frame-label__symbol {
		width: 14px;
		height: 14px;
	}

	.recent-posts-section .section-frame-label__frame {
		padding: 9px 12px;
	}

	.recent-posts-section .section-frame-label__text {
		font-size: 0.6875rem;
		letter-spacing: 0.18em;
	}

	.recent-posts-section .button--offset {
		--button-offset: 3px;
	}

	.recent-posts-section .button__surface {
		gap: 10px;
		padding: 14px 16px;
	}

	.recent-post--compact {
		grid-template-columns: 1fr;
	}

	.recent-post__media--featured {
		aspect-ratio: 4 / 3;
		border-radius: var(--softone-radius-card);
	}

	.recent-post__media--compact {
		aspect-ratio: 16 / 9;
		border-radius: var(--softone-radius-card-small);
	}

	.recent-post--compact {
		gap: var(--softone-space-4);
	}

	.recent-post--compact .recent-post__link {
		margin-top: var(--softone-space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.recent-posts-section .section-frame-label__pulse,
	.recent-post__media img,
	.recent-post__title,
	.recent-posts-section .button,
	.recent-posts-section .button__surface,
	.recent-posts-section .button__arrow,
	.recent-posts-section .button--offset::before {
		animation: none;
		transition: none;
	}

	.recent-post:hover .recent-post__media img,
	.recent-post:focus-within .recent-post__media img {
		transform: none;
	}
}