/* City feature — full-bleed black band introducing a Kodansha House city.
   Hosts a stack of `.creator-card` rows that alternate text/media sides. */


.city-feature {
	background-color: var(--color-black);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--color-white);
	padding: 5rem 0;
}

.city-feature--la {
	background-image: image-set(url(../../assets/kodanshahouse-background--los-angeles.avif) type("image/avif"), url(../../assets/kodanshahouse-background--los-angeles.webp) type("image/webp"), url(../../assets/kodanshahouse-background--los-angeles.png) type("image/png"));
}

.city-feature--ny {
	background-image: image-set(url(../../assets/kodanshahouse-background--new-york.avif) type("image/avif"), url(../../assets/kodanshahouse-background--new-york.webp) type("image/webp"), url(../../assets/kodanshahouse-background--new-york.png) type("image/png"));
}

.city-feature__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-06);
	align-items: center;
	text-align: center;
}

.city-feature__header {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--space-04);
}

.city-feature__locale {
	display: block;
	width: 100%;
	max-width: 14rem;
	height: auto;
	fill: var(--color-white);
}

.city-feature__locale path {
	fill: inherit;
}

/* NY hero — lockup + headline on the left, character art on the right
   (mock: 3.0 NY). Scoped to .city-feature__hero so the LA section's
   centered .city-feature__header is untouched. */
.city-feature__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-06);
	align-items: center;
	width: 100%;
	text-align: left;
}

.city-feature__hero .city-feature__header {
	align-items: flex-start;
}

.city-feature__art {
	display: block;
	width: 100%;
}

.city-feature__art-img {
	display: block;
	width: 100%;
	height: auto;
}

.city-feature__title {
	margin: 0;

	/* Figma: 109.565px → 6.85rem. Tracking handled by .kodansha-black. */
	font-size: 6.85rem;
	line-height: 1.05;
	color: var(--color-white);
}

.city-feature__lede {
	margin: 0;
	max-width: 60rem;
	font-family: "Maax Medium";
	font-size: 1.555rem;
	line-height: 1.4;
	color: var(--color-white);
}

/* LA "Meet the Creators" left-aligns the lockup + headline above the
   creator-card stack (mock: 3.0 Homepage), like the NY hero. The CTA below
   stays centered via .city-feature__inner. */
.city-feature--la .city-feature__header {
	align-items: flex-start;
	text-align: left;
}

.city-feature__creators {
	display: flex;
	flex-direction: column;
	gap: var(--space-06);
	align-items: center;
	width: 100%;
}

.city-feature__cta {
	margin-top: var(--space-04);
}

/* Creator card — alternating side-by-side text + media. */
.creator-card {
	position: relative; /* containing block for the .creator-card__link overlay */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-06);
	align-items: center;
	width: 100%;
	text-align: left;
}

/* Whole-card click target to the LA page — the "stretched link" pattern:
   a transparent overlay so the card markup and grid layout stay untouched
   and there is no visible anchor styling. Absolute positioning keeps it
   out of the grid flow. Keyboard focus still shows a ring (sized to the
   card); white to read against this dark section. */
.creator-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	color: inherit;
	text-decoration: none;
}

.creator-card__link:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: -2px;
}

.creator-card--text-right .creator-card__text {
	order: 2;
}

.creator-card--text-right .creator-card__media {
	order: 1;
}

.creator-card__text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.creator-card__label {
	margin: 0;
	font-family: "Maax Medium";
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-gray-mid);
}

.creator-card__name {
	margin: 0;
	font-family: "Maax Bold";
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.15;
	color: var(--color-white);
}

.creator-card__meta {
	margin: 0;
	font-family: "Maax Medium";
	font-size: 0.95rem;
	color: var(--color-gray-mid);
}

/* Media is the creator artwork, which already carries its own colored
   gradient panel — so display it whole at its natural aspect rather than
   cropping it into a fixed box. width/height attrs preserve the ratio. */
.creator-card__media {
	display: block;
	width: 100%;
}

.creator-card__image {
	display: block;
	width: 100%;
	height: auto;
}

/* NY tease variant — single card, headline + CTA instead of creator credit. */
.creator-card--tease .creator-card__tease-headline {
	margin: 0;
	font-family: "Maax Bold";
	font-weight: 400;
	font-size: 2.5rem;
	line-height: 1.1;
	color: var(--color-white);
}

.creator-card--tease .creator-card__cta {
	align-self: start;
	margin-top: var(--space-04);
}

@media (max-width: 768px) {

	.city-feature {
		padding: 3rem 0;
	}

	.creator-card {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-04);
	}

	/* Stacked: text always leads, image follows — drop the desktop
	   alternating order so every card reads the same way. */
	.creator-card--text-right .creator-card__text {
		order: 0;
	}

	.creator-card--text-right .creator-card__media {
		order: 0;
	}

	.creator-card__name,
	.creator-card--tease .creator-card__tease-headline {
		font-size: 1.5rem;
	}

	.city-feature__title {
		font-size: 1.75rem;
	}

	/* Stack the NY hero: headline leads, art follows, both re-centered to
	   match the rest of the band on narrow viewports. */
	.city-feature__hero {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}

	.city-feature__hero .city-feature__header {
		align-items: center;
	}

	.city-feature__art {
		max-width: 22rem;
		margin: 0 auto;
	}
}