/* eqx/range-cards
 *
 * Image-overlay cards: each card is a single rounded tile with the
 * photograph filling the whole frame, a navy gradient washing up from
 * the bottom, and the label / description / teal CTA stacked at the
 * bottom-left over the image.
 */

.eqx-range-cards__header { text-align: center; max-width: 620px; margin: 0 auto var(--spacing-lg); }
.eqx-range-cards__sub    { color: var(--eqx-text-muted); }

.eqx-range-cards__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	gap: var(--spacing-lg);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.eqx-range-cards--cols-3 .eqx-range-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eqx-range-cards--cols-4 .eqx-range-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 768px) {
	.eqx-range-cards__grid,
	.eqx-range-cards--cols-3 .eqx-range-cards__grid,
	.eqx-range-cards--cols-4 .eqx-range-cards__grid { grid-template-columns: 1fr; }
}

/* Card layers stack in a single grid cell so the body sits over the
 * image without absolute positioning math. */
.eqx-range-card {
	position: relative;
	display: grid;
	grid-template-areas: "stack";
	aspect-ratio: 16 / 10;
	border-radius: 0; /* square corners — client wants crisp collection tiles */
	overflow: hidden;
	color: var(--eqx-warm-white);
	isolation: isolate;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.eqx-range-card > * { grid-area: stack; }
/* Cards with a CTA URL behave as one big clickable target — see the
 * stretched-link pseudo on `.eqx-range-card__cta` further down. */
.eqx-range-card:has(.eqx-range-card__cta) { cursor: pointer; }
.eqx-range-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-overlay);
}
/* Surface the focus ring on the whole card (rather than just the CTA
 * text) when the link is keyboard-focused. */
.eqx-range-card:has(.eqx-range-card__cta:focus-visible) {
	outline: 3px solid var(--eqx-brand-teal);
	outline-offset: 3px;
}

.eqx-range-card__media,
.eqx-range-card__image {
	width: 100%;
	height: 100%;
	display: block;
}
.eqx-range-card__image {
	object-fit: cover;
}

/* Navy wash that fades up from the bottom — keeps the heading / copy /
 * CTA legible against any photograph. */
.eqx-range-card__overlay {
	background: linear-gradient(
		180deg,
		rgba(var(--eqx-brand-dark-rgb), 0)    0%,
		rgba(var(--eqx-brand-dark-rgb), 0)   35%,
		rgba(var(--eqx-brand-dark-rgb), 0.55) 70%,
		rgba(var(--eqx-brand-dark-rgb), 0.85) 100%
	);
	pointer-events: none;
}

.eqx-range-card__badge {
	align-self: start;
	justify-self: start;
	margin: var(--spacing-md);
	background: var(--eqx-brand-accent);
	color: var(--eqx-warm-white);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}

.eqx-range-card__body {
	align-self: end;
	padding: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.eqx-range-card__label {
	margin: 0 0 var(--spacing-xs);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--eqx-warm-white);
	letter-spacing: -0.01em;
}
.eqx-range-card__desc {
	margin: 0 0 var(--spacing-sm);
	color: rgba(255, 255, 255, 0.88);
	font-size: 1rem;
	line-height: 1.5;
	max-width: 32ch;
}

/* Teal text-link CTA with a trailing arrow that nudges on hover.
 * The ::after pseudo turns the whole card into a click target without
 * adding a redundant link element — keeps the a11y tree clean. */
.eqx-range-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	align-self: flex-start;
	color: var(--eqx-brand-teal);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color var(--transition-base);
	outline: none; /* focus ring is rendered on the parent card instead */
}
.eqx-range-card__cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.eqx-range-card:hover .eqx-range-card__cta,
.eqx-range-card__cta:focus {
	color: var(--eqx-warm-white);
}
.eqx-range-card__cta-arrow {
	display: inline-block;
	font-size: 1.05em;
	line-height: 1;
	transition: transform var(--transition-base);
}
.eqx-range-card:hover .eqx-range-card__cta-arrow,
.eqx-range-card__cta:focus .eqx-range-card__cta-arrow {
	transform: translateX(4px);
}

/* Lift the visible text above the stretched-link overlay so users can
 * still highlight copy inside the card. */
.eqx-range-card__label,
.eqx-range-card__desc,
.eqx-range-card__cta-label,
.eqx-range-card__cta-arrow {
	position: relative;
	z-index: 2;
}

/* Dark section background: the cards already render as their own dark
 * tiles, so just make sure the section heading reads as white. */
.eqx-bg--dark .eqx-range-cards__header h2 { color: var(--eqx-warm-white); }
.eqx-bg--dark .eqx-range-cards__sub       { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 768px) {
	.eqx-range-card { aspect-ratio: 4 / 3; }
	.eqx-range-card__body { padding: var(--spacing-md); }
}