/* =================================================================
   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)

   Slides: en «por item» (y legado sin data-uc-mode) cada slide = 100 % del track.
   En «por pasos» el ancho sigue al contenido (max 100 % del track); no forzar 100 % del track.
*/

/* 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;
  gap: var(--uc-slides-gap, 0px);
  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: ancho según modo (mismo contenedor que data-uc-mode para scroll-snap).
   - item + legado sin modo: un slide = 100 % del track (comportamiento original).
   - step: ancho al contenido (hasta 100 % track); permite desplazamiento por px sin “una diapositiva = todo el track”. */
.uc-carousel-container[data-uc-mode="item"] .uc-carousel__track > *,
[data-uc-carousel][data-uc-mode="item"] .uc-carousel__track > *,
.uc-carousel-container:not([data-uc-mode]) .uc-carousel__track > *,
[data-uc-carousel]:not([data-uc-mode]) .uc-carousel__track > * {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: visible;
}

.uc-carousel-container[data-uc-mode="step"] .uc-carousel__track > *,
[data-uc-carousel][data-uc-mode="step"] .uc-carousel__track > * {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: visible;
}

/* Fluid media inside slides (does not force crop; keeps aspect ratio) */
.uc-carousel__track > * img,
.uc-carousel__track > * video,
.uc-carousel__track > * svg,
.uc-carousel__track > * iframe {
  max-width: 100%;
  height: auto;
}

.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%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .uc-carousel-container .uc-carousel-dots__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    row-gap: 0.5rem;
    max-width: 100%;
    overflow: hidden;
    padding-left: var(--wp--style--root--padding-left, 1rem);
    padding-right: var(--wp--style--root--padding-right, 1rem);
  }

  .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);
  }

  /* En «por pasos» los puntos no alinean con “un slide = una pantalla”; ocultar. */
  .uc-carousel-container[data-uc-mode="step"] .uc-carousel-dots,
  [data-uc-carousel][data-uc-mode="step"] .uc-carousel-dots {
    display: none !important;
  }
}

/* scroll-snap — solo en modo «por item».
   En «por pasos» no hay snap para respetar data-uc-scroll (px) y anchos de slide al contenido. */
.uc-carousel-container[data-uc-mode="item"] .uc-carousel__track,
[data-uc-carousel][data-uc-mode="item"] .uc-carousel__track {
  scroll-snap-type: x mandatory;
}
.uc-carousel-container[data-uc-mode="item"] .uc-carousel__track > *,
[data-uc-carousel][data-uc-mode="item"] .uc-carousel__track > * {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.uc-carousel-container[data-uc-mode="step"] .uc-carousel__track,
[data-uc-carousel][data-uc-mode="step"] .uc-carousel__track {
  scroll-snap-type: none;
}
.uc-carousel-container[data-uc-mode="step"] .uc-carousel__track > *,
[data-uc-carousel][data-uc-mode="step"] .uc-carousel__track > * {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

/* Carruseles antiguos sin data-uc-mode en el contenedor → mismo comportamiento que item. */
.uc-carousel-container:not([data-uc-mode]) .uc-carousel__track,
[data-uc-carousel]:not([data-uc-mode]) .uc-carousel__track {
  scroll-snap-type: x mandatory;
}
.uc-carousel-container:not([data-uc-mode]) .uc-carousel__track > *,
[data-uc-carousel]:not([data-uc-mode]) .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 */