/* ============================================================
   InnoHEALTH Partners — front-end styles
   Fixed-size logo boxes: every card is the exact same width and
   height with identical padding on all four sides, logo scaled
   to fit and centred both ways.
   Rows are centred — a partial row (1, 2 or 3 logos) sits in the
   middle of the page rather than aligning to the left edge.
   ============================================================ */

.ihp-wrap {
	--ihp-navy: #1b2a63;
	--ihp-border: #e3e6ec;
	--ihp-card-bg: #ffffff;
	--ihp-gap: 26px;

	/* Overridden inline by the shortcode attributes */
	--ihp-card-w: 195px;
	--ihp-card-h: 130px;
	--ihp-pad: 22px;
	--ihp-cols: 5;

	width: 100%;
	box-sizing: border-box;
}

.ihp-wrap *,
.ihp-wrap *::before,
.ihp-wrap *::after {
	box-sizing: border-box;
}

/* ---------- Section ---------- */
.ihp-section {
	margin: 0 0 70px;
}

.ihp-section:last-child {
	margin-bottom: 20px;
}

.ihp-heading {
	text-align: center;
	color: var(--ihp-navy);
	font-size: clamp(26px, 3.4vw, 42px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 38px;
	letter-spacing: -0.2px;
}

.ihp-sub {
	text-align: center;
	color: #5b6478;
	font-size: 16px;
	margin: -22px 0 34px;
}

/* ---------- Grid ----------
   Flex, not CSS grid: a grid reserves every column track even
   when empty, which pushes a short row to the left. Flex wrapping
   with justify-content:center keeps every row optically centred.
   The max-width caps how many cards fit per row.
------------------------------------------------------------- */
.ihp-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--ihp-gap);
	margin-left: auto;
	margin-right: auto;
	max-width: calc(
		var(--ihp-cols) * var(--ihp-card-w) +
		(var(--ihp-cols) - 1) * var(--ihp-gap)
	);
}

.ihp-cols-2 { --ihp-cols: 2; }
.ihp-cols-3 { --ihp-cols: 3; }
.ihp-cols-4 { --ihp-cols: 4; }
.ihp-cols-5 { --ihp-cols: 5; }
.ihp-cols-6 { --ihp-cols: 6; }

/* ---------- Card: the fixed box ---------- */
.ihp-card {
	flex: 0 0 var(--ihp-card-w);
	width: var(--ihp-card-w);
	height: var(--ihp-card-h);
	background: var(--ihp-card-bg);
	border: 1px solid var(--ihp-border);
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.ihp-card:hover {
	border-color: #c9d0e0;
	box-shadow: 0 8px 22px rgba(27, 42, 99, .10);
	transform: translateY(-3px);
}

/* Uniform padding on all four sides; logo centred in the remainder */
.ihp-card-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: var(--ihp-pad);
	text-decoration: none;
	border: 0;
	box-shadow: none;
	background: none;
}

.ihp-card-inner:hover,
.ihp-card-inner:focus {
	border: 0;
	box-shadow: none;
	background: none;
}

/* Logo fills the padded area without distorting or overflowing */
.ihp-logo,
.ihp-card-inner img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.ihp-noimg {
	color: #7a8397;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	line-height: 1.35;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.ihp-cols-5,
	.ihp-cols-6 { --ihp-cols: 4; }
}

@media (max-width: 992px) {
	.ihp-wrap {
		--ihp-gap: 20px;
		--ihp-card-w: 175px;
		--ihp-card-h: 118px;
		--ihp-pad: 18px;
	}
	.ihp-cols-4,
	.ihp-cols-5,
	.ihp-cols-6 { --ihp-cols: 3; }
	.ihp-section { margin-bottom: 52px; }
}

@media (max-width: 680px) {
	.ihp-wrap {
		--ihp-gap: 14px;
		--ihp-card-w: 150px;
		--ihp-card-h: 105px;
		--ihp-pad: 15px;
	}
	.ihp-cols-3,
	.ihp-cols-4,
	.ihp-cols-5,
	.ihp-cols-6 { --ihp-cols: 2; }
	.ihp-heading { margin-bottom: 26px; }
}

@media print {
	.ihp-card { break-inside: avoid; box-shadow: none; }
}