/* =============================================
   IL MAZZO A CARTE — «Нашите работи» (04/10/2026, corsia «galleria a carte»)
   Il proprietario: «le foto dei nostri lavori voglio che siano sempre delle carte con slide come nello staff».
   Lo stesso coverflow del mazzo di /ekim/ (team.css), con carte QUADRATE e più piccole per le foto dei tagli:
   la carta al centro grande, dritta e A COLORI; ai lati le altre, sempre più piccole, ruotate in 3D verso il
   centro, una DIETRO l'altra, in BIANCO E NERO e più scure; si colorano arrivando al centro.
   Movimento: SOLO transform e opacity (mazzo.js); i colori cambiano di colpo. «Riduci movimento»: fila piatta.
   Senza JS: una fila piatta di foto a colori che scorre di lato (scroll-snap), nessuna foto nascosta.
   HTML: blades_mazzo_lavori() in inc/lavori.php. Caricato da functions.php su home e /uslugi/.
   ============================================= */
.mz {
  --mz-red:     var(--accent-red, #B0111E);
  --mz-red-hi:  var(--accent-red-testo, #fb3d48);
  --mz-t3:      rgba(255, 255, 255, .56);
  --mz-line:    rgba(255, 255, 255, .12);
  --mz-ease:    cubic-bezier(.16, 1, .3, 1);
  --mz-display: 'Barlow Condensed', sans-serif;
  position: relative;
}
.mz-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mz-stage { position: relative; }

.mz-deck {
  --cw: min(64vw, 260px);   /* la carta al centro (le stesse misure del sizes in inc/lavori.php) */
  --gap: 12px;
  --cf-spread: 1;
  --pad: calc((100% - var(--cw)) / 2);   /* la prima e l'ultima carta possono stare al centro */
  position: relative; isolation: isolate;   /* gli z-index delle carte (fino a 1000) restano DENTRO il mazzo */
  display: flex; gap: var(--gap); margin: 0; padding: 22px var(--pad) 30px; list-style: none;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* la luce del palco: ferma dietro la carta al centro (lo sfondo di uno scorritore non scorre) */
  background: radial-gradient(min(56%, 360px) 46% at 50% 54%, rgba(176, 17, 30, .20), transparent 72%);
}
.mz-deck::-webkit-scrollbar { display: none; }
/* niente zoom col doppio tocco su iOS: restano lo swipe del mazzo e lo scorrimento della pagina */
.mz-deck, .mz-deck > li, .mz-cf, .mz-front, .mz-who, .mz-nav__btn, .mz-side { touch-action: manipulation; }
/* La carta (li) resta FERMA dov'è nella fila: è il bersaglio dell'aggancio. Il coverflow sposta .mz-cf
   (team.css, 02/10: con il transform sul li l'aggancio usava la posizione trasformata). */
.mz-deck > li { position: relative; flex: 0 0 var(--cw); min-width: 0; scroll-snap-align: center; display: flex; }
.mz-cf { flex: 1 0 auto; display: flex; width: 100%; transform-origin: 50% 50%; }
.mz.is-cf .mz-cf { will-change: transform; }
.mz-hop { flex: 1 0 auto; display: flex; width: 100%; }
/* l'accenno al primo arrivo: le carte scivolano di lato e tornano, una volta */
.mz-deck.is-hint .mz-hop { animation: mz-hint 1.05s cubic-bezier(.45, 0, .2, 1); }
@keyframes mz-hint {
  0%   { transform: none; }
  42%  { transform: translateX(-28px); }
  72%  { transform: translateX(4px); }
  100% { transform: none; }
}

/* ---------- LA CARTA: una foto quadrata ---------- */
.mz-front {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate;
  border-radius: 10px; border: 1px solid var(--mz-line); background: #0b0b0b; color: #fff; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mz-front:focus-visible { outline: 2px solid var(--mz-red-hi); outline-offset: 3px; }
.mz-front::after {   /* la didascalia sta sul fondo: una sfumatura scura solo nell'ultimo terzo */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .55) 18%, rgba(10, 10, 10, 0) 38%);
}
.mz-pic { position: absolute; inset: 0; display: block; }
.mz-pic picture { display: block; width: 100%; height: 100%; }
.mz-pic--col { z-index: 1; }
/* la copia in bianco e nero: filtro FISSO (si disegna una volta), mai animato */
.mz-pic--bw  { z-index: 0; }
.mz-pic--bw .mz-img { filter: grayscale(1) contrast(1.06); }
.mz-img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--mz-ease), opacity .6s ease;
}
.mz-img.is-pending { opacity: 0; }   /* solo le foto che non erano ancora arrivate quando il JS è partito */
/* l'ombra delle carte lontane: nero sopra la foto, sotto la didascalia (che sbiadisce da sé) */
.mz-shade { position: absolute; inset: 0; z-index: 3; background: #050505; opacity: 0; pointer-events: none; }
.mz.is-cf .mz-pic--col, .mz.is-cf .mz-shade, .mz.is-cf .mz-cap { will-change: opacity; }

.mz-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 10px 10px 14px;
}
.mz-cap__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mz-cap__no { font: 700 13px/1 var(--mz-display); letter-spacing: .08em; color: var(--mz-red-hi); }
.mz-cap__name {
  font: 700 18px/1 var(--mz-display); text-transform: uppercase; letter-spacing: .01em; color: #fff; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mz-cap__who { font: 600 11px/1.3 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.mz-cap__zoom {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(10, 10, 10, .4); color: #fff;
  transition: transform .6s var(--mz-ease);
}
.mz-cap__zoom svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .mz-card.is-c .mz-front:hover .mz-img { transform: scale(1.04); }
  .mz-card.is-c .mz-front:hover .mz-cap__zoom { transform: scale(1.1); }
}
.mz-card:not(.is-c) .mz-front { cursor: pointer; }

