/* ==========================================================================
   Home (Figma HOME2) — mobile first; >=1280px reproduces the 1440px frame.
   ========================================================================== */

.home-btn {
	min-width: 162px;
	border-radius: 29px;
}

.home-btn--medium { font-weight: 500; }

.home-btn--light {
	background: var(--white);
	border-color: var(--white);
	color: var(--green);
}

.home-btn--light:hover { background: var(--green); border-color: var(--green); color: var(--white); }

/* "Com funciona?" links to an anchor on this page: don't paint it as the current item. */
.home .site-nav__list .current-menu-item > a { color: inherit; }

/* Hero -------------------------------------------------------------------- */

.home-hero {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--green-dark);
}

.home-hero__inner { padding: 32px var(--gutter) 40px; }

.home-hero__media { order: 2; height: 260px; overflow: hidden; }
.home-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.home-hero__title {
	margin-top: 20px;
	font: 400 46px/.9 var(--f-serif);
}

.home-hero__text {
	max-width: 346px;
	margin-top: 16px;
	color: var(--ink);
	font: 15px/1.4 var(--f-sans);
}

.home-hero .home-btn { margin-top: 24px; }

/* Intro ------------------------------------------------------------------- */

.home-intro { padding: 32px var(--gutter); }

.home-intro__list {
	--gap: 24px;
	display: grid;
	gap: var(--gap);
}

.home-intro__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
}

.home-intro__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 88px;
	height: 88px;
	border: 2px solid var(--green);
	border-radius: 50%;
}

.home-intro__label { font: 400 14px/1.1 var(--f-label); }

/* Cards ------------------------------------------------------------------- */

.home-cards {
	display: grid;
	gap: 20px;
	padding: 0 var(--gutter);
}

.home-card {
	position: relative;
	display: flex;
	min-height: 349px;
	overflow: hidden;
	border-radius: 10px;
	color: var(--white);
	background: #1a2e1c;
}

.home-card__bg,
.home-card::after { position: absolute; inset: 0; }

.home-card__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Figma: linear gradient (dark left -> clear right), multiply. */
.home-card::after {
	content: "";
	background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(128, 148, 130, .6) 38%, #1a2e1c 100%);
	mix-blend-mode: multiply;
}

.home-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	width: 100%;
	padding: 32px 24px 40px;
}

.home-card__icon img { width: auto; height: auto; }

.home-card__title {
	margin-top: 19px;
	font: 400 28px/1 var(--f-serif);
}

.home-card__text {
	margin-top: 23px;
	font: 12px/1.2 var(--f-sans);
}

.home-card .home-btn { margin-top: 18.2px; }

/* How it works ------------------------------------------------------------ */

.home-how { padding: 40px var(--gutter); scroll-margin-top: 24px; }

.home-how__title {
	margin-top: 26.2px;
	color: var(--green);
	font: 400 32px/1 var(--f-serif);
}

.home-how__text {
	max-width: 273px;
	margin-top: 18px;
	color: var(--grey);
	font: 12px/1.2 var(--f-sans);
}

.home-how .home-btn { min-width: 202px; margin-top: 22.8px; }

.home-how__steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 24px;
	margin-top: 36px;
}

.home-step__media { aspect-ratio: 1; overflow: hidden; border-radius: 10px; }
.home-step__media img { width: 100%; height: 100%; object-fit: cover; }

.home-step__number {
	margin-top: 12px;
	color: var(--green);
	font: 400 32px/1 var(--f-serif);
}

.home-step__title {
	margin-top: 5.5px;
	font: 400 14px/1.1 var(--f-label);
	text-transform: uppercase;
}

.home-step__text {
	margin-top: 5.5px;
	color: var(--grey);
	font: 12px/1.2 var(--f-sans);
}

/* Banner ------------------------------------------------------------------ */

.home-banner__left,
.home-banner__right { position: relative; overflow: hidden; }

.home-banner__bg { position: absolute; inset: 0; }
.home-banner__bg img { width: 100%; height: 100%; object-fit: cover; }

.home-banner__left { min-height: 220px; }

.home-banner__left .home-banner__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .4);
}

.home-banner__brand {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 40px;
	padding: 48px var(--gutter);
	color: var(--white);
}

.home-banner__logo { width: 150px; height: auto; }

.home-banner__hand { font: 400 40px/30px var(--f-hand); }

.home-banner__content {
	position: relative;
	padding: 32px var(--gutter) 36px;
}

.home-banner__title {
	margin-top: 26.2px;
	color: var(--green);
	font: 400 32px/1 var(--f-serif);
}

.home-banner__text {
	max-width: 339px;
	margin-top: 17px;
	color: var(--ink);
	font: 12px/1.2 var(--f-sans);
}

.home-banner .home-btn { min-width: 202px; margin-top: 23.2px; }

/* Categories -------------------------------------------------------------- */

.home-cats { padding: 38px var(--gutter); }

