/**
 * Default styling for [c4c_group_grid] and [c4c_category_grid].
 *
 * OVERRIDE GUIDE: every card uses TWO classes — a shared ".c4c-nav-card"
 * (for default look/feel) plus a level-specific class: ".c4c-group-card"
 * for homepage groups, ".c4c-category-card" for trade categories. To match
 * your existing custom card design, target these in Simple Custom CSS & JS
 * (already installed on your site) and your rules will simply win by being
 * loaded after this stylesheet — no need to edit this file directly.
 */
.c4c-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--c4c-space-3, 22px);
	max-width: var(--c4c-container-max-w, 1200px);
	margin: var(--c4c-space-3, 24px) auto;
	padding: 0 var(--c4c-space-2, 16px);
}

.c4c-nav-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--c4c-border, #ececf1);
	border-radius: var(--c4c-radius-lg, 18px);
	overflow: hidden;
	background: var(--c4c-surface, #fff);
	box-shadow: var(--c4c-shadow-sm, 0 1px 2px rgba(16,22,35,.04), 0 8px 20px rgba(16,22,35,.05));
	transition: transform var(--c4c-dur-base, .2s) var(--c4c-ease, ease), box-shadow var(--c4c-dur-base, .2s) var(--c4c-ease, ease), border-color var(--c4c-dur-base, .2s) var(--c4c-ease, ease);
}

.c4c-nav-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--c4c-shadow-md, 0 10px 28px rgba(16, 22, 35, 0.12));
	border-color: var(--c4c-brand-gold, #e4d3ab);
}

.c4c-nav-card-image {
	height: 160px;
	background-size: cover;
	background-position: center;
	background-color: var(--c4c-surface-2, #f4f4f4);
	transition: transform 0.35s ease;
}

.c4c-nav-card:hover .c4c-nav-card-image {
	transform: scale(1.04);
}

.c4c-nav-card-image--placeholder {
	background: linear-gradient(135deg, var(--c4c-surface-2, #eef1f6), var(--c4c-border, #dfe5ee));
}

.c4c-nav-card-body {
	padding: 18px;
}

.c4c-nav-card-title {
	margin: 0 0 6px;
	font-size: 19.5px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--c4c-text, inherit);
}

.c4c-nav-card-desc {
	margin: 0 0 10px;
	font-size: 14.5px;
	color: var(--c4c-text-secondary, #6b7280);
	line-height: 1.55;
}

/* Gold "soft badge" pairing. Both halves now come from tokens so the
   badge re-tints itself in dark mode instead of staying a bright cream
   rectangle on a dark card. */
.c4c-nav-card-count {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: var(--c4c-brand-gold-strong, #96700f);
	background: var(--c4c-brand-gold-soft, #fff6e6);
	padding: 3px 10px;
	border-radius: 999px;
}

/* Group cards get a slightly larger image by default since they're
   typically fewer, more prominent homepage entries. */
.c4c-group-card .c4c-nav-card-image {
	height: 200px;
}

.c4c-nav-card-cta {
	display: block;
	margin-top: 10px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--c4c-brand-gold-strong, #b0842a);
}

.c4c-service-nav-card .c4c-nav-card-count {
	margin-right: 8px;
}

/**
 * Clean list layout for the Services page (/{category-slug}/) — replaces
 * the image-card grid per request: "Fast. Minimal. Professional."
 * Title, short description, contractor count, View Contractors CTA, with
 * dividers between rows — resembling Houzz/Thumbtack service listings.
 */
.c4c-service-list-count {
	max-width: 900px;
	margin: 0 auto 8px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--c4c-text-tertiary, #8a8f9a);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.c4c-service-list {
	max-width: 900px;
	margin: 8px auto 40px;
	padding: 0 16px;
	background: var(--c4c-surface, #fff);
	border-radius: 18px;
	box-shadow: var(--c4c-shadow-sm, 0 1px 2px rgba(16,22,35,.04), 0 8px 20px rgba(16,22,35,.05));
	overflow: hidden;
}

.c4c-service-list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 20px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--c4c-border, #eef0f3);
	transition: background 0.18s ease, padding-left 0.18s ease;
}

.c4c-service-list:first-child .c4c-service-list-row:first-child {
	border-top: none;
}

.c4c-service-list-row:last-child {
	border-bottom: none;
}

.c4c-service-list-row:hover {
	background: var(--c4c-surface-2, #fafafa);
	padding-left: 26px;
}

.c4c-service-list-main {
	flex: 1 1 auto;
	min-width: 0;
}

.c4c-service-list-title {
	margin: 0 0 4px;
	font-size: 18.5px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--c4c-text, #14213d);
}

.c4c-service-list-desc {
	margin: 0;
	font-size: 14.5px;
	color: var(--c4c-text-secondary, #6b7280);
	line-height: 1.55;
}

.c4c-service-list-meta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
	white-space: nowrap;
}

.c4c-service-list-count-badge {
	font-size: 13px;
	font-weight: 700;
	color: var(--c4c-brand-gold-strong, #96700f);
	background: var(--c4c-brand-gold-soft, #fff6e6);
	padding: 4px 12px;
	border-radius: 999px;
}

.c4c-service-list-cta {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--c4c-brand-gold-strong, #b0842a);
}

@media (max-width: 640px) {
	.c4c-service-list-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.c4c-service-list-meta {
		width: 100%;
		justify-content: space-between;
	}
}