/**
 * About Company Section Styles — WP SOC Theme
 * ============================================================
 * Reused as-is from the design system: .wp-soc-section, .wp-soc-
 * section-pad, .wp-soc-container(--narrow), .wp-soc-bg-grid, .wp-soc-
 * bg-glow, .wp-soc-section-header, .wp-soc-section-label(__dot),
 * .wp-soc-section-title, .wp-soc-section-description, .wp-soc-card
 * (.wp-soc-card--default / .wp-soc-card--feature, incl. the Feature
 * Card's own .wp-soc-card__icon treatment), .wp-soc-card__title,
 * .wp-soc-card__description, .wp-soc-hover-lift, .wp-soc-hover-
 * premium, .wp-soc-text-h2/-h3/-label/-caption/-muted/-primary,
 * .wp-soc-fade-up + .is-visible + stagger-index delay.
 *
 * Nothing above is redefined. Only the layout structure that doesn't
 * exist anywhere else in the theme is added below: the highlight
 * grid, the mission/vision and values grids, the vertical timeline,
 * and the centered closing statement. Every value still resolves to
 * an existing token — no new custom properties, no new colors, no
 * new card variants.
 * ============================================================
 */

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

.wp-soc-about__glow {
	width: 600px;
	height: 600px;
	top: -180px;
	left: 50%;
	margin-left: -300px;
	opacity: 0.2;
}

/* ------------------------------------------------------------ *
 * 1. Intro — extra paragraphs beyond the section description
 * ------------------------------------------------------------ */

.wp-soc-about__intro-text {
	display: flex;
	flex-direction: column;
	gap: var(--wp-soc-space-4);
}

.wp-soc-about__intro-text .wp-soc-section-description {
	margin-top: 0;
}

/* ------------------------------------------------------------ *
 * 2. Company Highlights — 2 × 2 grid of Default Cards
 * ------------------------------------------------------------ */

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

.wp-soc-about__highlight {
	gap: var(--wp-soc-space-2);
}

/* ------------------------------------------------------------ *
 * 3. Mission & Vision — two Feature Cards side by side
 * ------------------------------------------------------------ */

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

/* ------------------------------------------------------------ *
 * 4. Core Values — 4 Feature Cards
 * ------------------------------------------------------------ */

.wp-soc-about__values-header {
	margin-top: var(--wp-soc-space-10);
}

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

/* ------------------------------------------------------------ *
 * 5. Timeline — simple vertical line with markers
 * ------------------------------------------------------------ */

.wp-soc-about__timeline-header {
	margin-top: var(--wp-soc-space-10);
}

.wp-soc-about__timeline {
	position: relative;
	margin-top: var(--wp-soc-space-6);
	padding-left: var(--wp-soc-space-6);
	list-style: none;
	border-left: 1px solid var(--wp-soc-color-border);
}

.wp-soc-about__timeline-item {
	position: relative;
	padding-bottom: var(--wp-soc-space-7);
}

.wp-soc-about__timeline-item:last-child {
	padding-bottom: 0;
}

.wp-soc-about__timeline-marker {
	position: absolute;
	top: 6px;
	left: calc(-1 * var(--wp-soc-space-6) - 5px);
	width: 9px;
	height: 9px;
	border-radius: var(--wp-soc-radius-full);
	background: var(--wp-soc-color-bg);
	border: 2px solid var(--wp-soc-color-primary);
}

.wp-soc-about__timeline-year {
	display: block;
}

.wp-soc-about__timeline-title {
	margin-top: var(--wp-soc-space-2);
}

.wp-soc-about__timeline-item .wp-soc-card__description {
	margin-top: var(--wp-soc-space-2);
	max-width: var(--wp-soc-container-max-prose);
}

/* ------------------------------------------------------------ *
 * 6. Closing Statement
 * ------------------------------------------------------------ */

.wp-soc-about__closing {
	margin-top: var(--wp-soc-space-10);
	padding-top: var(--wp-soc-space-9);
	border-top: 1px solid var(--wp-soc-color-border);
	text-align: center;
}

.wp-soc-about__closing .wp-soc-text-h2 {
	max-width: var(--wp-soc-container-max-prose);
	margin-inline: auto;
}

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

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

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

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

	.wp-soc-about__timeline {
		padding-left: var(--wp-soc-space-5);
	}

	.wp-soc-about__timeline-marker {
		left: calc(-1 * var(--wp-soc-space-5) - 5px);
	}
}