/* ECM — visual.css · immagini del sito (06/10/2026)
   Si aggiunge a v3.css, non lo sostituisce. Usa solo le variabili di v3.css.
   Componenti: .photo-band (fascia fotografica), .case-visual (schermate in cornice),
   .ch-shot (miniatura nelle card dei case history). */

/* ── Fascia fotografica a tutta larghezza ─────────────────────── */
.photo-band { position: relative; margin: 0; overflow: hidden; background: #0C1E23; border-bottom: var(--rule); }
.photo-band picture, .photo-band img { display: block; width: 100%; }
.photo-band img { height: clamp(210px, 31vw, 430px); object-fit: cover; object-position: 50% 55%; }
.photo-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,30,35,0) 40%, rgba(12,30,35,.62) 100%); }
.photo-band figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-block: 18px; }
.photo-band figcaption .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.photo-band figcaption span { font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: #F4F2EC; }
.photo-band figcaption span:first-child::before { content: "→ "; color: var(--accent); }

/* ── Schermate dei progetti in cornice (case history) ─────────── */
.case-visual { padding-block: clamp(28px, 5vw, 64px); border-bottom: var(--rule); background: var(--paper-2); }
.case-visual .stage { position: relative; max-width: 1180px; margin-inline: auto; padding-bottom: clamp(44px, 6.5vw, 92px); }
.dev { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(20,19,15,.45); overflow: hidden; }
.dev img { display: block; width: 100%; height: auto; }
.dev-desktop { border-radius: 10px; width: 80%; }
.dev-desktop .bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--paper-2); border-bottom: var(--rule); }
.dev-desktop .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.dev-desktop .bar span { margin-left: 12px; font-family: var(--ff-mono); font-size: .72rem; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-tablet, .dev-phone { height: auto; }   /* le immagini hanno width/height negli attributi: senza questo si deformano */
.dev-tablet { position: absolute; right: 0; bottom: 0; width: 27%; border-radius: 18px; border: 7px solid var(--ink); }
.dev-phone  { position: absolute; right: 21%; bottom: -3%; width: 15%; border-radius: 20px; border: 6px solid var(--ink); z-index: 2; }
.case-visual figcaption { max-width: 54%; margin-top: 22px; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 760px) {
  .dev-desktop { width: 100%; }
  .case-visual .stage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: 0; }
  .dev-desktop { grid-column: 1 / -1; }
  .dev-tablet, .dev-phone { position: static; width: 100%; }
  .dev-phone { max-width: 190px; justify-self: center; }
  .case-visual figcaption { grid-column: 1 / -1; max-width: none; margin-top: 4px; }
}

/* ── Miniatura nelle card della home ──────────────────────────── */
.ch-tile .ch-shot { display: block; width: 100%; height: auto; flex: none; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border: 1px solid var(--line); margin-bottom: 18px; background: var(--paper-2); }