/* ==========================================================================
   Página de um case (Figma: SUBPÁGINA CASE ESPECÍFICO, 1920 x 5299)
   Conteúdo dinâmico: os blocos usam fluxo (grid) com as medidas do Figma
   como mínimo, para textos maiores não se sobreporem.
   ========================================================================== */

/* Topo: foto do case (cover), degradê 70% e mancha escura atrás do logo. */
.ms-ihero--case .ms-ihero__img { object-fit: cover; }
/* Título do painel: 160px no Figma ("RESIDENCIAL" = 11 letras); nomes longos
   diminuem para não invadir a coluna do texto (até ~13 letras cabem em 160px). */
.ms-ihero--case .ms-ihero__title { font-size: calc(min(160, 2080 / var(--tchars)) * var(--px)); }
.ms-ihero--case .ms-ihero__shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); }
.ms-ihero__blob { display: none; }
.ms-ihero--case .ms-ihero__blob {
	/* Mancha escura pré-renderizada (antes: filter blur 125px). */
	display: block;
	position: absolute;
	left: calc((-37.13 - 376) * var(--px));
	top: calc((-180.58 - 376) * var(--px));
	width: calc(1444 * var(--px));
	height: calc(1316 * var(--px));
	background: url(../img/fx/case-blob.webp) center / 100% 100% no-repeat;
}

/* --------------------------------------------------------------------------
   Introdução: breadcrumb, frase, texto, autor e soluções (y 800 → 1732.7)
   -------------------------------------------------------------------------- */
.ms-case-intro {
	padding: calc(101.92 * var(--px)) 0 calc(101.92 * var(--px));
	background: #f6f7fa;
	color: #5e5e5e;
}
.ms-case-intro__crumbs {
	margin-left: calc(99.25 * var(--px));
	font-size: calc(24 * var(--px));
	line-height: 1;
	letter-spacing: -0.05em;
	text-box: trim-both cap alphabetic;
}
.ms-case-intro__crumbs a:hover { color: var(--ms-teal); }
.ms-case-intro__crumbs strong { font-weight: 700; text-decoration: underline; }

.ms-case-intro__grid {
	display: grid;
	grid-template-columns: calc(884.15 * var(--px)) calc(640 * var(--px));
	grid-template-areas:
		"aspas ."
		"quote text"
		"footl footr";
	grid-template-rows: auto minmax(calc(422 * var(--px)), auto) auto;
	column-gap: calc((1182.56 - 95.25 - 884.15) * var(--px));
	margin: calc((1018.92 - 901.92 - 17) * var(--px)) 0 0 calc(95.25 * var(--px));
}

.ms-case-intro__aspas {
	grid-area: aspas;
	margin: 0 0 calc(32.01 * var(--px)) calc(4.75 * var(--px));
	width: calc(69.217 * var(--px));
	height: calc(54.501 * var(--px));
}
.ms-case-intro__quote { grid-area: quote; margin: 0; padding-bottom: calc(40 * var(--px)); }
.ms-case-intro__quote p {
	font-size: calc(80 * var(--px));
	line-height: 0.97;
	letter-spacing: -0.05em;
	font-weight: 400;
	text-box: trim-both cap alphabetic;
}
.ms-case-intro__quote span { font-weight: 300; }

.ms-case-intro__text {
	grid-area: text;
	margin-left: calc(1.05 * var(--px));
	padding-bottom: calc(40 * var(--px));
	width: calc(636.39 * var(--px));
	font-size: calc(24 * var(--px));
	line-height: 1.1;
	letter-spacing: -0.05em;
}
.ms-case-intro__text p { text-box: trim-both cap alphabetic; }
.ms-case-intro__text p + p { margin-top: calc(26.4 * var(--px)); }

