/* ==========================================================================
   Página Cases (Figma: PÁGINA CASES, 1920 x 5760)
   ========================================================================== */

/* Bloco de categoria: posições verticais via variáveis (px do Figma). */
.ms-cblock {
	position: relative;
	height: calc(var(--h) * var(--px));
	background: #f6f7fa;
	color: #5e5e5e;
}
.ms-cblock > * { position: absolute; }

.ms-cblock__img {
	left: calc(100 * var(--px));
	top: calc(var(--img-t) * var(--px));
	width: calc(1720 * var(--px));
	height: calc(700.061 * var(--px));
	border-radius: calc(20 * var(--px));
	object-fit: fill;
}

.ms-cblock__head {
	left: calc(93.12 * var(--px));
	top: calc(var(--title-t) * var(--px));
	width: calc((1615.414 - 30 - 93.12) * var(--px));
	display: flex;
	align-items: flex-start;
	gap: calc(var(--gap, 63.21) * var(--px));
}
.ms-cblock__title {
	flex: none;
	/* Largura do título no Figma: o texto começa em x = --text-l. */
	min-width: calc((var(--text-l) - 93.12 - var(--gap, 63.21)) * var(--px));
	font-size: calc(80 * var(--px));
	line-height: 1;
	font-weight: 400;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-cblock__light { font-weight: 200; color: #5e5e5e; }
.ms-cblock__strong { color: var(--ms-teal); }

.ms-cblock__text {
	flex: 0 1 calc(664.879 * var(--px));
	margin-top: calc((var(--text-t) - var(--title-t)) * var(--px));
	font-size: calc(30 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.04em;
	text-box: trim-both cap alphabetic;
}
.ms-cblock__cta {
	left: calc(1615.414 * var(--px));
	top: calc(var(--cta-t) * var(--px));
}

/* Carrossel: cards de 553 x 733.25 a partir de x=100, o 4º sai da tela. */
.ms-cblock__track {
	left: 0;
	right: 0;
	top: calc(var(--cards-t) * var(--px));
	display: flex;
	gap: calc(30 * var(--px));
	padding: 0 calc(100 * var(--px));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: calc(100 * var(--px));
	scrollbar-width: none;
}
.ms-cblock__track::-webkit-scrollbar { display: none; }

.ms-ccard {
	position: relative;
	flex: none;
	width: calc(553 * var(--px));
	height: calc(733.251 * var(--px));
	border-radius: calc(20 * var(--px));
	overflow: hidden;
	isolation: isolate;
	scroll-snap-align: start;
	background: var(--ms-ink);
	color: #fbfbfb;
}
/* No Figma o 1º intervalo tem 31px e os demais 30px. */
.ms-ccard:first-child { margin-right: calc(1 * var(--px)); }
.ms-ccard > * { position: absolute; }

.ms-ccard__img { inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ms-ccard:hover .ms-ccard__img { transform: scale(1.03); }
.ms-ccard__shade {
	/* Só o degradê: o desfoque de 5px do Figma era imperceptível e pesava na rolagem. */
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40.025%, rgba(0, 0, 0, 0.6) 84.202%);
}

.ms-ccard__tags {
	left: calc(52.86 * var(--px));
	top: calc(50 * var(--px));
	display: flex;
	gap: calc(9.847 * var(--px));
}
.ms-ccard__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(116.653 * var(--px));
	height: calc(35 * var(--px));
	border-radius: calc(46.895 * var(--px));
	background: #f6f7fa;
	color: #5e5e5e;
	font-size: calc(18 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.05em;
	white-space: nowrap;
}
.ms-ccard__tag > span { text-box: trim-both cap alphabetic; }

.ms-ccard__title {
	left: calc(47.86 * var(--px));
	top: calc(361.06 * var(--px));
	width: calc(294.21 * var(--px));
	font-size: calc(60 * var(--px));
	line-height: 0.975;
	font-weight: 400;
	letter-spacing: -0.06em;
	text-box: trim-both cap alphabetic;
}
.ms-ccard__desc {
	left: calc(52.57 * var(--px));
	top: calc(493.65 * var(--px));
	width: calc(var(--dw, 410) * var(--px));
	font-size: calc(24 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.04em;
	color: #f6f7fa;
	text-box: trim-both cap alphabetic;
}
.ms-ccard__more {
	left: calc(52.64 * var(--px));
	top: calc(634.25 * var(--px));
	width: calc(114.866 * var(--px));
	height: calc(50 * var(--px));
}

.ms-cblock__caption {
	left: calc(100 * var(--px));
	top: calc(var(--cap-t) * var(--px));
	font-size: calc(24 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.04em;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}

.ms-cblock__nav { left: 0; top: 0; }
.ms-cblock__nav .ms-dots { display: none; }
.ms-cblock__arrows {
	left: calc(1724.56 * var(--px));
	top: calc(var(--arr-t) * var(--px));
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
	.ms-cblock { height: auto; display: flex; flex-direction: column; padding: 48px 0 56px; }
	.ms-cblock > * { position: relative; left: auto; top: auto; }
	.ms-cblock__img { order: 0; width: calc(100% - 40px); height: auto; aspect-ratio: 1720 / 700; margin: 0 20px; border-radius: 18px; object-fit: cover; }
	.ms-cblock__head { order: 1; width: auto; flex-direction: column; gap: 16px; margin: 36px 20px 0; }
	.ms-cblock__title { min-width: 0; font-size: clamp(34px, 10vw, 48px); white-space: normal; }
	.ms-cblock__title span { display: block; }
	.ms-cblock__text { flex: none; margin-top: 0; font-size: 19px; line-height: 1.15; }
	.ms-cblock__cta { order: 3; align-self: flex-start; margin: 20px 20px 0; }
	.ms-cblock__track { order: 4; margin-top: 28px; gap: 14px; padding: 0 20px; scroll-padding-left: 20px; overscroll-behavior-x: contain; }
	.ms-ccard { --px: calc(min(80vw, 340px) / 553); }
	.ms-ccard:first-child { margin-right: 0; }
	.ms-ccard__title { font-size: 30px; width: 80%; }
	.ms-ccard__desc { font-size: 15px; line-height: 1.15; width: calc(460 * var(--px)); top: calc(470 * var(--px)); }
	.ms-ccard__tag { font-size: 12px; }
	.ms-ccard__more { width: auto; height: 38px; padding: 0 18px; font-size: 14px; }
	.ms-cblock__nav { order: 5; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
	.ms-cblock__nav .ms-dots { display: flex; }
	.ms-cblock__arrows { position: static; gap: 8px; }
	.ms-cblock__arrows .ms-arrow { width: 42px; height: 42px; }
	.ms-cblock__caption { order: 6; margin: 22px 20px 0; font-size: 16px; line-height: 1.2; white-space: normal; }
}