/* ==========================================================================
   "Recognized & Featured" / "Page Visited & Liked" footer logo block
   Logo-only, grouped into sections. Each section has a full-width tinted band.
   Rendered above the Ohio teal footer.
   ========================================================================== */

.iyj-featured {
	--iyj-teal: #27656c;
	--iyj-band: #f1feff; /* light mint band behind each section */
	background: transparent;
	padding: 36px 20px 28px;
	font-family: inherit;
}

.iyj-featured__inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* --- Section band (contained within the content container) ---------------- */
.iyj-featured__section {
	background: var(--iyj-band);
	padding: 28px 24px;
	border-radius: 8px;
}

.iyj-featured__section + .iyj-featured__section {
	margin-top: 10px; /* thin gap so the two bands read as separate */
}

/* --- Heading -------------------------------------------------------------- */
.iyj-featured__title {
	margin: 0 auto 20px;
	text-align: center;
	color: var(--iyj-teal);
	font-size: clamp(15px, 1.35vw, 19px);
	font-weight: 700;
	letter-spacing: 0.18em;
	padding: 0;
}

/* --- Logo grid ------------------------------------------------------------ */
.iyj-featured__grid {
	display: grid;
	grid-template-columns: repeat(var(--iyj-cols, 4), auto);
	justify-content: center; /* cluster logos toward the centre */
	gap: 54px;
	align-items: center;
}

/* --- Logo (no individual background) -------------------------------------- */
.iyj-featured__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: transparent;
	text-decoration: none;
	transition: transform 0.25s ease;
}

a.iyj-featured__logo:hover {
	transform: translateY(-3px);
}

.iyj-featured__logo img {
	height: 80px;        /* fixed height so every logo lines up equally */
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 991px) {
	.iyj-featured__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 575px) {
	.iyj-featured {
		padding: 26px 0 20px;
	}
	.iyj-featured__section {
		padding: 22px 16px;
	}
	.iyj-featured__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.iyj-featured__logo img {
		height: 60px;
	}
}