/* GC Hover Cards — copy + button beside a grid of edge-glow hover cards. */

@keyframes gc-hvc-reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

.gc-hvc {
  --hvc-ink: #14212B;
  --hvc-blue: #5BA7DB;
  --hvc-muted: #5A6B75;
  --hvc-card-bg: #FFFFFF;
  --hvc-border: #DCEEFA;
  --hvc-glow-op: 0.45;
  --hvc-cols: 2;
  position: relative;
  padding: 64px 48px;
  overflow: hidden;
  box-sizing: border-box;
}

.gc-hvc *,
.gc-hvc *::before,
.gc-hvc *::after { box-sizing: border-box; }

.gc-hvc [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  animation: gc-hvc-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .gc-hvc [data-reveal] { opacity: 1; translate: none; animation: none; }
}

.gc-hvc-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 64px;
}

.gc-hvc-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hvc-blue);
  margin: 0 0 14px;
}

.gc-hvc-eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .28;
}

.gc-hvc-title {
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-weight: 700;
  color: var(--hvc-ink);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0 0 22px;
}

.gc-hvc-title em {
  font-style: normal;
  color: var(--hvc-blue);
}

.gc-hvc-sub {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: var(--hvc-ink);
  max-width: 460px;
  margin: 0 0 32px;
}

.gc-hvc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 28px;
  border-radius: var(--gc-radius-sm, 10px);
  /* Same story as the filled card below: white label on the accent at full
     strength is 2.63:1, and the old hover tint (#79b9e6) made it worse at
     2.20:1. Deepened along the accent's own hue -- 5.75:1 at rest, 4.69:1 on
     hover, so the hover state still lifts without dropping below AA. */
  background: color-mix(in srgb, var(--hvc-blue) 55%, #14212B);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.gc-hvc-btn:hover {
  background: color-mix(in srgb, var(--hvc-blue) 66%, #14212B);
  transform: translateY(-2px);
}

.gc-hvc-cards {
  display: grid;
  grid-template-columns: repeat(var(--hvc-cols), 1fr);
  gap: 24px;
}

.gc-hvc-card {
  position: relative;
  background: var(--hvc-card-bg);
  border: 1px solid var(--hvc-border);
  border-radius: var(--gc-radius-md, 16px);
  padding: 32px 28px;
  overflow: hidden;
  box-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, 0.12));
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Top accent sweep — hidden until hover, the theme's recurring brand cue. */
.gc-hvc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hvc-blue), #6EC1E4);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 1;
}

/* Idle breathing glow — a separate pseudo-element (not the card's own
   box-shadow/animation) so it never fights the entrance reveal animation
   or the hover glow, both of which live on the card element itself. */
.gc-hvc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.gc-hvc-card:nth-child(2)::after { animation-delay: 1.1s; }
.gc-hvc-card:nth-child(3)::after { animation-delay: 2.3s; }
.gc-hvc-card:nth-child(4)::after { animation-delay: 3.4s; }

/* Bare icon — no shared coloured tile, just the mark itself, so each card's
   icon is clearly its own rather than a repeated chip. */
.gc-hvc-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  color: var(--hvc-blue);
  margin: 0 0 18px;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.gc-hvc-icon svg {
  width: 34px;
  height: 34px;
  display: block;
}

.gc-hvc-card h3 {
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--hvc-ink);
  margin: 0 0 10px;
  transition: color 0.25s ease;
}

.gc-hvc-card p {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--hvc-muted);
  margin: 0;
}

@media (hover: hover) {
  .gc-hvc-card:hover,
  .gc-hvc-card:focus-visible {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--hvc-blue) 55%, var(--hvc-border));
    box-shadow:
      0 30px 60px -22px rgba(20, 33, 43, 0.4),
      0 0 32px color-mix(in srgb, var(--hvc-blue) calc(var(--hvc-glow-op) * 100%), transparent);
  }
  .gc-hvc-card:hover::before,
  .gc-hvc-card:focus-visible::before { transform: scaleX(1); }
  .gc-hvc-card:hover .gc-hvc-icon,
  .gc-hvc-card:focus-visible .gc-hvc-icon { transform: scale(1.12) rotate(-4deg); }
  .gc-hvc-card:hover h3,
  .gc-hvc-card:focus-visible h3 { color: var(--hvc-blue); }
}

.gc-hvc-card:focus-visible { outline: 3px solid var(--hvc-blue); outline-offset: -3px; }

