/* ============================================================
   WIKI MILANO — Componenti colorati (nuovo, 2026)
   Card · badge · callout · hero · griglie · video · CTA
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, #072c56 0%, #0d5aa7 55%, #0ea5e9 100%);
  border-radius: 16px; padding: 34px 38px; margin: 0 0 28px;
  color: #fff; box-shadow: 0 12px 32px rgba(7,44,86,.32); position: relative; overflow: hidden;
}
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(30,158,90,.35); }
.hero::before { content: ""; position: absolute; right: 40px; bottom: -80px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.12); }
.hero-eyebrow {
  display: inline-block; background: rgba(255,255,255,.18); color: #fff; font-size: 11.5px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.3); position: relative; z-index: 1;
}
.hero h1 { border: none; color: #fff; padding: 0; margin: 0 0 12px; position: relative; z-index: 1; }
.hero p.lead { color: #dbeaff; position: relative; z-index: 1; }
.hero-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 20px; position: relative; z-index: 1; }
.stat { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 12px 20px; }
.stat b { display: block; font-size: 23px; color: #7cf0b8; }
.stat span { font-size: 12.5px; color: #dbeaff; }

/* ---------- Card e griglie ---------- */
.grid { display: grid; gap: 18px; margin: 18px 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: #fff; border: 1px solid var(--bordo); border-radius: 14px; padding: 22px;
  border-top: 5px solid var(--azzurro-vivo); box-shadow: 0 4px 14px rgba(13,90,167,.08);
  transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(13,90,167,.16); }
.card-verde { border-top-color: var(--verde); }
.card-rosso { border-top-color: var(--rosso); }
.card-ambra { border-top-color: var(--ambra); }
.card-porpora { border-top-color: var(--porpora); }
.card .icona { font-size: 28px; margin-bottom: 8px; }
.card h3 { font-size: 16.5px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--grigio); text-align: left; }
.card .link-card { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 13.5px; color: var(--verde-scuro); border: none; }

