/* =================================================================
   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 (con data-uc-carousel="true")
   - Track: .uc-carousel__track
   - Items: Cualquier hijo directo del track (automático con InnerBlocks)

   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 */
  --uc-dot-inactive-color: rgba(0, 0, 0, 0.25);
  --uc-dot-active-color: var(--primary-color, var(--wp--preset--color--primary, #003a9e));
}

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

/* Block wrapper + container: always fit parent (flex/grid/block). No horizontal overflow. */
.wp-block-design-toolkit-carousel,
.uc-carousel-container,
[data-uc-carousel] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
.uc-carousel-container,
[data-uc-carousel] {
  position: relative;
  overflow: hidden !important;
}

/* Inside body .is-layout-flex: flex container clips overflow; flex item (carousel) shrinks. */
body .is-layout-flex:has(.wp-block-design-toolkit-carousel) {
  overflow-x: hidden;
  min-width: 0;
}
body .is-layout-flex .wp-block-design-toolkit-carousel,
body .is-layout-flex .uc-carousel-container,
body .is-layout-flex [data-uc-carousel] {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
}

@media (max-width: 768px) {
  .wp-block-design-toolkit-carousel,
  .uc-carousel-container,
  [data-uc-carousel] {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* Constrain all ancestor block elements containing a carousel to viewport width.
     Prevents parent flex/columns layouts from expanding beyond viewport on mobile. */
  body .wp-block-group:has(.wp-block-design-toolkit-carousel),
  body .wp-block-columns:has(.wp-block-design-toolkit-carousel),
  body .wp-block-column:has(.wp-block-design-toolkit-carousel),
  body .is-layout-flex:has(.wp-block-design-toolkit-carousel) {
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden;
  }
}

.uc-carousel__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

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

/* Items del carrusel - funcionan automáticamente con cualquier bloque de WordPress */
/* Por defecto: items ocupan 100% del ancho (sin scroll) */
.uc-carousel__track > * {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Cuando hay gap aplicado por WordPress, items respetan su contenido (con scroll) */
/* WordPress aplica gap como estilo inline, lo que tiene mayor especificidad */
.uc-carousel__track[style*="gap"] > * {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}

.uc-carousel-container .uc-carousel-nav {
  position: absolute;
  top: var(--uc-carousel-nav-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) !important;
  border: var(--uc-carousel-nav-border-width) solid var(--uc-carousel-nav-border-color) !important;
  border-radius: 50%;
  color: var(--uc-carousel-nav-color) !important;
  z-index: var(--uc-carousel-nav-z);
  cursor: pointer;
  transition: transform 160ms ease, background 120ms ease, color 120ms ease;
  font-weight: 700;
  font-size: calc(var(--uc-carousel-nav-size) * 0.41);
  line-height: 1;
  box-sizing: border-box;
}

.uc-carousel-container .uc-carousel-nav:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.05);
  background: var(--uc-carousel-nav-hover-bg, var(--uc-carousel-nav-border-color)) !important;
  color:      var(--uc-carousel-nav-hover-color, var(--uc-carousel-nav-bg)) !important;
}
.uc-carousel-container .uc-carousel-nav:disabled { opacity: 0.45; cursor: default; }

.uc-carousel-container .uc-carousel-nav--prev { left: var(--uc-carousel-nav-offset, 12px); }
.uc-carousel-container .uc-carousel-nav--next { right: var(--uc-carousel-nav-offset, 12px); }

/* 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-container .uc-carousel-nav { display: var(--uc-mobile-nav-display, none) !important; } }

@media (max-width: 768px) {
  .uc-carousel-container .uc-carousel-nav {
    width:        var(--uc-mobile-nav-size,         var(--uc-carousel-nav-size)) !important;
    height:       var(--uc-mobile-nav-size,         var(--uc-carousel-nav-size)) !important;
    font-size:    calc(var(--uc-mobile-nav-size,    var(--uc-carousel-nav-size)) * 0.41);
    top:          var(--uc-mobile-nav-top,          50%);
    border-width: var(--uc-mobile-nav-border-width, var(--uc-carousel-nav-border-width)) !important;
  }
  .uc-carousel-container .uc-carousel-nav--prev {
    left:  var(--uc-mobile-nav-offset, var(--uc-carousel-nav-offset));
  }
  .uc-carousel-container .uc-carousel-nav--next {
    right: var(--uc-mobile-nav-offset, var(--uc-carousel-nav-offset));
  }
}

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

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

/* Show dots only on mobile */
@media (max-width: 768px) {
  .uc-carousel-container .uc-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: var(--uc-dots-gap, 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-container .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;
    padding-left: var(--wp--style--root--padding-left, 1rem);
    padding-right: var(--wp--style--root--padding-right, 1rem);
  }

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

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

  .uc-carousel-container .uc-carousel-dot--active {
    width: calc(var(--uc-dot-size, 8px) + 4px);
    height: calc(var(--uc-dot-size, 8px) + 4px);
    background: var(--uc-dot-active-color) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
  }
}

/* scroll-snap */
.uc-carousel__track { scroll-snap-type: x mandatory; }
.uc-carousel__track > * { scroll-snap-align: start; scroll-snap-stop: always; }

/* Hide native scrollbars while preserving scroll functionality */
.uc-carousel__track {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.uc-carousel__track::-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 */