/* hyp/paginas-projeto — protótipo linhas 461–486, spec 03 (banner médio). */

.hyp-pp {
	padding-top: 100px;
}

.hyp-pp .hyp-pp__head,
.hyp-pp .hyp-pp__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hyp-pp .hyp-pp__head {
	gap: 8px 20px;
	align-items: end;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--hyp-border-card);
}

.hyp-pp .hyp-pp__title {
	font-size: 26px;
	line-height: normal; /* o Salient fixa line-height nos h2 */
}

.hyp-pp .hyp-pp__text {
	font-size: 13.5px;
	color: var(--hyp-text-meta);
	font-weight: 300;
}

.hyp-pp .hyp-pp__grid {
	gap: 20px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.hyp-pp .hyp-pp__grid > li {
	margin: 0;
	list-style: none;
	display: flex;
}

.hyp-pp .hyp-card--medio {
	flex: 1;
	min-height: clamp(240px, 26vw, 300px);
	flex-direction: row;
	align-items: flex-end;
}

.hyp-pp .hyp-card--medio .hyp-card__logo {
	top: 22px;
	left: clamp(24px, 2.8vw, 36px);
	height: 24px;
}

.hyp-pp .hyp-card__row {
	width: 100%;
	padding: clamp(24px, 2.8vw, 36px);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.hyp-pp .hyp-card__title {
	font-size: clamp(21px, 2.8vw, 27px);
	font-weight: 600;
	color: #ffffff;
	line-height: 1.2;
	margin-top: 10px;
}

.hyp-pp .hyp-card__btn {
	display: inline-block;
	border-radius: var(--hyp-r-pill);
	background: #ffffff;
	color: var(--hyp-navy);
	padding: 13px 32px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: normal;
	transition: background 0.2s, color 0.2s;
}

.hyp-pp .hyp-card__btn:hover {
	background: var(--hyp-orange);
	color: #ffffff;
}

.hyp-pp .hyp-card__btn:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

@media (max-width: 767.98px) {
	.hyp-pp .hyp-pp__head,
	.hyp-pp .hyp-pp__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
