/* ============================================================
   Tech Carousel — BEM: .tech-carousel__<element> / --<modifier>
   Breakpoints: mobile < 768 | tablet 768–1199 | desktop >= 1200
   Grid: single .g-container on .tech-carousel__inner (corporate.css)
   ============================================================ */

.tech-carousel {
  /* Figma mobile arrows ~34px; desktop aligns with --corp-arrow-btn-size */
  --tech-carousel-arrow-size: 34px;
  --tech-carousel-arrow-icon: 18px;
  --tech-carousel-arrow-gap: 5.62px;

  /* Figma copy ink (Heading XL / Tablet Display SM) */
  --tech-carousel-desc-ink: var(--corp-color-neutral-dark-gray);
  --tech-carousel-desc-ink-muted: rgb(38, 38, 38, 0.50);

  background: var(--corp-color-surface);
  overflow: hidden;
}

.tech-carousel__inner {
  width: 100%;
  padding-bottom: 60px;

  @media screen and (width >=768px) {
    padding-bottom: 87px;
  }

  @media screen and (width >=1200px) {
    padding-bottom: 40px;
  }
}

/* ---- Header ----------------------------------------------- */

.tech-carousel__header {
  padding-block: 29px 37px;
}

/* Title — label: Body 5 (mobile / tablet); desktop 14 / 500 / 120% (Figma also uses leading-trim / text-edge; not in baseline CSS yet) */
.tech-carousel__title>p {
  margin: 0 0 18px;
  font-size: var(--corp-type-mobile-body-1-font-size);
  font-style: normal;
  font-weight: var(--corp-type-mobile-display-3-font-weight);
  line-height: var(--corp-type-mobile-display-4-line-height);
  color: var(--corp-color-primary);
  text-transform: capitalize;
}

/* Title — display line (heading) matches desc “dark” scale per breakpoint */
.tech-carousel__title :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-size: var(--corp-type-mobile-body-1-font-size);
  font-style: normal;
  font-weight: var(--corp-type-mobile-display-3-font-weight);
  line-height: var(--corp-type-mobile-tag-4-line-height);
  color: var(--corp-color-primary);
}

/* Description — light body; strong = dark (Figma Heading XL / Tablet Display SM) */
.tech-carousel__desc {
  margin-top: 14px;
  font-size: var(--corp-type-tablet-display-sm-font-size);
  font-style: normal;
  font-weight: var(--corp-type-tablet-display-xl-font-weight);
  line-height: var(--corp-type-tablet-display-line-height);
  color: var(--tech-carousel-desc-ink-muted);
}

.tech-carousel__desc p {
  font: inherit;
  color: inherit;
  margin: 0;
}

.tech-carousel__desc strong {
  font: inherit;
  font-weight: var(--corp-type-tablet-display-xl-font-weight);
  color: var(--tech-carousel-desc-ink);
}

/* ---- Carousel outer + stage (width = grid, rounded hero) -- */

.tech-carousel__outer {
  position: relative;
  padding-inline: 0;
  padding-bottom: 0;
}

.tech-carousel__stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transform: translateZ(0);
}

/* ---- Splide root ------------------------------------------ */

.tech-carousel__splide {
  position: relative;
  overflow: hidden;
}

.tech-carousel__splide .splide__track {
  overflow: hidden;
}

/* ---- Progress (segments + fill driven by autoplay:playing) */

.tech-carousel__progress {
  position: absolute;
  top: 18px;
  left: 9px;
  right: 9px;
  z-index: 10;
  display: flex;
  gap: 6px;
  height: 2px;
  pointer-events: none;
}

.tech-carousel__seg {
  position: relative;
  flex: 1;
  height: 1.687px;
  border-radius: 11.245px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.tech-carousel__seg-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--corp-color-white);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ---- Slide ------------------------------------------------ */

.tech-carousel__slide {
  position: relative;
  width: 100%;
  height: 314px;
  overflow: hidden;
  display: block;
}

.tech-carousel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tech-carousel__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Text body */
.tech-carousel__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 240px;
  padding: 0 15px 12px;
  color: var(--corp-color-white);
}

