.lgv-recognition-slider {
  --lgv-background: #f3f1ea;
  --lgv-blue: #06349a;
  --lgv-yellow: #ffed00;
  --lgv-muted: #706f6a;
  --lgv-border: rgba(6, 52, 154, 0.16);
  width: 100%;
  overflow: hidden;
  background: var(--lgv-background);
  color: var(--lgv-blue);
}

.lgv-recognition-slider,
.lgv-recognition-slider * {
  box-sizing: border-box;
}

.lgv-recognition-inner {
  width: 100%;
  max-width: 1390px;
  margin: 0 auto;
  padding: 32px 60px 25px;
}

.lgv-slider {
  display: grid;
  width: 100%;
  min-height: 132px;
  /* Il gesto in orizzontale cambia citazione (recognition-slider.js),
     quello in verticale resta allo scorrimento della pagina. */
  touch-action: pan-y;
}

.lgv-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  pointer-events: none;
  transition-property: opacity, transform, visibility;
  transition-duration: var(--lgv-transition-speed, 550ms);
  transition-timing-function: ease, cubic-bezier(0.22, 1, 0.36, 1), ease;
}

.lgv-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.lgv-slide.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: translateX(-30px);
}

.lgv-slide-content {
  width: 100%;
  max-width: 1120px;
  padding: 4px 0;
}

.lgv-slide-category {
  display: block;
  margin-bottom: 8px;
  color: var(--lgv-blue);
  font-family: var(--e-global-typography-text-font-family, Arial), Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lgv-slide blockquote {
  max-width: 1100px;
  margin: 0;
  color: var(--lgv-blue);
  font-family: "Libre Bodoni", "Bodoni MT", Didot, Georgia, serif;
  font-size: clamp(30px, 2.65vw, 43px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.lgv-recognition-slider.has-quote-marks blockquote::before,
.lgv-recognition-slider.has-quote-marks blockquote::after {
  color: rgba(6, 52, 154, 0.38);
  font-family: "Libre Bodoni", "Bodoni MT", Didot, Georgia, serif;
  font-size: 1.08em;
  font-weight: 500;
  line-height: 0;
  vertical-align: -0.04em;
}

.lgv-recognition-slider.has-quote-marks blockquote::before {
  content: "“";
  margin-right: 0.06em;
}

.lgv-recognition-slider.has-quote-marks blockquote::after {
  content: "”";
  margin-left: 0.04em;
}

.lgv-slide-source {
  display: block;
  margin-top: 12px;
  color: var(--lgv-muted);
  font-family: var(--e-global-typography-text-font-family, Arial), Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lgv-slider-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--lgv-border);
}

.lgv-slider-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lgv-slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(6, 52, 154, 0.32);
  border-radius: 50%;
  background: transparent;
  color: var(--lgv-blue);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 520ms ease, color 520ms ease;
}

/* Al passaggio il colore scende dall'alto con un piccolo rimbalzo, come nei
   bottoni del tema finwave: è l'effetto unico dei bottoni del sito (22/10/2026).
   Il colore del riempimento si sceglie nel pannello (Navigazione → Hover →
   Sfondo), che lo scrive su ::after. */
.lgv-slider-arrow::after,
.lgv-recognition-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate3d(0, -100%, 0);
  transition: transform 520ms ease;
}
.lgv-slider-arrow::after {
  background-color: var(--lgv-yellow);
}

/* Lo sfondo resta trasparente: il tema dà a ogni `button:hover` il blu
   primario, che spunterebbe sotto il riempimento mentre scende. */
.lgv-slider-arrow:hover,
.lgv-slider-arrow:focus-visible {
  background-color: transparent;
  border-color: var(--lgv-yellow);
  color: var(--lgv-blue);
  outline: none;
}

.lgv-slider-arrow:hover::after,
.lgv-slider-arrow:focus-visible::after,
.lgv-recognition-button:hover::after,
.lgv-recognition-button:focus-visible::after {
  transform: translate3d(0, 0, 0);
  transition: transform 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.lgv-slider-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 68px;
  color: var(--lgv-blue);
  font-family: var(--e-global-typography-text-font-family, Arial), Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.lgv-counter-line {
  width: 20px;
  height: 1px;
  background: rgba(6, 52, 154, 0.24);
}

.lgv-total-slides {
  color: rgba(6, 52, 154, 0.48);
}

.lgv-recognition-button {
  display: inline-flex;
  align-items: center;
  /* centro e non space-between (10/11/2026): su telefono il bottone è largo
     quanto lo schermo e la freccia deve restare accanto al testo, come nei
     bottoni rt-button del tema («Chi siamo», «Il team»). */
  justify-content: center;
  gap: 24px;
  min-width: 245px;
  min-height: 47px;
  padding: 14px 22px;
  background: var(--lgv-yellow);
  border: 1px solid var(--lgv-yellow);
  border-radius: 8px;
  color: var(--lgv-blue);
  text-decoration: none;
  font-family: var(--e-global-typography-accent-font-family, Arial), Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 520ms ease, color 520ms ease;
}

.lgv-recognition-button::after {
  background-color: var(--lgv-blue);
}

.lgv-button-label {
  white-space: nowrap;
}

.lgv-button-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.3s ease-in-out;
}

.lgv-recognition-button:hover,
.lgv-recognition-button:focus-visible {
  border-color: var(--lgv-blue);
  color: #fff;
  outline: none;
}

.lgv-recognition-button:hover .lgv-button-arrow,
.lgv-recognition-button:focus-visible .lgv-button-arrow {
  transform: translateX(5px);
}

@media (max-width: 1024px) {
  .lgv-recognition-inner {
    padding: 30px 35px 25px;
  }

  .lgv-slider {
    min-height: 145px;
  }

  .lgv-slide blockquote {
    font-size: clamp(29px, 3.7vw, 39px);
  }
}

@media (max-width: 767px) {
  .lgv-recognition-inner {
    padding: 28px 20px 24px;
  }

  /* Su telefono l'altezza la scrive recognition-slider.js: è quella della
     citazione mostrata, così le frecce stanno subito sotto il testo
     (13/11/2026; prima 220px fissi e poi la citazione più lunga, con un
     vuoto di oltre 100px sotto quelle brevi). «Altezza minima area
     citazione» del widget, su mobile, resta il limite inferiore.
     Il taglio in verticale nasconde la citazione che esce mentre l'altezza
     si riduce; in orizzontale resta libera per lo scorrimento. */
  .lgv-slider {
    min-height: 0;
    overflow-x: visible;
    overflow-y: clip;
  }

  .lgv-slider.is-fitted {
    transition: height var(--lgv-transition-speed, 550ms) cubic-bezier(0.22, 1, 0.36, 1);
  }

  .lgv-slide {
    align-items: flex-start;
    transform: translateX(20px);
  }

  .lgv-slide.is-leaving {
    transform: translateX(-20px);
  }

  .lgv-slide blockquote {
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.08;
  }

  .lgv-slider-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
  }

  .lgv-recognition-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lgv-slider.is-fitted,
  .lgv-slide,
  .lgv-slider-arrow,
  .lgv-recognition-button,
  .lgv-button-arrow {
    transition: none;
  }
}