@media (max-width: 900px) {
  .gc-hvc { padding: 52px 32px; }
  .gc-hvc-inner { grid-template-columns: 1fr; gap: 40px; }
  .gc-hvc-sub { max-width: none; }
  .gc-hvc-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .gc-hvc { padding: 42px 20px; }
  .gc-hvc-inner { gap: 28px; }
  .gc-hvc-eyebrow { font-size: 10.5px; gap: 10px; letter-spacing: 0.16em; margin-bottom: 12px; }
  .gc-hvc-title { font-size: 1.6rem; margin-bottom: 14px; }
  .gc-hvc-sub { font-size: 15px; line-height: 1.5; margin-bottom: 22px; }
  .gc-hvc-btn { width: 100%; justify-content: center; min-height: 44px; padding: 14px 22px; letter-spacing: 0.06em; }
  .gc-hvc-cards { gap: 12px; }
  .gc-hvc-card { padding: 20px 18px; box-shadow: none; }
  .gc-hvc-card::before { display: none; }
  .gc-hvc-card::after { animation: none; }
  .gc-hvc-icon { margin-bottom: 12px; }
  .gc-hvc-icon svg { width: 26px; height: 26px; }
  .gc-hvc-card h3 { font-size: 16px; margin-bottom: 8px; }
  .gc-hvc-card p { font-size: 14.5px; line-height: 1.5; }
}

@media (max-width: 480px) {
  .gc-hvc { padding: 36px 16px; }
  .gc-hvc-title { font-size: 1.45rem; }
  .gc-hvc-card { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-hvc-card { transition: none; }
  .gc-hvc-card::after { animation: none; }
  .gc-hvc-card:hover { transform: none; }
}


/* ---- Careers / About treatment (moved out of page-scoped CSS) ---- */

/* The card surface follows the brand, the card's ink already does. h3 takes
   --gc-ink and p takes --gc-muted, both of which the GenChem skin inverts to
   light values for its near-black ground; --gc-white is deliberately NOT
   inverted there (it is used far more as a text colour than as a surface), so
   naming it here pinned a white card under light ink -- 1.14:1 for the heading.
   --gc-surface is the skin's own "panel that sits above the pattern" token and
   is undefined on the light brand, so the fallback keeps Gencore white. */
.gc-hvc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--gccard-pad);
	background: var(--gc-surface, var(--gc-white, #fff));
	border: 1px solid var(--gc-line, #E1E9EE);
	border-radius: var(--gc-radius-md, 16px);
	box-shadow: none;
	overflow: hidden;
	transition: border-color .28s ease, box-shadow .28s ease;
}

.gc-hvc-card::before,
.gc-hvc-card::after { display: none;
}

.gc-hvc-card:hover {
	transform: none;
	border-color: color-mix(in srgb, var(--gcab-accent) 45%, transparent);
	box-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, 0.12));
}

.gc-hvc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	margin: 0 0 auto;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--gcab-accent);
	transition: transform .25s ease;
}

.gc-hvc-icon svg { width: 24px; height: 24px;
}

.gc-hvc-card:hover .gc-hvc-icon { transform: translateY(-2px);
}

.gc-hvc-card h3 {
	margin: 34px 0 9px;
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.24;
	letter-spacing: -.018em;
	color: var(--gc-ink, #14212B);
	text-wrap: balance;
}

.gc-hvc-card h3 em {
	font-style: normal;
	color: var(--gcab-accent);
}

.gc-hvc-card p {
	margin: 0;
	max-width: none;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--gc-muted, #5A6B75);
}

/* Values: four across,
tonal. */
.gc-hvc-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
}

.gc-hvc-cards .gc-hvc-card:nth-child(n) {
	grid-column: auto;
	grid-row: auto;
	flex-direction: column;
}

/* The filled card carries white ink, and the accent at full strength is
   2.63:1 behind it. Deepened along its own hue -- still unmistakably the
   accent card, now 5.75:1 for the heading. Derived from the accent rather
   than hardcoded so the widget's colour control still drives it, and mixing
   towards the ink keeps the result dark whatever the control is set to. */