.tech-carousel__num {
  display: block;
  font-size: var(--corp-type-mobile-body-3-font-size);
  line-height: var(--corp-type-mobile-body-3-line-height);
  font-weight: var(--corp-type-mobile-body-3-font-weight);
  color: var(--corp-color-white);
  opacity: 0.2;
  margin: 0;
}

.tech-carousel__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tech-carousel__stitle {
  font-size: var(--corp-type-mobile-body-3-font-size);
  line-height: var(--corp-type-mobile-body-3-line-height);
  font-weight: var(--corp-type-mobile-body-3-font-weight);
  color: var(--corp-color-white);
}

.tech-carousel__stitle :is(h1, h2, h3, h4, h5, h6, p) {
  font: inherit;
  color: inherit;
  margin: 0;
}

.tech-carousel__sdesc {
  font-size: var(--corp-type-mobile-body-2-font-size);
  line-height: var(--corp-type-mobile-body-2-line-height);
  font-weight: var(--corp-type-mobile-body-2-font-weight);
  color: var(--corp-color-slate);
  letter-spacing: -0.01em;
  margin: 0;
  text-align: left;
}

.tech-carousel__sdesc p {
  margin: 0;
}

/* ---- Splide pagination (dots) — tablet only ---------------- */

.tech-carousel .splide__pagination {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: none;
  gap: 8px;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tech-carousel__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.00) 0%,
      rgba(0, 0, 0, 0.90) 100%);
}

.tech-carousel .splide__pagination li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-carousel .splide__pagination__page {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: width 200ms ease, height 200ms ease, background 200ms ease;
}

.tech-carousel .splide__pagination__page.is-active {
  width: 23.707px;
  height: 1.687px;
  border-radius: 11.245px;
  background: var(--corp-color-white);
}

/* ---- Arrows — mobile + desktop (hidden tablet only) ------- */

.tech-carousel__arrows {
  display: flex;
  align-items: center;
  gap: var(--tech-carousel-arrow-gap);
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 10;
}

.tech-carousel__arrow {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.734px;
  height: 33.734px;
  padding: 0;
  border: 0.562px solid rgba(255, 255, 255, 0.30);
  border-radius: 33.734px;
  background: rgba(0, 0, 0, 0.20);
  cursor: pointer;
  box-shadow: 0 2.249px 13.493px 0 rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(17.991px);
  -webkit-backdrop-filter: blur(17.991px);
  transition: opacity 160ms ease;
}


.tech-carousel__arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.tech-carousel__arrow:hover {
  opacity: 0.8;
}


/* ============================================================
   TABLET  >= 768px
   ============================================================ */

