/*
 * Case studies carousel section (reusable Saved Section).
 *
 * Heading grid, dashed Loop Carousel slot, View all + native Elementor arrows
 * restyled to match React (bottom-right outline icon buttons).
 */

.rq-page .rq-case-studies {
  display: block;
}

.rq-page .rq-case-studies > .rq-container,
.rq-page .rq-case-studies > .e-con.rq-container {
  position: relative;
}

.rq-page .rq-case-studies__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (max-width: 767px) {
  .rq-page .rq-case-studies__head {
    gap: 1rem !important;
  }

  /*
   * Same mobile hug as home Capabilities: container-type: inline-size on
   * .rq-h2-fit doubles the heading box and leaves a tall gap before the body.
   */
  .rq-page .rq-case-studies__head .rq-h2-fit,
  .rq-page .rq-case-studies__head .rq-h2-fit.e-con {
    --flex-grow: 0 !important;
    --flex-shrink: 0 !important;
    --min-height: 0px !important;
    --height: auto !important;
    container-type: normal !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin-block-end: 0 !important;
    padding: 0 !important;
  }

  .rq-page .rq-case-studies__head .rq-h2-fit > .elementor-element {
    --flex-grow: 0 !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .rq-page .rq-case-studies__head.e-con > .e-con.e-child,
  .rq-page .rq-case-studies__head > .e-con {
    --flex-grow: 0 !important;
    --min-height: 0px !important;
    --height: auto !important;
    --justify-content: flex-start !important;
    --gap: 0px !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  .rq-page .rq-case-studies__head .rq-headline {
    margin-block-start: 1.25rem !important;
    margin-top: 1.25rem !important;
  }
}

@media (min-width: 768px) {
  .rq-page .rq-case-studies__head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
}

.rq-page .rq-case-studies__body {
  min-width: 0;
}

.rq-page .rq-case-studies__slot {
  display: block;
  margin-block-start: 2rem;
  /* Let styled nav buttons sit in the foot row below the track. */
  overflow: visible;
}

.rq-page .rq-case-studies__slot > .elementor-element,
.rq-page .rq-case-studies__slot .elementor-widget-loop-carousel,
.rq-page .rq-case-studies__slot .elementor-widget-loop-carousel > .elementor-widget-container,
.rq-page .rq-case-studies__slot .elementor-swiper {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
  overflow: visible !important;
}

.rq-page .rq-case-studies__slot .swiper {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
  overflow: hidden;
}

.rq-page .rq-case-studies__slot .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

.rq-page .rq-case-studies__foot {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1.5rem;
  /* Match React: View all left, room for 2× 2.75rem arrows + gap on the right. */
  margin-block-start: 2rem;
  min-height: 2.75rem;
  padding-inline-end: calc(2.75rem * 2 + 0.5rem);
  min-width: 0;
}

.rq-page .rq-case-studies__action {
  display: flex;
  min-width: 0;
}

/*
 * Loop Carousel arrows — match React `Button variant="outline" size="icon" className="size-11"`
 * with Lucide ArrowLeft / ArrowRight glyphs (not Elementor chevrons).
 */
.rq-page .rq-case-studies .elementor-swiper-button,
.rq-page .rq-case-studies .elementor-swiper-button-prev,
.rq-page .rq-case-studies .elementor-swiper-button-next,
.rq-page .rq-case-studies .swiper-button-prev,
.rq-page .rq-case-studies .swiper-button-next {
  position: absolute !important;
  top: auto !important;
  /* Foot margin (2rem) + button height — aligns with .rq-case-studies__foot */
  bottom: calc(-2rem - 2.75rem) !important;
  left: auto !important;
  z-index: 2;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--rq-input) !important;
  border-radius: var(--rq-radius-brand) !important;
  background-color: var(--rq-background) !important;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--rq-foreground) 6%, transparent);
  color: var(--rq-foreground) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.rq-page .rq-case-studies .elementor-swiper-button-prev,
.rq-page .rq-case-studies .swiper-button-prev {
  right: calc(2.75rem + 0.5rem) !important;
}

.rq-page .rq-case-studies .elementor-swiper-button-next,
.rq-page .rq-case-studies .swiper-button-next {
  right: 0 !important;
}

