/* Disable the internal background image when embedded on wunder.ai */

/*
body.is-embedded .wunder-carousel,
.wunder-carousel.is-embedded {
  background-image: none !important;  /* remove image + overlay */  /*
  background-color: transparent;      /* keep the section transparent */ /*
}
*/




:root {
  --orange: #ff6500;
  --blue: #0e6cff;
  --ink: #1a1a1a;
  --muted: rgba(26, 26, 26, 0.7);
  --radius: 24px;
  --bg-image: url("../background_orange_02.jpg");
  --bg-position: center;
  --bg-size: cover;
  --bg-repeat: no-repeat;

  /* optional, very subtle tint on top of the image; set to 'none' to remove */
/*  --bg-overlay: linear-gradient(0deg, rgba(255,101,0,0.06), rgba(255,101,0,0.06)); */
}


/* Reset page background so the iframe/page outside doesn't get tinted */
body {
  margin: 0;
  font-family: neuehaasdisplaythin, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; 
  background: transparent;
  color: var(--ink);
}



/* Make only the section orange */

.wunder-carousel {
  position: relative;
  
  /* ✅ ensure the container can grow to its cap, then center it */
  
  width: 100%;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  
  padding: 15px 0 15px 0;  /* 60px 0 70px; */
  overflow: hidden;
  text-align: center;
  background-color: transparent;
  
  /* background-image: var(--bg-overlay), var(--bg-image); */
  background-image: none; /* url("../img/background_orange_02.jpg");   none */
  background-position: var(--bg-position);
  background-size: var(--bg-size);
  background-repeat: var(--bg-repeat);
  
  --stage-h: 520px;   /* height of the “watch band” stage */
  --card-h: 450px;    /* height of the center card */
  
    /* NEW: width of the center card (unscaled) so offsets are symmetric */
  --card-w: 300px;

  /* NEW: gap from the card edge to each arrow (tweak this) */
  --ctrl-gap: 90px; /* 84 px */

  /* Optional: let left/right be slightly different if needed */
  --ctrl-offset-left:  calc(var(--card-w) / 2 + var(--ctrl-gap));
  --ctrl-offset-right: calc(var(--card-w) / 2 + var(--ctrl-gap));
  
}


/* Header - What can you do with WUNDER*/
.carousel-header h2 {
  font-size: clamp(28px, 4vw, 40px);
  color: #fff; 
  margin: 0 0 10px;
}

/* Subline - Pick a use case*/
.carousel-subline {
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 40px;
}



/* --- COMPACT CAROUSEL LAYOUT (50% width, centered) --- */

.carousel-track {
  /* was: --stage-h: 520px; */
  height: var(--stage-h);
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: visible;
  
  touch-action: pan-y;     /* YES to vertical scroll, we handle horizontal */
  overscroll-behavior: contain; /* avoid rubber-band parent scroll on iOS */
  cursor: grab;
}

}
.carousel-track:active {
  cursor: grabbing;
}




/* Cards are now absolutely positioned by JS around the center */
.carousel-card {
  --card-h: 450px;
  height: var(--card-h);
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  /* base transforms will be overwritten by JS via style.transform */
  transition: transform .22s cubic-bezier(.2,.8,.2,1),
              opacity .18s ease-out;
  will-change: transform, opacity;

  /* Keep your visual style */
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
  border: 5px solid rgba(255,101,0,0.42);
  box-shadow: 0 18px 50px rgba(255,255,255,0.18);
  padding: 28px 24px;

  /* Size is controlled via scale in JS, keep a comfortable base size */
  width: 300px;                  /* 360 base canvas for scaling */
  max-width: 300px;
  height: 450px;
  opacity: .55;                  /* will be adjusted in JS */
}


/* Active center card remains full-opacity; neighbors controlled in JS */
.carousel-card.active { opacity: 1; }


/* Larger viewports show a slightly bigger center card and tighter peeking sides */
@media (min-width: 900px) {
  .carousel-card { flex-basis: 44vw; }
}
@media (min-width: 1200px) {
  .carousel-card { flex-basis: 36vw; }
}

