/*
 * Home — abertura e apresentação do Instituto (T7.1). Medidas da referência 01-home-base-escolhida.png em 1003 px.
 * Ornamentos (aquarela, ramos) extraídos da referência: docs/01-design/decor/extrair-home-t71.py.
 */

/* Abertura: faixa y 62–350; texto em x 107; arte em x 548–864 (316 px). */
.home-hero {
	position: relative;
	overflow: hidden;
	min-height: var(--fa-hero-height);
	background: var(--fa-color-surface) url("../../images/decor/hero-aquarela.webp") center / 100% 100% no-repeat;
}

.home-hero__ramo {
	position: absolute;
	z-index: 0;
	mix-blend-mode: multiply;             /* ramos sobre branco: o branco some na aquarela */
	pointer-events: none;
}

.home-hero__ramo--esq {
	top: 38px;
	left: 0;
	width: 98px;
}

.home-hero__ramo--dir {
	top: -7px;
	right: 0;
	width: 145px;
}

.home-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--fa-hero-art);
	align-items: center;
	max-width: var(--fa-container-max);
	min-height: var(--fa-hero-height);
	margin: 0 auto;
	padding: 0 var(--fa-hero-pad-end) 0 var(--fa-hero-pad-start);
}

.home-hero__text {
	margin-right: -12px;                  /* H1 vai até x 544, a 4 px da arte (x 548), como na referência */
	padding: 42px 0 46px;
}

.home-hero__eyebrow {
	margin: 0 0 9px;
	color: var(--fa-color-heading);
	font-size: var(--fa-size-eyebrow);
	font-weight: var(--fa-weight-strong);
	line-height: 1.2;
	text-transform: uppercase;
}

.home-hero__title {
	margin: 0;
	font-size: var(--fa-size-display);
	line-height: var(--fa-leading-display);
}

.home-hero .divider {
	justify-content: flex-start;
	max-width: var(--fa-hero-divider);
	margin: 0;                            /* divisor centrado em y 218 */
}

.home-hero .divider__line {
	flex: 1 1 0;
}

.home-hero__lead {
	margin: 8px 0 0;
	color: var(--fa-color-heading);
	font-size: var(--fa-size-lead);
	line-height: 1.35;
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-top: 11px;                     /* botões em y 268 */
}

.home-hero__button {
	min-width: var(--fa-hero-button-width);
	font-size: var(--fa-size-hero-button);
}

.home-hero__link {
	font-size: var(--fa-size-hero-link);
}

.home-hero__art {
	align-self: start;
	margin-top: 17px;                     /* arte em y 79 (faixa começa em 62) */
}

.home-hero__art-img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;             /* fundo claro da arte se funde à aquarela; PNG transparente não muda */
	/* bordas esmaecidas (10 % de cada lado): o fundo de uma arte não isolada não forma retângulo sobre a aquarela */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
	mask-composite: intersect;
}

/* Apresentação: cartão x 60–943 (883 px), y 352–527 (175 px); foto à direita, x ≈ 490–943. */
.home-intro {
	overflow-x: clip;                     /* ramo do cartão não cria largura extra no tablet (correção 15/10/2026) */
	padding: 2px var(--fa-gutter) 0;
}

.intro-card {
	position: relative;
	display: flex;
	align-items: center;
	max-width: var(--fa-intro-width);
	min-height: var(--fa-intro-height);
	margin: 0 auto;
	border: 2px solid var(--fa-color-intro-border);
	border-radius: var(--fa-radius-intro);
	background: linear-gradient(90deg, #f5fafe 0%, #f0f7fc 45%, #f5fafe 100%);
}

.intro-card__ramo {
	position: absolute;
	z-index: 2;
	width: 84px;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.intro-card__ramo--esq {
	bottom: -9px;
	left: -38px;
}

.intro-card__ramo--dir {
	right: -46px;
	bottom: -26px;
	width: 104px;
	transform: scaleX(-1);
}

.intro-card__text {
	position: relative;
	z-index: 1;
	flex: 0 1 var(--fa-intro-text);
	padding: 16px 0 22px 50px;
}

.intro-card__title {
	margin: 0;
	font-size: var(--fa-size-h2);
}

.intro-card .divider {
	justify-content: flex-start;
	max-width: 340px;
	margin: 6px 0 0;
}

.intro-card .divider__line {
	flex: 1 1 0;
}

.intro-card__body {
	max-width: 340px;
	margin: 12px 0 0;
	color: var(--fa-color-heading);
	font-size: var(--fa-size-intro-text);
	line-height: 1.38;
}

.intro-card__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--fa-intro-media);
	overflow: hidden;
	border-radius: 0 calc(var(--fa-radius-intro) - 2px) calc(var(--fa-radius-intro) - 2px) 0;
}

.intro-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fa-intro-focus);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fa-intro-fade));
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--fa-intro-fade));
}

.intro-card__wave {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 42%;
	height: 34%;
	fill: #dbe9f8;
	opacity: 0.9;
}

/* Tablet: proporções mantidas, arte e foto menores. */
@media (max-width: 880px) {
	.home-hero__inner {
		grid-template-columns: minmax(0, 1fr) min(var(--fa-hero-art), 38%);
		padding: 0 var(--fa-gutter) 0 calc(var(--fa-gutter) + 52px);
	}

	.home-hero__ramo--esq {
		width: 58px;
	}

	.home-hero__ramo--dir {
		display: none;                    /* sem espaço livre à direita da arte */
	}

	.intro-card__media {
		width: 44%;
	}
}

/* Celular: uma coluna — texto, depois a arte; ramos menores; foto acima do texto no cartão. */
@media (max-width: 700px) {
	.home-hero,
	.home-hero__inner {
		min-height: 0;
	}

	.home-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 var(--fa-gutter);
	}

	.home-hero__text {
		margin-right: 0;
		padding: 28px 0 8px 18px;
	}

	.home-hero__art {
		justify-self: center;
		width: min(80vw, var(--fa-hero-art));
		margin: 0 0 18px;
	}

	.home-hero__ramo,
	.intro-card__ramo {
		display: none;                    /* no celular os ramos cobririam o texto; ficam aquarela e onda */
	}

	.intro-card {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.intro-card__media {
		position: relative;
		width: 100%;
		height: 180px;
		border-radius: calc(var(--fa-radius-intro) - 2px) calc(var(--fa-radius-intro) - 2px) 0 0;
	}

	.intro-card__photo {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.intro-card__text {
		flex: none;
		padding: 18px 20px 24px;
	}

}