.ms-case-intro__foot { border-top: 2px solid #a8abb2; }
.ms-case-intro__foot--left { grid-area: footl; margin-left: calc(4.75 * var(--px)); width: calc(845 * var(--px)); }
.ms-case-intro__foot--right { grid-area: footr; width: calc(639.96 * var(--px)); }

.ms-case-intro__autor {
	display: flex;
	align-items: flex-start;
	gap: calc((180.9 - 100.25 - 59.5) * var(--px));
	margin-top: calc(41.85 * var(--px));
}
.ms-case-intro__foto {
	flex: none;
	width: calc(59.497 * var(--px));
	height: calc(59.497 * var(--px));
	border-radius: 50%;
	object-fit: cover;
}
.ms-case-intro__autor p {
	padding-top: calc(8.97 * var(--px));
	font-size: calc(24 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.04em;
	color: #151615;
	opacity: 0.6;
}
.ms-case-intro__autor strong,
.ms-case-intro__autor span { display: block; text-box: trim-both cap alphabetic; }
.ms-case-intro__autor strong { font-weight: 500; }
.ms-case-intro__autor span { margin-top: calc(6.5 * var(--px)); }

.ms-case-intro__tags {
	display: flex;
	flex-wrap: wrap;
	gap: calc(12 * var(--px)) calc(20.07 * var(--px));
	margin-top: calc(54.8 * var(--px));
}
.ms-case-intro__tags li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: calc(111.991 * var(--px));
	height: calc(33.601 * var(--px));
	padding: 0 calc(12 * var(--px));
	border-radius: calc(45.02 * var(--px));
	background: var(--ms-teal);
	color: #f6f7fa;
	font-size: calc(14.568 * var(--px));
	line-height: 0.975;
	font-weight: 500;
	letter-spacing: -0.05em;
	white-space: nowrap;
}
.ms-case-intro__tags span { text-box: trim-both cap alphabetic; }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
	.ms-ihero--case .ms-ihero__blob { display: none; }
	.ms-ihero--case .ms-ihero__title { font-size: min(17vw, calc((100vw - 40px) / (var(--tchars) * 0.56))); }

	.ms-case-intro { padding: 40px 20px 56px; }
	.ms-case-intro__crumbs { margin-left: 0; font-size: 14px; line-height: 1.4; text-box: none; }
	.ms-case-intro__grid {
		grid-template-columns: 1fr;
		grid-template-areas: "aspas" "quote" "text" "footl" "footr";
		grid-template-rows: none;
		margin: 32px 0 0;
	}
	.ms-case-intro__aspas { margin: 0 0 18px; width: 44px; height: 35px; }
	.ms-case-intro__quote { padding-bottom: 24px; }
	.ms-case-intro__quote p { font-size: clamp(32px, 9vw, 44px); line-height: 1; }
	.ms-case-intro__text { width: auto; margin: 0; padding-bottom: 28px; font-size: 17px; line-height: 1.35; }
	.ms-case-intro__text p + p { margin-top: 14px; }
	.ms-case-intro__foot--left,
	.ms-case-intro__foot--right { width: auto; margin-left: 0; }
	.ms-case-intro__foot--right { border-top: 0; }
	.ms-case-intro__autor { margin-top: 24px; gap: 14px; }
	.ms-case-intro__foto { width: 52px; height: 52px; }
	.ms-case-intro__autor p { padding-top: 8px; font-size: 18px; }
	.ms-case-intro__tags { margin-top: 24px; gap: 10px; }
	.ms-case-intro__tags li { min-width: 0; height: 32px; padding: 0 16px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Galeria (y 1732.7): foto grande + miniaturas (clique troca a foto grande)
   -------------------------------------------------------------------------- */
.ms-case-galeria {
	padding: 0 calc(100 * var(--px)) 0 calc(100.25 * var(--px));
	background: #f6f7fa;
	scroll-margin-top: calc(40 * var(--px));
}
.ms-case-galeria__main { margin: 0; }
.ms-case-galeria__img {
	width: 100%;
	height: calc(699.792 * var(--px));
	border-radius: calc(20 * var(--px));
	object-fit: cover;
	transition: opacity .25s ease;
}
.ms-case-galeria__img.is-swapping { opacity: 0; }
.ms-case-galeria__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(31 * var(--px)) calc(29.25 * var(--px));
	margin-top: calc(31 * var(--px));
}
.ms-case-galeria__thumb {
	display: block;
	width: 100%;
	height: calc(205.019 * var(--px));
	border-radius: calc(20 * var(--px));
	overflow: hidden;
}
.ms-case-galeria__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ms-case-galeria__thumb:hover img { transform: scale(1.04); }
.ms-case-galeria__thumb:focus-visible { outline: 3px solid var(--ms-teal); outline-offset: 3px; }

/* Texto do editor em duas colunas (y 2765.52, colunas de 846.25 com 26.65 entre elas). */
.ms-case-texto {
	/* 97px até a versal no Figma; sem corte de texto (as colunas precisam alinhar), desconta o respiro da linha. */
	padding: calc(89 * var(--px)) calc(100.85 * var(--px)) 0 calc(100 * var(--px));
	background: #f6f7fa;
	color: #5e5e5e;
	column-count: 2;
	column-gap: calc(26.65 * var(--px));
	font-size: calc(24 * var(--px));
	line-height: 1.1;
	letter-spacing: -0.05em;
}
.ms-case-texto h2, .ms-case-texto h3 { break-after: avoid-column; }
.ms-case-texto > * { margin: 0 0 calc(26.4 * var(--px)); }
.ms-case-texto > :last-child { margin-bottom: 0; }
.ms-case-texto h2, .ms-case-texto h3 { color: var(--ms-teal); font-weight: 400; font-size: 1.4em; line-height: 1; }
.ms-case-texto a { color: var(--ms-teal); text-decoration: underline; }
.ms-case-texto ul { list-style: disc; padding-left: 1.2em; }

/* Faixa turquesa "Seu projeto também pode viver essa experiência" (y 2960.52). */
.ms-case-faixa {
	position: relative;
	height: calc(308.955 * var(--px));
	margin: calc(100 * var(--px)) calc(99 * var(--px)) 0 calc(100.25 * var(--px));
	border-radius: calc(20 * var(--px));
	background: var(--ms-teal);
	overflow: hidden;
	isolation: isolate;
	color: #fbfbfb;
}
.ms-case-galeria + .ms-case-faixa { margin-top: calc(100 * var(--px)); }
.ms-case-texto + .ms-case-faixa { margin-top: calc(92 * var(--px)); }
.ms-case-faixa__arco { position: absolute; max-width: none; z-index: -1; pointer-events: none; }
.ms-case-faixa__arco--1 {
	left: calc(901.76 * var(--px));
	top: calc(-509.9 * var(--px));
	width: calc(1196.82 * var(--px));
	height: calc(1440.04 * var(--px));
}
.ms-case-faixa__arco--2 {
	left: calc(1143.89 * var(--px));
	top: calc(-201.8 * var(--px));
	width: calc(712.565 * var(--px));
	height: calc(857.375 * var(--px));
}
.ms-case-faixa__title {
	position: absolute;
	left: calc(47.67 * var(--px));
	top: calc(42.49 * var(--px));
	width: calc(810.087 * var(--px));
	font-size: calc(80 * var(--px));
	line-height: 1;
	font-weight: 400;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	text-box: trim-both cap alphabetic;
}
.ms-case-faixa__btn {
	position: absolute;
	left: calc(1403.49 * var(--px));
	top: calc(208.46 * var(--px));
	width: calc(259.929 * var(--px));
	background-image: linear-gradient(145.1deg, #fbfbfb 42.805%, #d9d9d9 150.24%);
	color: var(--ms-black);
	font-weight: 500;
}

@media (max-width: 899.98px) {
	.ms-case-galeria { padding: 0 20px; }
	.ms-case-galeria__img { height: auto; aspect-ratio: 16 / 10; border-radius: 16px; }
	.ms-case-galeria__thumbs { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
	.ms-case-galeria__thumb { height: auto; aspect-ratio: 408 / 205; border-radius: 12px; }
	.ms-case-texto { padding: 40px 20px 0; column-count: 1; font-size: 17px; line-height: 1.4; }
	.ms-case-texto > * { margin-bottom: 14px; }
	.ms-case-faixa { height: auto; margin: 48px 20px 0; padding: 32px 24px 36px; border-radius: 18px; }
	.ms-case-galeria + .ms-case-faixa { margin-top: 48px; }
	.ms-case-faixa__title,
	.ms-case-faixa__btn { position: relative; left: auto; top: auto; }
	.ms-case-faixa__title { width: auto; font-size: clamp(30px, 9vw, 44px); }
	.ms-case-faixa__btn { display: inline-flex; width: auto; margin-top: 24px; }
	.ms-case-faixa__arco--1 { left: 40%; top: -60%; width: 520px; height: 611px; }
	.ms-case-faixa__arco--2 { left: 60%; top: -10%; width: 310px; height: 364px; }
}

/* --------------------------------------------------------------------------
   Outros cases (y 3369.79): mesmos cards da página Cases, em fluxo.
   -------------------------------------------------------------------------- */
.ms-crel {
	position: relative;
	padding: calc(100.32 * var(--px)) 0 calc(111.47 * var(--px));
	background: #f6f7fa;
	color: #5e5e5e;
}
.ms-crel .ms-cblock__track { position: relative; }
.ms-crel .ms-cblock__caption {
	position: relative;
	left: auto;
	top: auto;
	margin: calc((4217.23 - 4103.04) * var(--px)) 0 0 calc(99.87 * var(--px));
}
.ms-crel .ms-cblock__nav { position: absolute; left: 0; bottom: calc(97.66 * var(--px)); }
.ms-crel .ms-cblock__arrows { position: absolute; left: calc(1724.56 * var(--px)); top: auto; bottom: 0; }

@media (max-width: 899.98px) {
	.ms-crel { display: flex; flex-direction: column; padding: 48px 0 56px; }
	.ms-crel .ms-cblock__track { order: 1; gap: 14px; padding: 0 20px; scroll-padding-left: 20px; overscroll-behavior-x: contain; }
	.ms-crel .ms-cblock__nav { order: 2; position: static; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
	.ms-crel .ms-cblock__nav .ms-dots { display: flex; }
	.ms-crel .ms-cblock__arrows { position: static; gap: 8px; }
	.ms-crel .ms-cblock__arrows .ms-arrow { width: 42px; height: 42px; }
	.ms-crel .ms-cblock__caption { order: 3; margin: 22px 20px 0; font-size: 16px; line-height: 1.2; white-space: normal; }
}