/**
 * CSS Carousel — Stylesheet
 *
 * Architettura custom properties:
 *   --cc-spv       : slides per view (unitless, da control Bricks)
 *   --cc-gap       : gap in px unitless → usa * 1px nel calc()
 *   --cc-px        : lateral padding unitless → usa * 1px nel calc()
 *   --cc-sb-h      : scrollbar height unitless
 *   --cc-sb-track  : scrollbar track color
 *   --cc-sb-thumb  : scrollbar thumb color
 *   --cc-sb-r      : scrollbar radius unitless
 *   --cc-arrow-*   : arrow design tokens
 *   --cc-dot-*     : dot design tokens
 *
 * I valori unitless vengono moltiplicati per 1px via calc() per convertirli
 * in lunghezze CSS senza richiedere logica PHP aggiuntiva.
 *
 * @package ChildTheme
 * @since   1.0.0
 */

/* ── Default tokens ──────────────────────────────────────────────────────── */

.brx-css-carousel {
  --cc-spv:       3;
  --cc-gap:       24;
  --cc-px:        0;
  --cc-sb-h:      4;
  --cc-sb-track:  transparent;
  --cc-sb-thumb:  #1a1a1a;
  --cc-sb-r:      99;
  --cc-arrow-size:  44;
  --cc-arrow-color: #1a1a1a;
  --cc-arrow-bg:    #ffffff;
  --cc-arrow-r:     99;
  --cc-dot-size:    8;
  --cc-dot-gap:     6;
  --cc-dot-color:   #cccccc;
  --cc-dot-active:  #1a1a1a;

  position: relative;
}

/* ── Track (contenitore scrollabile) ─────────────────────────────────────── */

.brx-css-carousel__track {
  display: flex;
  gap: calc(var(--cc-gap) * 1px);
  padding-inline: calc(var(--cc-px) * 1px);

  overflow-x: auto;
  overflow-y: hidden;

  /* GPU hint per scroll fluido */
  will-change: scroll-position;
}

/* ── Scrollbar: nasconde nativa, usa custom HTML ─────────────────────────── */

/*
 * ::-webkit-scrollbar è inconsistente: thumb e track non garantiscono
 * la stessa altezza tra browser. Si usa una scrollbar HTML custom
 * (due div normali) sincronizzata via JS, che garantisce parità assoluta.
 */

.brx-css-carousel__track {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge legacy */
}

.brx-css-carousel__track::-webkit-scrollbar {
  display: none;               /* Chrome/Safari/Opera */
}

/* Track custom */
.brx-css-carousel__scrollbar {
  position: relative;
  height: calc(var(--cc-sb-h) * 1px);
  background: var(--cc-sb-track);
  border-radius: calc(var(--cc-sb-r) * 1px);
  margin-top: 10px;
  cursor: pointer;
  overflow: hidden;
}

/* Thumb custom: height: 100% = stessa altezza del track, garantita */
.brx-css-carousel__scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--cc-sb-thumb);
  border-radius: calc(var(--cc-sb-r) * 1px);
  cursor: grab;
  transition: background 0.2s ease;
  /* width e transform impostati da JS */
  will-change: transform;
}

.brx-css-carousel__scrollbar-thumb:active,
.brx-css-carousel__scrollbar--dragging .brx-css-carousel__scrollbar-thumb {
  cursor: grabbing;
}

/* ── Track: forza layout orizzontale ─────────────────────────────────────── */

/*
 * flex-wrap: nowrap è essenziale: Bricks può impostare flex-wrap su elementi
 * figlio che altrimenti andrebbero a capo invece di scorrere.
 */
.brx-css-carousel__track {
  flex-wrap: nowrap !important;
  cursor: grab;
  user-select: none;
}

.brx-css-carousel__track--dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Durante il drag, disabilita pointer-events su tutti i figli:
   impedisce che immagini, link e altri elementi intercettino
   il mousemove e interrompano lo scroll */
.brx-css-carousel__track--dragging * {
  pointer-events: none !important;
  cursor: grabbing !important;
}

/* Previene il drag nativo del browser sulle immagini */
.brx-css-carousel__track img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* ── Slide ───────────────────────────────────────────────────────────────── */