.rq-page .rq-case-studies .elementor-swiper-button:hover:not(.swiper-button-disabled),
.rq-page .rq-case-studies .swiper-button-prev:hover:not(.swiper-button-disabled),
.rq-page .rq-case-studies .swiper-button-next:hover:not(.swiper-button-disabled) {
  background-color: var(--rq-accent) !important;
  border-color: var(--rq-accent) !important;
  color: var(--rq-accent-foreground) !important;
}

.rq-page .rq-case-studies .elementor-swiper-button:focus-visible,
.rq-page .rq-case-studies .swiper-button-prev:focus-visible,
.rq-page .rq-case-studies .swiper-button-next:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--rq-ring);
}

.rq-page .rq-case-studies .elementor-swiper-button.swiper-button-disabled,
.rq-page .rq-case-studies .swiper-button-prev.swiper-button-disabled,
.rq-page .rq-case-studies .swiper-button-next.swiper-button-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hide Elementor / eicon / FA glyphs — replace with Lucide-style arrows. */
.rq-page .rq-case-studies .elementor-swiper-button i,
.rq-page .rq-case-studies .elementor-swiper-button svg,
.rq-page .rq-case-studies .swiper-button-prev i,
.rq-page .rq-case-studies .swiper-button-prev svg,
.rq-page .rq-case-studies .swiper-button-next i,
.rq-page .rq-case-studies .swiper-button-next svg {
  display: none !important;
}

.rq-page .rq-case-studies .elementor-swiper-button-prev::before,
.rq-page .rq-case-studies .elementor-swiper-button-next::before,
.rq-page .rq-case-studies .swiper-button-prev::before,
.rq-page .rq-case-studies .swiper-button-next::before {
  content: "" !important;
  display: block !important;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  transition: transform 150ms ease;
}

/* Lucide ArrowLeft */
.rq-page .rq-case-studies .elementor-swiper-button-prev::before,
.rq-page .rq-case-studies .swiper-button-prev::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Lucide ArrowRight */
.rq-page .rq-case-studies .elementor-swiper-button-next::before,
.rq-page .rq-case-studies .swiper-button-next::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rq-page .rq-case-studies .elementor-swiper-button-prev:hover:not(.swiper-button-disabled)::before,
.rq-page .rq-case-studies .swiper-button-prev:hover:not(.swiper-button-disabled)::before {
  transform: translateX(-0.125rem);
}

.rq-page .rq-case-studies .elementor-swiper-button-next:hover:not(.swiper-button-disabled)::before,
.rq-page .rq-case-studies .swiper-button-next:hover:not(.swiper-button-disabled)::before {
  transform: translateX(0.125rem);
}

/* --- Generic loop placeholder (any page can reuse) --- */

.rq-loop-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
  border: 1px dashed color-mix(in oklab, var(--rq-foreground) 25%, transparent);
  border-radius: var(--rq-radius-brand);
  background-color: color-mix(in oklab, var(--rq-card) 80%, transparent);
  color: var(--rq-muted-foreground);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}

.rq-loop-slot--carousel {
  min-height: 16rem;
}

/* --- Generic carousel nav (optional custom HTML; unused by case studies) --- */

.rq-carousel-nav-wrap {
  display: contents;
}

.rq-carousel-nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}

.rq-carousel-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rq-input);
  border-radius: var(--rq-radius-brand);
  background-color: var(--rq-background);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--rq-foreground) 6%, transparent);
  color: var(--rq-foreground);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.rq-carousel-nav__btn:hover:not(:disabled) {
  background-color: var(--rq-accent);
  border-color: var(--rq-accent);
  color: var(--rq-accent-foreground);
}

.rq-carousel-nav__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--rq-ring);
}

.rq-carousel-nav__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.rq-carousel-nav__btn svg {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 150ms ease;
}

.rq-carousel-nav__btn[data-rq-dir="prev"]:hover:not(:disabled) svg {
  transform: translateX(-0.125rem);
}

.rq-carousel-nav__btn[data-rq-dir="next"]:hover:not(:disabled) svg {
  transform: translateX(0.125rem);
}

@media (max-width: 767px) {
  .rq-page .rq-case-studies__slot {
    max-width: 100%;
  }

  .rq-page .rq-case-studies__slot .swiper {
    max-width: 100%;
    overflow: hidden;
  }

  .rq-page .rq-case-studies .swiper-slide .rq-case-study-card {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}