.mydev-service-collection {
	display: grid;
	grid-template-columns: repeat(var(--mydev-service-columns, 3), minmax(0, 1fr));
	gap: var(--mydev-component-grid-gap, var(--wp--preset--spacing--50, 1.5rem));
}

.mydev-service-collection--list { grid-template-columns: 1fr; }
.mydev-service-collection--card { grid-template-columns: repeat(var(--mydev-service-columns, 2), minmax(0, 1fr)); }

.mydev-service-card,
.mydev-service-collection__empty {
	background: var(--mydev-component-background, var(--mydev-color-surface, transparent));
	border: 1px solid var(--mydev-component-border, var(--mydev-color-border, currentColor));
	border-radius: var(--mydev-component-radius, var(--mydev-radius-lg, .75rem));
	color: var(--mydev-component-body, var(--mydev-color-text, inherit));
	overflow: hidden;
}

.mydev-service-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.mydev-service-card__image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.mydev-service-card__body,
.mydev-service-collection__empty { padding-block: var(--mydev-density-padding-block, 1.5rem); padding-inline: var(--mydev-density-padding-inline, 1.5rem); }
.mydev-service-card__body { display: flex; flex-direction: column; gap: var(--mydev-density-content-gap, .75rem); block-size: 100%; }
.mydev-service-card__categories { margin: 0; color: var(--mydev-component-muted, var(--mydev-surface-muted, inherit)); font-size: .8125rem; font-weight: 650; }
.mydev-service-card__title,
.mydev-service-card__summary,
.mydev-service-collection__empty > * { margin: 0; }
.mydev-service-card__title,
.mydev-service-collection__empty h3 { color: var(--mydev-component-heading, var(--mydev-color-heading, inherit)); }
.mydev-service-card__summary { color: var(--mydev-component-muted, var(--mydev-surface-muted, inherit)); }
.mydev-service-card__action {
	align-items: center;
	align-self: flex-start;
	background: var(--mydev-button-background, var(--mydev-color-accent));
	border: 1px solid var(--mydev-button-border, transparent);
	border-radius: var(--mydev-button-radius, .5rem);
	color: var(--mydev-button-foreground, var(--mydev-color-on-accent));
	display: inline-flex;
	font-size: var(--mydev-button-size-font-size, 1rem);
	font-weight: var(--mydev-button-font-weight, 600);
	gap: var(--mydev-button-size-icon-gap, .45em);
	justify-content: center;
	margin-block-start: auto;
	min-block-size: var(--mydev-button-size-min-height, var(--mydev-button-min-height, 3rem));
	padding-block: var(--mydev-button-size-padding-block, var(--mydev-button-padding-block, .625rem));
	padding-inline: var(--mydev-button-size-padding-inline, var(--mydev-button-padding-inline, 1.25rem));
	text-decoration: none;
}
.mydev-service-card__action:hover { background: var(--mydev-button-hover-background, var(--mydev-button-background)); border-color: var(--mydev-button-hover-border, var(--mydev-button-border)); color: var(--mydev-button-hover-foreground, var(--mydev-button-foreground)); }
.mydev-service-card__action:focus-visible { outline: var(--mydev-focus-width, 3px) solid var(--mydev-color-focus, #ffbf47); outline-offset: var(--mydev-focus-offset, 3px); }

.mydev-service-collection--list .mydev-service-card { display: grid; grid-template-columns: minmax(10rem, 28%) 1fr; }
.mydev-service-collection--list .mydev-service-card:not(:has(.mydev-service-card__media)) { grid-template-columns: 1fr; }

@media (max-width: 767px) {
	.mydev-service-collection { --mydev-service-columns: 1; }
	.mydev-service-collection--list .mydev-service-card { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
	.mydev-service-card__action span { transition: transform var(--mydev-motion-duration-fast, 160ms) var(--mydev-motion-easing-standard, ease); }
	.mydev-service-card__action:hover span { transform: translateX(.2em); }
	[dir="rtl"] .mydev-service-card__action:hover span { transform: translateX(-.2em); }
}

/* Violet Framework: Services use an editorial capability rhythm, not a generic card shell. */
.mydev-service-collection {
	counter-reset: mydev-service;
	gap: 0;
	border-block-end: 1px solid var(--mydev-component-border, var(--mydev-color-border, currentColor));
}

.mydev-service-card {
	counter-increment: mydev-service;
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	column-gap: var(--mydev-density-content-gap, .75rem);
	align-items: start;
	border: 0;
	border-block-start: 1px solid var(--mydev-component-border, var(--mydev-color-border, currentColor));
	border-radius: 0;
	overflow: visible;
}

.mydev-service-card::before {
	content: counter(mydev-service, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1;
	color: var(--mydev-component-accent, var(--mydev-color-primary, currentColor));
	font-size: var(--mydev-type-xl, 1.75rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	padding-block-start: var(--mydev-density-padding-block, 1.5rem);
	padding-inline-start: var(--mydev-density-padding-inline, 1.5rem);
}

.mydev-service-card__media {
	grid-column: 1;
	grid-row: 2;
	aspect-ratio: 1;
	border-radius: 50%;
	inline-size: 3rem;
	margin-block: var(--wp--preset--spacing--20, .65rem) var(--mydev-density-padding-block, 1.5rem);
	margin-inline-start: var(--mydev-density-padding-inline, 1.5rem);
}

.mydev-service-card__body {
	grid-column: 2;
	grid-row: 1 / span 2;
	padding-inline-start: 0;
}

.mydev-service-card__categories {
	color: var(--mydev-component-accent, var(--mydev-color-primary, currentColor));
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mydev-service-card__title {
	font-size: clamp(1.2rem, 1rem + .7vw, 1.75rem);
}

.mydev-service-card__action {
	background: transparent;
	border-color: transparent;
	color: var(--mydev-button-background, var(--mydev-color-link, currentColor));
	justify-content: flex-start;
	min-block-size: var(--mydev-minimum-target-size, 2.75rem);
	padding-inline: 0;
}

.mydev-service-card__action:hover {
	background: transparent;
	border-color: transparent;
	color: var(--mydev-button-hover-background, var(--mydev-color-link-hover, currentColor));
}

.mydev-service-collection--list .mydev-service-card {
	grid-template-columns: 5.5rem minmax(6rem, 16%) minmax(0, 1fr);
}

.mydev-service-collection--list .mydev-service-card__media {
	grid-column: 2;
	grid-row: 1;
	aspect-ratio: 1;
	inline-size: 100%;
	margin-inline: 0;
	margin-block-end: var(--wp--preset--spacing--20, .65rem);
}

.mydev-service-collection--list .mydev-service-card__body {
	grid-column: 3;
	grid-row: 1;
}

@media (min-width: 768px) {
	.mydev-service-collection--card .mydev-service-card:nth-child(3n + 1) {
		grid-column: span 2;
	}
}

@media (max-width: 767px) {
	.mydev-service-card,
	.mydev-service-collection--list .mydev-service-card { grid-template-columns: 3.75rem minmax(0, 1fr); }
	.mydev-service-collection--list .mydev-service-card__media { grid-column: 1; grid-row: 2; inline-size: 2.5rem; margin-inline-start: var(--mydev-density-padding-inline, 1.5rem); }
	.mydev-service-collection--list .mydev-service-card__body { grid-column: 2; grid-row: 1 / span 2; }
}