/**
 * Helping Businesses / Client Logos Section — Click Media Lab
 *
 * Sections:
 *  1. Section wrapper
 *  2. Card container
 *  3. Left content (heading, desc, CTA)
 *  4. Logo grid cells
 *  5. Logo inner layouts
 *  6. CTA button
 *  7. Responsive
 *
 * @package clickmedialab
 */


/* =============================================================================
   1. Section Wrapper
   ============================================================================= */
.cml-clients-section {
	background: #fff;
}


/* =============================================================================
   2. Card Container — light grey rounded card
   ============================================================================= */
.cml-clients-card {
	background: #f5f6f8;
	border-radius: 20px;
	padding: 48px 40px;
}


/* =============================================================================
   3. Left Content
   ============================================================================= */
.cml-clients-heading {
	font-size: clamp( 22px, 2.6vw, 32px );
	font-weight: 800;
	color: #1a1a2e;
	line-height: 1.25;
	margin: 0;
}

.cml-clients-highlight {
	color: #e8620e;
}

.cml-clients-desc {
	font-size: 13px;
	color: #666;
	line-height: 1.7;
	margin: 0;
}

.cml-clients-desc strong {
	color: #1a1a2e;
}


/* =============================================================================
   4. Logo Grid Cells
   ============================================================================= */
.cml-logo-cell img{
    width: 200px !important;
    max-height: 76px !important;
    object-fit: contain;
}

.cml-logo-cell--primetime {
	flex-direction: column;
	gap: 4px;
}


/* =============================================================================
   5. Logo Inner Layouts (badge + text combos)
   ============================================================================= */
.cml-logo-sab,
.cml-logo-chirp,
.cml-logo-freight,
.cml-logo-med,
.cml-logo-beyond,
.cml-logo-deter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Badge pill/square */
.cml-logo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 6px;
	letter-spacing: 0.3px;
	white-space: nowrap;
	line-height: 1.2;
}

/* Side text next to badge */
.cml-logo-side-text {
	font-size: 13px;
	color: #333;
	line-height: 1.3;
}


/* =============================================================================
   6. CTA Button
   ============================================================================= */
.cml-clients-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #0a2d8f;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 22px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s, transform 0.15s;
	white-space: nowrap;
}

.cml-clients-cta:hover {
	background: #071e60;
	color: #fff;
	transform: translateY( -1px );
}


/* =============================================================================
   7. Responsive
   ============================================================================= */
@media ( max-width: 991px ) {
	.cml-clients-card {
		padding: 36px 28px;
	}
}

@media ( max-width: 767px ) {
	.cml-clients-card {
		padding: 28px 20px;
		border-radius: 14px;
	}

	.cml-logo-cell {
		height: 60px;
		padding: 8px 10px;
		border-radius: 10px;
	}

	.cml-logo-badge {
		font-size: 10px;
		padding: 3px 6px;
	}

	.cml-logo-side-text {
		font-size: 11px;
	}
}

@media ( max-width: 480px ) {
	.cml-logo-cell {
		height: 52px;
	}
}