@media screen and (width >=768px) {
  .tech-carousel__header {
    padding-block: 56px 48px;
  }

  .tech-carousel {
    --tech-carousel-desc-ink: var(--corp-color-neutral-dark-gray);
    --tech-carousel-desc-ink-muted: rgba(8, 12, 11, 0.30);
  }

  .tech-carousel__title>p {
    margin: 0 0 20px;
    line-height: var(--corp-type-tablet-body-3-line-height);
  }

  .tech-carousel__seg {
    height: 1.754px;
    border-radius: 11.691px;
  }

  .tech-carousel__title :is(h1, h2, h3, h4, h5, h6) {
    font-size: var(--corp-type-tablet-heading-1-font-size);
    line-height: 18.2px;
    font-weight: var(--corp-type-tablet-body-3-font-weight);
  }

  .tech-carousel__desc {
    margin-top: 25px;
    font-size: var(--corp-type-tablet-display-sm-font-size);
    line-height: var(--corp-type-tablet-display-line-height);
    font-weight: var(--corp-type-tablet-display-xl-font-weight);
    color: var(--tech-carousel-desc-ink-muted);
  }

  .tech-carousel__desc strong {
    font-weight: var(--corp-type-tablet-display-xl-font-weight);
    color: var(--tech-carousel-desc-ink);
  }

  .tech-carousel .splide__pagination {
    display: flex;
  }

  .tech-carousel__arrows {
    display: none;
  }

  .tech-carousel__stage {
    border-radius: 12px;
  }

  .tech-carousel__progress {
    top: 18px;
    left: 15px;
    right: 15px;
    gap: 6px;
  }

  .tech-carousel__slide {
    height: 379px;
  }

  .tech-carousel__overlay {
    background: linear-gradient(to bottom,
        rgba(23, 28, 143, 0.1) 0%,
        rgba(23, 28, 143, 0.05) 30%,
        rgba(0, 0, 0, 0.55) 65%,
        rgba(0, 0, 0, 0.82) 100%);

    backdrop-filter: blur(10.30px);
    inset: 0;
    position: absolute;
    z-index: 1;
    scale: 1.02;
    -webkit-backdrop-filter: blur(10.30px);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        transparent 50%,
        black 75%,
        black 100%);

    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        transparent 50%,
        black 75%,
        black 100%);
  }


  .tech-carousel__body {
    display: flex;
    flex-direction: column;
    gap: 13px;
    max-width: 497px;
    padding: 0 18px 30px;
  }

  .tech-carousel__num {
    font-size: var(--corp-type-tablet-heading-lg-font-size);
    line-height: var(--corp-type-tablet-heading-lg-line-height);
    font-weight: var(--corp-type-tablet-heading-lg-font-weight);
    letter-spacing: -0.01em;
    opacity: 0.5;
    margin: 0;
  }

  .tech-carousel__info {
    gap: 5.85px;
  }

  .tech-carousel__stitle {
    font-size: var(--corp-type-tablet-heading-xl-font-size);
    line-height: var(--corp-type-tablet-heading-xl-line-height);
    font-weight: var(--corp-type-tablet-heading-xl-font-weight);
    letter-spacing: -0.01em;
  }

  .tech-carousel__sdesc {
    font-size: var(--corp-type-tablet-body-lg-font-size);
    line-height: var(--corp-type-tablet-body-lg-line-height);
    font-weight: var(--corp-type-tablet-body-lg-font-weight);
    letter-spacing: -0.01em;
    color: var(--corp-color-white);
  }

  .tech-carousel .splide__pagination {
    bottom: 20px;
    gap: 7.5px;
  }

  .tech-carousel .splide__pagination__page {
    width: 8.222px;
    height: 8.222px;
    border-radius: 21.926px;
    background: rgba(255, 255, 255, 0.40);
  }


  .tech-carousel .splide__pagination__page.is-active {
    width: 10.963px;
    height: 10.963px;
    border-radius: 50%;
    background: var(--corp-color-white);
  }
}

/* ============================================================
   DESKTOP  >= 1200px
   ============================================================ */

