/* INFO ECLIPSE - i 3 box "glass" nella scheda DISPLAY di "Cosa si tratta" (lasergame.php).
   Il contenitore ha la classe .info_eclipse; caricato da lasergame.php con $page_css. */

   /* ================================
      INFO ECLIPSE (3 BOX) - SAFE + GLASS
      ================================ */

   .info_eclipse {
     position: relative;
   }

   /* Evita che stili globali del tema alterino tipografia/spacing */
   .info_eclipse h3,
   .info_eclipse p {
     margin: 0;
     padding: 0;
   }

   /* Griglia: mantiene le 3 card ordinate e con spazio coerente */
   .info_eclipse .row {
     row-gap: 22px;
   }

   /* CARD */
   .info_eclipse .info_eclipse__card {
     position: relative;

     /* glass “controllato” (non troppo trasparente) */
     background: rgba(20, 20, 20, 0.55);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);

     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 22px;

     padding: 28px 26px 30px 26px;

     box-shadow:
       0 12px 30px rgba(0, 0, 0, 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.10);

     transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

     /* uniforma altezze e allineamento */
     display: flex;
     flex-direction: column;
     min-height: 220px;
   }

   .info_eclipse .info_eclipse__card:hover {
     transform: translateY(-4px);
     border-color: rgba(255, 255, 255, 0.22);
     box-shadow:
       0 18px 45px rgba(0, 0, 0, 0.45),
       inset 0 1px 0 rgba(255, 255, 255, 0.14);
   }

   /* ICONA (SVG) */
   .info_eclipse .info_eclipse__icon {
     display: inline-flex;
     align-items: center;
     justify-content: flex-start;
     margin-bottom: 14px;
   }

   /* Forziamo la resa SVG contro eventuali override del tema */
   .info_eclipse .info_eclipse__icon svg {
     display: block;
     width: 45px;
     height: 45px;
   }

   .info_eclipse .info_eclipse__icon svg path {
     fill: #ffffff;
     opacity: 1;
   }

   /* TITOLO */
   .info_eclipse .info_eclipse__title {
     color: #ffffff;
     font-size: 20px;
     font-weight: 600;
     line-height: 1.25;
     margin-bottom: 10px;
   }

   /* TESTO */
   .info_eclipse .info_eclipse__text {
     color: rgba(255, 255, 255, 0.72);
     font-size: 15px;
     line-height: 1.6;
     margin-top: 0;
   }

   /* Su sfondi molto “rumorosi” (tipo hero-wrap), aumenta leggibilità */
   .info_eclipse .info_eclipse__card::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 22px;
     background: radial-gradient(
       120% 120% at 10% 0%,
       rgba(255, 255, 255, 0.10) 0%,
       rgba(255, 255, 255, 0.00) 60%
     );
     pointer-events: none;
   }

   /* Responsive */
   @media (max-width: 992px) {
     .info_eclipse .info_eclipse__card {
       min-height: 0;
     }
   }

   @media (max-width: 768px) {
     .info_eclipse .info_eclipse__card {
       padding: 24px 20px 26px 20px;
     }

     .info_eclipse .info_eclipse__title {
       font-size: 18px;
     }

     .info_eclipse .info_eclipse__text {
       font-size: 14px;
     }
   }

   /* Su tablet e telefono il testo del Display + i 3 box non stanno nei 700px fissi
      della testata (.hero-wrap-2 in sito.css): solo qui la lasciamo crescere. */
   @media (max-width: 991.98px) {
     #home3 .hero-wrap.hero-wrap-2,
     #home3 .hero-wrap.hero-wrap-2 .slider-text {
       height: auto;
       min-height: 700px;
     }
     #home3 .hero-wrap.hero-wrap-2 .slider-text {
       padding-top: 2rem;
       padding-bottom: 2rem;
     }
   }