/* Home hero — dark band with center logo + tagline, flanked by city info. */

.home-hero {
	background-color: var(--color-black);
	background-image: image-set(url(../../assets/kodanshahouse-background--home.avif) type("image/avif"), url(../../assets/kodanshahouse-background--home.webp) type("image/webp"), url(../../assets/kodanshahouse-background--home.png) type("image/png"));
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--color-white);
	padding: 10rem 0;
}

.home-hero__inner {
	display: grid;

	/* Three equal columns so LA / center / NY each get their own "third"
	   of the row and self-center within it — instead of the previous
	   1fr auto 1fr where the middle column collapsed to logo width and
	   the cities had to be pulled inward with justify-self. */
	grid-template-columns: 1fr 1fr 1fr;
	place-items: center;
	gap: var(--space-05);
}

.home-hero__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-03);
	text-align: center;
}

.home-hero__logo {
	display: block;
	width: auto;
	height: 20rem;
	max-width: 100%;
	fill: var(--color-white);
}

.home-hero__logo path {
	fill: inherit;
}

.home-hero__tagline {
	margin: 1rem 0 0;
	font-family: "Maax Medium";
	font-weight: 400;

	/* Figma: 30px → 1.875rem; -1.8px tracking → -0.06em (em so it scales). */
	font-size: 1.875rem;
	letter-spacing: -0.06em;
}

.home-hero__city {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-align: center;
	color: inherit;
	text-decoration: none;
}

.home-hero__city:hover,
.home-hero__city:focus-visible {
	color: inherit;
	text-decoration: none;
}

/* LA / NY no longer need justify-self overrides — each city occupies a
   full grid column and self-centers via .home-hero__inner's
   place-items: center. Re-add overrides here if a future design wants
   them pulled toward the logo instead. */

.home-hero__city-name {
	margin: 0;
	font-family: "Maax Bold";
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.15;
}

.home-hero__city-meta {
	margin: 0.25rem 0 0;
	font-family: "Maax Medium";
	font-size: 1rem;
	color: var(--color-gray-mid);
}

@media (max-width: 720px) {

	.home-hero {
		padding: 3.5rem 0;
	}

	.home-hero__inner {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"center center"
			"la ny";
		gap: var(--space-04);
	}

	.home-hero__center {
		grid-area: center;
	}

	.home-hero__city--la {
		grid-area: la;
		justify-self: center;
	}

	.home-hero__city--ny {
		grid-area: ny;
		justify-self: center;
	}

	.home-hero__logo {
		height: 7rem;
	}

	.home-hero__city-name {
		font-size: 1.25rem;
	}
}