/* =============================================================================
   Case Studies Carousel — Frontend Styles
   ============================================================================= */

.d5_cs_case_studies_carousel .et_pb_module_inner {
  padding: 0 !important;
}


/* ---------------------------------------------------------------------------
   Carousel Wrapper + Slick overrides
   --------------------------------------------------------------------------- */

.d5-cs-carousel-wrapper {
  position: relative;
  overflow: hidden;
}

/* The slider is narrower than the wrapper — the gap on the right
   reveals the next slide once slick-list overflow is set to visible.
   Above 1024px the width is set to line up with the page container (see
   "Container alignment" below); these values apply to the stacked layout. */
.d5-cs-slider {
  width: 92%;
}

/* Allow the next slide to bleed into the right gutter of the wrapper. */
.d5-cs-slider .slick-list {
  overflow: visible;
}

/* Note: slides are intentionally left at their own natural height (no
   .slick-track flex/stretch equalisation). adaptiveHeight is disabled
   in carousel.js, so .slick-list settles to the tallest floated slide
   (via overflow: hidden above) instead of resizing on every navigation. */
.d5-cs-slider .slick-slide {
  height: auto;
  padding-right: 6.4583vw; /* gap between slides; see "Container alignment" for desktop */
}

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

.d5-cs-slide {
  outline: none;
  padding-bottom: 44px; /* room for the absolutely positioned client name */
  /* Sizes inside the slide are measured against its own width (cqw), so
     the image, boxes and gaps keep the same proportions at every size. */
  container-type: inline-size;
}

.d5-cs-slide-inner {
  /* The layout is designed on a 1640px-wide slide (1920px screen):
     960px image + 20px gap + 320px box + 20px gap + 320px box, with the
     right column 290px box + 20px gap + 290px testimonial = 600px, the
     same as the image. --d5-cs-u is 1 design px scaled to the slide.
     min-height (not height): the testimonial quote must always render in
     full, so on a slide with a long quote the right column — and with it
     this row — is allowed to grow past this value rather than clip or
     shrink any text. */
  --d5-cs-u: calc(100cqw / 1640);
  --d5-cs-gap: calc(20 * var(--d5-cs-u));
  --d5-cs-card-height: calc(600 * var(--d5-cs-u));
  --d5-cs-box-height: calc(290 * var(--d5-cs-u));
  --d5-cs-box-padding: calc(40 * var(--d5-cs-u)) calc(30 * var(--d5-cs-u));
  position: relative;
  display: flex;
  gap: var(--d5-cs-gap);
  align-items: stretch;
  min-height: var(--d5-cs-card-height);
  text-decoration: none;
  color: inherit;
}

/* Left column: device/image card */
.d5-cs-left {
  flex: 0 0 calc(960 * var(--d5-cs-u));
  display: flex;
  flex-direction: column;
  position: relative;
}

.d5-cs-image-card {
  /* Rounded on the right only — flush corners on the left. */
  border-radius: 0 20px 20px 0;
  overflow: hidden;
  /* 600px on a 1920px screen, scaled with the slide — see
     --d5-cs-card-height on .d5-cs-slide-inner. */
  height: var(--d5-cs-card-height);
  flex: 0 0 var(--d5-cs-card-height);
}

.d5-cs-device-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Client name — absolutely positioned below the image card so it
   doesn't affect slide height calculations */
.d5-cs-client-name {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-top: 16px;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: right;
}

/* Right column */
.d5-cs-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--d5-cs-gap);
  min-width: 0;
}

/* Blurb row — same height as the testimonial card below it. */
.d5-cs-blurbs-row {
  display: flex;
  gap: var(--d5-cs-gap);
  flex: 0 0 auto;
  min-height: var(--d5-cs-box-height);
}

.d5-cs-blurb {
  position: relative;
  flex: 1;
  border-radius: 20px;
  padding: var(--d5-cs-box-padding);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 4px;
}

/* All text inside blurbs */
.d5-cs-blurb,
.d5-cs-blurb * {
  color: #ffffff;
  font-size: clamp(14px, calc(20 * var(--d5-cs-u)), 20px);
  font-weight: 400;
  line-height: 1.35em;
  letter-spacing: normal;
}

.d5-cs-blurb p {
  margin: 0;
}

/* Big stat numbers */
.d5-cs-blurb .big-number {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15em;
  color: #ffffff;
  text-align: left;
  margin: 0;
  padding: 0;
  align-self: flex-start;
  width: 100%;
}

.d5-cs-blurb-left {
  /* background-color set inline from ACF background_color field */
  background-color: #1a56db; /* fallback */
}

