/* About-fox-ess page: additive rules on top of homepage/components.css + homepage.css
   (hero card, split layout, grid, buttons, eyebrow header, checklist, media,
   video, cta-card, feature-slider are already shared from there). */

/* Single hero (no separate mobile variant) - must not use ".elion-hero--desktop"
   which homepage.css hides entirely below 767px. */
@media (max-width: 767px) {
	.elion-hero--single .elion-hero__card {
		padding: 60px 24px;
	}

	.elion-hero--single .elion-hero__content {
		max-width: 100%;
	}
}

/* Breakdance's original columns on this page stack to 1-col already at
   768px (not the 767px breakpoint the shared ".elion-grid-2/3" primitives
   use), so tablet needs a page-scoped override. */
@media (max-width: 1023px) {
	.elion-about-fox .elion-grid-2,
	.elion-about-fox .elion-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* Product family cards (inverter/storage series) - horizontally scrollable
   row of dark-green pill cards, rebuilt from the original Breakdance/swiper
   slider so every card stays reachable on every breakpoint. */
.elion-fox-cards {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.elion-fox-cards::-webkit-scrollbar {
	display: none;
}

.elion-fox-card {
	flex: 0 0 220px;
	scroll-snap-align: start;
	border-radius: var(--elion-radius-md);
	text-decoration: none !important;
	overflow: hidden;
}

.elion-fox-card__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	height: 100%;
	min-height: 260px;
	padding: 24px 16px;
	text-align: center;
}

.elion-fox-card--green .elion-fox-card__inner {
	background: linear-gradient(160deg, var(--elion-green) 0%, var(--elion-green-dark) 100%);
}

.elion-fox-card--dark .elion-fox-card__inner {
	background: linear-gradient(160deg, #0c1f15 0%, #060f0a 100%);
}

.elion-fox-card__image {
	max-width: 70%;
	max-height: 130px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.elion-fox-card__title {
	margin: 0 !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--elion-white) !important;
}

.elion-fox-card__subtitle {
	font-size: 13px;
	color: var(--elion-white);
	opacity: 0.85;
}

@media (max-width: 767px) {
	.elion-fox-card {
		flex-basis: 55%;
	}
}