/* ==========================================================================
   Patient Care Home BD - Service Coverage Section (Areas We Cover in Dhaka)
   ========================================================================== */

.pch-coverage-section {
	width: 100%;
	background-color: #ffffff;
	padding: clamp(65px, 8.5vw, 105px) 0;
	box-sizing: border-box;
	position: relative;
}

.pch-coverage-section * {
	box-sizing: border-box;
}

.pch-coverage-container {
	max-width: 1340px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 3.5vw, 28px);
	padding-right: clamp(16px, 3.5vw, 28px);
	display: grid;
	grid-template-columns: 1fr 1.45fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

/* --------------------------------------------------------------------------
   Left Column: Header & Action
   -------------------------------------------------------------------------- */
.pch-coverage-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.pch-coverage-badge {
	display: inline-block;
	color: var(--pch-primary, #0284c7);
	font-size: clamp(12px, 1.2vw, 13.5px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 14px;
}

.pch-coverage-title {
	font-family: inherit;
	font-size: clamp(28px, 4vw, 46px);
	font-weight: 700;
	color: var(--pch-navy-dark, #0b1527);
	line-height: 1.18;
	margin: 0 0 16px 0;
	letter-spacing: -0.4px;
}

.pch-coverage-desc {
	font-family: inherit;
	font-size: clamp(15px, 1.5vw, 16.5px);
	color: var(--pch-text-muted, #64748b);
	line-height: 1.65;
	margin: 0 0 clamp(24px, 3.5vw, 32px) 0;
	max-width: 480px;
}

.pch-coverage-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: 12px;
	background-color: var(--pch-primary, #0284c7);
	color: #ffffff;
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28);
}

.pch-coverage-btn svg {
	transition: transform 0.2s ease;
}

.pch-coverage-btn:hover {
	background-color: #0369a1;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(2, 132, 199, 0.38);
}

.pch-coverage-btn:hover svg {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Right Column: Location Pills Grid
   -------------------------------------------------------------------------- */
.pch-coverage-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 16px;
	width: 100%;
}

.pch-coverage-card {
	background-color: #ffffff;
	border-radius: 12px;
	border: 1px solid rgba(11, 21, 39, 0.08);
	padding: 13px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 3px 10px rgba(11, 21, 39, 0.04);
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.pch-coverage-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(11, 21, 39, 0.08);
	border-color: var(--pch-primary, #0284c7);
}

.pch-coverage-pin {
	color: var(--pch-primary, #0284c7);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pch-coverage-name {
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--pch-navy-dark, #0b1527);
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.pch-coverage-container {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.pch-coverage-content {
		max-width: 650px;
	}
}

@media (max-width: 680px) {
	.pch-coverage-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px 12px;
	}

	.pch-coverage-card {
		padding: 11px 14px;
	}

	.pch-coverage-name {
		font-size: 13.5px;
	}
}

@media (max-width: 420px) {
	.pch-coverage-grid {
		grid-template-columns: 1fr;
	}
}