/* ==========================================================================
   Customer Story Home — 85:7880 · 1512 x 945
   Istanza del componente 85:7789, variant story = "01".
   Flusso verticale: 160 + 58 (titolo) + 80 + 400 (Recensione) + 80 + 8
                     (Mover) + 160 = 946 contro i 945 dichiarati da Figma.
   Il delta di 1px e l'arrotondamento del box del titolo (57,x -> 58):
   l'altezza e quindi FISSATA a 945 come da spec 05 §1.2, il pixel in piu
   sconfina impercettibilmente nel padding inferiore.
   Base .section + .section--narrative (1512 largo, padding 160/40, column,
   align-items center).
   ========================================================================== */

.story {
  height: 945px;                           /* altezza dichiarata dal frame */
  gap: var(--space-6);                     /* 80px — gap dell'auto-layout 85:7880 */
  background: var(--color-neutral-100);    /* #f5f5f5, tinta piatta */
  color: var(--text-on-light);
}

/* --- Titolo I85:7880;85:7774 — 48/58, #00122b, box 1432 x 58, 1 riga ------ */
.story__h2 {
  width: var(--container-width);
  color: var(--color-tertiary);
  text-align: center;
}

/* --- Recensione I85:7880;85:7775 — 1432 x 400 -----------------------------
   row, items-center, justify-center, gap 16, padding 0.
   I tre figli sono align-self: stretch -> altezza 400 piena. */
.story__row {
  width: var(--container-width);
  height: 400px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--grid-gap);                    /* 16px */
}

/* Immagine I85:7880;85:7776 — 346 x 400, radius 16, clip content.
   Fill raster scalato a height 118.64% / top -4.04%, width 100%:
   con l'asset reale -> object-fit: cover; object-position: center top. */
.story__photo {
  width: var(--col-1);                     /* 346px */
  height: 400px;
  flex: 0 0 auto;
  align-self: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- Le due card bianche ---------------------------------------------------
   Stessa ricetta: #fff, radius 16, padding 40, column, items-flex-start,
   justify-content: space-between, altezza piena 400. */
.story-card {
  height: 400px;
  align-self: stretch;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);                 /* 40px su tutti i lati */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

/* Card Testiomonianza I85:7880;85:7777 — 708 x 400, flex: 1 0 0 */
.story-card--quote {
  flex: 1 0 0;
  min-width: 0;
}

/* Quote I85:7880;85:7778 — 24/29 (.t-h4), #00122b, box 628 x 174 = 6 righe.
   628 = 708 - 2*40. Nessun hard break: il wrapping e naturale. */
.story-card__quote {
  width: 628px;
  margin: 0;
  color: var(--color-tertiary);
  text-align: left;
}

/* Autore I85:7880;85:7779 — 16/19, #525e6f, box 628 x 19 */
.story-card__author {
  width: 628px;
  color: var(--text-on-light-muted);       /* #525e6f — Tertiaty/300 */
  text-align: left;
}

/* Card Recap I85:7880;85:7780 — 346 x 400, larghezza fissa */
.story-card--recap {
  width: var(--col-1);                     /* 346px */
  flex: 0 0 auto;
}

/* Logo Iren I85:7880;85:7781 — 43.823 x 24, radius 0, object-fit: cover.
   43.823px e il valore Figma esatto (43.8231124877929690), non arrotondato. */
.story-card__logo {
  width: 43.823px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: var(--radius-none);
}

/* Recap I85:7880;85:7782 — 16/19, #525e6f, box 266 x 95 = 5 righe.
   266 = 346 - 2*40. */
.story-card__recap {
  width: 266px;
  color: var(--text-on-light-muted);
  text-align: left;
}

/* --- Mover I85:7880;85:7783 — 88 x 8, row, items-center, gap 8 -----------
   Il gap dell'auto-layout di sezione (80) lo separa dalla Recensione. */
.story__mover {
  width: 88px;
  height: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);                     /* 8px */
}

/* Pallini inattivi 85:7785 / 85:7786 / 85:7787 — 8 x 8, #d2d2d2, radius 40 */
.story__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: var(--radius-pill);       /* 40px */
  background: var(--color-neutral-300);    /* #d2d2d2 — Neutrals/300 */
  cursor: pointer;
}

/* Pallino attivo 85:7784 — pill 40 x 8, gradiente 90deg #00122b -> #29384d.
   Non interattivo: e uno <span> con aria-current, non un bottone. */
.story__dot--active {
  width: 40px;
  background: var(--gradient-mover);
  cursor: default;
}

/* Focus — NON presente nel design Figma: aggiunto per accessibilita. */
.story__dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }