/**
 * Research & Insights 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-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-text-caption/-muted, .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, the badge/reading-time
 * meta row, a date + button footer row, and the technical line-art
 * illustrations used in each card's media area.
 * ============================================================
 */

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

.wp-soc-research__glow {
	width: 600px;
	height: 600px;
	bottom: -220px;
	left: -200px;
}

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

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

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

/* ------------------------------------------------------------ *
 * Card meta row — category badge + estimated reading time
 * ------------------------------------------------------------ */

.wp-soc-research-card__meta-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp-soc-space-3);
}

/* ------------------------------------------------------------ *
 * Card footer — published date + Read Article button
 * ------------------------------------------------------------ */

.wp-soc-research-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp-soc-space-3);
	margin-top: auto;
	padding-top: var(--wp-soc-space-4);
	border-top: 1px solid var(--wp-soc-color-border);
}

/* ------------------------------------------------------------ *
 * Technical line-art illustrations
 * Minimal line art only — no thumbnails, no stock photography, no
 * dashboard chrome. Rendered inside the existing .wp-soc-card__media
 * area.
 * ------------------------------------------------------------ */

/* .wp-soc-card--case-study .wp-soc-card__media (flex-centered, padded)
   is already declared in case-studies.css and applies to every card
   using this Card System variant across the site — intentionally not
   redeclared here to avoid duplicated CSS. */.wp-soc-research-visual {
	width: 100%;
	height: 100%;
	max-height: 140px;
}

.wp-soc-research-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-research-visual__link-dashed {
	fill: none;
	stroke: var(--wp-soc-color-border);
	stroke-width: 1;
	stroke-dasharray: 3 4;
}

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

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

/* ------------------------------------------------------------ *
 * 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.
 * ------------------------------------------------------------ */