.home-cats__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.home-cats__all {
	color: var(--green);
	font: 400 12px/1 var(--f-ui);
	text-decoration: none;
	white-space: nowrap;
}

.home-cats__all:hover { text-decoration: underline; }

.home-cats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16.9px;
	margin-top: 21.2px;
}

.home-cat {
	position: relative;
	display: block;
	aspect-ratio: 203 / 148;
	overflow: hidden;
	border-radius: 10px;
	color: var(--white);
	text-decoration: none;
}

.home-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.home-cat:hover img { transform: scale(1.04); }

/* Figma: vertical gradient to black at 70%, multiply. */
.home-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(102, 102, 102, 0), #000);
	opacity: .7;
	mix-blend-mode: multiply;
}

.home-cat__label {
	position: absolute;
	z-index: 1;
	left: 8px;
	right: 8px;
	bottom: 17.2px;
	text-align: center;
	font: 14px/1.2 var(--f-sans);
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (min-width: 768px) {
	.home-hero__media { height: 400px; }
	.home-hero__title { font-size: 64px; }

	.home-intro__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.home-how__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.home-banner { display: grid; grid-template-columns: 1fr 1fr; }

	.home-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Desktop — 1440px Figma frame
   ========================================================================== */

@media (min-width: 1280px) {
	/* Hero: 124 -> 588, image from x=515 to the right edge. */
	.home-hero {
		display: block;
		position: relative;
		height: 464px;
	}

	.home-hero__media {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 205px);
		right: 0;
		height: auto;
	}

	.home-hero__inner {
		position: relative;
		max-width: 1440px;
		margin: 0 auto;
		padding: 31px 0 0 67px;
	}

	.home-hero__title {
		max-width: 514px;
		margin-top: 27.2px;
		font-size: 75px;
		line-height: 67.5px;
	}

	.home-hero__text { margin-top: 14.5px; }

	.home-hero .home-btn { margin-top: 27px; }

	/* Intro: 5 items, dashed dividers centred in the gaps. */
	.home-intro {
		max-width: 1440px;
		margin: 0 auto;
		padding: 39px 70px 32px 68.7px;
	}

	.home-intro__list {
		--gap: clamp(16px, 4.33vw, 62.3px);
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: var(--gap);
		height: 95px;
	}

	.home-intro__item { gap: 19.9px; }

	.home-intro__item + .home-intro__item::before {
		content: "";
		position: absolute;
		top: -1px;
		left: calc(var(--gap) / -2 - 1px);
		height: 95px;
		border-left: 2px dashed var(--green);
		/* Figma dash: 4 on / 4 off. */
		border-image: repeating-linear-gradient(var(--green) 0 4px, transparent 4px 8px) 1;
	}

	.home-intro__icon { width: 90.4px; height: 90.4px; }

	.home-intro__label { width: 102px; }

	/* Cards */
	.home-cards {
		grid-template-columns: 637fr 637fr;
		gap: 27px;
		width: min(1301px, 100% - 2 * var(--gutter));
		margin: 0 auto;
		padding: 0;
	}

	.home-card__body { padding: 0 42px 51px; }

	.home-card__title { font-size: 32px; }

	/* How it works */
	.home-how {
		display: grid;
		grid-template-columns: 356px 1fr;
		width: min(1301px, 100% - 2 * var(--gutter));
		margin: 0 auto;
		padding: 38px 0;
	}

	.home-how__intro { padding-left: 1px; }

	.home-how__steps {
		grid-template-columns: repeat(4, 153px);
		justify-content: space-between;
		margin-top: 0;
	}

	.home-step { position: relative; }

	.home-step + .home-step::before {
		content: "→";
		position: absolute;
		top: 57px;
		left: -75.5px;
		width: 40px;
		color: var(--green);
		font: 400 40px/40px var(--f-ui);
		text-align: center;
	}

	/* Banner */
	.home-banner {
		height: 246px;
		grid-template-columns: 50% 50%;
	}

	.home-banner__brand {
		flex-wrap: nowrap;
		gap: 0;
		height: 100%;
		padding: 0 0 0 max(var(--gutter), 100% - 652px);
	}

	.home-banner__logo { width: 199px; margin-top: -1px; }

	.home-banner__hand {
		margin: 3px 0 0 79px;
		font-size: 50px;
		line-height: 35px;
	}

	.home-banner__content { padding: 31px 0 0 56px; }

	/* Categories */
	.home-cats {
		width: min(1303px, 100% - 2 * var(--gutter));
		margin: 0 auto;
		padding: 38px 0;
	}

	.home-cats__head { padding-right: 3px; }

	.home-cats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

	/* In HOME2 the Instagram photos start at the top of their box (no 4.8px top inset as on Productors). */
	.home .insta__grid { padding: 0 0 4.8px; }

	/* HOME2 leaves 43px under the footer text instead of 37px. */
	.home .site-footer__inner { padding-bottom: 38px; }
}