/* elenco-raccolta: CSS delle composizioni, portato dallo <style> dei componenti Astro (src/sezioni/elenco-raccolta/) e limitato alla classe della sezione. */

/* elenco-raccolta/Righe.astro → .b-elenco-raccolta-righe */
  .servizi.b-elenco-raccolta-righe { position: relative; z-index: 5; padding: clamp(72px, 14vh, 140px) var(--margine); }
  .b-elenco-raccolta-righe .servizi-testa { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 6vh, 56px); }
  .b-elenco-raccolta-righe .servizi-testa h2 { font-size: var(--scala-3); }
  .b-elenco-raccolta-righe .servizi-testa p { color: var(--salvia-chiara); max-width: 30ch; text-align: right; }
  .b-elenco-raccolta-righe .righe { list-style: none; margin: 0; padding: 0; }
  .b-elenco-raccolta-righe .riga { position: relative; display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: center; gap: 24px; padding: clamp(18px, 3vh, 30px) 0; text-decoration: none; transition: opacity .3s; }
  .b-elenco-raccolta-righe .righe:hover .riga:not(:hover) { opacity: .45; }
  .b-elenco-raccolta-righe .riga:focus-visible { outline-offset: 6px; }
  .b-elenco-raccolta-righe .riga-nome { font: 600 clamp(1.7rem, 4.2vw, var(--scala-5))/1 var(--font-titoli); letter-spacing: -0.025em; }
  .b-elenco-raccolta-righe .riga-per { color: var(--salvia-chiara); }
  .b-elenco-raccolta-righe .riga-freccia { font-size: 1.6rem; }
  .b-elenco-raccolta-righe .riga svg.filo { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 14px; overflow: visible; }
  .b-elenco-raccolta-righe .riga svg.filo path { fill: none; stroke: var(--extra-salvia); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .b-elenco-raccolta-righe .riga-mini { display: none; }
  .b-elenco-raccolta-righe .servizi-tutte { display: inline-block; margin-top: 28px; }
  .b-elenco-raccolta-righe .bolla-segue { position: absolute; left: 0; top: 0; width: 220px; height: 220px; margin: -110px 0 0 -110px; pointer-events: none; z-index: 2; transform: scale(0); }
  .b-elenco-raccolta-righe .bolla-segue img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--testo-su-scuro); }
  @media (max-width: 700px) {
    .b-elenco-raccolta-righe .servizi-testa { flex-direction: column; align-items: start; }
    .b-elenco-raccolta-righe .servizi-testa p { text-align: left; }
    .b-elenco-raccolta-righe .riga { grid-template-columns: 56px 1fr auto; gap: 4px 14px; }
    .b-elenco-raccolta-righe .riga-mini { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; grid-row: span 2; }
    .b-elenco-raccolta-righe .riga-per { grid-column: 2; font-size: .9rem; }
    .b-elenco-raccolta-righe .riga-freccia { grid-row: 1; grid-column: 3; margin-right: 64px; }
    .b-elenco-raccolta-righe .bolla-segue { display: none; }
  }

/* elenco-raccolta/Nomi.astro → .b-elenco-raccolta-nomi */
  .nomi.b-elenco-raccolta-nomi { padding: clamp(56px, 11vh, 110px) var(--margine) clamp(64px, 12vh, 120px); }
  .b-elenco-raccolta-nomi .nomi-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding-top: 16px; margin-bottom: clamp(16px, 3vh, 32px); border-top: 1.5px solid var(--testo); }
  .b-elenco-raccolta-nomi .nomi-testa h2 { color: var(--testo-secondario); margin-right: auto; }
  .b-elenco-raccolta-nomi .nomi-nota { color: var(--testo-secondario); }
  .b-elenco-raccolta-nomi .nomi-testa .link-freccia { text-underline-offset: 4px; }
  .b-elenco-raccolta-nomi .nomi-lista {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .12em calc(1.3em + 4px); margin: 0; padding: 0;
    font: var(--peso-titoli) clamp(1.9rem, 4vw, var(--scala-4))/1.1 var(--font-titoli); letter-spacing: -0.03em;
  }
  .b-elenco-raccolta-nomi .nomi-lista li { position: relative; display: flex; align-items: baseline; }
  /* Fra un nome e l'altro una bolla, al centro dello spazio a sinistra di ogni nome (.5em, bolla, .5em). Il primo nome di ogni riga ha la bolla
     fuori dal bordo sinistro della lista, e overflow-x: clip la taglia: nessuna bolla resta sola a inizio o fine riga. */
  .b-elenco-raccolta-nomi .nomi-lista { overflow-x: clip; }
  .b-elenco-raccolta-nomi .nomi-lista li:not(:first-child)::before { content: ""; position: absolute; left: calc(-.8em - 4px); top: 50%; width: .3em; height: .3em; translate: 0 -50%; border-radius: 50%; border: 2px solid var(--extra-salvia); }
  .b-elenco-raccolta-nomi .nome { position: relative; color: var(--titoli); text-decoration: none; }
  .b-elenco-raccolta-nomi .nome:focus-visible { outline-offset: 6px; }
  .b-elenco-raccolta-nomi .filo { position: absolute; left: 0; bottom: -.16em; width: 100%; height: 14px; overflow: visible; opacity: 0; pointer-events: none; }
  .b-elenco-raccolta-nomi .filo path { fill: none; stroke: var(--accento); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .b-elenco-raccolta-nomi .nome:hover .filo, .b-elenco-raccolta-nomi .nome:focus-visible .filo { opacity: 1; }
  .b-elenco-raccolta-nomi .nome:hover .filo path, .b-elenco-raccolta-nomi .nome:focus-visible .filo path { animation: nomi-ondeggia 1.1s cubic-bezier(.3, 0, .2, 1) both; }
  /* Su mobile i nomi vanno a capo da soli: uno per riga, senza bolle in mezzo. */
  @media (max-width: 700px) {
    .b-elenco-raccolta-nomi .nomi-lista { flex-direction: column; gap: .28em; }
    .b-elenco-raccolta-nomi .nomi-lista li::before { display: none; }
  }
  @keyframes nomi-ondeggia {
    0% { d: path("M0 7 Q 25 0 50 7 T 100 7 T 150 7 T 200 7"); }
    35% { d: path("M0 7 Q 25 13 50 7 T 100 7 T 150 7 T 200 7"); }
    65% { d: path("M0 7 Q 25 3 50 7 T 100 7 T 150 7 T 200 7"); }
    100% { d: path("M0 7 Q 25 7 50 7 T 100 7 T 150 7 T 200 7"); }
  }