/* ════════════════════════════════════════════════════════════════════
   iHub Archive — /ihub/
   Production CSS for archive-ihub_company.php
   Design DNA: gc-events / gc-about (white + 0.5px + teal-only)
   ════════════════════════════════════════════════════════════════════ */

.gc-ihub { background: var(--gc-bg); }


/* ── HERO ────────────────────────────────────────────────────────── */
.gc-ihub__hero {
	background: var(--gc-bg);
	border-bottom: 0.5px solid var(--gc-border, #e2e8f0);
	position: relative;
	overflow: hidden;
}
.gc-ihub__hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 50% 70% at 70% 40%, rgba(0, 198, 174, 0.06) 0%, transparent 60%),
		radial-gradient(ellipse 30% 40% at 15% 90%, rgba(13, 27, 62, 0.03) 0%, transparent 55%);
	pointer-events: none;
}
.gc-ihub__hero-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 36px 25px 48px;
	position: relative;
	z-index: 1;
	text-align: center;
}

.gc-ihub__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px;
	background: var(--gc-primary-soft, #E6FAF7);
	border: 0.5px solid rgba(0, 198, 174, .3);
	color: var(--gc-primary-dark, #00A894);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.gc-ihub__badge-dot {
	width: 6px;
	height: 6px;
	background: var(--gc-primary-dark, #00A894);
	border-radius: 50%;
	flex-shrink: 0;
	animation: gc-ihub-pulse 2s ease-in-out infinite;
}
@keyframes gc-ihub-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.85); }
}

