﻿:root{
  --bg:#ffffff; --text:#0f172a; --muted:#64748b; --brand:#ea580c; --ring:#60a5fa;
  --card:#0b1220; --cardText:#f8fafc;
}
body{margin:0; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); background:var(--bg)}
.wrap{max-width:1200px; margin:0 auto; padding:clamp(12px,3vw,28px)}

.title{ text-align:center; margin:4px 0 18px; font-size:clamp(20px,3.4vw,30px); color:var(--brand) }

/* GRIGLIA 4 CARD */
.grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items:stretch }

a.card{
  position:relative; display:block; border-radius:18px; overflow:hidden; text-decoration:none; color:var(--cardText);
  background:var(--card); box-shadow: 0 10px 30px rgba(2,6,23,.25);
  transition: transform .18s ease, box-shadow .18s ease;
  isolation:isolate; /* evita sovrapposizioni tra card adiacenti */
  aspect-ratio: 16 / 10; /* altezza coerente su una riga */
}
@supports not (aspect-ratio: 1){ .card{ height: 260px; } }

a.card:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(2,6,23,.35) }
a.card:focus{ outline:none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring), transparent 60%), 0 10px 30px rgba(2,6,23,.25) }

/* immagine di sfondo */
.card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05); z-index:0 }
/* gradient overlay per testo leggibile */
.card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0) 35%, rgba(0,0,0,.55) 100%); z-index:1 }

/* contenuti */
.content{ position:absolute; left:0; right:0; bottom:0; padding:16px; display:flex; flex-direction:column; gap:6px; z-index:2 }
.eyebrow{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.9 }
.name{ font-size:clamp(32px,2.4vw,22px); font-weight:900 }
.desc{ font-size:14px; color:#e2e8f0 }
.cta{ align-self:flex-start; margin-top:6px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:4px 10px; font-size:13px }


