/* =====================================================
   GENIA BIG DATA — whitepaper.css
   Stili specifici per whitepaper.html
   Riusa sempre i design token globali definiti in style.css
   ===================================================== */

/* ====== HERO WHITEPAPER ====== */
.wp-hero {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sv) + 48px) 0 96px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, var(--brand-xs) 0%, transparent 65%),
    var(--bg-3);
}
.wp-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}
.wp-h1 {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.8vw, 4rem);
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 30px;
}
.wp-h1 .hl {
  background: linear-gradient(110deg,
    var(--brand-d) 0%,
    var(--brand) 22%,
    var(--brand-l) 42%,
    #6366F1 60%,
    var(--brand) 80%,
    var(--brand-d) 100%);
  background-size: 280% 280%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: hlMeshFlow 9s ease-in-out infinite;
}
[data-theme="dark"] .wp-h1 .hl {
  background: linear-gradient(110deg,
    var(--brand-l) 0%,
    var(--brand) 22%,
    #60CCEF 42%,
    #818CF8 60%,
    var(--brand-l) 80%,
    var(--brand) 100%);
  background-size: 280% 280%;
  -webkit-background-clip: text; background-clip: text;
  animation: hlMeshFlow 9s ease-in-out infinite;
}
.wp-sub {
  color: var(--text-2);
  font-size: 1.15rem;
  line-height: 1.85;
  max-width: 680px;
  margin: 0 auto 44px;
}
.wp-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Credito "a cura di", trattamento premium: badge icona pieno + sfondo sfumato */
.wp-hero-credit {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(135deg, var(--card), var(--brand-xs));
  border: 1px solid var(--border-s);
  border-radius: 100px;
  padding: 8px 24px 8px 8px;
  box-shadow: var(--sh-card);
}
.wp-hero-credit-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-d), var(--brand));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  box-shadow: 0 3px 10px rgba(43,181,232,.35);
}
.wp-hero-credit-text {
  font-family: var(--font-h);
  font-size: .85rem;
  letter-spacing: .01em;
  color: var(--text-2);
}
.wp-hero-credit-text strong { color: var(--text); font-weight: 700; }

/* ====== STATO ATTIVO NAV (voce "Whitepaper") ====== */
.nav-links a.nav-active,
.mobile-menu .mob-link.nav-active { color: var(--brand) !important; }

/* ====== INTRO / MANIFESTO "GBD WHITE PAPER" — due colonne ====== */
.wp-intro { padding-top: 40px; padding-bottom: 24px; }
.wp-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: stretch;
  max-width: 1040px;
  margin: 0 auto;
}
.wp-intro-manifesto-col,
.wp-intro-text-col {
  display: flex;
  flex-direction: column;
}
/* Il "corpo" di ogni colonna si centra nello spazio libero sotto il titolo,
   così le due colonne restano pareggiate anche se card e testo hanno altezze diverse */
.wp-intro-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Titolo di colonna, a colore */
.wp-intro-col-title {
  font-family: var(--font-h);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-d);
  margin: 0 0 18px;
}
[data-theme="dark"] .wp-intro-col-title { color: var(--brand-l); }

/* Card bianca per il tricolon, con badge icona che si illumina al passaggio del mouse */
.wp-manifesto-card {
  background: var(--card);
  border: 1px solid var(--border-s);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  padding: 30px 26px;
  transition: box-shadow var(--t), border-color var(--t);
}
.wp-manifesto-card:hover { border-color: var(--border-a); box-shadow: var(--sh-hover); }
.wp-manifesto {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.wp-manifesto li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.wp-manifesto-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-xl);
  color: var(--brand-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background var(--t), color var(--t), box-shadow var(--t), transform var(--t);
}
[data-theme="dark"] .wp-manifesto-icon { color: var(--brand-l); }
.wp-manifesto li:hover .wp-manifesto-icon {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 6px var(--brand-xl), 0 6px 18px rgba(43,181,232,.4);
  transform: scale(1.08);
}
.wp-manifesto li span:last-child {
  font-family: var(--font-b);
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text);
  padding-top: 7px;
}

