/*
 * Webflow code components — typography (Shadow DOM)
 *
 * Site variables and inherited properties work inside code components:
 * https://developers.webflow.com/code-components/styling-components
 *
 * Adobe Fonts (Typekit) register under slugs like `centra-no-2`, not marketing
 * names like `Centra No2`. Hardcoded family strings in CSS modules won’t match
 * the global @font-face on the host, so components use CSS variables instead.
 *
 * In Webflow: Variables (or your root typography) — create / reuse stacks and
 * “Copy CSS” so the custom property name matches what you map below.
 *
 * Recommended site-level tokens (set on :root / body scope in Webflow):
 *
 *   --wf-code-font--accent  → small labels / uppercase chip (Cartograph-style)
 *   --wf-code-font--body    → headings, body copy, buttons
 *
 * Example values (replace with your Adobe / Webflow font stacks):
 *
 *   --wf-code-font--accent: "some-display-font", sans-serif;
 *   --wf-code-font--body: centra-no-2, sans-serif;
 *
 * You can alias existing site variables, e.g.:
 *   --wf-code-font--body: var(--_typography---font-family-body, inherit);
 *
 * Local Vite / Storybook: defaults live in src/styles/globals.css (:root).
 */

/* Hero Talent Card - Figma 2026 Design System
   6 color families, each with Main / Light / Dark.
   In production, --gc--<color>--<shade> comes from the page.
   For Storybook testing, OKLCH P3 values are defined as fallbacks. */

/* ─── Color fallbacks for Storybook (P3 OKLCH) ────────────────────── */

.rKmvJ9cfkPJWfGdGGd0B {
  --color-main: var(--gc--red--main, oklch(65.3% 0.293 16));
  --color-light: var(--gc--red--light, oklch(87.9% 0.103 16));
  --color-dark: var(--gc--red--dark, oklch(22.9% 0.103 16));
  --color-dark-rgb: 64, 0, 11;
}

.yP4j2eALy1lva38qf0AA {
  --color-main: var(--gc--orange--main, oklch(65.3% 0.213 44.415));
  --color-light: var(--gc--orange--light, oklch(87.9% 0.075 44.4));
  --color-dark: var(--gc--orange--dark, oklch(22.9% 0.075 44.4));
  --color-dark-rgb: 55, 12, 0;
}

.gl8A9WHVP72fm2nYJfBr {
  --color-main: var(--gc--green--main, oklch(65.3% 0.2 161));
  --color-light: var(--gc--green--light, oklch(87.9% 0.07 161));
  --color-dark: var(--gc--green--dark, oklch(22.9% 0.07 161));
  --color-dark-rgb: 0, 38, 17;
}

.LmcmwII9bZo6WsX_5Iqv {
  --color-main: var(--gc--blue--main, oklch(65.3% 0.181 235));
  --color-light: var(--gc--blue--light, oklch(87.9% 0.063 235));
  --color-dark: var(--gc--blue--dark, oklch(22.9% 0.063 235));
  --color-dark-rgb: 0, 32, 54;
}

.ApVoNEEAi45Y5Nv5sbIw {
  --color-main: var(--gc--indigo--main, oklch(65.3% 0.214 289));
  --color-light: var(--gc--indigo--light, oklch(87.9% 0.075 289));
  --color-dark: var(--gc--indigo--dark, oklch(22.9% 0.075 289));
  --color-dark-rgb: 28, 20, 61;
}

.IjyErH6H1PKfNf9URiDh {
  --color-main: var(--gc--violet--main, oklch(65.3% 0.314 341));
  --color-light: var(--gc--violet--light, oklch(87.9% 0.11 341));
  --color-dark: var(--gc--violet--dark, oklch(22.9% 0.11 341));
  --color-dark-rgb: 58, 0, 43;
}

/* ─── Card shell ─────────────────────────────────────────────────────
   288×380. 6px transparent border always reserved (main on hover).
   Concentric radius: 22 outer → 16 inner (22-6) → 4 imageWrap (16-12). */

.tSW_Yv3tZzL4MSTnDdaE {
  position: relative;
  width: 288px;
  height: 380px;
  background-color: var(--color-dark);
  background-clip: padding-box;
  border-radius: 22px;
  overflow: clip;
  isolation: isolate;
  border: 6px solid transparent;
  padding: 0;
  box-sizing: border-box;

  transition: border-color 0.25s ease;
}

.tSW_Yv3tZzL4MSTnDdaE.o4nLs5PJtfGh3_ph74of {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}

.tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v {
  border-color: var(--color-main);
}

/* No-button variant: cursor default, no text movement on hover */
.tSW_Yv3tZzL4MSTnDdaE.rnGEie90a_PMjtADTHtW {
  cursor: default;
}

