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

/* galleria/Fila.astro → .b-galleria-fila */
  .lavori.b-galleria-fila { padding: clamp(80px, 16vh, 160px) 0 clamp(64px, 12vh, 120px); }
  .b-galleria-fila .lavori-testa { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline; padding: 0 var(--margine); margin-bottom: 28px; }
  .b-galleria-fila .lavori-testa h2 { font-size: var(--scala-3); color: var(--titoli); }
  .b-galleria-fila .lavori-social { display: flex; gap: 20px; }
  .b-galleria-fila .lavori-social a { text-underline-offset: 4px; }
  .b-galleria-fila .fila { overflow-x: auto; scrollbar-width: none; cursor: grab; }
  .b-galleria-fila .fila::-webkit-scrollbar { display: none; }
  .b-galleria-fila .fila:focus-visible { outline-offset: -3px; }
  .b-galleria-fila .fila-binario { display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 28px); padding: 0 var(--margine); width: max-content; }
  .b-galleria-fila .fila figure { margin: 0; }
  .b-galleria-fila .fila img { -webkit-user-drag: none; user-select: none; }
  .b-galleria-fila .fila .foto { border-radius: var(--raggio); transition: transform .5s var(--ease-entrata); }
  .b-galleria-fila .fila figure:hover .foto { transform: scale(1.04); }
  .b-galleria-fila .fila figcaption { margin-top: 10px; }
  .b-galleria-fila .f1 .foto { height: 54svh; aspect-ratio: 4 / 5; }
  .b-galleria-fila .f2 .foto { height: 40svh; aspect-ratio: 16 / 10; }
  .b-galleria-fila .f3 .foto { height: 60svh; aspect-ratio: 3 / 4; }
  .b-galleria-fila .f4 .foto { height: 46svh; aspect-ratio: 16 / 10; }

/* galleria/PrimaDopo.astro → .b-galleria-prima-dopo */
  .b-galleria-prima-dopo .pd-scena { display: grid; place-items: center; overflow: hidden; background: inherit; padding: clamp(64px, 12vh, 120px) var(--margine); }
  .b-galleria-prima-dopo .pd-cornice { width: 100%; }
  /* La scena fissata occupa uno schermo; sotto la testata, che resta sopra. */
  html.motore-pronto .b-galleria-prima-dopo .pd-scena:has(.pd:not(.affiancate, .sola)) { min-height: 100svh; padding: calc(var(--testata) + 12px) var(--margine) 28px; }

  /* Senza motore e con movimento ridotto: le due foto affiancate, il prima a sinistra. */
  .b-galleria-prima-dopo .pd { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "prima dopo"; gap: 8px; }
  .b-galleria-prima-dopo .pd.sola { grid-template-columns: 1fr; grid-template-areas: "prima"; }
  .b-galleria-prima-dopo .pd .foto { aspect-ratio: 16 / 9; border-radius: var(--raggio); }
  .b-galleria-prima-dopo .pd .prima, .b-galleria-prima-dopo .prima-t { grid-area: prima; }
  .b-galleria-prima-dopo .pd .dopo, .b-galleria-prima-dopo .dopo-t { grid-area: dopo; }
  .b-galleria-prima-dopo .pd .foto img { object-position: 60% 40%; }
  .b-galleria-prima-dopo .tag { position: relative; z-index: 3; align-self: start; justify-self: start; margin: 16px; padding: 6px 12px; border-radius: 99px; background: var(--testo-su-scuro); color: var(--testo); }

  /* Col motore: un riquadro solo, il dopo sotto e il prima sopra, scoperto dal bordo dell'acqua (--x lo scrive l'effetto). */
  html.motore-pronto .b-galleria-prima-dopo .pd-cornice:has(.pd:not(.affiancate, .sola)) { width: min(100%, calc((100svh - var(--testata) - 120px) * 16 / 9)); }
  html.motore-pronto .b-galleria-prima-dopo .pd:not(.affiancate, .sola) { display: block; aspect-ratio: 16 / 9; border-radius: var(--raggio); overflow: hidden; }
  html.motore-pronto .b-galleria-prima-dopo .pd:not(.affiancate, .sola) .foto { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
  html.motore-pronto .b-galleria-prima-dopo .pd:not(.affiancate, .sola) .prima {
    --x: 0%; --onda-h: 26px; --onda-y: 0px;
    -webkit-mask: var(--onda-v-url) var(--x) var(--onda-y) / var(--onda-h) 300px repeat-y, linear-gradient(#000 0 0) calc(var(--x) + var(--onda-h) - 1px) 0 / 100% 100% no-repeat;
    mask: var(--onda-v-url) var(--x) var(--onda-y) / var(--onda-h) 300px repeat-y, linear-gradient(#000 0 0) calc(var(--x) + var(--onda-h) - 1px) 0 / 100% 100% no-repeat;
  }
  html.motore-pronto .b-galleria-prima-dopo .pd:not(.affiancate, .sola) .tag { position: absolute; top: 16px; margin: 0; }
  html.motore-pronto .b-galleria-prima-dopo .pd:not(.affiancate, .sola) .prima-t { right: 16px; }
  html.motore-pronto .b-galleria-prima-dopo .pd:not(.affiancate, .sola) .dopo-t { left: 16px; }

  .b-galleria-prima-dopo .pd-sotto { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-top: 14px; color: var(--salvia-chiara); font-size: .9rem; }
  .b-galleria-prima-dopo .pd-sotto h2 { color: inherit; }

  @media (max-width: 700px) {
    .b-galleria-prima-dopo .pd { grid-template-columns: 1fr; grid-template-areas: "prima" "dopo"; }
    .b-galleria-prima-dopo .pd .foto { aspect-ratio: 4 / 3; }
    html.motore-pronto .b-galleria-prima-dopo .pd-cornice:has(.pd:not(.affiancate, .sola)) { width: 100%; }
    html.motore-pronto .b-galleria-prima-dopo .pd:not(.affiancate, .sola) { aspect-ratio: 4 / 5; max-height: 68svh; }
  }