/* GC Staff List — team-member carousel. Reuses gc-rc__* structural/arrow/dot
   CSS from gc-review-carousel.css; this file overrides the --rc-* contract
   and adds the new header + photo/name/role/bio/tags card content. */

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


.gc-sl {
  --sl-name: #FFFFFF;
  --sl-role: #5BA7DB;
  --sl-bio: rgba(255, 255, 255, 0.65);
  --sl-tag-bg: #5BA7DB;
  --sl-tag-text: #FFFFFF;
  --rc-card-radius: 18px;
  --rc-gap: 24px;
  --rc-head-gap: 48px;
  padding: 100px 64px;
  box-sizing: border-box;
}

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

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

/* Full width, matching every other widget built this session — gc-rc__wrap's
   shared default (max-width: 1312px, centred) is what GC Review Carousel's
   own "inner max width" control is built around, so it's overridden here
   rather than changed in the shared file. */
.gc-sl .gc-rc__wrap { max-width: none; margin: 0; }

/* ---- Header ---- */
.gc-sl-header { margin: 0 0 var(--rc-head-gap); max-width: 640px; }
.gc-sl--align-center .gc-sl-header { text-align: center; margin-left: auto; margin-right: auto; }

.gc-sl-eyebrow {
  display: block;
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--rc-heading);
  margin: 0 0 14px;
}

.gc-sl-title {
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  color: #14212B;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.gc-sl-title em {
  font-style: normal;
  color: var(--rc-heading);
}

.gc-sl-lead {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--rc-date);
  margin: 0;
}

/* ---- Card ---- */
.gc-sl-card {
  padding: 0 !important;
  /* min-height, not height: a hard height:100% clips every card (not just
     short ones) the instant the nested track->slide->card stretch reference
     is even a pixel off, which is exactly what happened. min-height keeps
     cards visually equal when content fits, but lets a card grow taller
     than that floor instead of clipping if it doesn't. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.35s ease;
}

/* Only the photo clips to rounded top corners — overflow:hidden on the
   whole card was clipping the body's own bottom padding/tags whenever a
   taller sibling card stretched this one past its natural content height. */
.gc-sl-media {
  display: block;
  flex: none;
  aspect-ratio: 1 / 1.05;
  overflow: hidden;
  border-radius: var(--rc-card-radius) var(--rc-card-radius) 0 0;
  background: var(--gc-blue-light, #EAF3FA);
}

.gc-sl-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gc-sl-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 30px;
}

.gc-sl-name {
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--sl-name);
  margin: 0 0 4px;
}

.gc-sl-role {
  display: block;
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--sl-role);
  margin: 0 0 14px;
}

.gc-sl-bio {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sl-bio);
  margin: 0;
  flex: 1;
}

/* Anchored to the bottom of the card regardless of bio length, via the
   bio's own flex:1 above pushing this block down. */
.gc-sl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.gc-sl-tag {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sl-tag-text);
  background: var(--sl-tag-bg);
  padding: 7px 13px;
  border-radius: var(--gc-radius-pill, 999px);
}

/* No translateY lift here — the card sits flush against .gc-rc__viewport's
   overflow:hidden (needed for the slide transition), and any transform that
   moves it gets clipped by that boundary the instant it crosses it. A
   shadow-only glow can't be clipped this way since it never moves the box. */
@media (hover: hover) {
  .gc-sl-card:hover {
    box-shadow: 0 0 0 2px var(--rc-ctrl), 0 26px 50px -22px rgba(20, 33, 43, 0.45);
  }
  .gc-sl-card:hover .gc-sl-media img { transform: scale(1.05); }
  .gc-sl-media img { transition: transform 0.4s ease; }
}

/* Arrows/dots — solid white with a blue accent. The shared base styling
   (a pale wash of --rc-ctrl) reads fine on a white section but disappears
   against this widget's coloured gradient background. */
.gc-sl .gc-rc__arrow {
  background: #fff;
  color: var(--rc-ctrl);
  box-shadow: 0 10px 26px -10px rgba(20, 33, 43, 0.45);
}

.gc-sl .gc-rc__arrow:hover {
  background: var(--rc-ctrl);
  color: #fff;
}

.gc-sl .gc-rc__dot {
  background: rgba(255, 255, 255, 0.55);
}

.gc-sl .gc-rc__dot[aria-selected="true"] {
  background: #fff;
}

@media (max-width: 900px) {
  .gc-sl { padding: 64px 24px; }
}