.tSW_Yv3tZzL4MSTnDdaE.rnGEie90a_PMjtADTHtW .n8aLi8jNcVZ1v0F4FkmY {
  padding-bottom: 16px;
}

.tSW_Yv3tZzL4MSTnDdaE.rnGEie90a_PMjtADTHtW.gFvi7qmZRhtSkO6tH86v .n8aLi8jNcVZ1v0F4FkmY {
  gap: 0;
}

.tSW_Yv3tZzL4MSTnDdaE.rnGEie90a_PMjtADTHtW.gFvi7qmZRhtSkO6tH86v .IE5RbT6VGrQ059X9Ctzc {
  height: 116px;
}

/* ─── Image layer ────────────────────────────────────────────────────
   Inset 12px in default — dark green background shows around it.
   Expands to fill the full card area on hover. overflow:hidden clips
   both the image and the blur overlay to the image bounds. */

.BZaLuej1S_XC38no8JaN {
  position: absolute;
  inset: 11px;
  border: 1px solid var(--color-dark);
  background-color: var(--color-dark);
  border-radius: 9px;
  overflow: hidden;
  z-index: 0;
  box-sizing: border-box;

  transition: inset 0.25s ease, border-color 0.25s ease, border-radius 0.25s ease;
}

/* 1px overlay above image to cover sub-pixel rendering artifacts (semi-transparent
   white borders). Sized to overlap image by 1px with matching border-radius. */
.e0ssu4LuoVn0h_KLaCo6 {
  position: absolute;
  inset: 11px;
  border-radius: 9px;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px var(--color-dark);
  transition: inset 0.25s ease, border-radius 0.25s ease;
}

.tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .BZaLuej1S_XC38no8JaN {
  inset: -2px;
  border-color: transparent;
  /* Matches inner border edge radius on hover: 22 - 6 = 16 */
  border-radius: 16px;
}

.tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .e0ssu4LuoVn0h_KLaCo6 {
  inset: -2px;
  border-radius: 16px;
}

.z6R0UsT3W4mX5HlYQnII {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
  object-fit: cover;
  max-width: none;
  pointer-events: none;
  z-index: 2;
}

/* ─── Blur overlay ───────────────────────────────────────────────────
   Height = 24px above name + name (40px) + prev@ (24px) + cardBottom padding-bottom (12px) = 100px.
   Hover: + gap (16px) + button (~48px) = 164px. */

.IE5RbT6VGrQ059X9Ctzc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 116px;
  z-index: 3;
  backdrop-filter: blur(20px);
  pointer-events: none;

  /* Matches imageWrap inner radius: 5px element - 1px border = 4px */
  border-radius: 0 0 8px 8px;
  overflow: hidden;

  mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%);

  transition: height 0.25s ease, border-radius 0.25s ease;
}

.tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .IE5RbT6VGrQ059X9Ctzc {
  /* 24 + 40 + 24 + 16 + 36 (button) + 12 = 152px */
  height: 168px;
  /* Matches hover imageWrap inner: 16px - 1px border = 15px */
  border-radius: 0 0 15px 15px;
}

.IE5RbT6VGrQ059X9Ctzc::before {
  content: '';
  position: absolute;
  left: -20%;
  right: -20%;
  top: -10%;
  bottom: -15%;
  pointer-events: none;

  border-radius: 0 0 8px 8px;
  overflow: hidden;

  background: radial-gradient(
    ellipse 120% 120% at 60% 120%,
    rgba(var(--color-dark-rgb), 1) 50%,
    rgba(var(--color-dark-rgb), 0) 100%
  );
}

.tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .IE5RbT6VGrQ059X9Ctzc::before {
  background: radial-gradient(
    ellipse 120% 120% at 60% 120%,
    rgba(var(--color-dark-rgb), 1) 30%,
    rgba(var(--color-dark-rgb), 0) 100%
  );
}

/* ─── Content overlay ────────────────────────────────────────────────
   Always fills the full card area (inside border). space-between pins
   chip to top, card bottom to bottom. Nothing here moves. */

.DS8QRVq91aeBsI2fcBAi {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

/* ─── Chip ───────────────────────────────────────────────────────── */

.vxPMMyHLoEZw3dqNY2Km {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.ZOHrCLzJFx477mVf4MXu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background-color: var(--color-dark);
  border-radius: 6px;
  flex-shrink: 0;
}

._J8LNPuUsx2Gi2xBF9Nh {
  font-family: var(
    --wf-code-font--accent,
    var(--wf-code-font--body, inherit)
  );
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-main);
  white-space: nowrap;
}

/* ─── Card bottom ────────────────────────────────────────────────────
   Text + button layer. No blur here (blur is in imageWrap).
   box-sizing: border-box so width:100% + padding doesn't overflow.
   12px padding on all sides keeps content 12px from every edge. */

