/* =====================================================================
   Projetos Incentivados › Variante do modal global (.modal--projetos).
   Frame do Figma: painel 758x602, nome à esquerda com filete, texto à
   direita com barra de rolagem própria e faixa em gradiente no rodapé.
   ===================================================================== */

.modal__panel.modal--projetos {
	width: min(758px, 100%);
	max-height: min(602px, 88vh);
}

.modal--projetos .modal__inner {
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr);
	/* Linhas explícitas: eyebrow, nome e botão. Sem isso o texto, que atravessa as
	   três, distribui a própria altura entre elas e empurra o botão para o fim da
	   coluna — era por isso que ele aparecia lá embaixo. Só a última cresce. */
	grid-template-rows: auto auto 1fr;
	column-gap: 40px;
	align-items: start;
	overflow: hidden; /* quem rola é o corpo do texto */
	padding: 40px 53px 44px 40px;
}

/* ---------------- Coluna do nome ---------------- */
.modal--projetos .modal__title {
	grid-column: 1;
	align-self: start;
	margin: 0;
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	color: var(--leto-ink);
}

.modal--projetos .modal__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 8px;
	margin-top: 40px;
	background: var(--leto-ink);
}

.modal--projetos .modal__eyebrow { grid-column: 1; }

/* ---------------- Coluna do texto ---------------- */
.modal--projetos .modal__body {
	grid-column: 2;
	grid-row: 1 / 4;
	max-height: min(330px, 60vh);
	overflow-y: auto;
	padding-right: 20px;
	scrollbar-width: thin;
	scrollbar-color: #757575 #d0d0d0;
}

.modal--projetos .modal__body p {
	font-size: 16px;
	line-height: 1.42;
	color: rgba(45, 45, 45, .72);
}

.modal--projetos .modal__body p + p { margin-top: 1rem; }

.modal--projetos .modal__body::-webkit-scrollbar { width: 8px; }
.modal--projetos .modal__body::-webkit-scrollbar-track { background: #d0d0d0; border-radius: 24px; }
.modal--projetos .modal__body::-webkit-scrollbar-thumb { background: #757575; border-radius: 24px; }

/* Botão do site do projeto.
   Era um link sublinhado no fim do texto, na coluna da direita — o cliente pediu
   o botão padrão do site, na coluna do nome, abaixo do filete.
   O `.pill-*` base traz `white-space: nowrap` e altura fixa de 56px, que não cabem
   nos 172px desta coluna: aqui ele ocupa a largura toda e pode quebrar em duas
   linhas. */
.modal--projetos .modal__link {
	grid-column: 1;
	grid-row: 3;
	align-self: start;
	width: 100%;
	height: auto;
	min-height: 46px;
	margin-top: 24px;
	padding: 12px 16px;
	white-space: normal;
	text-align: center;
	font-size: 13.5px;
	line-height: 1.25;
}

/* Esmaecimento do texto junto ao rodapé do painel (como no Figma). */
.modal--projetos .modal__inner::after {
	content: "";
	position: absolute;
	left: 212px;
	right: 53px;
	bottom: 16px;
	height: 67px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 92%);
	pointer-events: none;
}

/* ---------------- Rodapé e fechar ---------------- */
.modal--projetos.modal__panel .modal__bar { height: 16px; }

.modal--projetos .modal__close {
	top: 30px;
	right: 40px;
	width: 41px;
	height: 41px;
}

/* ---------------- Responsivo ---------------- */
@media (max-width: 820px) {
	.modal--projetos .modal__inner {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		row-gap: 20px;
		padding: 32px 24px 34px;
	}
	.modal--projetos .modal__body {
		grid-column: 1;
		grid-row: auto;
		max-height: 52vh;
	}
	/* Coluna única: o botão volta a fluir depois do texto. Com grid-row fixo em 3
	   ele colidiria com o corpo, que aqui é auto. */
	.modal--projetos .modal__link {
		grid-column: 1;
		grid-row: auto;
		margin-top: 4px;
	}
	.modal--projetos .modal__title { padding-right: 56px; }
	.modal--projetos .modal__title::after { margin-top: 18px; }
	.modal--projetos .modal__inner::after { left: 24px; right: 24px; height: 44px; }
	.modal--projetos .modal__close { top: 20px; right: 20px; width: 38px; height: 38px; }
}