/* ==========================================================================
   Person Social (neilkelly/person-social)
   Figma: Designer Profile / 7 — Social & External Links (1051:405). Centered
   "Follow <name>" heading + intro over a row of social icon links. Token-driven.
   Wrapper: .wp-block-neilkelly-person-social.nk-person-social
   ========================================================================== */
.nk-person-social {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--7);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--gutter);
	background: var(--wp--preset--color--brand-white);
	font-family: var(--wp--preset--font-family--inter);
}

.nk-person-social__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--3-5);
	text-align: center;
}

.nk-person-social__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--xl);
	letter-spacing: var(--wp--custom--components--person--social-heading-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-primary);
}

.nk-person-social__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

.nk-person-social__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--13);
}

.nk-person-social__item {
	display: flex;
}

.nk-person-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--components--person--social-icon-size);
	height: var(--wp--custom--components--person--social-icon-size);
	color: var(--wp--preset--color--ink-primary);
	border-radius: var(--wp--custom--radius--xs);
}

/* Brand-colored icons (glyphs inherit via currentColor). Per the mock, Instagram
   and Houzz stay black (they fall through to the default ink color above); the
   colored platforms are set below. */
.nk-person-social__link--facebook  { color: var(--wp--custom--components--person--social-facebook); }
.nk-person-social__link--linkedin  { color: var(--wp--custom--components--person--social-linkedin); }
.nk-person-social__link--pinterest { color: var(--wp--custom--components--person--social-pinterest); }

.nk-person-social__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink-primary);
	outline-offset: 2px;
}

.nk-person-social__icon {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- Responsive --- */
@media (max-width: 767px) {
	.nk-person-social {
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--6);
	}
	.nk-person-social__links {
		gap: var(--wp--preset--spacing--6);
	}
}

/* No block-gap seam between full-bleed sections. */
.wp-block-neilkelly-person-social { margin-block: 0; }

/* --- Profile stripe: this section's background depends on how many of the profile's
   middle sections rendered before it, so a hidden section can't leave two panels of
   the same colour touching. The class comes from neilkelly_person_stripe_class()
   in inc/person.php; these rules must stay after nk-person-social's own background. --- */
.wp-block-neilkelly-person-social.nk-person-stripe--white {
	background: var(--wp--preset--color--brand-white);
}
.wp-block-neilkelly-person-social.nk-person-stripe--grey {
	background: var(--wp--preset--color--surface-subtle);
}