/*
 * MEPCO theme — front page (front-page.php). Prototype lines 126–262.
 * Builds on base.css (.kicker, .kicker--dark, .mono-11, .section-title, .btn*, .input, .split-2,
 * .faq-details, .placeholder-hatch--dark, .sr-only); every declaration below is the prototype's
 * inline style for that element — nothing is invented and no token is restated.
 *
 *   .home-hero            two-column band (auto-fit minmax(min(100%,460px),1fr)), navy
 *     __copy __title __lede __actions
 *     __panel             radial-gradient panel, min-height 440px (CLS-safe box for <pump-hero>)
 *     __stage             absolute frame for <pump-hero> (bottom 88px leaves room for the stats)
 *     __caption __stats __stat __stat-value
 *   .home-tools .home-tool (__kicker __title __text)      four tiles, auto-fit minmax(220px,1fr)
 *   .home-families (__head __title __grid __item)          "PRODUCT LINES"
 *   .home-family  (__photo --none __note __img __body __cat __name)   one family card, 4:3 photo cell
 *   .home-underline-link (--light)                         "All products →" / "Our history →"
 *   .home-trust (__grid __cell __label __value)            six cells, the −20px negative margin trick
 *   .home-band (__intro __title __text) .home-toolcard (__kicker __title __text __cta)
 *   .home-since (__copy __title __text __media __img)      #16191d band + hatched photo placeholder
 *   .home-dealer (__copy __title __text __box __box-title __form __input __submit __map)
 *   .home-faq (__copy __text __button __list)
 */

/* ---------------------------------------------------------------------------
 * Hero (prototype 139–153)
 * ------------------------------------------------------------------------ */
