/**
 * Variant CSS: social--post-grid-with-cta
 *
 * Asymmetric split: an invite/CTA panel (kicker + headline + deck + handle +
 * follow button) sits beside a compact 2x3 grid of square feed shots (hover
 * zoom). Unlike the centered feed grid and icon bars: the persuasion copy
 * stands NEXT to the profile preview, so the CTA stays in view. Tile img src
 * are swapped by the photo system. Text stays --ink (polarity-aware); kicker,
 * em and the button take --accent / CTA tokens. Part of the `social` role.
 */

body.aibt-universal .universal-social--post-grid-with-cta {
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
}

/* Split: panel + grid column, vertically centered. */
body.aibt-universal .universal-social--post-grid-with-cta .universal-social__split {
	gap: clamp(1.8rem, 4.5vw, 3.4rem) !important;
	align-items: center !important;
}

/* Invite / CTA panel. */
body.aibt-universal .universal-social--post-grid-with-cta .universal-social__panel {
	min-width: 0;
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
	max-width: 42ch;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__handle {
	font-family: var(--font-display) !important;
	font-size: clamp(1.1rem, 2.4vw, 1.4rem) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	color: var(--ink) !important;
	margin: 0 0 var(--space-md) 0 !important;
	overflow-wrap: anywhere;
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__ctawrap {
	margin: 0 !important;
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__cta .wp-block-button__link {
	background: var(--cta-bg-primary, var(--accent)) !important;
	color: var(--cta-text-primary, #ffffff) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	padding: 0.75rem 1.7rem !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	border: none !important;
	transition: background var(--duration-fast, 0.18s) var(--ease-default, ease),
		transform var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent)) !important;
	transform: translateY(-2px);
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* 2x3 square post grid. */
body.aibt-universal .universal-social--post-grid-with-cta .universal-social__gridcol {
	min-width: 0;
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(5px, 1.1vw, 12px);
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__tile {
	margin: 0 !important;
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--decor-radius, 12px) * 0.5);
	aspect-ratio: 1 / 1;
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__tile img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 600ms var(--ease-default, ease);
}

body.aibt-universal .universal-social--post-grid-with-cta .universal-social__tile:hover img {
	transform: scale(1.06);
}

/* Tablet: stack panel over grid; WP already collapses the columns. */
@media (max-width: 781px) {
	body.aibt-universal .universal-social--post-grid-with-cta .universal-social__panel,
	body.aibt-universal .universal-social--post-grid-with-cta .universal-social__gridcol {
		flex-basis: 100% !important;
	}
	body.aibt-universal .universal-social--post-grid-with-cta .universal-social__deck {
		max-width: none;
	}
}

/* Mobile: cap tracking (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-social--post-grid-with-cta .universal-social__kicker {
		letter-spacing: 0 !important;
	}
}

/* Honor reduced-motion: freeze the feed zoom + button lift. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-social--post-grid-with-cta .universal-social__tile img,
	body.aibt-universal .universal-social--post-grid-with-cta .universal-social__cta .wp-block-button__link {
		transition: background var(--duration-fast, 0.18s) var(--ease-default, ease);
	}
	body.aibt-universal .universal-social--post-grid-with-cta .universal-social__tile:hover img {
		transform: none;
	}
	body.aibt-universal .universal-social--post-grid-with-cta .universal-social__cta .wp-block-button__link:hover {
		transform: none;
	}
}