/* Card Content */
.role-label {
  font-size: 1.3rem; /*12px; */
  /* letter-spacing: .02em; */
  /* text-transform: uppercase; */
  color: black /* #4b5563; */
  padding: 1rem;
  margin: 10px 0 30px 0;
}

.carousel-card img {
  display: block;
  /*width: 72px; */
  height: 80px;
  margin: 0 auto 12px;
}
.carousel-card h3 {
  font-size: 2.0rem;
  margin: 10px 0 8px;
  color: var(--ink);
}
.carousel-card p { 
    color: black; /* var(--muted); */
    font-size: 1.0rem;
    margin: 26px 40px 13px 40px; /* 26px 0 6px 0; */
    }

.card-metrics { 
    /* font-weight: 600; */
    color: black; /* var(--blue);  */
    font-size: 1.0rem;
}

.card-cta {
  display: inline-block; 
  margin-top: 40px;  
  /* font-weight: 600; */
  font-size: 1.0rem;
  text-decoration: none; 
  color: var(--orange);
}

/* Gradient icon disk if you use the CSS icon instead of PNG */
.card-icon {
  display:none; /* hidden since you're using PNGs */
}

/* Controls float above, frosted */

/* Controls: align with the 50% track width and center vertically */
/* Position the arrows near the bottom of the 50%-wide stage */
/* Controls: align to bottom of the center card (≈ 35px with your sizes) */


/* Controls anchored to the stage, bottom aligned to center card */
.carousel-controls {
  --ctrl-nudge: 0px; /* positive = up, negative = down */

  position: absolute;
  left: 0; right: 0;               /* cover the stage width */
  top: auto;
  bottom: calc(((var(--stage-h, 520px) - var(--card-h, 450px)) / 2) + var(--ctrl-nudge, 0px));
  height: 0;                        /* we don’t need layout height */
  z-index: 10;
  pointer-events: none;             /* container ignores, buttons handle */
}



/* Each button is positioned from the stage center */

.carousel-btn {
  pointer-events: all;
  position: absolute;
  bottom: 0;                        /* sit on the computed controls bottom */
  
  transform: translateX(var(--ctrl-x)) translateY(0);

  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s ease, transform .25s ease;
  z-index: 11;
}



/* Left button: center minus offset */

.carousel-btn.prev {
  left: 50%;
  --ctrl-x: calc(-50% - var(--ctrl-offset-left));
}


/* Right button: center plus offset */

.carousel-btn.next {
  left: 50%;
  --ctrl-x: calc(-50% + var(--ctrl-offset-right));
}

.carousel-btn:hover {
  background: rgba(255,255,255,.6);
  transform: translateX(var(--ctrl-x)) translateY(-1px);
}

/* optional: keyboard focus gets the same nudge */
.carousel-btn:focus-visible {
  outline: none;
  transform: translateX(var(--ctrl-x)) translateY(-1px);
}




/* Footer */
.carousel-footer { margin-top: 40px; }
.btn.primary {
  background: linear-gradient(135deg, var(--orange), var(--blue));
  color: #fff; padding: 12px 24px; border-radius: 999px; text-decoration: none; font-weight: 600; margin-right: 12px;
}
.btn.secondary {
  border: 1px solid #fff; color: #fff; padding: 12px 24px; border-radius: 999px; text-decoration: none;
}
.carousel-trust {
  color: rgba(255,255,255,.9); font-size: 14px; margin-top: 16px;
}






/* Inner wrapper: lets us animate scale without overriding the card's transform */
.carousel-card .card-inner {
  height: 100%;
  transform-origin: center center;
  transform: scale(1);
  will-change: transform;
}

/* Micro-bounce animation */
@keyframes snap-bounce {
  0%   { transform: scale(0.995); }
  60%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* Apply when JS toggles .bounce on the inner wrapper */
.carousel-card .card-inner.bounce {
  animation: snap-bounce 220ms cubic-bezier(.2,.8,.2,1) both;
}

@media (min-width: 1200px) {
  .wunder-carousel { --stage-h: 540px; --card-h: 460px; }
}