/* Flickity Custom Styles - Only loaded when carousels feature is active
   Extracted from assets/tailwind.css to enable conditional loading */

@layer utilities {
  /* Hero slider fallback heights */
  .hero-slider {
    min-height: 45.625rem;
    height: 45.625rem;
  }
  .hero-slider .flickity-viewport {
    min-height: 730px;
    height: 100% !important;
  }
  @media (max-width: 47.99rem) {
    .hero-slider {
      min-height: 20rem;
      height: 20rem;
    }
    .hero-slider .flickity-viewport {
      min-height: 320px;
      height: 320px !important;
    }
  }

  /* Flickity core layout comes from vendor/flickity.min.css */
}

/* Testimonial carousel image slider - force Flickity viewport height
   Slides are absolutely positioned so Flickity calculates 0 height.
   This ensures the image column matches the quote column height. */
.lk-card-row .flickity-viewport,
[data-flickity*="asNavFor"] .flickity-viewport {
  min-height: 100%;
  height: 100% !important;
}

[data-flickity*="asNavFor"] .flickity-slider {
  height: 100%;
}

[data-flickity*="asNavFor"] .flickity-slider > * {
  height: 100% !important;
}

[data-flickity*="asNavFor"] {
  position: relative;
}

/* Flickity prev/next buttons (from Landkit _flickity.scss)
   Circular blue buttons positioned at card edges */
.flickity-button {
  position: absolute;
  top: 50%;
  width: 2.5rem;  /* 40px - matches original $input-height */
  height: 2.5rem;
  border-radius: 50%;
  background-color: #335eea;
  box-shadow: 0 0.5rem 1rem rgba(22, 28, 45, 0.1);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When Flickity should position controls relative to an outer wrapper.
   Use on the carousel element itself (matches bootstrap `.position-static`). */
.lk-flickity-position-static.flickity-enabled {
  position: static !important;
}

.flickity-button:hover {
  background-color: #274bc2;
  box-shadow: 0 0.5rem 1rem rgba(22, 28, 45, 0.15);
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.flickity-button-icon {
  fill: white;
  width: 20px;
  height: 20px;
}

/* Default: buttons hang outside (translate -50%/50%) */
.flickity-button.previous,
.flickity-prev-next-button.previous {
  left: 0;
  transform: translate(calc(-50% + 0.375rem), -50%);
}

.flickity-button.next,
.flickity-prev-next-button.next {
  right: 0;
  transform: translate(calc(50% - 0.375rem), -50%);
}

@media (min-width: 1024px) {
  .flickity-button.previous,
  .flickity-prev-next-button.previous {
    transform: translate(-50%, -50%);
  }
  .flickity-button.next,
  .flickity-prev-next-button.next {
    transform: translate(50%, -50%);
  }
}

/* Outside buttons, but avoid viewport clipping at mid breakpoints */
.lk-flickity-outside-safe .flickity-button.previous,
.lk-flickity-outside-safe .flickity-prev-next-button.previous {
  left: 0;
  transform: translate(-30%, -50%);
}

.lk-flickity-outside-safe .flickity-button.next,
.lk-flickity-outside-safe .flickity-prev-next-button.next {
  right: 0;
  transform: translate(30%, -50%);
}

@media (min-width: 1024px) {
  .lk-flickity-outside-safe .flickity-button.previous,
  .lk-flickity-outside-safe .flickity-prev-next-button.previous {
    transform: translate(-50%, -50%);
  }

  .lk-flickity-outside-safe .flickity-button.next,
  .lk-flickity-outside-safe .flickity-prev-next-button.next {
    transform: translate(50%, -50%);
  }
}

/* If buttons are rendered *inside* a clipping container (common on card shells),
   keep them inset so they aren't cut off by overflow-hidden. */
.overflow-hidden > .flickity-enabled > .flickity-button.previous,
.overflow-hidden > .flickity-enabled > .flickity-prev-next-button.previous {
  left: 0.75rem;
  transform: translate(0, -50%);
}

.overflow-hidden > .flickity-enabled > .flickity-button.next,
.overflow-hidden > .flickity-enabled > .flickity-prev-next-button.next {
  right: 0.75rem;
  transform: translate(0, -50%);
}

/* Button inset variant - buttons inside at 1.5rem from edges */
.flickity-button-inset .flickity-prev-next-button {
  transform: translateY(-50%);
}

.flickity-button-inset .flickity-prev-next-button.previous {
  left: 1.5rem;
}

.flickity-button-inset .flickity-prev-next-button.next {
  right: 1.5rem;
}

/* Hide default Flickity button text */
.flickity-button svg {
  display: block;
}

/* Flickity viewport overflow variant (from Landkit)
   Used on logo/case-study carousels to allow shadows to show. */
.flickity-viewport-visible .flickity-viewport {
  overflow: visible;
}

/* Flickity button color variants */
.flickity-button-white .flickity-button {
  background-color: #fff;
}

.flickity-button-white .flickity-button:hover {
  background-color: #f8f9fa;
}

.flickity-button-white .flickity-button-icon {
  fill: #335eea;
}

/* Flickity button positioning variants */
.flickity-button-bottom .flickity-button {
  top: auto;
  bottom: 0;
}

.flickity-button-bottom .flickity-prev-next-button.previous {
  transform: translate(calc(-50% + 0.375rem), 50%);
}

.flickity-button-bottom .flickity-prev-next-button.next {
  transform: translate(calc(50% - 0.375rem), 50%);
}

@media (min-width: 1024px) {
  .flickity-button-bottom .flickity-prev-next-button.previous {
    transform: translate(-50%, 50%);
  }
  .flickity-button-bottom .flickity-prev-next-button.next {
    transform: translate(50%, 50%);
  }
}