.n8aLi8jNcVZ1v0F4FkmY {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 24px 12px 12px;
  gap: 0;
  position: relative;

  transition: gap 0.25s ease;
}

.tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .n8aLi8jNcVZ1v0F4FkmY {
  gap: 16px;
}

/* ─── Name + company ─────────────────────────────────────────────── */

.ud_Fcu6lq8etW89FxENQ {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 12px;
}

.YEgKpNx4Pyn3njatI5Pr {
  font-family: var(--wf-code-font--body, inherit);
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  color: white;
  margin: 0;
  width: 100%;
  text-align: left;
}

._IqUo6HO2xuX_hSE4_ch {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

.U3ZRNckCWaiLKj9htVPv {
  color: var(--color-light);
}

._Q9ZvKrRnCNeq0A3AZaU {
  color: white;
}

/* ─── View Profile button ────────────────────────────────────────── */

.pwnHYX0vaMfS8TeV0OLK {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background-color: var(--color-main);
  border-radius: 100px;
  border: 2px solid var(--color-main);
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;

  max-height: 0;
  opacity: 0;

  transition:
    max-height 0.25s ease,
    opacity 0.2s ease,
    background-color 0.15s ease;
}

.tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .pwnHYX0vaMfS8TeV0OLK {
  max-height: 60px;
  opacity: 1;
}

.pwnHYX0vaMfS8TeV0OLK:hover {
  background-color: var(--color-dark);
}

.W9eDxl7MmLEyUguZt6Ra {
  font-family: var(--wf-code-font--body, inherit);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: white;
  white-space: nowrap;
}

/* ─── Mobile (< 480px): 0.75x scale ────────────────────────────────── */

@media (max-width: 479px) {
  .tSW_Yv3tZzL4MSTnDdaE {
    width: 216px;
    height: 285px;
    border-radius: 17px;
    border-width: 5px;
  }

  .tSW_Yv3tZzL4MSTnDdaE.rnGEie90a_PMjtADTHtW .n8aLi8jNcVZ1v0F4FkmY {
    padding-bottom: 12px;
  }

  .tSW_Yv3tZzL4MSTnDdaE.rnGEie90a_PMjtADTHtW.gFvi7qmZRhtSkO6tH86v .IE5RbT6VGrQ059X9Ctzc {
    height: 87px;
  }

  .BZaLuej1S_XC38no8JaN,
  .e0ssu4LuoVn0h_KLaCo6 {
    inset: 8px;
    border-radius: 7px;
  }

  .e0ssu4LuoVn0h_KLaCo6 {
    box-shadow: inset 0 0 0 1.5px var(--color-dark);
  }

  .tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .BZaLuej1S_XC38no8JaN,
  .tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .e0ssu4LuoVn0h_KLaCo6 {
    inset: -2px;
    border-radius: 12px;
  }

  .IE5RbT6VGrQ059X9Ctzc {
    height: 87px;
    backdrop-filter: blur(15px);
    border-radius: 0 0 6px 6px;
  }

  .tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .IE5RbT6VGrQ059X9Ctzc {
    height: 126px;
    border-radius: 0 0 11px 11px;
  }

  .IE5RbT6VGrQ059X9Ctzc::before {
    border-radius: 0 0 6px 6px;
  }

  .vxPMMyHLoEZw3dqNY2Km {
    padding-top: 5px;
  }

  .ZOHrCLzJFx477mVf4MXu {
    padding: 3px 6px;
    border-radius: 5px;
  }

  ._J8LNPuUsx2Gi2xBF9Nh {
    font-size: 9px;
  }

  .n8aLi8jNcVZ1v0F4FkmY {
    padding: 18px 9px 9px;
  }

  .tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .n8aLi8jNcVZ1v0F4FkmY {
    gap: 12px;
  }

  .ud_Fcu6lq8etW89FxENQ {
    padding: 0 9px;
  }

  .YEgKpNx4Pyn3njatI5Pr {
    font-size: 24px;
    line-height: 30px;
  }

  ._IqUo6HO2xuX_hSE4_ch {
    gap: 3px;
    font-size: 12px;
    line-height: 18px;
  }

  .pwnHYX0vaMfS8TeV0OLK {
    padding: 5px 8px;
    border-radius: 75px;
    border-width: 2px;
  }

  .tSW_Yv3tZzL4MSTnDdaE.gFvi7qmZRhtSkO6tH86v .pwnHYX0vaMfS8TeV0OLK {
    max-height: 45px;
  }

  .W9eDxl7MmLEyUguZt6Ra {
    font-size: 12px;
    line-height: 18px;
  }
}