/**
 * WP SOC Design System — Components
 * ============================================================
 * Reusable structural pieces every section is assembled from: the
 * Section System (label / title / description), the Card System,
 * badges, and typography utilities for text that isn't a semantic
 * heading (Body Large, Caption, Label).
 * ============================================================
 */

/* ------------------------------------------------------------ *
 * Typography utilities
 * Headings (h1–h4) get their sizing from design-system.css element
 * selectors; these classes cover the scale steps with no matching
 * HTML element (Display, Body Large, Caption, Label) or cases where
 * a heading needs to render at a different visual size than its
 * semantic level.
 * ------------------------------------------------------------ */

.wp-soc-text-display {
	font-family: var(--wp-soc-font-display);
	font-weight: var(--wp-soc-weight-bold);
	font-size: var(--wp-soc-text-display);
	line-height: var(--wp-soc-leading-tight);
	letter-spacing: var(--wp-soc-tracking-tight);
}

.wp-soc-text-h1 {
	font-family: var(--wp-soc-font-display);
	font-weight: var(--wp-soc-weight-bold);
	font-size: var(--wp-soc-text-h1);
	line-height: var(--wp-soc-leading-tight);
	letter-spacing: var(--wp-soc-tracking-tight);
}

.wp-soc-text-h2 {
	font-family: var(--wp-soc-font-display);
	font-weight: var(--wp-soc-weight-semibold);
	font-size: var(--wp-soc-text-h2);
	line-height: var(--wp-soc-leading-snug);
	letter-spacing: var(--wp-soc-tracking-snug);
}

.wp-soc-text-h3 {
	font-family: var(--wp-soc-font-display);
	font-weight: var(--wp-soc-weight-semibold);
	font-size: var(--wp-soc-text-h3);
	line-height: var(--wp-soc-leading-snug);
	letter-spacing: var(--wp-soc-tracking-snug);
}

.wp-soc-text-h4 {
	font-family: var(--wp-soc-font-display);
	font-weight: var(--wp-soc-weight-semibold);
	font-size: var(--wp-soc-text-h4);
	line-height: var(--wp-soc-leading-snug);
}

.wp-soc-text-body-lg {
	font-family: var(--wp-soc-font-body);
	font-weight: var(--wp-soc-weight-regular);
	font-size: var(--wp-soc-text-body-lg);
	line-height: var(--wp-soc-leading-relaxed);
	color: var(--wp-soc-color-text-secondary);
}

.wp-soc-text-body {
	font-family: var(--wp-soc-font-body);
	font-weight: var(--wp-soc-weight-regular);
	font-size: var(--wp-soc-text-body);
	line-height: var(--wp-soc-leading-relaxed);
	color: var(--wp-soc-color-text-secondary);
}

.wp-soc-text-caption {
	font-family: var(--wp-soc-font-body);
	font-weight: var(--wp-soc-weight-medium);
	font-size: var(--wp-soc-text-caption);
	line-height: var(--wp-soc-leading-normal);
	color: var(--wp-soc-color-text-muted);
}

.wp-soc-text-label {
	font-family: var(--wp-soc-font-body);
	font-weight: var(--wp-soc-weight-semibold);
	font-size: var(--wp-soc-text-label);
	letter-spacing: var(--wp-soc-tracking-wide);
	text-transform: uppercase;
	color: var(--wp-soc-color-text-secondary);
}

.wp-soc-text-muted     { color: var(--wp-soc-color-text-muted); }
.wp-soc-text-secondary { color: var(--wp-soc-color-text-secondary); }
.wp-soc-text-primary   { color: var(--wp-soc-color-primary); }

/* ------------------------------------------------------------ *
 * Section System
 * The eyebrow / heading / description header used to open every
 * section on the site, plus the shared container widths.
 * ------------------------------------------------------------ */

.wp-soc-section-header {
	max-width: var(--wp-soc-container-max-prose);
}

.wp-soc-section-header--center {
	margin-inline: auto;
	text-align: center;
}

.wp-soc-section-label {
	display: inline-flex;
	align-items: center;
	gap: var(--wp-soc-space-2);
	padding: var(--wp-soc-space-2) var(--wp-soc-space-4);
	border: 1px solid var(--wp-soc-color-border);
	border-radius: var(--wp-soc-radius-full);
	background: rgba(255, 255, 255, 0.02);
	color: var(--wp-soc-color-text-secondary);
	font-size: var(--wp-soc-text-label);
	font-weight: var(--wp-soc-weight-semibold);
	letter-spacing: var(--wp-soc-tracking-wider);
	text-transform: uppercase;
}

.wp-soc-section-label__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp-soc-color-primary);
}

.wp-soc-section-title {
	margin-top: var(--wp-soc-space-5);
	font-family: var(--wp-soc-font-display);
	font-weight: var(--wp-soc-weight-semibold);
	font-size: var(--wp-soc-text-h2);
	line-height: var(--wp-soc-leading-snug);
	letter-spacing: var(--wp-soc-tracking-snug);
	color: var(--wp-soc-color-text);
}

.wp-soc-section-description {
	margin-top: var(--wp-soc-space-4);
	font-size: var(--wp-soc-text-body-lg);
	line-height: var(--wp-soc-leading-relaxed);
	color: var(--wp-soc-color-text-secondary);
}

.wp-soc-section-header--center .wp-soc-section-description {
	margin-inline: auto;
}

/* ------------------------------------------------------------ *
 * Card System
 * Every card shares .wp-soc-card as its base (surface, border,
 * radius, transition) and adds one modifier for its role. Combine
 * with .wp-soc-hover-premium (animations.css) for the interactive
 * lift + glow.
 * ------------------------------------------------------------ */