.home-hero {
	background: var(--navy);
	color: #fff;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
}
.home-hero__copy {
	padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 64px) clamp(40px, 6vw, 72px) clamp(16px, 4vw, 32px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	min-width: 0;
}
.home-hero__title {
	margin: 0;
	font: 700 clamp(36px, 7vw, 72px)/0.95 var(--font-display);
	letter-spacing: -.01em;
	text-transform: uppercase;
	text-wrap: pretty;
}
.home-hero__lede {
	margin: 0;
	max-width: 520px;
	font-size: 17px;
	color: var(--dark-text);
	text-wrap: pretty;
}
.home-hero__actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.home-hero__panel {
	position: relative;
	background: radial-gradient(ellipse 70% 60% at 50% 42%, #3a4656 0%, #2a3340 55%, #222a34 100%);
	border-left: 1px solid var(--line-dark-2);
	min-height: 440px;
	overflow: hidden;
}
.home-hero__stage {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 88px;
	display: grid;
}
.home-hero__caption {
	position: absolute;
	left: 24px;
	top: 20px;
	font: 11px var(--font-mono);
	color: var(--dark-text-3);
	letter-spacing: .14em;
}
.home-hero__stats {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	display: flex;
	gap: 16px 28px;
	flex-wrap: wrap;
	font: 12px var(--font-mono);
	color: var(--dark-text);
}
.home-hero__stat-value {
	display: block;
	font: 700 30px var(--font-display);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Tool tiles (prototype 155–176)
 * ------------------------------------------------------------------------ */
.home-tools {
	background: var(--panel);
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.home-tool {
	border-right: 1px solid var(--line);
	padding: 26px var(--gutter);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--ink);
	min-width: 0;
}
.home-tool:hover { background: #fff; color: var(--ink); }
.home-tool__kicker {
	font: 11px var(--font-mono);
	color: var(--orange-text);
	letter-spacing: .14em;
}
.home-tool__title {
	font: 600 20px var(--font-display);
	text-transform: uppercase;
	letter-spacing: .02em;
}
.home-tool__text {
	font-size: 13px;
	color: var(--muted);
}

/* ---------------------------------------------------------------------------
 * Product lines (prototype 178–197)
 * ------------------------------------------------------------------------ */
.home-families { padding: 72px var(--gutter) 64px; }
.home-families__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 28px;
	gap: 16px;
	flex-wrap: wrap;
}
.home-families__title {
	margin: 6px 0 0;
	font: 700 clamp(32px, 4.5vw, 44px)/1 var(--font-display);
	text-transform: uppercase;
}
.home-underline-link {
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	border-bottom: 2px solid var(--orange);
	padding-bottom: 2px;
	color: var(--ink);
}
/* The prototype's three text links (lines 166, 224, 241) are non-interactive divs with no
   style-hover, so hovering must not change their colour; these rules only cancel base.css's
   global a:hover { color: var(--orange) } that the real <a> picks up. */
.home-underline-link:hover { color: var(--ink); }
.home-underline-link--light {
	font-size: inherit;
	align-self: flex-start;
	color: #fff;
}
.home-underline-link--light:hover { color: #fff; }

.home-families__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.home-families__item { display: grid; min-width: 0; }
.home-family {
	background: var(--panel);
	border: 1px solid var(--line);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	color: var(--ink);
	min-width: 0;
}
.home-family:hover { border-color: var(--navy); color: var(--ink); }
.home-family__photo {
	aspect-ratio: 4 / 3;
	background: #fff;
	display: grid;
	place-items: center;
	border-bottom: 1px solid var(--line);
	padding: 14px;
	min-width: 0;
}
.home-family__photo--none {
	background: repeating-linear-gradient(135deg, #e3e0d9 0 10px, #dcd9d1 10px 20px);
	padding: 0;
}
.home-family__note {
	font: 11px var(--font-mono);
	color: var(--muted);
	text-align: center;
	padding: 8px;
}
.home-family__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.home-family__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.home-family__name {
	font: 600 20px/1.1 var(--font-display);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Trust strip (prototype 199–208) — the row is pulled 20px left and 1px right so the
 * outer cell borders sit outside the (overflow-hidden) band.
 * ------------------------------------------------------------------------ */
.home-trust {
	border-bottom: 1px solid var(--line);
	background: var(--panel);
	padding: 0 var(--gutter);
	overflow: hidden;
}
.home-trust__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	margin: 0 -1px 0 -20px;
}
.home-trust__cell {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	border-top: 1px solid var(--line);
	border-right: 1px solid var(--line);
	min-width: 0;
}
.home-trust__label {
	font: 11px var(--font-mono);
	color: var(--muted);
	letter-spacing: .12em;
}
.home-trust__value {
	font: 600 19px/1.1 var(--font-display);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Selection tools band (prototype 210–232)
 * ------------------------------------------------------------------------ */
.home-band {
	background: var(--navy);
	color: #fff;
	padding: 56px var(--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 20px;
	align-items: stretch;
}
.home-band__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
	padding-right: 16px;
	min-width: 0;
}
.home-band__title {
	margin: 0;
	font: 700 clamp(30px, 4.5vw, 44px)/1 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
}
.home-band__text {
	margin: 0;
	color: var(--dark-text);
	max-width: 400px;
	text-wrap: pretty;
}
.home-toolcard {
	background: var(--navy-2);
	border: 1px solid var(--line-dark-2);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	cursor: pointer;
	color: #fff;
	min-width: 0;
}
.home-toolcard:hover { border-color: var(--orange); color: #fff; }
.home-toolcard__kicker {
	font: 11px var(--font-mono);
	/* Prototype: var(--orange-dark) #e08a33 on the #323c4a card = 4.18:1, below WCAG AA for 11px text.
	   #e4933f is the smallest lightening that clears 4.5:1 (4.54:1). */
	color: #e4933f;
	letter-spacing: .14em;
}
.home-toolcard__title {
	font: 600 24px/1 var(--font-display);
	text-transform: uppercase;
}
.home-toolcard__text {
	font-size: 13px;
	color: var(--dark-text);
	text-wrap: pretty;
}
.home-toolcard__cta {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	margin-top: auto;
	padding-top: 10px;
}

/* ---------------------------------------------------------------------------
 * Since 1903 (prototype 234–242) — .split-2 supplies the grid
 * ------------------------------------------------------------------------ */
.home-since {
	background: var(--band);
	color: #fff;
}
.home-since__copy {
	padding: 72px clamp(24px, 4vw, 48px) 72px clamp(16px, 4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
	min-width: 0;
}
.home-since__title {
	margin: 0;
	font: 700 clamp(34px, 4.8vw, 48px)/1 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
}
.home-since__text {
	margin: 0;
	color: var(--dark-text-2);
	max-width: 560px;
	text-wrap: pretty;
}
.home-since__media {
	display: grid;
	place-items: center;
	min-height: 320px;
	border-left: 1px solid var(--navy);
	overflow: hidden;
}
.home-since__img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------------------
 * Dealer network (prototype 244–259)
 * ------------------------------------------------------------------------ */
.home-dealer {
	padding: 64px var(--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 40px 48px;
	align-items: center;
	border-bottom: 1px solid var(--line);
}
.home-dealer__copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.home-dealer__title {
	margin: 0;
	font: 700 clamp(32px, 4.5vw, 44px)/1 var(--font-display);
	text-transform: uppercase;
}
.home-dealer__text {
	margin: 0;
	color: var(--text-2);
	max-width: 480px;
}
.home-dealer__box {
	background: var(--panel);
	border: 1px solid var(--line);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.home-dealer__box-title { font-weight: 600; }
.home-dealer__form {
	display: flex;
	gap: 8px;
	margin: 0;
}
.home-dealer__input { flex: 1; }
.home-dealer__submit { flex: none; }
/* The prototype's "Search" div (line 254) is the one navy button in the design with no style-hover,
   so it must keep #2a3340 on hover; this cancels base.css's shared .btn--dark:hover (#a95f17), which
   models the seven navy buttons that do declare it. */
.home-dealer__submit:hover { background: var(--navy); }
.home-dealer__map {
	font-size: 13px;
	color: var(--muted);
	cursor: pointer;
}
.home-dealer__map:hover { color: var(--muted); }

/* ---------------------------------------------------------------------------
 * FAQ teaser (prototype 260–262)
 * ------------------------------------------------------------------------ */
.home-faq {
	padding: 56px var(--gutter) 64px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 28px 64px;
	align-items: start;
}
.home-faq__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.home-faq__text {
	margin: 0;
	color: var(--text-2);
	max-width: 420px;
	text-wrap: pretty;
}
.home-faq__button { align-self: flex-start; }
.home-faq__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* Mobile: 44px tap boxes on the underline links and the "browse the map" link (negative margins keep
   the layout where it is). */
@media (max-width: 899.98px) {
	.home-underline-link { display: inline-block; padding: 11px 0; margin: -11px 0; }
	.home-dealer__map { display: inline-block; padding: 13px 0; margin: -13px 0; }
}