.gc-hvc-cards .gc-hvc-card:nth-child(1) {
	background: color-mix(in srgb, var(--gcab-accent) 55%, #14212B);
	border-color: transparent;
}

.gc-hvc-cards .gc-hvc-card:nth-child(1):hover { border-color: transparent;
}

.gc-hvc-cards .gc-hvc-card:nth-child(1) .gc-hvc-icon { color: #fff;
}

.gc-hvc-cards .gc-hvc-card:nth-child(1) h3 { color: #fff;
}

.gc-hvc-cards .gc-hvc-card:nth-child(1) p { color: rgba(255, 255, 255, .88);
}

.gc-hvc-cards .gc-hvc-card:nth-child(2) {
	background: var(--gc-blue-light, #EAF3FA);
	border-color: transparent;
}

.gc-hvc-cards .gc-hvc-card:nth-child(2):hover {
	border-color: color-mix(in srgb, var(--gcab-accent) 35%, transparent);
}

/* Optional image,
when one is set,
bleeds to the card edge. */
.gc-hvc-media {
	display: block;
	margin: calc(var(--gccard-pad) * -1) calc(var(--gccard-pad) * -1) 20px;
	height: 150px;
	overflow: hidden;
	background: var(--gc-blue-light, #EAF3FA);
}

.gc-hvc-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.gc-hvc-card:hover .gc-hvc-media img { transform: scale(1.04);
}

.gc-hvc-card.has-media .gc-hvc-icon { display: none;
}

.gc-hvc-card.has-media h3 { margin-top: 0;
}

@media (max-width: 1024px) {
	.gc-hvc-cards { grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.gc-hvc-cards { grid-template-columns: minmax(0, 1fr); gap: 12px;
	}
	.gc-hvc-card h3 { margin-top: 22px;
	}
	.gc-hvc-media { height: 140px;
	}
}


/* Self-contained design tokens. Everything this widget needs is declared on
   its own root, so it styles itself wherever it is dropped: no page class, no
   body class, no shared stylesheet. The accent follows the widget's own
   Elementor colour control. */
.gc-hvc {
	--gcab-accent: var(--hvc-blue, #5BA7DB);
	--gcab-glow: var(--hvc-blue, #5BA7DB);
	--gcab-line: var(--gc-line, #E1E9EE);
	--gcab-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, 0.12));
	--gcab-radius: var(--gc-radius-md, 16px);
	--gcab-pad-y: 64px;
	--gcab-gutter: 48px;
	--gcab-eyebrow-size: 11.5px;
	--gcab-eyebrow-gap: 14px;
	--gcab-eyebrow-mb: 14px;
	--gcab-h1: clamp(2rem, 1.55rem + 2.1vw, 3rem);
	--gcab-h2: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
	--gcab-lead: 16px;
	--gcab-media-h: 420px;
	--gcab-tile-h: 236px;
	--gcab-staff-h: 230px;
	--gcab-glow-edge: 1px solid color-mix(in srgb, var(--hvc-blue, #5BA7DB) 70%, transparent);
	--gcab-glow-ring:
		0 0 0 1px color-mix(in srgb, var(--hvc-blue, #5BA7DB) 22%, transparent),
		0 0 34px color-mix(in srgb, var(--hvc-blue, #5BA7DB) 48%, transparent),
		0 0 82px color-mix(in srgb, var(--hvc-blue, #5BA7DB) 19%, transparent);
	--gcab-glow-ring-hover:
		0 0 0 1px color-mix(in srgb, var(--hvc-blue, #5BA7DB) 34%, transparent),
		0 0 46px color-mix(in srgb, var(--hvc-blue, #5BA7DB) 48%, transparent),
		0 0 102px color-mix(in srgb, var(--hvc-blue, #5BA7DB) 24%, transparent);
}

@media (max-width: 640px) {
	.gc-hvc {
		--gcab-pad-y: 42px;
		--gcab-gutter: 20px;
		--gcab-eyebrow-size: 10.5px;
		--gcab-eyebrow-gap: 10px;
		--gcab-eyebrow-mb: 12px;
		--gcab-h1: clamp(1.75rem, 7vw, 2.1rem);
		--gcab-h2: 1.6rem;
		--gcab-lead: 15px;
		--gcab-radius: 14px;
		--gcab-media-h: 240px;
		--gcab-tile-h: 200px;
		--gcab-staff-h: 190px;
	}
}

/* ---- Final layout, self-contained ----
   Original split stays: copy left, card grid right. Only the cards changed. */
.gc-hvc { --gccard-pad: clamp(22px, 1.8vw, 28px); }

.gc-hvc-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 64px;
}

.gc-hvc-copy {
  max-width: none;
  margin: 0;
  text-align: left;
}

.gc-hvc-copy .gc-hvc-eyebrow { display: block; text-align: left; }
.gc-hvc-sub { max-width: 460px; margin-inline: 0; }
.gc-hvc-actions { justify-content: flex-start; }

.gc-hvc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.gc-hvc-cards .gc-hvc-card:nth-child(1) {
  background: color-mix(in srgb, var(--gcab-accent) 55%, #14212B);
  border-color: transparent;
}
.gc-hvc-cards .gc-hvc-card:nth-child(1) .gc-hvc-icon,
.gc-hvc-cards .gc-hvc-card:nth-child(1) h3 { color: #fff; }
.gc-hvc-cards .gc-hvc-card:nth-child(1) p { color: rgba(255, 255, 255, .88); }

.gc-hvc-cards .gc-hvc-card:nth-child(2) {
  background: var(--gc-blue-light, #EAF3FA);
  border-color: transparent;
}

@media (max-width: 900px) {
  .gc-hvc-inner { grid-template-columns: 1fr; gap: 36px; }
  .gc-hvc-sub { max-width: none; }
}

@media (max-width: 640px) {
  .gc-hvc-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Eyebrow: one spec across every Gencore widget. Inter 11.5/600/.16em,
   uppercase, no trailing rule. */
.gc-hvc-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-hvc-eyebrow::before,
.gc-hvc-eyebrow::after { display: none; }

@media (max-width: 640px) {
	.gc-hvc-eyebrow { font-size: 10.5px; margin-bottom: 12px; }
}