/* ══════════════════════════════════════════════════════════════════════════
   Intesa Grandi Impianti — Portfolio (Lista + Dettaglio)
   Porting design Claude "Lista Progetti" / "Progetto Dettaglio" → baresto.
   Header/footer/mobmenu li fornisce index.php (chrome igi condivisa con la home);
   qui: hero pagina, barra filtri, griglia, scheda dettaglio (meta-bar, checklist,
   gallery strip, timbro, parallasse), lightbox + responsive (@media 860, fedele).
   ══════════════════════════════════════════════════════════════════════════ */

.igi-pf { font-family:'Barlow',sans-serif; color:#10211a; background:#fff; }
.igi-sec-pad { padding-left:clamp(40px,4.7vw,90px); padding-right:clamp(40px,4.7vw,90px); }
.igi-pf-rule { height:5px; width:60px; background:var(--igi-accent); border-radius:3px; margin-top:20px; }
.igi-pf-rule2 { height:5px; width:56px; background:var(--igi-accent); border-radius:3px; margin-bottom:22px; }
.igi-pf-txt { font-size:clamp(15px,1.05vw,18px); line-height:1.75; color:#3c4a43; display:flex; flex-direction:column; gap:16px; }
.igi-pf-txt p { margin:0; }
.igi-pf h2 { margin:0; font-size:clamp(26px,2.2vw,38px); font-weight:700; line-height:1.15; letter-spacing:-.5px; }

/* ── LISTA: hero verde ─────────────────────────────────────────────────────── */
.igi-pf-hero { position:relative; background:linear-gradient(135deg,#0d3a23 0%,#0a2c1b 100%); color:#fff; }
.igi-pf-hero-in { padding:clamp(120px,10vw,150px) clamp(40px,4.7vw,90px) clamp(40px,3.6vw,60px); }
.igi-pf-hero h1 { margin:0; font-size:clamp(38px,3.6vw,64px); font-weight:700; line-height:1.05; letter-spacing:-1px; animation:igiFadeUp .8s cubic-bezier(.22,.8,.3,1) .1s both; }
.igi-pf-hero .igi-accent { color:#3dbb61; }
.igi-pf-hero p { margin:22px 0 0; font-size:clamp(15px,1.05vw,19px); line-height:1.6; color:rgba(255,255,255,.88); max-width:640px; }

/* ── LISTA: filtri ─────────────────────────────────────────────────────────── */
.igi-filter-wrap { background:#f5f7f6; border-bottom:1px solid #e3e9e5; padding-top:clamp(22px,2vw,34px); padding-bottom:clamp(22px,2vw,34px); }
.igi-filter-bar { display:grid; grid-template-columns:repeat(4,1fr) auto; gap:clamp(12px,1.1vw,20px); align-items:end; }
.igi-filter-lbl { font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:12px; letter-spacing:1.8px; color:#6a756f; margin-bottom:8px; text-transform:uppercase; }
.igi-filter-field { position:relative; }
.igi-filter-field svg { position:absolute; right:16px; top:50%; transform:translateY(-50%); pointer-events:none; }
.igi-filter-field select { width:100%; padding:14px 42px 14px 16px; border:none; border-bottom:2px solid #10211a; border-radius:10px 10px 0 0; background:#fff; -webkit-appearance:none; appearance:none; font-family:'Barlow Semi Condensed',sans-serif; font-weight:600; font-size:15px; letter-spacing:.4px; color:#10211a; cursor:pointer; box-shadow:0 6px 16px rgba(16,33,26,.06); transition:border-color .3s ease, box-shadow .3s ease; }
.igi-filter-field select:hover { border-color:var(--igi-accent); box-shadow:0 8px 20px rgba(44,162,78,.14); }
.igi-filter-field select:focus { border-color:var(--igi-accent); outline:none; }
.igi-filter-reset { display:inline-flex; align-items:center; gap:8px; padding:13px 18px; border:2px solid #10211a; border-radius:8px; background:none; font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:13px; letter-spacing:1.4px; text-transform:uppercase; cursor:pointer; white-space:nowrap; color:#10211a; transition:color .3s ease, border-color .3s ease; }
.igi-filter-reset:hover { color:var(--igi-accent); border-color:var(--igi-accent); }
.igi-filter-count { margin-top:16px; font-family:'Barlow Semi Condensed',sans-serif; font-weight:600; font-size:14px; letter-spacing:1px; color:#6a756f; text-transform:uppercase; }

/* ── LISTA: griglia progetti ───────────────────────────────────────────────── */
.igi-prj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.5vw,28px); padding-top:clamp(36px,3.4vw,60px); padding-bottom:clamp(36px,3.4vw,60px); }
.igi-prj { position:relative; display:block; border-radius:14px; overflow:hidden; text-decoration:none; background:#0a100d; }
.igi-prj img { width:100%; height:clamp(240px,20vw,320px); object-fit:cover; display:block; transition:transform .5s ease; }
.igi-prj:hover img { transform:scale(1.04); }
.igi-prj-cap { position:absolute; left:0; right:0; bottom:0; padding:44px 16px 16px; background:linear-gradient(180deg,rgba(8,14,11,0) 0%,rgba(8,14,11,.88) 100%); pointer-events:none; }
.igi-prj-name { color:#fff; font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:clamp(15px,1.05vw,18px); letter-spacing:1px; }
.igi-prj-loc { color:rgba(255,255,255,.8); font-size:clamp(12px,.82vw,14px); margin-top:2px; }
.igi-prj-cat { color:#3dbb61; font-family:'Barlow Semi Condensed',sans-serif; font-weight:600; font-size:clamp(11px,.75vw,13px); letter-spacing:1px; margin-top:6px; }
.igi-prj-hidden { display:none !important; }
.igi-prj-empty { padding:0 clamp(40px,4.7vw,90px) clamp(36px,3.4vw,60px); text-align:center; color:#6a756f; font-size:17px; }
.igi-prj-empty a { color:var(--igi-accent); font-weight:600; cursor:pointer; text-decoration:underline; }

/* ── DETTAGLIO: hero foto + gradient ───────────────────────────────────────── */
.igi-pf-dhero { position:relative; height:62vh; min-height:440px; overflow:hidden; background:#0a100d; }
.igi-pf-dhero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.igi-pf-dhero-ov { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,16,13,.72) 0%,rgba(10,16,13,.25) 40%,rgba(10,16,13,.85) 100%); }
.igi-pf-dhero-copy { position:absolute; left:0; right:0; bottom:0; padding-top:0; padding-bottom:clamp(34px,3vw,54px); z-index:4; color:#fff; }
.igi-pf-back { display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.85); text-decoration:none; font-family:'Barlow Semi Condensed',sans-serif; font-weight:600; font-size:14px; letter-spacing:1.6px; text-transform:uppercase; transition:color .25s ease; }
.igi-pf-back:hover { color:#3dbb61; }
.igi-pf-dhero-eyebrow { margin-top:18px; color:rgba(255,255,255,.75); font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:14px; letter-spacing:2px; text-transform:uppercase; }
.igi-pf-dhero-copy h1 { margin:14px 0 0; color:#fff !important; font-size:clamp(44px,4.6vw,84px); font-weight:700; line-height:1.05; letter-spacing:-1px; }

/* ── DETTAGLIO: meta bar ───────────────────────────────────────────────────── */
.igi-pf-metabar { background:linear-gradient(135deg,#0d3a23 0%,#0a2c1b 100%); color:#fff; padding-top:clamp(26px,2.4vw,40px); padding-bottom:clamp(26px,2.4vw,40px); }
.igi-meta-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,40px); }
.igi-meta-lbl { font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:12px; letter-spacing:2px; color:rgba(255,255,255,.6); }
.igi-meta-val { font-weight:600; font-size:clamp(15px,1.05vw,19px); margin-top:6px; }

/* ── DETTAGLIO: body-grid (cliente / risultato) ───────────────────────────── */
.igi-body-grid { display:grid; grid-template-columns:minmax(260px,380px) 1fr; gap:clamp(40px,4.5vw,80px); padding-top:clamp(50px,5vw,90px); padding-bottom:clamp(50px,5vw,90px); align-items:start; }
.igi-checklist { margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.igi-check { display:flex; align-items:center; gap:10px; font-family:'Barlow Semi Condensed',sans-serif; font-weight:600; font-size:clamp(13px,.95vw,16px); }
.igi-check span { color:var(--igi-accent); font-weight:800; }

/* ── DETTAGLIO: parallasse ─────────────────────────────────────────────────── */
.igi-parallax { height:clamp(140px,19vw,280px); overflow:hidden; position:relative; }
.igi-parallax img { position:absolute; left:0; top:-40%; width:100%; height:180%; object-fit:cover; display:block; will-change:transform; }

/* ── DETTAGLIO: intervento (fondo chiaro) ──────────────────────────────────── */
.igi-pf-interv { background:#f5f7f6; border-top:1px solid #e3e9e5; padding-top:clamp(50px,5vw,90px); padding-bottom:clamp(50px,5vw,90px); }

/* ── DETTAGLIO: gallery strip espandibile + timbro ─────────────────────────── */
.igi-gal-grid { padding-bottom:clamp(24px,2.2vw,40px); }
.igi-timbro-desk { width:100%; max-width:380px; height:auto; display:block; margin:40px auto 0; transform:rotate(-8deg); }
.igi-timbro-mob { display:none; width:200px; height:auto; margin:26px auto 0; transform:rotate(-8deg); }
.igi-retic { display:flex; gap:clamp(8px,.8vw,14px); align-items:stretch; }
.igi-retic > div { position:relative; flex:1; min-width:0; border-radius:14px; overflow:hidden; cursor:zoom-in; transition:flex-grow .55s cubic-bezier(.22,.8,.3,1); }
.igi-retic > div:hover { flex-grow:2.6; }
.igi-retic img { width:100%; height:clamp(340px,30vw,520px); object-fit:cover; display:block; filter:grayscale(1); transition:filter .5s ease; }
.igi-retic > div:hover img { filter:none; }

/* ── lightbox ──────────────────────────────────────────────────────────────── */
.igi-lightbox { display:none; position:fixed; inset:0; z-index:400; background:rgba(6,12,9,.94); align-items:center; justify-content:center; padding:30px; }
.igi-lightbox.is-open { display:flex; }
.igi-lightbox img { max-width:92vw; max-height:86vh; border-radius:8px; }
.igi-lightbox .igi-lb-close { position:absolute; top:20px; right:24px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:none; color:#fff; font-size:24px; cursor:pointer; }
.igi-lightbox .igi-lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:rgba(255,255,255,.85); font-size:40px; cursor:pointer; }
.igi-lightbox .igi-lb-nav.prev { left:16px; } .igi-lightbox .igi-lb-nav.next { right:16px; }

/* ── ALTRI PROGETTI ────────────────────────────────────────────────────────── */
.igi-pf-other { padding:clamp(40px,3.6vw,64px) clamp(40px,4.7vw,90px); background:#f5f7f6; border-top:1px solid #e3e9e5; }
.igi-pf-other h2 { margin:0 0 clamp(24px,2.4vw,40px); }
.igi-pf-other-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.5vw,28px); }
.igi-pf-other-grid a { position:relative; display:block; border-radius:12px; overflow:hidden; text-decoration:none; background:#0a100d; }
.igi-pf-other-grid img { width:100%; height:clamp(200px,17vw,260px); object-fit:cover; display:block; transition:transform .5s ease; }
.igi-pf-other-grid a:hover img { transform:scale(1.04); }

/* ── CTA ───────────────────────────────────────────────────────────────────── */
.igi-pf-cta { background:linear-gradient(135deg,#0d3a23 0%,#0a2c1b 100%); color:#fff; padding:clamp(40px,3.6vw,64px) clamp(40px,4.7vw,90px); display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,3vw,50px); flex-wrap:wrap; }
.igi-pf-cta h2 { color:#fff !important; }
.igi-pf-cta p { margin:12px 0 0; font-size:clamp(14px,1vw,18px); color:rgba(255,255,255,.85); }

/* ══════════ RESPONSIVE (design @media max-width:860px) ══════════════════════ */
@media (max-width:860px) {
  .igi-sec-pad { padding-left:22px !important; padding-right:22px !important; }
  /* lista */
  .igi-pf-hero-in { padding-left:22px !important; padding-right:22px !important; padding-top:120px !important; }
  .igi-pf-hero h1 { font-size:38px !important; }
  .igi-filter-bar { grid-template-columns:1fr 1fr !important; gap:12px !important; }
  .igi-filter-bar > div:last-child { grid-column:1 / -1; }
  .igi-filter-bar > div:last-child .igi-filter-reset { width:100%; justify-content:center; }
  .igi-prj-grid { grid-template-columns:1fr !important; }
  .igi-prj img { height:300px !important; }
  /* dettaglio */
  .igi-pf-dhero-copy h1 { font-size:42px !important; }
  .igi-meta-grid { grid-template-columns:1fr 1fr !important; }
  .igi-body-grid { grid-template-columns:1fr !important; gap:30px !important; }
  .igi-timbro-desk { display:none !important; }
  .igi-timbro-mob { display:none !important; } /* niente timbro su mobile */
  .igi-retic { flex-wrap:nowrap !important; overflow-x:auto !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:10px; scrollbar-width:none; -ms-overflow-style:none; }
  .igi-retic::-webkit-scrollbar { display:none; }
  .igi-retic > div { flex:0 0 76% !important; scroll-snap-align:center; }
  .igi-retic img { height:340px !important; }
  .igi-retic > div.igi-active img { filter:none; } /* item centrato nel carosello: a colori */
  .igi-pf-other-grid { grid-template-columns:1fr !important; }
  .igi-pf-cta { flex-direction:column; align-items:flex-start; }
}