/*
 * 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).
 */

.GHWajKkrldT4ev4dbPKX {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

.RNkoxfUafz2rQ1tYrqvd {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.LyAkauk4Mx6U7iIhtoGr {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}

.BTMxHbfqH5FlGnYsDTUM {
  transition-property: opacity;
  transition-timing-function: ease-out;
}

.mrHrS72P_W3Cd7uE9Vp7 {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.FfU0t8dPK_iVWUW2MMqb {
  background-size: contain;
  background-repeat: no-repeat;
}

/* Slider Card - Figma 2026 Design System (Iris)
   4 variants: Default (with LDB bg), Variant2 (full content), Variant3 (no para), Variant4 (no button).
   6 color families; chip and button use main/dark. */

/* ─── Code island host: block so it participates in height layout ───── */
:host {
  display: block;
}

/* ─── Color fallbacks (--gc--<color>--<shade> from page) ────────────── */

.mtVvQrmw5hcBR4bAxr4W {
  --color-main: var(--gc--red--main, oklch(65.3% 0.293 16));
  --color-dark: var(--gc--red--dark, oklch(22.9% 0.103 16));
}

.JO7eGV6j3ZVJHCi9Bq2Q {
  --color-main: var(--gc--orange--main, oklch(65.3% 0.213 44.415));
  --color-dark: var(--gc--orange--dark, oklch(22.9% 0.075 44.4));
}

.nArmiT4sedVXbaS1nfLA {
  --color-main: var(--gc--green--main, oklch(65.3% 0.2 161));
  --color-dark: var(--gc--green--dark, oklch(22.9% 0.07 161));
}

.opSCd2rDnl2w7nEM99Ek {
  --color-main: var(--gc--blue--main, oklch(65.3% 0.181 235));
  --color-dark: var(--gc--blue--dark, oklch(22.9% 0.063 235));
}

.n3gRmPzBGEXUstciFiBg {
  --color-main: var(--gc--indigo--main, oklch(65.3% 0.214 289));
  --color-dark: var(--gc--indigo--dark, oklch(22.9% 0.075 289));
}

.N2BESEgYSgAhAjTENjn1 {
  --color-main: var(--gc--violet--main, oklch(65.3% 0.314 341));
  --color-dark: var(--gc--violet--dark, oklch(22.9% 0.11 341));
}

/* ─── Card shell ────────────────────────────────────────────────────
   Width set via columns × 96px (inline style). Capped at calc(100vw - 72px).
   72px is the side padding of the page (24px) plus an additional 24px to allow
   for the next card to be visible on the right-hand side of the screen.
   8px radius. Fills container as flex child. */

.Y7qquVEyDy1GRHFt4oKx {
  position: relative;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  overflow: clip;
  background-color: #1a1a1a;
  box-sizing: border-box;
  /* Swiper puts transform on slides; without this, GPU layers (canvas) can
     composite above text for a frame. Isolate stacking + overlay layer below. */
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─── Default variant: 480px tall, background + overlay ───────────── */

.C1OThANgE2v_my7_4iIm .kxqQla_GOn92ti55SUGz {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.C1OThANgE2v_my7_4iIm .OenfcaDmFrMHMKO66Tln {
  position: relative;
  z-index: 1;
  /* Own compositor layer so headline/button stay above the dither canvas
     while the slide is transformed during Swiper drag/momentum. */
  transform: translate3d(0, 0, 0);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 480px;
  padding: 24px;
  box-sizing: border-box;
}

.C1OThANgE2v_my7_4iIm .BJjy47enLQTK37yiVptj {
  flex-shrink: 0;
}

.C1OThANgE2v_my7_4iIm .LGR2EwNSUbqSaGLGZ10H {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0) 0%,
    #1a1a1a 20%
  );
  margin: 0 -24px -24px -24px;
  padding: 24px 24px 24px 24px;
}

/* ─── Variants 2, 3, 4: No background, solid card ───────────────────
   Uniform 24px padding all sides. Card fills flex container. */

.URKzo7KEqPlAKjpylzZG {
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
}

.C1OThANgE2v_my7_4iIm .URKzo7KEqPlAKjpylzZG {
  min-height: 480px;
}

.URKzo7KEqPlAKjpylzZG .BJjy47enLQTK37yiVptj {
  flex-shrink: 0;
}

.URKzo7KEqPlAKjpylzZG .LGR2EwNSUbqSaGLGZ10H {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
}

/* ─── Variants 2, 3, 4: Plain lead-in, fixed spacing, headline grows ─── */

.LWYDS4_i9ihgP755PPtP .URKzo7KEqPlAKjpylzZG,
.yzYkdgglsRbYpKBHLreg .URKzo7KEqPlAKjpylzZG,
.R66s5PWIJjduI_7QjsGp .URKzo7KEqPlAKjpylzZG {
  gap: 48px;
}

.LWYDS4_i9ihgP755PPtP .URKzo7KEqPlAKjpylzZG .LGR2EwNSUbqSaGLGZ10H,
.yzYkdgglsRbYpKBHLreg .URKzo7KEqPlAKjpylzZG .LGR2EwNSUbqSaGLGZ10H,
.R66s5PWIJjduI_7QjsGp .URKzo7KEqPlAKjpylzZG .LGR2EwNSUbqSaGLGZ10H {
  flex: 1;
  min-height: 0;
}

.LWYDS4_i9ihgP755PPtP .URKzo7KEqPlAKjpylzZG .TnQXmhOKCXFeD5sUvXNV,
.yzYkdgglsRbYpKBHLreg .URKzo7KEqPlAKjpylzZG .TnQXmhOKCXFeD5sUvXNV,
.R66s5PWIJjduI_7QjsGp .URKzo7KEqPlAKjpylzZG .TnQXmhOKCXFeD5sUvXNV {
  flex: 1;
}

.LWYDS4_i9ihgP755PPtP .URKzo7KEqPlAKjpylzZG .R3L6u0mpvCKGzhgJ2nhD,
.yzYkdgglsRbYpKBHLreg .URKzo7KEqPlAKjpylzZG .R3L6u0mpvCKGzhgJ2nhD {
  margin-top: 32px; /* 16px gap + 32px = 48px above button */
}

/* ─── Lead-in as plain text (variants 2–4, no chip) ───────────────────── */

.fm41lHBn05VVZvEP5ma6 {
  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);
}

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

.Wy7biNJUWrLzJi0fbVyC {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background-color: var(--color-dark);
  border-radius: 100px;
}

.NXWhbPZHhRmXBi_S7xLg {
  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;
}

/* ─── Headline ─────────────────────────────────────────────────────── */

.TnQXmhOKCXFeD5sUvXNV {
  font-family: var(--wf-code-font--body, inherit);
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
  width: 100%;
}

/* ─── Paragraph ────────────────────────────────────────────────────── */

.wWyKCMoJN5BazRMTmAQg {
  font-family: var(--wf-code-font--body, inherit);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
  width: 100%;
}

/* ─── Button ───────────────────────────────────────────────────────── */

.R3L6u0mpvCKGzhgJ2nhD {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: var(--color-main);
  color: var(--color-on-main, #0d0d0d);
  font-family: var(--wf-code-font--body, inherit);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease;
  align-self: flex-start;
}

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

.HSMCjINtltKxVLaM8Umd {
  flex-shrink: 0;
}

.srmX0AvzFDDT4CqYC63X {
  flex-shrink: 0;
}