/* GC Social Count widget — mirrors the "Follow the movement" strip.
   No font imports; uses theme --gc-* tokens. */

.gc-social, .gc-social *, .gc-social *::before, .gc-social *::after { box-sizing: border-box; }
.gc-social {
	--gc-social-accent: var(--gc-blue-dark, #3D82B3);
	--gc-social-line: color-mix(in srgb, var(--gc-ink, #14212B) 8%, transparent);
	padding: 76px 0;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
}
.gc-social-inner {
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: 48px;
}

.gc-social-header { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.gc-social-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gc-blue-dark, #3D82B3);
}
.gc-social-eyebrow::before,
.gc-social-eyebrow::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: currentColor;
	opacity: .28;
}
.gc-social-header h2 {
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -.022em;
	margin: 0;
	text-wrap: balance;
	font-size: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
	color: var(--gc-ink, #14212B);
}

.gc-social-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 12px;
	max-width: var(--gc-social-max, var(--gc-container, 1312px));
	margin-inline: auto;
}
.gc-social-item {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 106px;
	padding: 18px 16px;
	text-align: center;
	text-decoration: none;
	border: 1px solid color-mix(in srgb, var(--gc-social-accent) 24%, transparent);
	border-radius: var(--gc-radius-md, 16px);
	background: var(--gc-white, #ffffff);
	box-shadow:
		inset 0 0 26px -10px color-mix(in srgb, var(--gc-social-accent) 34%, transparent),
		0 8px 20px -16px color-mix(in srgb, var(--gc-social-accent) 60%, transparent);
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.gc-social-item:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--gc-social-accent) 48%, transparent);
	box-shadow:
		inset 0 0 30px -8px color-mix(in srgb, var(--gc-social-accent) 48%, transparent),
		0 14px 28px -18px color-mix(in srgb, var(--gc-social-accent) 75%, transparent);
}
.gc-social-item:active { transform: translateY(0); }
.gc-social-item:focus-visible {
	outline: 2px solid var(--gc-social-accent);
	outline-offset: 3px;
}
.gc-social-icon {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gc-social-accent);
	opacity: .17;
	pointer-events: none;
	transition: opacity .25s ease;
}
.gc-social-icon svg { width: 68px; height: 68px; }
.gc-social-item:hover .gc-social-icon { opacity: .26; }
.gc-social-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gc-social-count {
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-size: 25px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.028em;
	color: var(--gc-ink, #14212B);
	line-height: 1;
}
.gc-social-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--gc-muted, #5A6B75);
}

.gc-social-item--instagram { --gc-social-accent: #C1558B; }
.gc-social-item--youtube   { --gc-social-accent: #C6362F; }
.gc-social-item--tiktok    { --gc-social-accent: #16A5B0; }
.gc-social-item--facebook  { --gc-social-accent: #3F6FB5; }
.gc-social-item--telegram  { --gc-social-accent: #3E8FC4; }
.gc-social-item--kick      { --gc-social-accent: #4E9B3C; }
.gc-social-item--x         { --gc-social-accent: #3B4A54; }
.gc-social-item--linkedin  { --gc-social-accent: #2F6DA3; }

@media (prefers-reduced-motion: reduce) {
	.gc-social-item, .gc-social-icon { transition: none; }
	.gc-social-item:hover { transform: none; }
}
@media (max-width: 640px) {
	.gc-social { padding: 40px 0; }
	.gc-social-inner { padding-inline: 20px; }
	.gc-social-header { margin-bottom: 24px; }
	.gc-social-eyebrow { font-size: 10.5px; gap: 10px; margin-bottom: 12px; }
	.gc-social-header h2 { font-size: 1.6rem; }
	.gc-social-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.gc-social-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.gc-social-item { min-height: 98px; padding: 16px 14px; }
	.gc-social-icon svg { width: 62px; height: 62px; }
	.gc-social-count { font-size: 23px; }
	.gc-social-label { font-size: 10px; letter-spacing: .14em; }
}

@media (max-width: 480px) {
	.gc-social { padding: 32px 0; }
	.gc-social-inner { padding-inline: 16px; }
	.gc-social-header h2 { font-size: 1.45rem; }
	.gc-social-strip { gap: 8px; }
	.gc-social-item { min-height: 88px; padding: 14px 12px; }
	.gc-social-icon svg { width: 54px; height: 54px; }
	.gc-social-count { font-size: 21px; }
	.gc-social-label { font-size: 9.5px; }
}

/* Eyebrow: one spec across every Gencore widget. Inter 11.5/600/.16em,
   uppercase, no trailing rule. */
.gc-social-eyebrow {
	display: block;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 14px;
}

.gc-social-eyebrow::before,
.gc-social-eyebrow::after { display: none; }

@media (max-width: 640px) {
	.gc-social-eyebrow { font-size: 10.5px; margin-bottom: 12px; }
}

/* Edge to edge band, with the strip above still capping the icons inside it. */
.gc-social--full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