.wp-soc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp-soc-color-surface-elevated);
	border: 1px solid var(--wp-soc-color-border);
	border-radius: var(--wp-soc-radius-lg);
	padding: var(--wp-soc-space-6);
}

/* Default Card — generic content container, no special layout */
.wp-soc-card--default {
	gap: var(--wp-soc-space-3);
}

/* Feature Card — icon-led, used for capability/benefit grids */
.wp-soc-card--feature {
	gap: var(--wp-soc-space-4);
	padding: var(--wp-soc-space-7) var(--wp-soc-space-6);
}

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

/* Technology Card — compact, centered, used for logo walls */
.wp-soc-card--technology {
	align-items: center;
	text-align: center;
	gap: var(--wp-soc-space-3);
	padding: var(--wp-soc-space-6) var(--wp-soc-space-4) var(--wp-soc-space-5);
	border-radius: var(--wp-soc-radius-xl);
}

.wp-soc-card--technology .wp-soc-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp-soc-radius-md);
	background: rgba(255, 255, 255, 0.03);
	color: var(--wp-soc-color-text-secondary);
	opacity: 0.6;
	transition: opacity var(--wp-soc-duration-base) var(--wp-soc-ease-out),
		color var(--wp-soc-duration-base) var(--wp-soc-ease-out),
		background-color var(--wp-soc-duration-base) var(--wp-soc-ease-out);
}

.wp-soc-card--technology:hover .wp-soc-card__icon,
.wp-soc-card--technology:focus-visible .wp-soc-card__icon {
	opacity: 1;
	color: var(--wp-soc-color-primary);
	background: rgba(var(--wp-soc-color-primary-rgb), 0.08);
}

/* Service Card — larger, supports a footer link/action */
.wp-soc-card--service {
	gap: var(--wp-soc-space-4);
	padding: var(--wp-soc-space-7);
	border-radius: var(--wp-soc-radius-2xl);
}

.wp-soc-card--service .wp-soc-card__footer {
	margin-top: auto;
	padding-top: var(--wp-soc-space-5);
	border-top: 1px solid var(--wp-soc-color-border);
}

/* Case Study Card — media-led (image/stat block up top), content below */
.wp-soc-card--case-study {
	gap: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--wp-soc-radius-2xl);
}

.wp-soc-card--case-study .wp-soc-card__media {
	aspect-ratio: 16 / 9;
	background: var(--wp-soc-color-surface);
	border-bottom: 1px solid var(--wp-soc-color-border);
}

.wp-soc-card--case-study .wp-soc-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp-soc-space-3);
	padding: var(--wp-soc-space-6);
}

.wp-soc-card--case-study .wp-soc-card__stat {
	font-family: var(--wp-soc-font-display);
	font-size: var(--wp-soc-text-h3);
	font-weight: var(--wp-soc-weight-semibold);
	color: var(--wp-soc-color-primary);
}

/* Shared card text elements */
.wp-soc-card__eyebrow {
	font-size: var(--wp-soc-text-label);
	font-weight: var(--wp-soc-weight-semibold);
	letter-spacing: var(--wp-soc-tracking-wide);
	text-transform: uppercase;
	color: var(--wp-soc-color-text-muted);
}

.wp-soc-card__title {
	font-family: var(--wp-soc-font-display);
	font-size: var(--wp-soc-text-h4);
	font-weight: var(--wp-soc-weight-semibold);
	color: var(--wp-soc-color-text);
}

.wp-soc-card__description {
	font-size: var(--wp-soc-text-body);
	line-height: var(--wp-soc-leading-relaxed);
	color: var(--wp-soc-color-text-secondary);
}

/* Card grid — the layout wrapper cards are typically placed in */
.wp-soc-card-grid {
	display: grid;
	gap: var(--wp-soc-space-5);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.wp-soc-card-grid--technology {
	grid-template-columns: repeat(6, 1fr);
	gap: var(--wp-soc-space-4);
}

@media (max-width: 1080px) {
	.wp-soc-card-grid--technology {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	.wp-soc-card-grid--technology {
		grid-template-columns: repeat(3, 1fr);
	}
}

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

/* ------------------------------------------------------------ *
 * Badge / Pill — status flags, tags, small metadata chips
 * ------------------------------------------------------------ */

.wp-soc-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp-soc-space-1);
	padding: var(--wp-soc-space-1) var(--wp-soc-space-3);
	border-radius: var(--wp-soc-radius-full);
	border: 1px solid var(--wp-soc-color-border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--wp-soc-color-text-secondary);
	font-size: var(--wp-soc-text-label);
	font-weight: var(--wp-soc-weight-medium);
}

.wp-soc-badge--primary {
	border-color: rgba(var(--wp-soc-color-primary-rgb), 0.35);
	background: rgba(var(--wp-soc-color-primary-rgb), 0.1);
	color: var(--wp-soc-color-primary);
}

.wp-soc-badge--success {
	border-color: rgba(var(--wp-soc-color-success-rgb), 0.35);
	background: rgba(var(--wp-soc-color-success-rgb), 0.1);
	color: var(--wp-soc-color-success);
}

.wp-soc-badge--danger {
	border-color: rgba(var(--wp-soc-color-danger-rgb), 0.35);
	background: rgba(var(--wp-soc-color-danger-rgb), 0.1);
	color: var(--wp-soc-color-danger);
}

.wp-soc-badge--warning {
	border-color: rgba(var(--wp-soc-color-warning-rgb), 0.35);
	background: rgba(var(--wp-soc-color-warning-rgb), 0.1);
	color: var(--wp-soc-color-warning);
}

/* ------------------------------------------------------------ *
 * Divider
 * ------------------------------------------------------------ */

.wp-soc-divider {
	border: 0;
	height: 1px;
	background: var(--wp-soc-color-border);
	margin-block: var(--wp-soc-space-6);
}