/**
 * Block: firsttracks/equipment-related
 *
 * Full-width band with a 4-up (desktop) / 2-up (tablet) / 1-up (mobile)
 * card grid. Each card links to a sibling Equipment post.
 */

.equipment-related {
	--equipment-related-bg: var(--color-bg-secondary, #f3f3f3);
	--equipment-related-card-bg: var(--color-bg-primary, #fff);
	--equipment-related-card-border: 1px solid var(--color-border-light, #e5e7eb);
	--equipment-related-heading-font-family: var(--typeface-family-secondary, inherit);
	--equipment-related-heading-font-size: clamp(1.75rem, -27.75rem + 65.625vw, 3.75rem);
	--equipment-related-gap: var(--spacing-24-rem, 1.5rem);

	background: var(--equipment-related-bg);
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block: var(--spacing-48-rem, 3rem);
	padding-block: var(--spacing-48-rem, 3rem);
}

.equipment-related__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1680px;
	margin-inline: auto;
	padding-inline: 16px !important;
}

.equipment-related__header {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: var(--spacing-16-rem, 1rem);
	margin-bottom: var(--spacing-24-rem, 1.5rem);
}

.equipment-related__heading {
	color: var(--color-text, #111);
	font-family: var(--equipment-related-heading-font-family);
	font-size: var(--equipment-related-heading-font-size);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.equipment-related__rule {
	background: var(--color-text, #111);
	height: 4px;
	width: 100%;
	min-width: 100%;
	position: relative;
}

.equipment-related__rule::after {
	content: url(/wp-content/uploads/2026/06/Vector-4.svg);
	position: absolute;
	right: 0;
	bottom: -7px;
}

.equipment-related__grid {
	display: grid;
	gap: var(--equipment-related-gap);
	grid-template-columns: 1fr;
}

.equipment-related__card {
	background: var(--equipment-related-card-bg);
	border: var(--equipment-related-card-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.equipment-related__card:hover {
	box-shadow: 0 8px 20px rgb(17 24 39 / 8%);
	transform: translateY(-2px);
}

.equipment-related__media {
	aspect-ratio: 4 / 3;
	background: var(--color-bg-secondary, #f3f3f3);
	display: block;
	overflow: hidden;
}

.equipment-related__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.equipment-related__body {
	padding: var(--spacing-16-rem, 1rem);
	position: relative;
	flex: 1 1 auto;
	border: 2px solid var(--color-secondary-900);
}

.equipment-related__title {
	color: var(--color-text, #111);
	font-family: var(--typeface-family-primary, inherit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 var(--spacing-8-rem, 0.5rem);
}

.equipment-related__title a {
	--ftm-scheme-link: var(--color-black, #111827) !important;
	color: inherit;
	font-family: var(--wp--preset--font-family--display, 'Saira SemiCondensed'), sans-serif;
	font-size: 1.125rem;
	line-height: 1.4;
	text-decoration: none;
}

.equipment-related__title a:hover {
	text-decoration: underline;
}

p.equipment-related__excerpt {
	color: var(--color-black) !important;
	font-size: 15px !important;
	font-weight: 400;
	line-height: 20px;
	margin: 0 var(--spacing-48-rem, 3rem) 0 0;
	font-family: var(--wp--preset--font-family--body, 'Figtree'), sans-serif;
}

.equipment-related__cta {
	align-items: center;
	background: var(--color-action-primary, #105395);
	bottom: var(--spacing-16-rem, 0.875rem);
	color: var(--color-text-inverse, #fff);
	display: inline-flex;
	height: 2rem;
	justify-content: center;
	position: absolute;
	right: var(--spacing-16-rem, 0.875rem);
	transition: background-color 150ms ease;
	width: 2rem;
	border-radius: 4px;
}

.equipment-related__cta:visited {
	color: var(--color-text-inverse, #fff);
}

.equipment-related__cta:hover,
.equipment-related__cta:focus-visible {
	background: var(--color-action-primary-hover, #0e4682);
}

.equipment-related__cta svg {
	height: 0.875rem;
	width: 0.875rem;
}

.equipment-related__placeholder {
	background: var(--color-bg-secondary, #f3f3f3);
	border: 1px dashed var(--color-border, #ddd);
	color: var(--color-text-muted, #555);
	font-style: italic;
	padding: var(--spacing-24-rem, 1.5rem);
	text-align: center;
}

/* 601px+ */
@media (min-width: 601px) {

	.equipment-related__inner {
		padding-inline: 40px !important;
	}
}

/* 640px+ */
@media (width >= 640px) {

	.equipment-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.equipment-related__title a {
		font-size: 1.25rem;
	}
}

/* =========================================================
   Tablet: 600px – 899px
   ========================================================= */

@media (width >= 600px) and (width <= 899px) {

	.equipment-related__header {
		gap: 2rem;
		margin-bottom: 3rem;
	}

	.equipment-related {
		margin-block-start: 5rem !important;
		padding-block: 7rem;
	}
}

/* =========================================================
   Desktop: 900px+
   ========================================================= */

@media (width >= 900px) {

	.equipment-related {
		margin-block-start: 7rem !important;
		padding-block: 5rem;
	}

	.equipment-related__header {
		gap: 2rem;
		margin-bottom: 3rem;
	}

	.equipment-related__body {
		padding: var(--spacing-24-rem, 1.5rem);
	}
}

/* =========================================================
   4-column grid: 960px+
   ========================================================= */

@media (width >= 960px) {

	.equipment-related__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}