/* ==========================================================================
   JFI - Slider Galería Instalaciones — Mobile First
   Referencia el tema: tokens de css/tokens/*, tipografia Work Sans del tema y
   el boton global .Carousel__btn (css/theme-overrides.css). No duplica nada.
   Nota: usar --space-16/24/32/40 (los alias --space-4/--space-8 valen 4px/8px).
   ========================================================================== */

.slidergal {
  background: var(--Blanco-Primario, #ffffff);
  font-family: var(--font-family-base, "Work Sans"), sans-serif;
  /* --section-padding-x ya es responsive: 16px / 24px / 130px */
  padding: var(--space-40, 40px) var(--section-padding-x, 16px);
}

.slidergal__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24, 24px);
  max-width: 1180px;
  margin: 0 auto;
}

/* --------------------------------------------------------------- Encabezado */
.slidergal__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-header-gap, 10px);
  text-align: center;
  width: 100%;
}

.slidergal__title {
  margin: 0;
  color: var(--CTA-Primary-main, #003053);
  font-size: var(--font-size-xl, 22px);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-2xl, 26px);
  letter-spacing: var(--letter-spacing-tighter, -0.6px);
}

.slidergal__desc {
  color: var(--Body-Text, #505050);
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-lg, 24px);
  max-width: 820px;
}

.slidergal__desc :where(p) {
  margin: 0;
}

/* ------------------------------------------------------------------- Pista */
.slidergal__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-12, 12px);
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slidergal__grid::-webkit-scrollbar {
  display: none;
}

/* La pista es scrollable, asi que recibe foco de teclado: hay que verlo */
.slidergal__grid:focus-visible {
  outline: 3px solid var(--CTA-Primary-main, #003053);
  outline-offset: 4px;
}

.slidergal__slide {
  margin: 0;
  padding: 0;
  flex: 0 0 100%;              /* movil: 1 imagen a la vez */
  height: 250px;
  scroll-snap-align: start;
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  background: var(--Complementario-FONDO, #ededed);  /* placeholder al cargar */
}

.slidergal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --------------------------------------------------------------- Controles */
.slidergal__controls {
  display: flex;
  align-items: center;
  gap: var(--space-12, 12px);
  width: 100%;
}

/* .Carousel__btn (theme-overrides.css) aporta tamano, borde, fondo y color.
   OJO: async_defaults trae ".Carousel__btn { display:none }" sin prefijo de
   modulo (viene de _testimonios-destacados.css) y solo lo enciende en
   >=1200px. Como esa hoja carga despues del module.css, una sola clase
   empata y pierde: por eso estas reglas van calificadas con .slidergal.
   Aqui las flechas se ven en TODOS los viewports, como en la referencia. */
.slidergal .slidergal__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
}

.slidergal .slidergal__nav-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

/* El global fuerza opacity:1 en :disabled; aqui si queremos que se note. */
.slidergal .slidergal__nav-btn:disabled {
  opacity: 0.45;
}

.slidergal__pager-track {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: var(--c-border, #C3C6D4);
  overflow: hidden;
}

.slidergal__pager-bar {
  display: block;
  height: 2px;
  width: 25px;
  background: var(--CTA-Primary-main, #003053);
  transform: translateX(0);
  transition: transform 0.3s ease, width 0.3s ease;
}

/* ==========================================================================
   Tablet / Desktop (>=768px): 4 imagenes visibles, como en la referencia
   ========================================================================== */
@media (min-width: 768px) {
  .slidergal__slide {
    flex-basis: calc((100% - 3 * var(--space-12, 12px)) / 4);
    height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slidergal__grid {
    scroll-behavior: auto;
  }

  .slidergal__pager-bar {
    transition: none;
  }
}