/* chi l'ha fatto (04/10/2026, dal proprietario): il nome in piccolo in alto a sinistra, link al profilo su /ekim/.
   È un link a sé, FUORI dal link della foto: bersaglio di 44 px, pillola visibile più piccola. Solo sulla carta al
   centro (sulle altre sfuma: solo opacità); senza JS (niente .mz-anim) sempre visibile. */
.mz-hop { position: relative; }
.mz-who {
  position: absolute; top: 4px; left: 4px; z-index: 5; display: flex; align-items: center; min-height: 44px; padding: 0 6px;
  color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: opacity .3s ease;
}
.mz-who__c {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 10px; border-radius: 999px;
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(10, 10, 10, .62); border: 1px solid rgba(255, 255, 255, .26);
  transition: border-color .3s ease;
}
.mz-who svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--mz-red-hi); }
.mz-who:hover .mz-who__c { border-color: rgba(251, 61, 72, .8); }
.mz-who:focus-visible { outline: none; }
.mz-who:focus-visible .mz-who__c { outline: 2px solid var(--mz-red-hi); outline-offset: 2px; }
.mz-anim .mz-card:not(.is-c) .mz-who { opacity: 0; pointer-events: none; }

/* ---------- le frecce AI LATI (come .tm-deck-side di team.css): cerchio di vetro scuro, ≥ 56 px.
   Solo col mouse (hover + puntatore fine) e da 1024 px: sul telefono resta il dito e non si vedono. ---------- */
