/* Home gateway tackle background — photo sits around the four cards, not inside them. */
.gateway {
	background:
		linear-gradient(90deg, rgba(7, 18, 20, 0.90) 0%, rgba(7, 18, 20, 0.84) 50%, rgba(7, 18, 20, 0.90) 100%),
		url("../images/isonosuke-tackle-gateway-bg-20260816.webp") center center / cover no-repeat !important;
}

/* Keep the four gateway panels on their original solid surfaces. */
.gateway__grid {
	background: transparent !important;
}

.gateway__grid > .gateway-card--ocean {
	background: #075c63 !important;
	box-shadow: none !important;
	color: #ffffff !important;
}

.gateway__grid > .gateway-card--lime {
	background: #d7ef68 !important;
	box-shadow: none !important;
	color: #102227 !important;
}

.gateway__grid > .gateway-card--ink {
	background: #102227 !important;
	box-shadow: none !important;
	color: #ffffff !important;
}

.gateway__grid > .gateway-card--paper {
	background:
		linear-gradient(135deg, transparent 0 69%, rgba(0, 111, 119, 0.06) 69%),
		#172527 !important;
	box-shadow: none !important;
	color: #ffffff !important;
}

.gateway__grid > .gateway-card--ocean p,
.gateway__grid > .gateway-card--ocean h3,
.gateway__grid > .gateway-card--ocean > div > span,
.gateway__grid > .gateway-card--ocean .gateway-card__number,
.gateway__grid > .gateway-card--ink p,
.gateway__grid > .gateway-card--ink h3,
.gateway__grid > .gateway-card--ink > div > span,
.gateway__grid > .gateway-card--ink .gateway-card__number,
.gateway__grid > .gateway-card--paper p,
.gateway__grid > .gateway-card--paper h3,
.gateway__grid > .gateway-card--paper > div > span,
.gateway__grid > .gateway-card--paper .gateway-card__number {
	color: #ffffff !important;
}

.gateway__grid > .gateway-card--lime p,
.gateway__grid > .gateway-card--lime h3,
.gateway__grid > .gateway-card--lime > div > span,
.gateway__grid > .gateway-card--lime .gateway-card__number {
	color: #102227 !important;
	text-shadow: none !important;
}

.gateway__grid .gateway-card__db-links a {
	background: #102227 !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	color: #ffffff !important;
}

.gateway__grid .gateway-card__db-links a i {
	color: #d7ef68 !important;
}

.gateway__grid .gateway-card__db-links a:hover,
.gateway__grid .gateway-card__db-links a:focus-visible {
	background: #173338 !important;
	border-color: #2bc7c0 !important;
}

.gateway__grid > .gateway-card:hover {
	box-shadow: var(--shadow) !important;
}

.gateway .section-heading h2,
.gateway .section-heading > p {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

@media (max-width: 720px) {
	.gateway {
		background-position: center center !important;
	}
}