/**
 * Case Studies Section Styles — WP SOC Theme
 * ============================================================
 * Reused as-is from the design system: .wp-soc-section(--surface),
 * .wp-soc-section-pad, .wp-soc-container, .wp-soc-bg-grid,
 * .wp-soc-bg-glow, .wp-soc-section-header(--center), .wp-soc-section-
 * label(__dot), .wp-soc-section-title, .wp-soc-section-description,
 * .wp-soc-card.wp-soc-card--case-study (incl. its own .wp-soc-card__
 * media / __body), .wp-soc-badge(--primary), .wp-soc-card__title,
 * .wp-soc-card__description, .wp-soc-btn(--outline/--sm/__icon),
 * .wp-soc-hover-premium, .wp-soc-fade-up + .is-visible + stagger-index.
 *
 * Nothing above is redefined. Only what components.css doesn't already
 * provide is added below: the 3/2/1 card grid, a footer treatment for
 * the Case Study Card variant (components.css only styles __footer
 * under --service), the achievement list, and the blueprint line
 * illustrations used in each card's media area.
 * ============================================================
 */

/* ------------------------------------------------------------ *
 * Ambient background glow placement
 * ------------------------------------------------------------ */

.wp-soc-case-studies__glow {
	width: 600px;
	height: 600px;
	top: -160px;
	right: -220px;
}

/* ------------------------------------------------------------ *
 * Grid — 3 columns desktop, 2 tablet, 1 mobile
 * (same responsive thresholds already established by the Core
 * Services card grid, kept consistent rather than reinvented)
 * ------------------------------------------------------------ */

.wp-soc-case-studies-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-case-studies-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* ------------------------------------------------------------ *
 * Footer treatment for the Case Study Card
 * (components.css only defines .wp-soc-card__footer under the
 * --service modifier; this extends the same visual treatment to
 * --case-study, using the same tokens, nothing new invented)
 * ------------------------------------------------------------ */

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

/* ------------------------------------------------------------ *
 * Achievement list
 * ------------------------------------------------------------ */

.wp-soc-case-studies-card__achievements {
	display: flex;
	flex-direction: column;
	gap: var(--wp-soc-space-2);
}

.wp-soc-case-studies-card__achievements 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-case-studies-card__achievements svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--wp-soc-color-primary);
}

/* ------------------------------------------------------------ *
 * Blueprint illustrations
 * Minimal line art only — no fills, no screenshots, no dashboard
 * chrome. Rendered inside the existing .wp-soc-card__media area.
 * ------------------------------------------------------------ */

.wp-soc-card--case-study .wp-soc-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp-soc-space-5);
}

/* Hard ceiling of 2 lines on this card variant's description, applying
   equally to Case Studies and Research (both use .wp-soc-card--case-study),
   so card heights stay balanced regardless of content length. */
.wp-soc-card--case-study .wp-soc-card__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.wp-soc-case-visual {
	width: 100%;
	height: 100%;
	max-height: 140px;
}

.wp-soc-case-visual__link {
	fill: none;
	stroke: rgba(var(--wp-soc-color-primary-rgb), 0.35);
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wp-soc-case-visual__node {
	fill: var(--wp-soc-color-surface);
	stroke: var(--wp-soc-color-text-muted);
	stroke-width: 1.2;
}

.wp-soc-case-visual__node--primary {
	fill: var(--wp-soc-color-primary);
	stroke: var(--wp-soc-color-primary);
}

.wp-soc-case-visual__shield {
	fill: rgba(var(--wp-soc-color-primary-rgb), 0.05);
	stroke: rgba(var(--wp-soc-color-primary-rgb), 0.5);
	stroke-width: 1.4;
	stroke-linejoin: round;
}

.wp-soc-case-visual__grid-line {
	fill: none;
	stroke: var(--wp-soc-color-border);
	stroke-width: 1;
}

/* ------------------------------------------------------------ *
 * Accessibility
 * All ambient motion in this section lives in the shared animation
 * system (.wp-soc-fade-up / .wp-soc-hover-premium), which already
 * honors prefers-reduced-motion — nothing additional to disable here.
 * ------------------------------------------------------------ */