.d5-cs-blurb-right {
  background-color: #2d3748;
}

.d5-cs-testimonial-card {
  position: relative;
  flex: 1 0 auto;
  /* 290px on a 1920px screen, matching the blurb boxes. Quote text is
     never clipped, so on an unusually long quote the card grows taller
     rather than cutting it off. */
  min-height: var(--d5-cs-box-height);
  background-color: #f3f5f8;
  border-radius: 20px;
  padding: var(--d5-cs-box-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

.d5-cs-testimonial-quote {
  margin: 0;
  font-size: clamp(13px, calc(16 * var(--d5-cs-u)), 16px);
  font-weight: 700;
  line-height: 1.35em;
  letter-spacing: normal;
  color: #011F2D;
}

.d5-cs-testimonial-name {
  margin: 0;
  font-size: clamp(12px, calc(14 * var(--d5-cs-u)), 14px);
  line-height: 1.44em;
  letter-spacing: normal;
  color: #011F2D;
  font-weight: 400;
}

.d5-cs-logo {
  display: block;
  width: auto;
  /* 46px on a 1920px screen, scaled with the slide. */
  height: clamp(28px, calc(46 * var(--d5-cs-u)), 46px);
  flex: 0 0 auto; /* always render in full, never shrunk/clipped to make room for the quote */
  /* Logos come in from ACF at varying native aspect ratios — width
     follows the logo; contain it if max-width kicks in. */
  object-fit: contain;
  object-position: left center;
  max-width: 100%;
  margin-top: 4px;
  margin-left: 0;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Hover state — darken the featured image only, reveal a "view" arrow
   centered on it (the arrow lives inside .d5-cs-image-card so it's
   always centered on the image regardless of layout/breakpoint).
   --------------------------------------------------------------------------- */

.d5-cs-image-card {
  position: relative;
}

.d5-cs-image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.d5-cs-slide-inner:hover .d5-cs-image-card::after {
  opacity: 1;
}

.d5-cs-slide-hover-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: #05d6e7;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 2;
}

.d5-cs-slide-hover-arrow-icon {
  width: 28px;
  height: 28px;
  display: block;
  /* The arrow glyph isn't drawn centered within the SVG's own square
     canvas (its ink sits toward the bottom-left), so centering the image
     box alone leaves it looking off-center. Nudge it to compensate. */
  transform: translate(4px, -5px);
}

.d5-cs-slide-inner:hover .d5-cs-slide-hover-arrow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */

.d5-cs-nav {
  position: relative;
  z-index: 2; /* sit above .d5-cs-left so the overlap from margin-top is clickable */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 0 0 0;
  margin-top: -36px; /* pull up to sit inline with the client name */
  width: 92%; /* desktop width lines up with the container — see "Container alignment" */
  pointer-events: none; /* let clicks pass through the empty area to the client name link underneath */
}

.d5-cs-nav > * {
  pointer-events: auto;
}

.d5-cs-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #011F2D;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.d5-cs-arrow:hover {
  opacity: 0.8;
}

.d5-cs-arrow svg {
  width: 18px;
  height: 18px;
  stroke: #ffffff;
}

.d5-cs-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.d5-cs-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  /* reset everything Slick and browsers might inject */
  position: static !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  line-height: 1;
}

.d5-cs-pagination li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  list-style: none;
}

.d5-cs-page {
  font-size: 14px;
  font-weight: 500;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0 4px;
  margin: 0;
  min-width: 20px;
  text-align: center;
  line-height: 40px; /* match arrow height so text sits on the same axis */
  display: block;
}

.slick-active .d5-cs-page {
  color: #05d6e7;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   "More Case Studies" panel — only rendered when a single case study is
   shown, filling the gutter the carousel would otherwise leave empty.
   --------------------------------------------------------------------------- */

.d5-cs-more-panel {
  position: absolute;
  top: 0;
  right: 0;
  /* Match the featured image's height only — stop above the 44px
     reserved below the slide for the client name. */
  bottom: 44px;
  width: 12%;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;
  background-color: #dee0e2;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.d5-cs-more-panel:hover {
  background-color: #6b7280;
}

.d5-cs-more-panel-text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: #1a1a1a;
  transition: color 0.2s ease;
}

.d5-cs-more-panel:hover .d5-cs-more-panel-text {
  color: #ffffff;
  font-weight: 700;
  font-style: italic;
}

.d5-cs-more-panel-arrow {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.d5-cs-more-panel-arrow-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
}

.d5-cs-more-panel-arrow-icon--hover {
  opacity: 0;
}

/* Cyan primary background behind the arrow on hover, swapped to the
   white arrow asset for contrast against it. */
