/* ==========================================================================
   Section hub pages — Company (83) and Resources (90).
   Loaded by cg_hub_page_assets() in functions.php. The hero uses the shared
   .cgh-hero design (resource-hero.css + hero-photo.css).

   Elementor structure (all native widgets, order follows Elementor):
     section .cg-hub
       container .cg-hub-head          (row: copy left, intro right)
         container .cg-hub-head__copy  > Heading .cg-hub-eyebrow, Heading H2 .cg-hub-heading
         Text Editor .cg-hub-intro
       container .cg-hub-grid          (Elementor Grid container: 3 / 2 / 1 columns)
         container .cg-hub-card (link) > Icon .cg-hub-card__icon,
                                         Heading .cg-hub-card__title,
                                         Text Editor .cg-hub-card__text,
                                         Heading .cg-hub-card__link
   Card numbers (01, 02 …) are drawn by CSS, so adding, removing or
   reordering cards in Elementor renumbers them automatically.
   ========================================================================== */

.elementor-element.cg-hub.e-con {
	background-color: #F5F7FA;
	background-image:
		linear-gradient(rgba(27, 63, 160, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(27, 63, 160, .035) 1px, transparent 1px);
	background-size: 56px 56px;
}

/* ── Section header ─────────────────────────────────────────────────── */
.cg-hub-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: #1B3FA0 !important;
}
.cg-hub-eyebrow .elementor-heading-title::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.cg-hub-heading .elementor-heading-title { color: #0C1825 !important; text-wrap: balance; }
.cg-hub-heading::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-top: 22px;
	border-radius: 2px;
	background: #1B3FA0;
}
.elementor-widget.cg-hub-intro { color: #4A5668; font-size: 17px; line-height: 1.7; }
.cg-hub-intro p { margin: 0 0 12px; }
.cg-hub-intro p:last-child { margin-bottom: 0; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.elementor-element.cg-hub-grid.e-con { counter-reset: cghub; }

.elementor-element.cg-hub-card.e-con {
	counter-increment: cghub;
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid #E1E5EB;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(12, 24, 37, .04);
	text-decoration: none;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
/* Accent bar that draws across the top on hover. */
.elementor-element.cg-hub-card.e-con::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #1B3FA0, #3563E0);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
/* Card number, top right. */
.elementor-element.cg-hub-card.e-con::after {
	content: counter(cghub, decimal-leading-zero);
	position: absolute;
	top: 30px;
	right: 30px;
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	letter-spacing: .14em;
	color: #9AA5B5;
	transition: color .3s ease;
}
.elementor-element.cg-hub-card.e-con:hover,
.elementor-element.cg-hub-card.e-con:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(27, 63, 160, .35);
	box-shadow: 0 18px 40px -18px rgba(12, 24, 37, .28);
}
.elementor-element.cg-hub-card.e-con:hover::before,
.elementor-element.cg-hub-card.e-con:focus-visible::before { transform: scaleX(1); }
.elementor-element.cg-hub-card.e-con:hover::after { color: #1B3FA0; }
.elementor-element.cg-hub-card.e-con:focus-visible { outline: 2px solid #3563E0; outline-offset: 3px; }

/* Icon tile */
.cg-hub-card__icon .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: #EEF3FF;
	color: #1B3FA0 !important;
	font-size: 22px !important;
	transition: background-color .3s ease, color .3s ease;
}
.cg-hub-card__icon .elementor-icon i { color: inherit !important; }
.cg-hub-card__icon .elementor-icon svg { width: 22px; height: 22px; fill: currentColor !important; }
.cg-hub-card:hover .cg-hub-card__icon .elementor-icon { background: #1B3FA0; color: #fff !important; }

.cg-hub-card__title .elementor-heading-title { color: #0C1825 !important; margin-top: 6px; }
.elementor-widget.cg-hub-card__text { color: #4A5668 !important; font-size: 15px; line-height: 1.6; }
.cg-hub-card__text p { margin: 0; }

/* "Explore →" pinned to the card bottom so every card lines up. */
.elementor-widget.cg-hub-card__link { margin-top: auto !important; padding-top: 10px; }
.cg-hub-card__link .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: Inter, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: #1B3FA0 !important;
}
.cg-hub-card__link .elementor-heading-title::after {
	content: "\2192";
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.cg-hub-card:hover .cg-hub-card__link .elementor-heading-title::after { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
	.elementor-element.cg-hub-card.e-con,
	.elementor-element.cg-hub-card.e-con::before,
	.cg-hub-card__link .elementor-heading-title::after { transition: none; }
	.elementor-element.cg-hub-card.e-con:hover { transform: none; }
}

@media (max-width: 767px) {
	.elementor-element.cg-hub-card.e-con::after { top: 24px; right: 24px; }
	.cg-hub-heading::after { margin-top: 16px; }
	.elementor-widget.cg-hub-intro { font-size: 16px; }
}