/* Raccolta · Galleria — grid + carousel, and a shared full-screen lightbox. */ .cds-racgal { --cds-racgal-accent: #02A3E0; -webkit-font-smoothing: antialiased; } .cds-racgal button { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cds-racgal__ph { position: relative; display: block; overflow: hidden; aspect-ratio: 1/1; background: #eef1f5; } .cds-racgal__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } /* ── Griglia ── */ .cds-racgal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cds-racgal__item { display: block; width: 100%; text-align: left; } .cds-racgal__item:hover .cds-racgal__ph img { transform: scale(1.05); } .cds-racgal__item:active .cds-racgal__ph img { transform: scale(1.02); } /* ── Carosello ── */ .cds-racgal--carousel { position: relative; } .cds-racgal__viewport { position: relative; } .cds-racgal__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; border-radius: inherit; } .cds-racgal__track::-webkit-scrollbar { display: none; } .cds-racgal__slide { flex: 0 0 84%; scroll-snap-align: center; } @media (min-width: 640px) { .cds-racgal__slide { flex-basis: 62%; } } @media (min-width: 980px) { .cds-racgal__slide { flex-basis: 46%; } } .cds-racgal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: #14202e; box-shadow: 0 4px 16px rgba(10,20,35,.18); transition: background .15s, transform .15s; } .cds-racgal .cds-racgal__nav:hover { background: #fff; } .cds-racgal .cds-racgal__nav:active { transform: translateY(-50%) scale(.94); } .cds-racgal__nav--prev { left: 10px; } .cds-racgal__nav--next { right: 10px; } .cds-racgal__nav[disabled] { opacity: .35; cursor: default; } .cds-racgal__dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; } .cds-racgal .cds-racgal__dot { width: 7px; height: 7px; border-radius: 50%; background: #d7dde6; transition: background .15s, transform .15s; } .cds-racgal .cds-racgal__dot.is-on { background: var(--cds-racgal-accent); transform: scale(1.3); } /* ── Lightbox (condiviso da griglia e carosello, vive su ) ── */ .cds-racgal-lb { position: fixed; inset: 0; z-index: 100020; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10,15,25,.92); animation: cds-racgal-lb-in .16s ease; } .cds-racgal-lb[hidden] { display: none; } .cds-racgal-lb__overlay { position: absolute; inset: 0; } .cds-racgal-lb__img { position: relative; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 44px rgba(0,0,0,.5); } .cds-racgal-lb__close, .cds-racgal-lb__arrow { position: absolute; z-index: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; transition: background .15s; } .cds-racgal-lb .cds-racgal-lb__close:hover, .cds-racgal-lb .cds-racgal-lb__arrow:hover { background: rgba(255,255,255,.26); } .cds-racgal-lb__close { top: 16px; right: 16px; width: 42px; height: 42px; } .cds-racgal-lb__arrow { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; } .cds-racgal-lb__arrow--prev { left: 12px; } .cds-racgal-lb__arrow--next { right: 12px; } .cds-racgal-lb__count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85); background: rgba(255,255,255,.14); padding: 5px 12px; border-radius: 999px; letter-spacing: .02em; } @keyframes cds-racgal-lb-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cds-racgal-lb { animation: none; } .cds-racgal__ph img { transition: none; } } @media (max-width: 520px) { .cds-racgal-lb__arrow { width: 40px; height: 40px; } .cds-racgal-lb__close { width: 38px; height: 38px; } } body.cds-racgal-lock { overflow: hidden; }