.gc-ihub__h1 {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: clamp(30px, 4.2vw, 46px);
	font-weight: 700;
	color: var(--gc-navy, #0D1B3E);
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 14px;
}
.gc-ihub__h1-accent { color: var(--gc-primary-dark, #00A894); }

.gc-ihub__sub {
	font-size: 15.5px;
	color: var(--gc-text-muted, #64748b);
	line-height: 1.7;
	max-width: 620px;
	margin: 0 auto 28px;
}

/* — Hero search bar — */
.gc-ihub__search {
	max-width: 560px;
	margin: 0 auto 32px;
	background: var(--gc-bg-soft);
	border: 0.5px solid var(--gc-border, #e2e8f0);
	border-radius: 10px;
	padding: 5px 5px 5px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 6px 22px rgba(13, 27, 62, 0.06);
	transition: all 180ms ease;
}
.gc-ihub__search:focus-within {
	border-color: var(--gc-primary, #00C6AE);
	box-shadow: 0 6px 22px rgba(0, 198, 174, 0.18);
}
.gc-ihub__search-icon {
	width: 16px;
	height: 16px;
	color: var(--gc-text-faint, #94a3b8);
	flex-shrink: 0;
}
.gc-ihub__search input {
	flex: 1;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 14px;
	color: var(--gc-text, #1e293b);
	background: none;
	min-width: 0;
}
.gc-ihub__search input::placeholder { color: var(--gc-text-faint, #94a3b8); }

/* Search button — matches .gc-events__card-cta-primary (Register button) */
.gc-ihub__search-btn {
	background: var(--gc-primary, #00C6AE);
	border: 0.5px solid var(--gc-primary, #00C6AE);
	color: #ffffff;
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-weight: 700;
	font-size: 13px;
	padding: 10px 22px;
	border-radius: 8px;
	white-space: nowrap;
	cursor: pointer;
	transition: all 180ms ease;
	letter-spacing: -0.005em;
	opacity: 1;
}
.gc-ihub__search-btn:hover,
.gc-ihub__search-btn:focus,
.gc-ihub__search-btn:active {
	background: var(--gc-primary-dark, #00A894);
	border-color: var(--gc-primary-dark, #00A894);
	color: #ffffff;
	opacity: 1;
	box-shadow: 0 6px 16px rgba(0, 168, 148, 0.35);
	transform: translateY(-1px);
}

/* — Hero stats row — */
.gc-ihub__stats {
	display: flex;
	justify-content: center;
	gap: 36px;
	flex-wrap: wrap;
	align-items: center;
}
.gc-ihub__stat { text-align: center; }
.gc-ihub__stat-num {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 24px;
	font-weight: 800;
	color: var(--gc-navy, #0D1B3E);
	line-height: 1;
	letter-spacing: -0.02em;
}
.gc-ihub__stat-num span { color: var(--gc-primary-dark, #00A894); }
.gc-ihub__stat-label {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--gc-text-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 6px;
}
.gc-ihub__stat-div {
	display: none;
}


/* ── CATEGORY GRID ───────────────────────────────────────────────── */
.gc-ihub__cats {
	background: var(--gc-bg);
	padding: 56px 0;
	position: relative;
}
.gc-ihub__cats-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 25px;
}
.gc-ihub__section-head {
	text-align: center;
	margin-bottom: 36px;
}
.gc-ihub__eyebrow {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gc-primary-dark, #00A894);
	margin-bottom: 10px;
}
.gc-ihub__eyebrow--left { text-align: left; }

.gc-ihub__h2 {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--gc-navy, #0D1B3E);
	letter-spacing: -0.025em;
	margin: 0;
}

.gc-ihub__cat-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}
.gc-ihub__cat {
	background: var(--gc-bg-soft);
	border: 0.5px solid var(--gc-border, #e2e8f0);
	border-radius: 12px;
	padding: 26px 20px 22px;
	display: block;
	text-decoration: none;
	transition: all 200ms ease;
	position: relative;
	overflow: hidden;
}
.gc-ihub__cat::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--cat-color, var(--gc-primary, #00C6AE));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 280ms ease;
}
.gc-ihub__cat:hover {
	border-color: var(--cat-color, var(--gc-primary, #00C6AE));
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(13, 27, 62, 0.08);
	text-decoration: none;
}
.gc-ihub__cat:hover::before { transform: scaleX(1); }

.gc-ihub__cat-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cat-soft, rgba(0, 198, 174, 0.10));
	border: 0.5px solid var(--cat-border, rgba(0, 198, 174, 0.2));
	color: var(--cat-color, var(--gc-primary-dark, #00A894));
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.gc-ihub__cat-name {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--gc-navy, #0D1B3E);
	margin-bottom: 7px;
	letter-spacing: -0.01em;
}
.gc-ihub__cat-desc {
	font-size: 12.5px;
	color: var(--gc-text-muted, #64748b);
	line-height: 1.6;
	margin-bottom: 14px;
}
.gc-ihub__cat-count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--cat-color, var(--gc-primary-dark, #00A894));
	background: var(--cat-soft, rgba(0, 198, 174, 0.10));
	border: 0.5px solid var(--cat-border, rgba(0, 198, 174, 0.18));
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
}

/* Category color variants */
.gc-ihub__cat--gp   { --cat-color:#00A894; --cat-soft:#E8F8F5; --cat-border:rgba(0,198,174,.2); }
.gc-ihub__cat--b2b  { --cat-color:#1D4ED8; --cat-soft:#EFF6FF; --cat-border:rgba(37,99,235,.2); }
.gc-ihub__cat--pay  { --cat-color:#7C3AED; --cat-soft:#F5F3FF; --cat-border:rgba(139,92,246,.2); }
.gc-ihub__cat--aff  { --cat-color:#15803D; --cat-soft:#F0FDF4; --cat-border:rgba(34,197,94,.2); }
.gc-ihub__cat--prog { --cat-color:#B45309; --cat-soft:#FFFBEB; --cat-border:rgba(245,158,11,.25); }


/* ── GET LISTED CTA ──────────────────────────────────────────────── */
.gc-ihub__cta {
	background: var(--gc-bg);
	padding: 5px 0;
	position: relative;
}
.gc-ihub__cta-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 25px;
}
.gc-ihub__cta-panel {
	background: linear-gradient(135deg, #0D1B3E 0%, #14264F 100%);
	border-radius: 14px;
	padding: 40px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	position: relative;
	overflow: hidden;
	flex-wrap: wrap;
}
.gc-ihub__cta-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 50% 80% at 85% 50%, rgba(0,198,174,.12), transparent 55%);
	pointer-events: none;
}
.gc-ihub__cta-body {
	position: relative;
	z-index: 1;
	max-width: 520px;
}
.gc-ihub__cta-eyebrow {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gc-primary, #00C6AE);
	margin-bottom: 10px;
}
.gc-ihub__cta-title {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 26px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin-bottom: 10px;
}
.gc-ihub__cta-sub {
	font-size: 14px;
	color: rgba(255,255,255,.6);
	line-height: 1.65;
}
.gc-ihub__cta-action {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	text-align: center;
}

/* Get Listed button — canonical sidecta pattern (teal → white on hover) */
.gc-ihub__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--gc-primary, #00C6AE);
	color: var(--gc-navy, #0D1B3E);
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-weight: 700;
	font-size: 14px;
	padding: 13px 24px;
	border-radius: 9px;
	border: 0.5px solid transparent;
	transition: background 180ms ease, color 180ms ease;
	white-space: nowrap;
	margin-bottom: 10px;
	text-decoration: none;
	letter-spacing: -0.005em;
}
.gc-ihub__btn:hover,
.gc-ihub__btn:focus {
	background: #ffffff;
	color: #0D1B3E;
	text-decoration: none;
}
.gc-ihub__btn-arrow {
	display: inline-block;
	transition: transform 200ms ease;
}
.gc-ihub__btn:hover .gc-ihub__btn-arrow,
.gc-ihub__btn:focus .gc-ihub__btn-arrow { transform: translateX(4px); }

.gc-ihub__cta-fine {
	font-size: 12px;
	color: rgba(255,255,255,.4);
}


/* ── HOW WE VET — horizontal strip ───────────────────────────────── */
.gc-ihub__vet {
	background: var(--gc-bg);
	padding: 56px 0 2px;
	position: relative;
}
.gc-ihub__vet-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 25px;
}
.gc-ihub__vet-head {
	text-align: center;
	margin-bottom: 40px;
}
.gc-ihub__vet-sub {
	font-size: 14px;
	color: var(--gc-text-muted, #64748b);
	line-height: 1.65;
	max-width: 560px;
	margin: 10px auto 0;
}
.gc-ihub__vet-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border-top: 0.5px solid var(--gc-border, #e2e8f0);
	border-bottom: 0.5px solid var(--gc-border, #e2e8f0);
}
.gc-ihub__vet-item {
	position: relative;
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.gc-ihub__vet-item + .gc-ihub__vet-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 20%;
	bottom: 20%;
	width: 0.5px;
	background: var(--gc-border, #e2e8f0);
}
.gc-ihub__vet-num {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 11px;
	font-weight: 700;
	color: var(--gc-primary-dark, #00A894);
	letter-spacing: 0.12em;
	margin-bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.gc-ihub__vet-num::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 1px;
	background: var(--gc-primary, #00C6AE);
}
.gc-ihub__vet-name {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 700;
	color: var(--gc-navy, #0D1B3E);
	letter-spacing: -0.01em;
	margin-bottom: 6px;
}
.gc-ihub__vet-desc {
	font-size: 12.5px;
	color: var(--gc-text-muted, #64748b);
	line-height: 1.55;
}


/* ── ABOUT iHUB — full-width 2-col CSS columns ───────────────────── */
.gc-ihub__about {
	background: var(--gc-bg);
	padding: 56px 0 72px;
}
.gc-ihub__about-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 25px;
}
.gc-ihub__about-head {
	margin-bottom: 28px;
}
.gc-ihub__about-title {
	font-family: var(--gc-font-display, 'Sora', system-ui, sans-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--gc-navy, #0D1B3E);
	letter-spacing: -0.025em;
	margin: 8px 0 0;
}
.gc-ihub__about-body {
	/* full container width — matches the dividers above */
}
.gc-ihub__about-body p {
	font-size: 14.5px;
	color: var(--gc-text-muted, #64748b);
	line-height: 1.85;
	margin: 0 0 16px;
}
.gc-ihub__about-body p:last-child { margin: 0; }


/* ── RESPONSIVE ──────────────────────────────────────────────────── */

/* Container-width section dividers removed by request — the hero's
   edge-to-edge border under the stats stays as the ONE divider. */
.gc-ihub__cats::after,
.gc-ihub__cta::after,
.gc-ihub__vet::after {
	display: none;
}

@media (max-width: 980px) {
	.gc-ihub__cat-grid    { grid-template-columns: repeat(2, 1fr); }
	.gc-ihub__vet-grid    { grid-template-columns: repeat(2, 1fr); }
	.gc-ihub__cta-panel   { padding: 32px 28px; }

	/* Re-add the vertical divider where the 2-col vetting wraps */
	.gc-ihub__vet-item:nth-child(odd) + .gc-ihub__vet-item::before {
		display: block;
	}
}

@media (max-width: 600px) {
	.gc-ihub__hero-inner   { padding: 34px 20px 36px; }
	.gc-ihub__cats         { padding: 28px 0; }
	.gc-ihub__cta          { padding: 4px 0; }
	.gc-ihub__vet          { padding: 28px 0 2px; }
	.gc-ihub__about        { padding: 28px 0 40px; }
	.gc-ihub__cats-inner,
	.gc-ihub__cta-inner,
	.gc-ihub__vet-inner,
	.gc-ihub__about-inner  { padding: 0 20px; }
	.gc-ihub__section-head { margin-bottom: 22px; }
	.gc-ihub__vet-head     { margin-bottom: 24px; }
	.gc-ihub__h1           { font-size: 28px; }
	.gc-ihub__h2           { font-size: 22px; }
	.gc-ihub__cat-grid     { grid-template-columns: 1fr; }
	.gc-ihub__vet-grid     { grid-template-columns: 1fr; }
	.gc-ihub__vet-item + .gc-ihub__vet-item::before {
		left: 20%;
		right: 20%;
		top: 0;
		bottom: auto;
		width: auto;
		height: 0.5px;
	}
	.gc-ihub__stats {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		align-items: start;
	}
	.gc-ihub__stat-num     { font-size: 20px; }
	.gc-ihub__stat-label   { font-size: 8.5px; letter-spacing: 0.5px; line-height: 1.3; }
	.gc-ihub__search       { max-width: 100%; }
	.gc-ihub__cta-panel    { padding: 28px 22px; }
	.gc-ihub__cta-title    { font-size: 22px; }
	.gc-ihub__cta-action   { width: 100%; }
	.gc-ihub__btn          { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   Only [data-theme="dark"] rules. Base (light) untouched.
   Most surfaces already use --gc-* vars (auto-react); this block fixes
   the hardcoded light category tints and the white button hover.
   ════════════════════════════════════════════════════════════════════ */

/* ── Category colour variants: light --cat-soft tints become translucent,
      --cat-color text lifts to a readable bright variant ── */
[data-theme="dark"] .gc-ihub__cat--gp   { --cat-color:#7DD3C8; --cat-soft:rgba(0,198,174,0.12);  --cat-border:rgba(0,198,174,0.30); }
[data-theme="dark"] .gc-ihub__cat--b2b  { --cat-color:#93C5FD; --cat-soft:rgba(59,130,246,0.12); --cat-border:rgba(59,130,246,0.30); }
[data-theme="dark"] .gc-ihub__cat--pay  { --cat-color:#D8B4FE; --cat-soft:rgba(168,85,247,0.12); --cat-border:rgba(168,85,247,0.30); }
[data-theme="dark"] .gc-ihub__cat--aff  { --cat-color:#86EFAC; --cat-soft:rgba(34,197,94,0.12);  --cat-border:rgba(34,197,94,0.30); }
[data-theme="dark"] .gc-ihub__cat--prog { --cat-color:#FCD34D; --cat-soft:rgba(245,158,11,0.12); --cat-border:rgba(245,158,11,0.30); }

/* ── Button hover: white fill flips to a teal fill with white text ── */
[data-theme="dark"] .gc-ihub__btn:hover,
[data-theme="dark"] .gc-ihub__btn:focus {
	background: var(--gc-primary);
	color: #ffffff;
}

/* ── Eyebrow badge: subtle teal pill, muted text (no glow) ── */
[data-theme="dark"] .gc-ihub__badge {
	background: rgba(0, 198, 174, 0.08);
	border-color: rgba(0, 198, 174, 0.20);
	color: #7DD3C8;
}
[data-theme="dark"] .gc-ihub__badge-dot {
	background: #7DD3C8;
}

/* ── Body copy softened (navy fallback could read too stark) ── */
[data-theme="dark"] .gc-ihub__cat-desc {
	color: rgba(255, 255, 255, 0.70);
}