/*
 * Targetiamo con > * TUTTI i figli diretti del track (non solo .brx-css-carousel__slide)
 * perché Bricks aggiunge classi proprie (brxe-xxxxxxxx) agli elementi e applica
 * stili di layout che sovrascrivono le nostre regole flex-child.
 * Seletor doppio (classe + universale) per coprire entrambi i casi.
 *
 * Formula larghezza:
 *   totalGaps    = (spv - 1) * gap
 *   totalPadding = 2 * paddingX
 *   slideWidth   = (trackWidth - totalGaps - totalPadding) / spv
 */

.brx-css-carousel__track > *,
.brx-css-carousel__slide {
  --_gaps: calc((var(--cc-spv) - 1) * var(--cc-gap) * 1px);
  --_pad:  calc(2 * var(--cc-px) * 1px);

  /* Override stili Bricks su elementi figlio */
  flex: 0 0 calc((100% - var(--_gaps) - var(--_pad)) / var(--cc-spv)) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
.brx-css-carousel__slide--overflow-hidden {
  overflow: hidden;
}

/* ── Arrows: base ────────────────────────────────────────────────────────── */

.brx-css-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  calc(var(--cc-arrow-size) * 1px);
  height: calc(var(--cc-arrow-size) * 1px);
  border-radius: calc(var(--cc-arrow-r) * 1px);
  border: none;
  background: var(--cc-arrow-bg);
  color: var(--cc-arrow-color);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.brx-css-carousel__arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.brx-css-carousel__arrow:hover:not(:disabled) {
  transform: scale(1.06);
}

.brx-css-carousel__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Ombra opzionale (modifier class dal PHP) */
.brx-css-carousel--arrow-shadow .brx-css-carousel__arrow {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* ── Arrows: inside (overlay centrato sul track) ─────────────────────────── */

.brx-css-carousel--arrows-inside .brx-css-carousel__arrow {
  position: absolute;
  top: 50%;
  /* Sottraiamo metà scrollbar + padding per centrare visivamente sul track */
  transform: translateY(calc(-50% - var(--cc-sb-h) * 0.5px - 5px));
  z-index: 2;
}

.brx-css-carousel--arrows-inside .brx-css-carousel__arrow--prev {
  left: calc(var(--cc-px) * 1px + 8px);
}

.brx-css-carousel--arrows-inside .brx-css-carousel__arrow--next {
  right: calc(var(--cc-px) * 1px + 8px);
}

.brx-css-carousel--arrows-inside .brx-css-carousel__arrow:hover:not(:disabled) {
  transform: translateY(calc(-50% - var(--cc-sb-h) * 0.5px - 5px)) scale(1.06);
}

/* ── Arrows: outside (ai lati del track) ────────────────────────────────── */

/*
 * Layout con CSS Grid: [arrow-prev] [track] [arrow-next]
 * Le righe sono: 1 = contenuto, 2 = dots (se presenti)
 * Il DOM è: track → arrow-prev → arrow-next → dots
 * CSS Grid riordina visivamente tramite grid-column/row.
 */

.brx-css-carousel--arrows-outside {
  display: grid;
  grid-template-columns: calc(var(--cc-arrow-size) * 1px + 16px) 1fr calc(var(--cc-arrow-size) * 1px + 16px);
  grid-template-rows: auto auto;
  align-items: center;
}

.brx-css-carousel--arrows-outside .brx-css-carousel__track {
  grid-column: 2;
  grid-row: 1;
}

.brx-css-carousel--arrows-outside .brx-css-carousel__arrow--prev {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
}

.brx-css-carousel--arrows-outside .brx-css-carousel__arrow--next {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
}

.brx-css-carousel--arrows-outside .brx-css-carousel__dots {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* ── Dots ────────────────────────────────────────────────────────────────── */

.brx-css-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cc-dot-gap) * 1px);
  padding-top: 16px;
}

.brx-css-carousel__dot {
  width:  calc(var(--cc-dot-size) * 1px);
  height: calc(var(--cc-dot-size) * 1px);
  border-radius: 99px;
  border: none;
  background: var(--cc-dot-color);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.brx-css-carousel__dot--active {
  background: var(--cc-dot-active);
  transform: scale(1.25);
}

.brx-css-carousel__dot:focus-visible {
  outline: 2px solid var(--cc-dot-active);
  outline-offset: 2px;
}