/* approf-griglia.css — griglia "1 grande + 5 piccole" degli approfondimenti, nella home sopra "Le domande decisive".
   Riferimento: fascia hm-grid di termografiatop.it (16/09/2026), riportata nei token di TOP: foto a tutto campo
   con velo navy che si scurisce verso il basso, chip categoria, titolo bianco, riga meta (autore in rame + data).
   La foto è un <img> con srcset (non background-image) per alt text e peso: 800 px nelle piccole, 1600 nella grande. */
.ag{padding:56px 0 24px;background:var(--ivory)}
.ag-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.ag-head .eyebrow{margin-bottom:8px}
.ag-head h2{margin:0}
.ag-head .link{flex:0 0 auto;white-space:nowrap}
.ag-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ag-grid li{position:relative;border-radius:12px;overflow:hidden;min-height:200px;display:flex;align-items:flex-end;background:var(--navy);isolation:isolate}
.ag-grid li.ag-big{grid-column:span 2;grid-row:span 2;min-height:414px}
.ag-img{position:absolute;inset:0;z-index:0;display:block}
.ag-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(.8) contrast(1.04);transition:transform .6s ease}
.ag-grid li:hover .ag-img img{transform:scale(1.045)}
/* velo: quasi trasparente in alto, navy pieno dove sta il testo */
.ag-grid li:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(11,29,54,.94) 0%,rgba(15,39,71,.52) 55%,rgba(15,39,71,.08) 100%)}
.ag-link{position:absolute;inset:0;z-index:3}
.ag-link:focus-visible{outline:3px solid var(--copper);outline-offset:-3px;border-radius:12px}
.ag-txt{position:relative;z-index:2;padding:18px 20px;pointer-events:none}
.ag-txt a{pointer-events:auto}
.ag-cat{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(2px);border-radius:3px;padding:3px 8px;line-height:1.5;margin-bottom:10px}
.ag-big .ag-cat{background:var(--copper)}
.ag-title{font-weight:700;letter-spacing:-.015em;line-height:1.24;margin:0 0 8px;color:#fff;font-size:1rem;text-wrap:balance}
.ag-big .ag-title{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.ag-title a{color:#fff;text-decoration:none}
.ag-title a:hover{text-decoration:underline}
.ag-meta{display:flex;flex-wrap:wrap;gap:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem;letter-spacing:.02em;color:#C6CBD1}
.ag-meta .ag-aut{color:#E6E9EC}
.ag-big .ag-txt{padding:24px 26px;max-width:40rem}
@media(max-width:950px){
  .ag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag-grid li.ag-big{grid-column:span 2;grid-row:auto;min-height:260px}
}
@media(max-width:680px){
  .ag{padding:40px 0 16px}
  .ag-head{flex-direction:column;gap:4px}
  .ag-grid{grid-template-columns:1fr}
  .ag-grid li,.ag-grid li.ag-big{min-height:210px;grid-column:auto;grid-row:auto}
  .ag-big .ag-txt{padding:18px 20px}
}
@media(prefers-reduced-motion:reduce){.ag-img img{transition:none}.ag-grid li:hover .ag-img img{transform:none}}