/* Dragosphera — stile del sito */
:root {
  --ds-ink: #0B0B0B;
  --ds-paper: #FFFFFF;
  --ds-mist: #ECECEC;
  --ds-stone: #6B6B6B;
  --ds-red: #E3001B;
  --ds-radius: 4px;
  --ds-ui: 0.8125rem;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--ds-red); outline-offset: 2px; }
::selection { background: var(--ds-red); color: #fff; }

/* ---------- Testata ---------- */
.ds-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px clamp(16px, 4vw, 40px);
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--ds-ui);
}
.ds-header > * { margin: 0 !important; }
.ds-brand { font-size: 0.9375rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ds-brand a { text-decoration: none; color: var(--ds-ink); }
.ds-brand a::before { content: ""; display: inline-block; width: .8em; height: 1.16em; background: url(../img/simbolo.svg) no-repeat center / contain; margin-right: .42em; vertical-align: -.22em; }
.ds-clock { color: var(--ds-stone); font-variant-numeric: tabular-nums; }
.ds-nav { display: flex; gap: 6px; margin-left: auto !important; flex-wrap: nowrap; }
.ds-nav a {
  display: inline-block; padding: 5px 10px; border-radius: var(--ds-radius);
  background: var(--ds-ink); color: #fff; text-decoration: none; font-weight: 500; white-space: nowrap;
}
.ds-nav a:hover { background: var(--ds-red); color: #fff; }
.ds-nav a[aria-current="page"] { background: var(--ds-mist); color: var(--ds-ink); }
.ds-nav a.ds-nav__cta { background: var(--ds-red); }
.ds-nav a.ds-nav__cta:hover { background: var(--ds-ink); }

@media (max-width: 860px) {
  .ds-nav { order: 3; width: 100%; margin-left: 0 !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ds-nav::-webkit-scrollbar { display: none; }
  .ds-clock { margin-left: auto !important; }
  .ds-nav a.ds-nav__cta { order: -1; }
}

/* ---------- Contenuto ---------- */
.ds-main { padding-top: clamp(32px, 6vw, 72px); padding-bottom: 64px; }
.ds-title { margin-bottom: 1.5rem; text-wrap: balance; }
.ds-hero-title { font-size: clamp(2.5rem, 6vw, 4.75rem) !important; letter-spacing: -0.035em; }
.ds-content > h2 {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: .9rem;
  border-top: 1px solid var(--ds-ink);
}
.ds-content > h3 { margin-top: 2rem; }
.ds-content h2 + h3 { margin-top: 1rem; }
.ds-lead { font-size: var(--wp--preset--font-size--l); line-height: 1.4; color: var(--ds-stone); text-wrap: pretty; }
.ds-content ul:not(.ds-tags) { padding-left: 1.1em; }
.ds-content ul:not(.ds-tags) li::marker { color: var(--ds-red); }
.ds-content strong { font-weight: 600; }
.ds-updated { margin-top: 4rem !important; gap: .4em !important; font-size: var(--ds-ui); color: var(--ds-stone); }
.ds-updated p { margin: 0; }

/* ---------- Etichette (stile and2es) ---------- */
ul.ds-tags { list-style: none; padding: 0; margin: .25rem 0 1rem; display: flex; flex-wrap: wrap; gap: 6px; }
ul.ds-tags li {
  margin: 0; padding: 3px 9px; border-radius: var(--ds-radius);
  background: var(--ds-mist); color: var(--ds-ink); font-size: var(--ds-ui); font-weight: 500; line-height: 1.5;
}
ul.ds-tags li:first-child { background: var(--ds-ink); color: #fff; }

/* ---------- Schede (offerte, settori) ---------- */
.ds-cards { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 28px 24px; margin-top: 1.5rem !important; }
.ds-cards > * { margin: 0 !important; }
.ds-card { border-top: 1px solid var(--ds-ink); padding-top: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.ds-card > * { margin: 0 !important; }
.ds-card h3 { font-size: var(--wp--preset--font-size--l); }
.ds-card p { font-size: var(--wp--preset--font-size--s); }
.ds-card p:last-child a { font-weight: 500; text-decoration: none; }
.ds-card p:last-child a::after { content: " →"; }
.ds-card .ds-num { font-size: var(--ds-ui); color: var(--ds-stone); }

/* ---------- Striscia di immagini ---------- */
.ds-strip {
  display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr);
  gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 1rem !important; padding-bottom: 4px;
}
.ds-strip > * { margin: 0 !important; scroll-snap-align: start; }
.ds-strip img, .ds-ring img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; display: block; background: var(--ds-mist); }
.ds-strip figcaption { margin-top: 4px; }
@media (max-width: 700px) { .ds-strip { grid-auto-columns: 62%; } }

/* ---------- Carosello 3D (home) ---------- */
.ds-ring { position: relative; }
.ds-ring.is-3d {
  display: block !important; height: min(72vh, 620px); -webkit-perspective: 2000px; perspective: 2000px; overflow: hidden; margin-top: 2rem !important;
}
.ds-ring.is-3d .ds-ring__stage { position: absolute; inset: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.ds-ring.is-3d { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ds-ring.is-3d:active { cursor: grabbing; }
.ds-ring.is-3d img { pointer-events: none; -webkit-user-drag: none; }
@media (max-width: 700px) {
  .ds-ring.is-3d { height: calc(min(58vw, 240px) * 1.25 + 80px); -webkit-perspective: 900px; perspective: 900px; margin-left: calc(-1 * clamp(16px, 4vw, 40px)) !important; margin-right: calc(-1 * clamp(16px, 4vw, 40px)) !important; }
  .ds-ring.is-3d figure { width: min(58vw, 240px); }
}
.ds-ring.is-3d figure {
  position: absolute; left: 50%; top: 50%; width: clamp(150px, 15vw, 220px); margin: 0 !important;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: filter .3s, opacity .3s;
}
.ds-ring.is-3d figure a { display: block; }
.ds-ring.is-3d figcaption {
  position: absolute; left: 0; bottom: -2.2em; opacity: 0; transition: opacity .3s;
  background: var(--ds-ink); color: #fff; padding: 2px 8px; border-radius: var(--ds-radius); font-size: var(--ds-ui); white-space: nowrap;
}
.ds-ring.is-3d figure.is-front figcaption { opacity: 1; }
.ds-ring.is-3d figure.is-front figcaption::after { content: " · Vedi il progetto"; color: #bbb; }
.ds-ring:not(.is-3d) {
  display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 8px; overflow-x: auto;
}
.ds-ring:not(.is-3d) > * { margin: 0 !important; }
@media (max-width: 700px) { .ds-ring:not(.is-3d) { grid-auto-columns: 62%; } }

/* ---------- Riga progetto ---------- */
.ds-project { margin-top: 3rem !important; }
.ds-project h2 { border-top: 1px solid var(--ds-ink); padding-top: .9rem; font-size: var(--wp--preset--font-size--l) !important; }

/* ---------- Intro ---------- */
.ds-intro {
  position: fixed; inset: 0; z-index: 100; background: #fff; display: grid; place-items: center; padding: 24px;
  animation: ds-intro-out .6s ease 2s forwards; pointer-events: none;
}
.ds-intro p { max-width: 34ch; text-align: center; font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 500; line-height: 1.3; margin: 0; }
.ds-intro p { padding-top: 120px; opacity: 0; animation: ds-intro-text .5s ease .35s forwards, ds-intro-out .35s ease 1.65s forwards; }
@keyframes ds-intro-text { to { opacity: 1; } }
/* Il simbolo nasce al centro e poi vola nel logo in testata (lo sposta site.js) */
.ds-intro-mark { position: fixed; z-index: 101; left: 50%; top: 50%; width: 56px; height: 81px; margin: -98px 0 0 -28px; pointer-events: none;
  animation: ds-intro-out .3s ease 3.2s forwards; }
.ds-intro-mark span { display: block; width: 100%; height: 100%; background: url(../img/simbolo.svg) no-repeat center / contain;
  transform-origin: 50% 60%; animation: ds-mark-in .75s cubic-bezier(.2,.9,.25,1.15) both; }
@keyframes ds-mark-in { from { transform: scale(.15) rotate(-70deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ds-intro.is-seen, .ds-intro.is-seen + .ds-intro-mark { display: none; }
@keyframes ds-intro-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .ds-intro-mark span { animation-name: ds-mark-fade; } @keyframes ds-mark-fade { from { opacity: 0; } to { opacity: 1; } } html { scroll-behavior: auto; } }

/* ---------- Domande frequenti ---------- */
.ds-content h2.ds-faq-title ~ h3 { font-size: 1.1875rem; font-weight: 500; letter-spacing: 0; margin-top: 1.6rem; }

/* ---------- Piè di pagina ---------- */
.ds-footer { background: var(--ds-ink); color: #fff; padding: 48px clamp(16px, 4vw, 40px) 40px; margin-top: 0; font-size: var(--wp--preset--font-size--s); }
.ds-footer a { color: #fff; }
.ds-footer a:hover { color: #ff8a96; }
.ds-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; max-width: 1280px; margin: 0 auto; }
.ds-footer__grid p { margin: 0 0 .4rem; }
.ds-footer__brand { font-weight: 600; letter-spacing: .04em; }
.ds-footer__label { color: #9a9a9a; font-size: var(--ds-ui); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Tabelle ---------- */
.ds-content table { border-collapse: collapse; width: 100%; font-size: var(--wp--preset--font-size--s); }
.ds-content th, .ds-content td { text-align: left; border-bottom: 1px solid var(--ds-mist); padding: .5rem .4rem; vertical-align: top; }

@media print { .ds-header, .ds-intro, .ds-intro-mark, .ds-pop, .ds-footer { display: none; } }

/* ---------- Griglia progetti ---------- */
.ds-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.5rem !important; }
.ds-filters button {
  font: inherit; font-size: var(--ds-ui); font-weight: 500; cursor: pointer;
  border: 0; border-radius: var(--ds-radius); padding: 5px 10px; background: var(--ds-mist); color: var(--ds-ink);
}
.ds-filters button sup { font-size: .7em; margin-left: 2px; color: var(--ds-stone); }
.ds-filters button[aria-pressed="true"] { background: var(--ds-ink); color: #fff; }
.ds-filters button[aria-pressed="true"] sup { color: #bbb; }
.ds-filters button:hover { background: var(--ds-red); color: #fff; }

.ds-work {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 28px;
  margin-top: 2.5rem !important;
}
@media (max-width: 1100px) { .ds-work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 20px; } }
@media (max-width: 620px)  { .ds-work { grid-template-columns: 1fr; gap: 48px; } }
.ds-work > * { margin: 0 !important; }
.ds-work__item { position: relative; display: flex; flex-direction: column; gap: .55rem; }
.ds-work__item > * { margin: 0 !important; }
.ds-work__item.is-hidden { display: none; }
.ds-work__item figure { overflow: hidden; border-radius: 3px; line-height: 0; margin-bottom: .6rem !important; }
.ds-work__item figure img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.ds-work__item:hover figure img { transform: scale(1.035); }
.ds-work__type {
  aspect-ratio: 4 / 5; background: var(--ds-ink); color: #fff; border-radius: 3px; margin-bottom: .6rem !important;
  display: flex !important; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2.4vw, 32px); overflow: hidden;
}
.ds-work__item .ds-work__type p { margin: 0; color: #fff !important; font-size: clamp(2rem, 3.6vw, 3.25rem) !important; font-weight: 500; line-height: 1 !important; letter-spacing: -0.035em; }
.ds-work__type p::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--ds-red); margin-bottom: 18px; }
.ds-work__item:hover .ds-work__type { background: #1d1d1d; }
.ds-work__item h2 {
  font-size: var(--wp--preset--font-size--l) !important; border: 0 !important; padding: 0 !important; margin: 0 !important; letter-spacing: -0.015em;
}
.ds-work__item p { font-size: var(--wp--preset--font-size--s); color: var(--ds-stone); line-height: 1.45; }
.ds-work__item ul.ds-tags { margin: .2rem 0 0 !important; }
.ds-work__item ul.ds-tags li { font-size: .75rem; padding: 2px 7px; }
.ds-work__link a { font-size: var(--ds-ui); font-weight: 500; color: var(--ds-ink); text-decoration: none; }
.ds-work__link a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ds-work__link a span, .ds-work__link a:hover { color: var(--ds-red); }
.ds-work__item:hover .ds-work__link a { color: var(--ds-red); }
.ds-work__link a::before { content: "→ "; }
.ds-work__item:focus-within { outline: 2px solid var(--ds-red); outline-offset: 6px; border-radius: 4px; }
.ds-work__item a:focus-visible { outline: none; }

/* ---------- Galleria nelle schede progetto ---------- */
.ds-gallery { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 2rem auto 1rem !important; }
.ds-gallery:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-gallery > * { margin: 0 !important; }
.ds-gallery img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; background: var(--ds-mist); }
@media (max-width: 620px) { .ds-gallery, .ds-gallery:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ---------- Lavori selezionati: 2 grandi + 3 ---------- */
.ds-work { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.ds-work > .ds-work__item { grid-column: span 2; }
.ds-work > .ds-work__item:nth-child(1), .ds-work > .ds-work__item:nth-child(2) { grid-column: span 3; }
.ds-work > .ds-work__item:nth-child(1) figure img, .ds-work > .ds-work__item:nth-child(2) figure img { aspect-ratio: 4 / 3; }
@media (max-width: 1100px) {
  .ds-work { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ds-work > .ds-work__item, .ds-work > .ds-work__item:nth-child(1), .ds-work > .ds-work__item:nth-child(2) { grid-column: span 1; }
  .ds-work > .ds-work__item:nth-child(1) { grid-column: span 2; }
}
@media (max-width: 620px) {
  .ds-work { grid-template-columns: 1fr !important; }
  .ds-work > .ds-work__item, .ds-work > .ds-work__item:nth-child(1) { grid-column: auto; }
  .ds-work > .ds-work__item:nth-child(n+3) figure img { aspect-ratio: 4 / 5 !important; }
}

/* ---------- Trattamento unico delle immagini: bianco e nero, colore al passaggio ---------- */
.ds-work__item figure img, .ds-strip img {
  filter: grayscale(1) contrast(1.08);
  transition: filter .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.ds-work__item:hover figure img, .ds-strip figure:hover img,
.ds-work__item.is-inview figure img, .ds-strip figure.is-inview img { filter: none; }
@media (hover: hover) { .ds-work__item.is-inview figure img, .ds-strip figure.is-inview img { filter: grayscale(1) contrast(1.08); } .ds-work__item:hover figure img, .ds-strip figure:hover img { filter: none; } }
.ds-work > .ds-work__item:nth-child(1) figure img, .ds-work > .ds-work__item:nth-child(2) figure img { object-position: 50% 18%; }

/* Carosello: tutto in bianco e nero, colore solo al passaggio del mouse */
.ds-ring figure img { filter: grayscale(1) contrast(1.08); transition: filter .5s ease; }
@media (hover: hover) { .ds-ring figure:hover img { filter: none; } }

.ds-work > .ds-work__item figure img[src*="beretta-cover"] { object-position: 50% 50%; }
.ds-work > .ds-work__item figure img[src*="borgo-cover"] { object-position: 55% 50%; }

/* ---------- Simbolo Dragosphera ---------- */
.ds-footer__brand::before { content: ""; display: inline-block; width: .8em; height: 1.16em; background: url(../img/simbolo.svg) no-repeat center / contain; margin-right: .42em; vertical-align: -.22em; }
/* Ogni tanto il simbolo compare sopra una foto e sparisce */
.ds-work__item figure, .ds-strip figure { position: relative; }
.ds-pop { position: absolute; z-index: 5; width: var(--s, 36px); aspect-ratio: 244 / 354; pointer-events: none;
  background: url(../img/simbolo.svg) no-repeat center / contain; transform-origin: 50% 60%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); animation: ds-pop 2.6s cubic-bezier(.3,.8,.3,1) forwards; }
@keyframes ds-pop {
  0% { transform: translate(-50%,-50%) scale(0) rotate(-80deg); opacity: 0; }
  18% { transform: translate(-50%,-50%) scale(1.08) rotate(6deg); opacity: 1; }
  26%, 72% { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0) rotate(90deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ds-pop { display: none; } }

/* ---------- La coccinella (solo in home) ---------- */
.ds-work__item figure, .ds-strip figure { z-index: 1; }
.ds-bug { position: absolute; left: 0; top: 0; z-index: 0; width: 18px; height: 22px; margin: -11px 0 0 -9px; cursor: pointer;
  opacity: 0; transition: opacity .4s ease; will-change: transform; -webkit-tap-highlight-color: transparent; }
.ds-bug.is-on { opacity: 1; }
.ds-bug svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ds-bug .leg { stroke: #111; stroke-width: .9; stroke-linecap: round; fill: none; transform-box: fill-box; }
.ds-bug .leg.l { transform-origin: 100% 50%; } .ds-bug .leg.r { transform-origin: 0 50%; }
.ds-bug.is-walking .leg.a { animation: ds-leg .16s ease-in-out infinite alternate; }
.ds-bug.is-walking .leg.b { animation: ds-leg .16s ease-in-out -.16s infinite alternate; }
@keyframes ds-leg { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.ds-bug .el { transform-box: view-box; transform-origin: 10px 7px; transition: transform .25s ease; }
.ds-bug .wing { opacity: 0; transition: opacity .2s ease; }
.ds-bug.is-flying .el-l { transform: rotate(-38deg); } .ds-bug.is-flying .el-r { transform: rotate(38deg); }
.ds-bug.is-flying .wing { opacity: .55; }
@media print { .ds-bug { display: none; } }
@media (max-width: 699px) { .ds-bug { width: 20px; height: 24px; margin: -12px 0 0 -10px; } }