/* ---------- Badge ---------- */
.badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; letter-spacing: .4px; text-transform: uppercase; }
.badge-verde { background: var(--verde-chiaro); color: var(--verde-scuro); border: 1px solid #bfe8d2; }
.badge-rosso { background: var(--rosso-chiaro); color: var(--rosso); border: 1px solid #f3c6c0; }
.badge-blu { background: var(--azzurro); color: var(--blu); border: 1px solid #c2daf7; }
.badge-ambra { background: var(--ambra-chiaro); color: var(--ambra); border: 1px solid #f0d9b8; }
.badge-porpora { background: var(--porpora-chiaro); color: var(--porpora); border: 1px solid #ddd0f0; }

/* ---------- Callout colorati ---------- */
.evidenza { background: var(--verde-chiaro); border-left: 6px solid var(--verde); padding: 15px 20px; margin: 20px 0; border-radius: 0 10px 10px 0; }
.avviso { background: var(--rosso-chiaro); border-left: 6px solid var(--rosso); padding: 15px 20px; margin: 20px 0; border-radius: 0 10px 10px 0; }
.nota { background: var(--ambra-chiaro); border-left: 6px solid var(--ambra); padding: 15px 20px; margin: 20px 0; border-radius: 0 10px 10px 0; }
.info { background: var(--azzurro); border-left: 6px solid var(--azzurro-vivo); padding: 15px 20px; margin: 20px 0; border-radius: 0 10px 10px 0; }
.viola { background: var(--porpora-chiaro); border-left: 6px solid var(--porpora); padding: 15px 20px; margin: 20px 0; border-radius: 0 10px 10px 0; }

/* ---------- Quote ---------- */
.quote {
  background: linear-gradient(135deg, var(--azzurro), #f7fbff);
  border-left: 5px solid var(--azzurro-vivo); padding: 16px 22px; margin: 20px 0;
  font-style: italic; color: var(--blu-scuro); border-radius: 0 10px 10px 0; font-size: 15.5px;
}
.quote .da { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--grigio); font-weight: 700; }

/* ---------- Tabelle colorate ---------- */
.tabella { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14px; }
.tabella th, .tabella td { border: 1px solid var(--bordo); padding: 9px 13px; text-align: left; }
.tabella th { background: linear-gradient(180deg, var(--blu), var(--blu-scuro)); color: #fff; }
.tabella tr:nth-child(even) td { background: #f7fafd; }
.tabella .ok { color: var(--verde-scuro); font-weight: 800; }
.tabella .no { color: var(--rosso); font-weight: 800; }

/* ---------- Prima/Dopo e casi ---------- */
.primadopo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.primadopo figure { margin: 0; position: relative; }
.primadopo img { width: 100%; border: 1px solid var(--bordo); border-radius: 10px; }
.primadopo figcaption {
  position: absolute; top: 10px; left: 10px; background: rgba(7,44,86,.85); color: #fff;
  font-size: 12px; padding: 4px 12px; border-radius: 999px; font-weight: 700;
}
.casi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 18px 0; }
.casi-grid figure { margin: 0; background: #f7fafd; border: 1px solid var(--bordo); border-radius: 12px; padding: 12px; }
.casi-grid img { width: 100%; border-radius: 8px; border: 1px solid var(--bordo); }
.casi-grid figcaption { font-size: 12.5px; color: var(--grigio); text-align: center; margin-top: 8px; }

/* ---------- Video ---------- */
.video-embed { aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; }
.video-embed.vertical { aspect-ratio: 9/16; max-width: 330px; margin: 0 auto; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-box { width: 100%; max-width: 100%; margin: 32px auto; text-align: center; }
.video-box figcaption { font-size: 13px; color: var(--grigio); margin-top: 10px; }
.video-box video { border-radius: 12px; border: 1px solid var(--bordo); box-shadow: 0 6px 20px rgba(7,44,86,.18); }
.video-card { background: #fff; border: 1px solid var(--bordo); border-radius: 12px; overflow: hidden; margin: 0 0 20px; }
.video-card .testo { padding: 14px 18px; }
.video-card h3 { font-size: 15.5px; margin-bottom: 6px; }
.video-card p { font-size: 13.5px; color: var(--grigio); }

/* ---------- CTA ---------- */
.cta-finale {
  background: linear-gradient(135deg, #072c56, #0d5aa7 50%, #1e9e5a 130%);
  color: #fff; border-radius: 16px; padding: 38px; text-align: center; margin: 44px 0 0;
  box-shadow: 0 12px 32px rgba(7,44,86,.28);
}
.cta-finale h2 { color: #fff; border: none; background: none; padding: 0; }
.cta-finale p { color: #dbeaff; }
.btn { display: inline-block; padding: 12px 26px; border-radius: 999px; font-weight: 800; font-size: 14.5px; margin: 6px 5px; text-decoration: none; border: none; transition: transform .12s; }
.btn:hover { transform: translateY(-2px); }
.btn-verde { background: linear-gradient(180deg, #2ec375, #1e9e5a); color: #fff; box-shadow: 0 6px 16px rgba(30,158,90,.4); }
.btn-verde:hover { color: #fff; }
.btn-bianco { background: #fff; color: var(--blu-notte); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.btn-outline { border: 2px solid var(--blu); color: var(--blu); }

/* ---------- Lead e keyword ---------- */
.lead { font-size: 16.5px; color: var(--grigio); margin-bottom: 22px; }
.keywords { margin: 36px 0 0; padding-top: 16px; border-top: 1px solid var(--bordo); }
.keywords b { display: block; margin-bottom: 10px; color: var(--testo); font-size: 13px; }
.keywords a {
  display: inline-block; margin: 0 8px 8px 0; padding: 6px 15px; background: #fff; border: 1px solid var(--bordo);
  border-radius: 999px; font-size: 13px; color: var(--blu); border-bottom: 1px solid var(--bordo);
}
.keywords a:hover { background: var(--azzurro); }

.content figure { margin: 20px 0; text-align: center; }
.content figcaption { font-size: 13px; color: var(--grigio); margin-top: 8px; }
.content img.bordo { border: 1px solid var(--bordo); border-radius: 10px; }

/* ---------- Comuni ---------- */
.comuni-grid { columns: 3; column-gap: 28px; font-size: 14px; }
.comuni-grid a { color: var(--blu); text-decoration: none; display: block; padding: 3px 0; break-inside: avoid; border: none; }
.comuni-grid a:hover { color: var(--verde-scuro); }

@media (max-width: 860px) {
  .grid-2, .grid-3, .casi-grid, .primadopo { grid-template-columns: 1fr; }
  .comuni-grid { columns: 2; }
}

/* ---------- Coppia di immagini affiancate ---------- */
.img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.img-pair figure { margin: 0; text-align: center; }
.img-pair img { width: 100%; border-radius: 12px; border: 1px solid #d7e1ec; box-shadow: 0 4px 14px rgba(13,90,167,.12); background: #fff; }
.img-pair figcaption { font-size: 13px; color: #5a6b7d; margin-top: 6px; }
.img-pair-verde { background: linear-gradient(135deg, #e8f7ef, #cdeedd); border-radius: 16px; padding: 24px; border: 1px solid #bfe8d2; }
.img-pair-blu { background: linear-gradient(135deg, #eaf3ff, #d6e8fb); border-radius: 16px; padding: 24px; border: 1px solid #c2daf7; }
.img-pair-rosso { background: linear-gradient(135deg, #fdecea, #f9d5d0); border-radius: 16px; padding: 24px; border: 1px solid #f3c6c0; }
.img-pair-ambra { background: linear-gradient(135deg, #fdf3e3, #f7e6c8); border-radius: 16px; padding: 24px; border: 1px solid #f0d9b8; }
@media (max-width: 860px) { .img-pair { grid-template-columns: 1fr; } }