/* =================================================================
   UNIVERSAL CAROUSEL - WordPress Gutenberg Ready
   =================================================================

   HOW TO ADD MORE ITEMS:
   1. In WordPress Editor, select any carousel item column
   2. Click "Duplicate" to create identical column
   3. Edit content of the new column
   4. The carousel automatically adapts to any number of items

   CLASSES REQUIRED:
   - Container: .uc-carousel-container
   - Track: .platforms-grid.uc-carousel__track
   - Items: .platform-logo.uc-carousel__item

   Defaults can be overridden on the wrapper (.uc-carousel-container) via inline
   style in the editor, e.g. style="--uc-item-width:160px; --uc-track-gap:1.5rem;"
*/

/* Default values (sensible fallbacks) */
:root {
  --uc-carousel-nav-size: 44px;
  --uc-carousel-nav-bg: var(--white, var(--wp--preset--color--white, #ffffff));
  --uc-carousel-nav-border-width: 2px;
  /* Use theme primary color when available */
  --uc-carousel-nav-border-color: var(--primary-color, var(--wp--preset--color--primary, #003a9e));
  --uc-carousel-nav-color: var(--primary-color, var(--wp--preset--color--primary, #003a9e));
  --uc-carousel-nav-z: 20;
  /* Dots indicator colors - use theme variables */
  --uc-dot-inactive-color: color-mix(in srgb, var(--text-color, var(--wp--preset--color--text-main, #2b2b2b)) 20%, transparent);
  --uc-dot-inactive-hover: color-mix(in srgb, var(--text-color, var(--wp--preset--color--text-main, #2b2b2b)) 35%, transparent);
  --uc-dot-active-color: var(--secondary-color, var(--wp--preset--color--secondary, #004aad));
  --uc-dot-active-shadow: color-mix(in srgb, var(--secondary-color, var(--wp--preset--color--secondary, #004aad)) 15%, transparent);
}

/* Per-carousel overrides can be placed inline on `.uc-carousel-container` if needed
   using custom properties for navigation offset only. */

/* Prevent horizontal scroll on carousel containers */
[data-uc-carousel] {
  overflow: hidden !important; /* Prevent horizontal scroll on page */
  position: relative;
}

.uc-carousel-container {
  position: relative;
  overflow: hidden; /* Hide nav buttons that extend outside container to prevent horizontal scroll */
  width: 100%; /* Fill parent container - padding/margin controlled by editor */
}
.uc-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Gap respects WordPress editor settings - no hardcoded value */
  /* WordPress applies blockGap as inline style which has higher specificity */
}

/* Equalize item heights on desktop only - mobile keeps responsive behavior */
@media (min-width: 782px) {
  .uc-carousel__track {
    align-items: stretch; /* All items same height */
  }
}

.uc-carousel__item,
.platform-logo {
  /* Fallback for older markup */
  flex: 0 0 auto;
  /* No padding/margin hardcoded - respects editor spacing settings */
  /* Padding/margin should be applied via WordPress editor spacing controls */
}

/* Items adapt to gap automatically - flexbox handles spacing */
.uc-carousel__track > .uc-carousel__item,
.uc-carousel__track > .platform-logo {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* When gap is applied by WordPress, items adjust to show gap */
/* WordPress inline styles override gap: 0, and flexbox calculates item widths */
.uc-carousel__track[style*="gap"] > .uc-carousel__item,
.uc-carousel__track[style*="gap"] > .platform-logo,
.platforms-grid[style*="gap"] > .platform-logo {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}

.uc-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--uc-carousel-nav-size);
  height: var(--uc-carousel-nav-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--uc-carousel-nav-bg);
  border: var(--uc-carousel-nav-border-width) solid var(--uc-carousel-nav-border-color);
  border-radius: 50%;
  color: var(--uc-carousel-nav-color);
  z-index: var(--uc-carousel-nav-z);
  cursor: pointer;
  transition: transform 160ms ease, background 120ms ease;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  box-sizing: border-box;
}

.uc-carousel-nav:hover:not(:disabled) { 
  transform: translateY(-50%) scale(1.05); 
  background: var(--primary-color, var(--wp--preset--color--primary, var(--uc-carousel-nav-border-color))); 
  color: var(--white, var(--wp--preset--color--white, #ffffff)); 
}
.uc-carousel-nav:disabled { opacity: 0.45; cursor: default; }

/* Unified offsets controlled by a single variable on container scope */
.uc-carousel-container { --uc-carousel-nav-offset: 12px; }
.uc-carousel-nav--prev { left: var(--uc-carousel-nav-offset); }
.uc-carousel-nav--next { right: var(--uc-carousel-nav-offset); }

/* Tablet: slightly closer */
@media (max-width: 991px) and (min-width: 769px) {
  .uc-carousel-container { --uc-carousel-nav-offset: 8px; }
}

@media (max-width: 768px) { .uc-carousel-nav { display: none !important; } }

/* =================================================================
   DOTS INDICATORS - Mobile Only
   ================================================================= */

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

/* Show dots only on mobile */
@media (max-width: 768px) {
  .uc-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Padding top/bottom for visual spacing - can be overridden by editor */
    /* Using CSS variables with fallback, but editor inline styles will take precedence */
    padding-top: var(--wp--style--block-gap, var(--wp--custom--spacing--block-gap, 1rem));
    padding-bottom: calc(var(--wp--style--block-gap, var(--wp--custom--spacing--block-gap, 1rem)) * 0.5);
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .uc-carousel-dots__wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Horizontal padding for dots wrapper - minimal, can be overridden */
    padding-left: var(--wp--style--root--padding-left, 1rem);
    padding-right: var(--wp--style--root--padding-right, 1rem);
  }

  .uc-carousel-dots__wrapper::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .uc-carousel-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--uc-dot-inactive-color);
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: all 200ms ease;
    box-sizing: border-box;
  }

  .uc-carousel-dot:hover {
    background: var(--primary-color); 
  }

  .uc-carousel-dot--active {
    width: 12px;
    height: 12px;
    background: var(--uc-dot-active-color);
    box-shadow: 0 0 0 2px var(--uc-dot-active-shadow);
  }

  .uc-carousel-dot--active:hover {
    background: var(--uc-dot-active-color);
  }

  /* Fallback for browsers that don't support color-mix */
  @supports not (color-mix(in srgb, black, white)) {
    .uc-carousel-dot {
      background: rgba(43, 43, 43, 0.2); /* 20% of --text-color (#2b2b2b) */
    }
    .uc-carousel-dot:hover {
      background: rgba(43, 43, 43, 0.35); /* 35% of --text-color (#2b2b2b) */
    }
    .uc-carousel-dot--active {
      box-shadow: 0 0 0 2px rgba(0, 74, 173, 0.15); /* 15% of --secondary-color (#004aad) */
    }
  }
}

/* `.platforms-grid` shares behavior via `.uc-carousel__track` rules above */

/* scroll-snap */
.uc-carousel__track, .platforms-grid { scroll-snap-type: x mandatory; }
.uc-carousel__item, .platform-logo { scroll-snap-align: start; scroll-snap-stop: always; }

/* Hide native scrollbars while preserving scroll functionality */
.uc-carousel__track,
.platforms-grid {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.uc-carousel__track::-webkit-scrollbar,
.platforms-grid::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  height: 0;
}

/* Single item layout handled by the rule above */

/* Container padding and margin - respect editor settings */
/* WordPress editor will apply padding/margin via inline styles or spacing classes */
/* Do not hardcode padding/margin here to allow editor control */