/* Dealer Network template — alternating image/text blocks.
   Uses the theme's own colour tokens (--gold, --bg, --text). */

.dealer-blocks {
	display: grid;
	gap: 56px;
}

.dealer-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: center;
}

/* Zig-zag: every second block flips the media to the right. */
.dealer-block.is-reversed .db-media { order: 2; }
.dealer-block.is-reversed .db-text  { order: 1; }

.db-media {
	position: relative;
	border-radius: var(--r-2);
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: 0 18px 50px -22px rgba(4, 120, 87, 0.4);
}

.db-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* Branded placeholder when no image is set. */
.db-ghost {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(16, 185, 129, 0.18), transparent 60%),
		var(--bg-2);
	color: var(--text);
	text-align: center;
	padding: 24px;
}

.db-ghost .db-ghost-ico {
	width: 56px;
	height: 56px;
	color: var(--gold);
}

.db-ghost span {
	font-weight: 600;
	font-size: var(--text-lg);
	letter-spacing: var(--ls-base);
	color: var(--text-strong);
}

.db-text .eyebrow {
	display: inline-block;
	margin-bottom: 10px;
}

.db-text .section-heading {
	margin: 0 0 14px;
}

.db-text p {
	color: var(--text-2);
	line-height: 1.7;
	margin: 0 0 22px;
	max-width: 52ch;
}

.db-text .btn .ico-sm {
	width: 18px;
	height: 18px;
}

@media (max-width: 860px) {
	.dealer-block {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.dealer-block.is-reversed .db-media,
	.dealer-block.is-reversed .db-text {
		order: 0;
	}
}