/* Colonna testo: watermark "GBD White Paper" contenuto nel corpo della colonna */
.wp-intro-text-col .wp-intro-col-body {
  position: relative;
  overflow: hidden;
}
.wp-intro-text-col .swm {
  font-size: clamp(1.8rem, 3.2vw, 3.4rem) !important;
  right: -0.02em;
  bottom: -0.08em;
}
.wp-intro-text {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 18px;
}
.wp-intro-text:last-child { margin-bottom: 0; }
.wp-intro-text strong { color: var(--text); font-weight: 700; }

/* Chiusura prima della griglia: tre "pulsanti" finti, non cliccabili, in risalto */
.wp-manifesto-sm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 1;
}
.wp-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  border-radius: 100px;
  padding: 11px 24px;
  cursor: default;
  user-select: none;
}
.wp-pill i { font-size: .85rem; }
.wp-pill-blue   { background: linear-gradient(90deg, var(--brand-d), var(--brand), var(--brand-l)); }
.wp-pill-indigo { background: linear-gradient(90deg, #4338CA, #6366F1, #818CF8); }
.wp-pill-green  { background: linear-gradient(90deg, #15803D, #22C55E, #4ADE80); }

/* ====== GRIGLIA RISORSE ====== */
.wp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ====== CARD RISORSA ====== */
.wp-card {
  background: var(--card);
  border: 1px solid var(--border-s);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.wp-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-a);
  box-shadow: var(--sh-hover);
}
.wp-card-cover {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wp-card-cover i { font-size: 2.6rem; color: rgba(255,255,255,.92); }
.wp-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cover-wp { background: linear-gradient(135deg, var(--brand-d), var(--brand) 55%, var(--brand-l)); }

.wp-card-body {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}
.wp-card-body h3 {
  font-family: var(--font-h);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 10px 0 8px;
}
.wp-card-body p {
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.65;
  flex: 1;
}
.wp-card-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.wp-card-points li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .85rem;
  color: var(--text-2);
  line-height: 1.5;
}
.wp-card-points li i {
  margin-top: 3px;
  font-size: .7rem;
  flex-shrink: 0;
  color: var(--brand);
}
.wp-card-meta {
  font-size: .78rem;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
}
.wp-card-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.wp-card-footer .btn {
  width: 100%;
  justify-content: center;
}
.wp-download-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Campo honeypot anti-bot: fuori schermo, mai visibile/raggiungibile per un utente reale */
.wp-hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ====== MODALE GATE EMAIL ====== */
.wp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,25,41,.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t);
}
.wp-modal-overlay.wp-modal-visible { opacity: 1; visibility: visible; }

.wp-modal-card {
  background: var(--card);
  border-radius: var(--r);
  max-width: 440px;
  width: calc(100% - 32px);
  padding: 34px 32px;
  position: relative;
  box-shadow: var(--sh-hover);
  transform: translateY(12px);
  transition: transform var(--t);
}
.wp-modal-overlay.wp-modal-visible .wp-modal-card { transform: translateY(0); }

.wp-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-modal-head { text-align: center; margin-bottom: 20px; }
.wp-modal-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--brand-xl);
  color: var(--brand-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin: 0 auto 14px;
}
.wp-modal-sub { color: var(--text-2); font-size: .85rem; margin-top: 4px; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 1080px) {
  .wp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .wp-intro-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .wp-grid { grid-template-columns: 1fr; }
  .wp-hero { min-height: 64vh; }
  .wp-h1 { font-size: 2.2rem; }
  .wp-manifesto-sm { gap: 10px; }
  .wp-pill { font-size: .88rem; padding: 9px 18px; }
}
@media (max-width: 480px) {
  .wp-card-body { padding: 20px; }
  .wp-modal-card { padding: 26px 22px; }
}