.mz-side { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .mz-side {
    display: block; position: absolute; z-index: 6; top: 50%; width: 64px; height: 64px; margin-top: -32px; padding: 0;
    border: 0; background: none; cursor: pointer; color: #fff;
    -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
    transition: opacity .35s ease;
  }
  .mz-side--prev { left: max(24px, calc(50% - var(--mz-cw, 300px) / 2 - 410px)); }
  .mz-side--next { right: max(24px, calc(50% - var(--mz-cw, 300px) / 2 - 410px)); }
  .mz-side__c {
    position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
    background: rgba(18, 18, 18, .78);
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -18px rgba(0, 0, 0, .9);
    transition: transform .45s var(--mz-ease);
  }
  .mz-side__c::after {   /* l'alone rosso al passaggio: solo opacità */
    content: ''; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 1px rgba(251, 61, 72, .85), 0 16px 36px -14px rgba(176, 17, 30, .9);
    transition: opacity .35s ease;
  }
  .mz-side svg { position: relative; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .mz-side:hover .mz-side__c { color: var(--mz-red-hi); }
  .mz-side:hover .mz-side__c::after, .mz-side:focus-visible .mz-side__c::after { opacity: 1; }
  .mz-side--prev:hover .mz-side__c { transform: translateX(-3px); }
  .mz-side--next:hover .mz-side__c { transform: translateX(3px); }
  .mz-side:active .mz-side__c { transform: scale(.92); }
  .mz-side:focus-visible { outline: none; }
  .mz-side:focus-visible .mz-side__c { outline: 2px solid var(--mz-red-hi); outline-offset: 3px; }
  .mz-side:disabled { opacity: 0; pointer-events: none; }   /* alla prima / all'ultima carta la freccia sparisce */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mz-side__c { background: rgba(18, 18, 18, .97); }
  }
}

/* ---------- sotto il mazzo: 3 / 6 · avanzamento (e ‹ › solo al computer, da 1024 px) ---------- */
.mz-nav {
  display: flex; align-items: center; gap: 14px; min-height: 44px;
  max-width: 560px; margin: -8px auto 0; padding: 0 20px;
}
.mz-nav__btn {
  display: none; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .03); color: #fff;
  transition: transform .3s var(--mz-ease), opacity .3s ease;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.mz-nav__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mz-nav__btn:hover { border-color: rgba(255, 255, 255, .6); }
.mz-nav__btn:active { transform: scale(.92); }
.mz-nav__btn:disabled { opacity: .3; cursor: default; }
.mz-nav__btn:focus-visible { outline: 2px solid var(--mz-red-hi); outline-offset: 2px; }
.mz-count { flex: none; display: flex; align-items: baseline; gap: 5px; margin: 0; font: 700 16px/1 var(--mz-display); letter-spacing: .08em; color: var(--mz-t3); font-variant-numeric: tabular-nums; }
.mz-count__i { min-width: 1.2em; text-align: right; color: #fff; font-size: 22px; }
.mz-progress { flex: 1; position: relative; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.mz-progress i {
  position: absolute; inset: 0; background: var(--mz-red-hi); transform-origin: left center;
  transform: scaleX(var(--p, .17)); transition: transform .45s var(--mz-ease);
}

/* ---------- tablet e computer ---------- */
@media (min-width: 600px) {
  .mz-deck { --cw: 270px; --gap: 14px; --cf-spread: 1.5; }
  .mz-cap__name { font-size: 20px; }
}
@media (min-width: 1024px) {
  .mz { --mz-cw: 300px; }
  .mz-nav__btn { display: grid; }   /* le frecce sotto solo al computer; sul telefono si sfoglia col dito */
  .mz-deck { --cw: 300px; --gap: 18px; --cf-spread: 2.1; padding-top: 28px; }
}
@media (max-width: 360px) {
  .mz-deck { --cw: 66vw; --gap: 10px; }
  .mz-cap__name { font-size: 16px; }
}

/* ---------- «riduci movimento»: fila piatta, niente accenno; il bianco e nero → colore resta (opacità) ---------- */
@media (prefers-reduced-motion: reduce) {
  .mz *, .mz *::before, .mz *::after { animation: none !important; transition: none !important; }
  .mz-cf { transform: none !important; }
  .mz-card.is-c .mz-front:hover .mz-img, .mz-card.is-c .mz-front:hover .mz-cap__zoom { transform: none; }
  .mz-side--prev:hover .mz-side__c, .mz-side--next:hover .mz-side__c { transform: none; }
}