@media (max-width: 640px) {
  .gc-sl {
    --rc-gap: 14px;
    --rc-head-gap: 28px;
    --rc-card-radius: 14px;
    padding: 56px 20px;
  }
  .gc-sl-eyebrow { font-size: 11px; letter-spacing: 0.04em; margin-bottom: 10px; }
  .gc-sl-title { font-size: 1.6rem; margin-bottom: 12px; }
  .gc-sl-lead { font-size: 15px; line-height: 1.5; }
  .gc-sl-media { aspect-ratio: 16 / 10; }
  .gc-sl-body { padding: 16px 16px 18px; }
  .gc-sl-name { font-size: 15px; letter-spacing: 0.02em; }
  .gc-sl-role { font-size: 13px; margin-bottom: 10px; }
  .gc-sl-bio { font-size: 13.5px; line-height: 1.5; }
  .gc-sl-tags { gap: 6px; margin-top: 14px; }
  .gc-sl-tag { font-size: 10px; padding: 5px 10px; }
  .gc-sl .gc-rc__controls { margin-top: 18px; gap: 16px; }
  .gc-sl .gc-rc__arrow { width: 38px; height: 38px; box-shadow: none; }
  .gc-sl .gc-rc__arrow svg { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  .gc-sl { padding: 48px 16px; }
  .gc-sl-title { font-size: 1.45rem; }
  .gc-sl-body { padding: 14px 14px 16px; }
}

.gc-sl-lead {
  font-style: normal;
  font-weight: 400;
  color: var(--gc-muted, #5A6B75);
}


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

.gc-sl { padding: var(--gcab-pad-y) 0;
}

.gc-sl-card {
	background: var(--gc-white, #fff);
	border: 1px solid var(--gcab-line);
	border-radius: var(--gcab-radius);
	box-shadow: var(--gcab-shadow);
	overflow: hidden;
	transition: box-shadow .35s ease, border-color .35s ease;
}

.gc-sl-card:hover {
	border-color: color-mix(in srgb, var(--gcab-glow) 70%, transparent);
	box-shadow: var(--gcab-glow-ring-hover);
}

.gc-sl-name {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.015em;
	text-transform: none;
	color: var(--gc-ink, #14212B);
	margin: 0 0 3px;
}

.gc-sl-role {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gcab-accent, var(--gc-blue-dark, #3D82B3));
	margin: 0 0 12px;
}

.gc-sl-bio {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--gc-muted, #5A6B75);
}

.gc-sl-tags {
	gap: 0 8px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--gcab-line);
}

.gc-sl-tag {
	display: inline-flex;
	align-items: center;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gcab-accent, var(--gc-blue-dark, #3D82B3));
}

.gc-sl-tag + .gc-sl-tag::before {
	content: "";
	width: 3px;
	height: 3px;
	margin-right: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
}

.gc-sl-media {
	aspect-ratio: auto;
	height: var(--gcab-staff-h);
	border-bottom: 1px solid var(--gcab-line);
	border-radius: 0;
}


.gc-sl-body { padding: 16px 18px 20px;
}

/* 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-sl {
	--gcab-accent: var(--rc-ctrl, #5BA7DB);
	--gcab-glow: var(--rc-ctrl, #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(--rc-ctrl, #5BA7DB) 70%, transparent);
	--gcab-glow-ring:
		0 0 0 1px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 22%, transparent),
		0 0 34px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 48%, transparent),
		0 0 82px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 19%, transparent);
	--gcab-glow-ring-hover:
		0 0 0 1px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 34%, transparent),
		0 0 46px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 48%, transparent),
		0 0 102px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 24%, transparent);
}

@media (max-width: 640px) {
	.gc-sl {
		--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 ---- */
.gc-sl .gc-rc__wrap {
  max-width: none;
  margin: 0;
  padding-inline: var(--gcab-gutter);
}

.gc-sl-header { max-width: 940px; margin-inline: auto; }
.gc-sl-header .gc-sl-eyebrow { display: block; }
.gc-sl--align-center .gc-sl-header { text-align: center; }
.gc-sl--align-center .gc-sl-header .gc-sl-eyebrow { text-align: center; }


.gc-sl-media { aspect-ratio: auto; height: var(--gcab-staff-h); }

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

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

@media (max-width: 640px) {
	.gc-sl-body { padding: 14px 16px 18px; }
	.gc-sl-name { font-size: 16px; }
	.gc-sl-role { font-size: 11px; margin: 0 0 10px; }
	.gc-sl-bio { font-size: 13.5px; line-height: 1.55; }
	.gc-sl-tags { margin-top: 14px; padding-top: 12px; }
	.gc-sl-tag { font-size: 12px; }
}

@media (max-width: 480px) {
	.gc-sl-body { padding: 13px 14px 16px; }
}