/**
 * Why Organizations Choose Us Section Styles — WP SOC Theme
 * ============================================================
 * Reused as-is from the design system: .wp-soc-section,
 * .wp-soc-section-pad, .wp-soc-container, .wp-soc-bg-grid,
 * .wp-soc-bg-glow, .wp-soc-section-label(__dot), .wp-soc-section-title,
 * .wp-soc-section-description, .wp-soc-btn(--primary), .wp-soc-btn-group,
 * .wp-soc-divider, .wp-soc-card.wp-soc-card--feature (incl. its own
 * .wp-soc-card__icon treatment), .wp-soc-card__title, .wp-soc-card__
 * description, .wp-soc-hover-premium, .wp-soc-text-h2/-label/-primary,
 * .wp-soc-fade-up + .is-visible + stagger-index delay.
 *
 * Nothing above is redefined here. Only the layout structure unique to
 * this section — the 45/55 grid, the 2×2 feature list, and the stats
 * strip grid — is added below, using existing tokens exclusively.
 * ============================================================
 */

/* ------------------------------------------------------------ *
 * Ambient background glow placement
 * (.wp-soc-bg-glow supplies the look; position/size is section-
 * specific, same pattern used by the SOC Showcase.)
 * ------------------------------------------------------------ */

.wp-soc-why-us__glow {
	width: 560px;
	height: 560px;
	top: 40%;
	left: -220px;
}

/* ------------------------------------------------------------ *
 * Layout — 45 / 55 two-column grid
 * ------------------------------------------------------------ */

.wp-soc-why-us__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 45fr 55fr;
	align-items: center;
	gap: var(--wp-soc-space-8);
}

.wp-soc-why-us__content {
	max-width: var(--wp-soc-container-max-prose);
}

.wp-soc-why-us__content .wp-soc-btn-group {
	margin-top: var(--wp-soc-space-7);
}

/* ------------------------------------------------------------ *
 * Feature grid — balanced 2 × 2 of existing Feature Cards
 * ------------------------------------------------------------ */

.wp-soc-why-us__features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp-soc-space-5);
}

/* ------------------------------------------------------------ *
 * Statistics strip
 * ------------------------------------------------------------ */

.wp-soc-why-us__stats {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.wp-soc-why-us__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp-soc-space-2);
	text-align: center;
	padding-inline: var(--wp-soc-space-4);
	border-left: 1px solid var(--wp-soc-color-border);
}

.wp-soc-why-us__stat:first-child {
	border-left: 0;
}

.is-visible.wp-soc-why-us__stats {
	animation-delay: 0.2s;
}

/* ------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------ */

@media (max-width: 1023px) {
	.wp-soc-why-us__grid {
		grid-template-columns: 1fr;
		gap: var(--wp-soc-space-7);
	}

	.wp-soc-why-us__content {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.wp-soc-why-us__features {
		grid-template-columns: 1fr;
	}

	.wp-soc-why-us__stats {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp-soc-space-6) 0;
	}

	.wp-soc-why-us__stat:nth-child(2) {
		border-left: 1px solid var(--wp-soc-color-border);
	}

	.wp-soc-why-us__stat:nth-child(3) {
		border-left: 0;
	}
}

@media (max-width: 479px) {
	.wp-soc-why-us__stats {
		grid-template-columns: 1fr;
	}

	.wp-soc-why-us__stat {
		border-left: 0 !important;
		border-top: 1px solid var(--wp-soc-color-border);
		padding-block-start: var(--wp-soc-space-5);
	}

	.wp-soc-why-us__stat:first-child {
		border-top: 0;
		padding-block-start: 0;
	}
}