/**
 * Core Services Section Styles — WP SOC Theme
 * ============================================================
 * This section is built entirely on the existing design system:
 *   - Section System   → .wp-soc-section-label / -title / -description
 *   - Card System       → .wp-soc-card.wp-soc-card--service
 *   - Button System      → .wp-soc-btn.wp-soc-btn--outline
 *   - Animation System   → .wp-soc-fade-up + .wp-soc-hover-premium
 *   - Spacing / Tokens   → var(--wp-soc-space-*), var(--wp-soc-color-*)
 *
 * Only what the design system does not already provide is defined
 * below: the 3/2/1 responsive grid for exactly six service cards,
 * the icon tile for a Service Card (only Feature/Technology cards
 * ship an icon treatment in components.css), and the capability list
 * inside each card.
 * ============================================================
 */

/* ------------------------------------------------------------ *
 * Grid — 3 columns × 2 rows desktop, 2 columns tablet, 1 mobile
 * ------------------------------------------------------------ */

.wp-soc-services-grid {
	margin-top: var(--wp-soc-space-9);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp-soc-space-5);
}

@media (max-width: 1023px) {
	.wp-soc-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 639px) {
	.wp-soc-services-grid {
		margin-top: var(--wp-soc-space-7);
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------ *
 * Card icon tile
 * Mirrors the visual weight of the Feature Card icon in
 * components.css, scoped here because Service Cards don't ship an
 * icon treatment of their own in the design system.
 * ------------------------------------------------------------ */

.wp-soc-services-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--wp-soc-space-1);
	border-radius: var(--wp-soc-radius-md);
	background: rgba(var(--wp-soc-color-primary-rgb), 0.08);
	color: var(--wp-soc-color-primary);
}

/* Hard ceiling of 2 lines regardless of content length or translation,
   keeping every card in the grid the same visual weight. */
.wp-soc-card--service .wp-soc-card__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ------------------------------------------------------------ *
 * Capability list — 3 key capabilities per card
 * ------------------------------------------------------------ */

.wp-soc-services-card__capabilities {
	display: flex;
	flex-direction: column;
	gap: var(--wp-soc-space-2);
}

.wp-soc-services-card__capabilities li {
	display: flex;
	align-items: center;
	gap: var(--wp-soc-space-2);
	font-size: var(--wp-soc-text-caption);
	color: var(--wp-soc-color-text-secondary);
}

.wp-soc-services-card__capabilities svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--wp-soc-color-primary);
}

/* ------------------------------------------------------------ *
 * List reset
 * The card grid and capability list use <ul>/<li> for semantics;
 * design-system.css already zeroes list-style/margin/padding
 * globally, so nothing further is needed here.
 * ------------------------------------------------------------ */