/*
 * Mamer Homepage Visual Refinement v1
 * Source of truth: frozen Homepage Desktop 1440 / Mobile 390,
 * Mobile Responsive States v1.0 and Mamer Design System v1.0.x.
 *
 * This file is intentionally a small override layer. It corrects visual
 * fidelity issues without replacing the approved Homepage v1 architecture.
 */

/* Approved A1.1b production wordmark. */
.site-brand__logo,
.site-footer__logo {
	display: block;
	width: 112px;
	height: auto;
}

.site-footer__logo {
	width: 120px;
}

/*
 * Approved homepage photography supplied as standalone assets.
 * These rules replace only the temporary gradient media slots; layout stays
 * exactly in the existing Homepage v1 structure.
 */
.home-age__thumb,
.home-feature__media,
.home-editorial__list .mamer-media-slot--list,
.home-month-groups__grid .mamer-media-slot--mini {
	background-repeat: no-repeat;
	background-size: cover;
}

.home-age__thumb {
	background-image: url("../images/home/mamer-home-parent-baby.webp");
	background-position: 50% 43%;
}

.home-feature__media {
	background-image: url("../images/home/mamer-home-feature-3-months.webp");
	background-position: 50% 48%;
}

.home-editorial__list a:nth-child(1) .mamer-media-slot--list {
	background-image: url("../images/home/mamer-home-sleep.webp");
	background-position: 50% 50%;
}

.home-editorial__list a:nth-child(2) .mamer-media-slot--list {
	background-image: url("../images/home/mamer-home-feeding.webp");
	background-position: 50% 46%;
}

.home-editorial__list a:nth-child(3) .mamer-media-slot--list {
	background-image: url("../images/home/mamer-home-parent-baby.webp");
	background-position: 50% 42%;
}

.home-month-groups__grid a:nth-child(1) .mamer-media-slot--mini {
	background-image: url("../images/home/mamer-home-feature-3-months.webp");
	background-position: 52% 48%;
}

.home-month-groups__grid a:nth-child(2) .mamer-media-slot--mini {
	background-image: url("../images/home/mamer-home-parent-baby.webp");
	background-position: 50% 42%;
}

.home-month-groups__grid a:nth-child(3) .mamer-media-slot--mini {
	background-image: url("../images/home/mamer-home-feeding.webp");
	background-position: 45% 50%;
}

.home-month-groups__grid a:nth-child(4) .mamer-media-slot--mini {
	background-image: url("../images/home/mamer-home-sleep.webp");
	background-position: 58% 50%;
}

/* Remove the old abstract placeholder overlay only where real media exists. */
.home-age__thumb::after,
.home-feature__media::after,
.home-editorial__list .mamer-media-slot--list::after,
.home-month-groups__grid .mamer-media-slot--mini::after {
	display: none;
}

/* Make the homepage search focus state visibly stronger than color alone. */
.home-search:focus-within {
	border-color: var(--mamer-focus);
	box-shadow: 0 0 0 2px rgba(77, 145, 217, .18);
}

/* Prevent long reusable section headings from fighting their action link. */
.home-section__heading--inline > div,
.home-section__heading--inline > h2 {
	min-width: 0;
}

@media (max-width: 767px) {
	/* Mobile header benchmark: 56–64px high, centered logo, 44px controls. */
	.site-header__inner {
		min-height: 56px;
	}

	.site-brand__logo {
		width: 96px;
	}

	.site-navigation {
		top: 56px;
	}

	.admin-bar .site-navigation {
		top: 102px;
	}

	/* The mobile benchmark keeps the DS scale: H1 38–40 / 44–46. */
	.home-hero__content {
		padding: 26px 0 18px;
	}

	.home-hero h1 {
		max-width: 100%;
		font-size: 38px;
		line-height: 44px;
		letter-spacing: -.025em;
		text-wrap: wrap;
	}

	.home-hero__title-line {
		display: inline;
	}

	.home-hero__title-line:first-child::after {
		content: " ";
	}

	.mamer-eyebrow {
		margin-bottom: 10px;
		font-size: 12px;
		line-height: 18px;
	}

	.home-hero__lead {
		max-width: 350px;
		font-size: 16px;
		line-height: 25px;
	}

	/* Keep controls above the 44px accessibility minimum. */
	.home-search input,
	.home-search button {
		min-height: 48px;
	}

	/* Reusable mobile section header: long titles may wrap, action never overlays. */
	.home-section__heading--inline {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 12px;
	}

	.home-section__heading--inline > .mamer-text-link {
		justify-self: end;
		margin-top: 5px;
	}

	/* Preserve the approved scroll-snap age selector without page overflow. */
	.home-age__scroller {
		max-width: 100%;
		overscroll-behavior-inline: contain;
	}

	/* The selected state must remain legible without relying only on color. */
	.home-age__chip.is-selected {
		box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
	}

	/* Utility line icons stay line-based and optically consistent. */
	.home-utilities__grid .mamer-line-icon {
		fill: none;
		stroke-width: 1.75;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* Footer keeps the approved wordmark while staying compact on mobile. */
	.site-footer__logo {
		width: 104px;
	}
}

@media (max-width: 374px) {
	.home-hero h1 {
		font-size: 36px;
		line-height: 42px;
	}

	.home-section__heading--inline {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.home-section__heading--inline > .mamer-text-link {
		justify-self: start;
		margin-top: 0;
	}
}