@media screen and (width >=1200px) {
  .tech-carousel__header {
    padding: 103px 101px 125px 0px;
  }

  .tech-carousel__arrows .tech-carousel__arrow {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    border: 0.562px solid rgba(255, 255, 255, 0.30);
    border-radius: 33.734px;
    background: rgba(0, 0, 0, 0.20);
    cursor: pointer;
    box-shadow: 0 2.249px 13.493px 0 rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(17.991px);
    -webkit-backdrop-filter: blur(17.991px);
  }

  .tech-carousel__arrow svg {
    /* display: none; */
    width: 28px;
    height: 28px;

  }


  .tech-carousel__arrow--prev {
    background: url('/corporate/icons/chevron_left.svg') no-repeat center / contain;
  }

  .tech-carousel__arrow--next {
    background: url('/corporate/icons/chevron_right.svg') no-repeat center / contain;
  }

  .tech-carousel__title>p {
    margin: 0 0 20px;
    line-height: var(--corp-type-desktop-heading-xxl-line-height);
    text-transform: none;
  }

  .tech-carousel__title :is(h1, h2, h3, h4, h5, h6) {
    line-height: 16.8px;
  }

  .tech-carousel {
    --tech-carousel-arrow-size: var(--corp-arrow-btn-size);
    --tech-carousel-arrow-icon: 24px;
    --tech-carousel-arrow-gap: 10px;
  }

  .tech-carousel__desc {
    margin-top: 20px;
    font-size: var(--corp-type-desktop-heading-xl-font-size);
    line-height: var(--corp-type-desktop-heading-xl-line-height);
    font-weight: var(--corp-type-desktop-display-2xl-font-weight);
    color: var(--tech-carousel-desc-ink-muted);
  }

  .tech-carousel__desc strong {
    font-weight: var(--corp-type-desktop-display-2xl-font-weight);
    color: var(--tech-carousel-desc-ink);
  }

  .tech-carousel__stage {
    border-radius: 20px;
    position: relative;
  }

  .tech-carousel__outer {
    position: relative;
  }

  .tech-carousel__progress {
    top: 31px;
    left: 26px;
    right: 26px;
    height: 3px;
    gap: 10px;
  }

  .tech-carousel__seg {
    height: 3px;
    border-radius: 11.691px;
  }

  .tech-carousel__slide {
    height: 648px;
  }

  .splide__pagination {
    display: none;
  }


  .tech-carousel__overlay {
    background: linear-gradient(to bottom,
        rgba(23, 28, 143, 0.1) 0%,
        rgba(23, 28, 143, 0.05) 30%,
        rgba(0, 0, 0, 0.55) 65%,
        rgba(0, 0, 0, 0.82) 100%);

    backdrop-filter: blur(10.30px);
    inset: 0;
    position: absolute;
    z-index: 1;
    scale: 1.02;
    -webkit-backdrop-filter: blur(10.30px);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        transparent 50%,
        black 75%,
        black 100%);

    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        transparent 50%,
        black 75%,
        black 100%);
  }

  .tech-carousel__body {
    display: flex;
    flex-direction: column;
    gap: 23px;
    padding: 0 30px 36px;
    max-width: 639px;
  }

  .tech-carousel__num {
    font-size: var(--corp-type-desktop-heading-1-font-size);
    line-height: var(--corp-type-desktop-heading-1-line-height);
    font-weight: var(--corp-type-desktop-heading-1-font-weight);
    color: var(--corp-color-white);
    letter-spacing: 0;
    opacity: 0.2;
    margin: 0;
  }

  .tech-carousel__info {
    gap: 10px;
  }

  .tech-carousel__stitle {
    font-size: var(--corp-type-desktop-heading-1-font-size);
    line-height: var(--corp-type-desktop-heading-1-line-height);
    font-weight: var(--corp-type-desktop-heading-1-font-weight);
    color: var(--corp-color-white);
    letter-spacing: 0;
  }

  .tech-carousel__sdesc p {
    font-size: var(--corp-type-desktop-body-font-size);
    line-height: var(--corp-type-desktop-caption-5-line-height);
    font-weight: var(--corp-type-desktop-body-font-weight);
    color: var(--corp-color-white);
    letter-spacing: -0.01em;
  }

  /* Hide dots on desktop */
  .tech-carousel .splide__pagination {
    display: none;
  }

  .tech-carousel__arrows {
    display: flex;
    bottom: 36px;
    right: 40px;
    gap: var(--tech-carousel-arrow-gap);
  }

  .tech-carousel__arrow {
    width: 60px;
    height: 60px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}

/* Single Line Title */
.single-line-title.block {
  padding-top: 100px;

  .tech-carousel__header {
    padding-block: 0;
  }

  .tech-carousel__title :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 0 27px;
    color: var(--corp-color-neutral-black);
    font-weight: var(--fw-500);
    opacity: 0.4;
    line-height: var(--corp-type-mobile-body-1-line-height);
  }

  .tech-carousel__desc :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 0 32px;
    color: var(--corp-color-neutral-black);
    font-weight: var(--fw-400);
    font-size: var(--corp-type-mobile-display-2-font-size);
    line-height: var(--corp-type-mobile-display-5-line-height);
    letter-spacing: -0.56px;

    strong {
      font-weight: inherit;
      color: var(--corp-color-primary);
    }
  }

  @media (width >=768px) {
    padding-top: 76px;

    .tech-carousel__title :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0 0 16px;
    }

    .tech-carousel__desc {
      margin-top: 0;
    }

    .tech-carousel__desc :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0 0 48px;
      font-weight: var(--fw-400);
      line-height: var(--corp-type-tablet-body-8-line-height);
    }

  }

  @media (width >=1200px) {
    .tech-carousel__title :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0 0 24px;
      font-size: var(--corp-type-desktop-heading-4-font-size);
      line-height: var(--corp-type-desktop-heading-3xl-line-height);
    }

    .tech-carousel__desc :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0 0 32px;
      font-size: var(--corp-type-desktop-heading-xxl-font-size);
      line-height: var(--corp-type-desktop-caption-6-line-height);
    }
  }

}