.d5-cs-more-panel:hover .d5-cs-more-panel-arrow {
  background-color: #05d6e7;
}

.d5-cs-more-panel:hover .d5-cs-more-panel-arrow-icon--default {
  opacity: 0;
}

.d5-cs-more-panel:hover .d5-cs-more-panel-arrow-icon--hover {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Container alignment (desktop)
   The slide runs from the left edge of the screen to the right edge of the
   page container (90% wide, max 1360px, centred). After the same gap used
   inside the slide comes the next slide's peek (carousel) or the "More Case
   Studies" panel (single case study), filling the rest of the width. The
   nav lines up with the container edge too.
   --------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .d5_cs_case_studies_carousel {
    /* 20px design gap, scaled like the slide (1640px wide on a 1920px screen). */
    --d5-cs-outer-gap: calc((50vw + min(45vw, 680px)) * 20 / 1640);
    /* Container right edge — % resolves against the full-width wrapper/nav. */
    --d5-cs-outer-width: calc(50% + min(45%, 680px));
  }

  /* Single case study: always leave at least 96px for the panel. */
  .d5-cs-carousel-wrapper--single {
    --d5-cs-outer-width: min(50% + min(45%, 680px), 100% - 96px - var(--d5-cs-outer-gap));
  }

  .d5-cs-slider {
    width: calc(var(--d5-cs-outer-width) + var(--d5-cs-outer-gap));
  }

  .d5-cs-slider .slick-slide {
    padding-right: var(--d5-cs-outer-gap);
  }

  .d5-cs-nav {
    width: var(--d5-cs-outer-width);
    padding-right: 0;
  }

  .d5-cs-carousel-wrapper--single .d5-cs-more-panel {
    left: calc(var(--d5-cs-outer-width) + var(--d5-cs-outer-gap));
    width: auto;
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------
   Visual Builder Preview Styles
   --------------------------------------------------------------------------- */

.d5-cs-vb-preview {
  display: flex;
  gap: 16px;
  overflow: hidden;
  border-radius: 8px;
  margin-top: 16px;
  position: relative;
}

.d5-cs-vb-slide {
  min-width: 88%;
  flex-shrink: 0;
  display: flex;
  gap: 16px;
  background: #f9fafb;
  border-radius: 10px;
  padding: 20px;
}

.d5-cs-vb-slide--peek {
  min-width: 10%;
  background: #e5e7eb;
  border-radius: 10px;
  padding: 20px;
  pointer-events: none;
}

.d5-cs-vb-image-card {
  flex: 0 0 52%;
  min-height: 220px;
  border-radius: 10px;
  background: linear-gradient(135deg, #c8973b 0%, #8a6a1c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.d5-cs-vb-device-placeholder {
  width: 70%;
  height: 60%;
  background: rgba(255,255,255,0.25);
  border-radius: 8px;
}

.d5-cs-vb-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.d5-cs-vb-blurbs-row {
  display: flex;
  gap: 12px;
}

.d5-cs-vb-blurb {
  flex: 1;
  border-radius: 8px;
  padding: 16px;
  min-height: 90px;
}

.d5-cs-vb-blurb p {
  margin: 0;
  font-size: 12px;
  color: #fff;
}

.d5-cs-vb-blurb-left {
  background-color: #c8973b;
}

.d5-cs-vb-blurb-right {
  background-color: #2d3748;
}

.d5-cs-vb-testimonial {
  flex: 1;
  background: #f3f5f8;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.d5-cs-vb-quote {
  margin: 0;
  font-size: 12px;
  color: #4b5563;
  font-style: italic;
}

.d5-cs-vb-name {
  margin: 0;
  font-size: 11px;
  color: #9ca3af;
}

.d5-cs-vb-logo-placeholder {
  width: 80px;
  height: 24px;
  background: #d1d5db;
  border-radius: 4px;
}

.d5-cs-vb-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding-right: 8px;
  position: absolute;
  bottom: 8px;
  right: 0;
  left: 0;
}

.d5-cs-vb-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #374151;
  cursor: default;
}

.d5-cs-vb-pagination {
  display: flex;
  gap: 6px;
}

.d5-cs-vb-pagination span {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
}

.d5-cs-vb-pagination span.active {
  color: #1a1a1a;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Stacked layout matches the phone layout's frame: 20px side gutters,
     one slide at a time (no next-slide peek) and 20px corners all round. */
  .d5-cs-carousel-wrapper {
    padding: 0 20px;
    box-sizing: border-box;
  }

  .d5-cs-slider {
    width: 100%;
    box-sizing: border-box;
  }

  .d5-cs-slider .slick-list {
    overflow: hidden;
  }

  .d5-cs-slider .slick-slide {
    padding-right: 0;
  }

  .d5-cs-slide-inner {
    /* Stacked layout: stop scaling with the slide width and use the
       design sizes as-is (padding, gaps, text, logo), letting the boxes
       size to their content. */
    --d5-cs-u: 1px;
    --d5-cs-box-height: auto;
    flex-direction: column;
    /* Columns stack here, so the desktop column-matching height target
       no longer applies — let the stack size to its content instead. */
    min-height: 0;
  }

  .d5-cs-left {
    flex: 0 0 auto;
  }

  .d5-cs-image-card {
    height: auto;
    flex: 0 0 auto;
    min-height: 220px;
    border-radius: 20px;
  }

  .d5-cs-testimonial-card {
    height: auto;
    flex: 0 0 auto;
    min-height: 320px;
  }

  .d5-cs-image-card,
  .d5-cs-testimonial-card {
    width: 100%;
    box-sizing: border-box;
  }

  .d5-cs-client-name {
    position: static;
    padding-top: 1.5rem;
    text-align: center;
  }

  /* The 96px slide padding-bottom only exists to reserve room for the
     absolutely positioned client name on desktop. Once it's static/in-flow
     here, that padding is just dead space above the nav — shrink it. */
  .d5-cs-slide {
    padding-bottom: 24px;
  }

  .d5-cs-nav {
    justify-content: center;
    padding: 8px 0 0;
    margin-top: 0;
    width: 100%;
  }

  /* No gutter to sit inside once the slide stacks — drop it into normal
     flow as a full-width bar below the slide instead, styled the same as
     on phones: "MORE / CASE STUDIES ↗" right-aligned on two lines, arrow
     beside the second line. margin-bottom keeps the module from butting
     up against whatever section follows on the page. */
  .d5-cs-more-panel {
    position: static;
    height: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    gap: 15px;
    min-height: 80px;
    margin-top: 14px;
    margin-bottom: 36px;
    padding: 14px 23px;
    border-radius: 20px;
  }

  .d5-cs-more-panel-text {
    align-self: center;
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: normal;
    text-align: right;
    color: #011F2D;
  }

  .d5-cs-more-panel-line {
    display: block;
  }

  .d5-cs-more-panel-arrow,
  .d5-cs-more-panel:hover .d5-cs-more-panel-arrow {
    width: 14px;
    height: auto;
    border-radius: 0;
    background-color: transparent;
  }

  .d5-cs-more-panel-arrow-icon {
    top: 75%; /* centre of the second text line */
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 600px) {
  /* Phone layout: image, client name, two square stat boxes side by side,
     testimonial, then the "More Case Studies" bar. The 20px side gutters
     and 20px corners start at the stacked (1024px) breakpoint. */
  /* No nav below a single case study, so no room to reserve for it —
     the "More Case Studies" bar's own margin sets the gap. */
  .d5-cs-carousel-wrapper--single .d5-cs-slide {
    padding-bottom: 0;
  }

  .d5-cs-slide-inner {
    flex-direction: column !important;
    gap: 0;
  }

  .d5-cs-left,
  .d5-cs-right {
    width: 100%;
    flex: 0 0 auto;
  }

  .d5-cs-right {
    gap: 12px;
  }

  .d5-cs-image-card {
    min-height: 0;
  }

  .d5-cs-device-image {
    height: auto;
    width: 100%;
  }

  /* margin, not padding-bottom — Divi zeroes padding on a last <p>. */
  .d5-cs-client-name {
    padding: 20px 0 0;
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    color: #011F2D;
    text-align: left;
  }

  /* Two square boxes side by side; a box grows taller only if its text
     can't fit. */
  .d5-cs-blurbs-row {
    gap: 12px;
    min-height: 0;
  }

  .d5-cs-blurb {
    aspect-ratio: 1 / 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 36px 28px 24px;
    justify-content: flex-start;
  }

  .d5-cs-blurb,
  .d5-cs-blurb * {
    font-size: 16px;
    line-height: 1.5em;
  }

  .d5-cs-blurb .big-number {
    font-size: 40px;
    line-height: 1.15em;
    margin-bottom: 12px;
  }

  .d5-cs-testimonial-card {
    min-height: 0;
    padding: 26px 26px 30px;
  }

  .d5-cs-testimonial-quote {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65em;
    padding-bottom: 0; /* drop Divi's default <p> padding; spacing comes from the margin */
    margin-bottom: 12px;
  }

  .d5-cs-testimonial-name {
    font-size: 14px;
  }

  .d5-cs-logo {
    margin-top: 16px;
  }
}