/* ==========================================================================
   IRSML — 2d-o-3d-planimetria-casa.css
   Stili specifici della guida "Configuratore casa 2D o 3D"
   ========================================================================== */

/* Colonne "Basta il 2D" / "Serve il 3D" ----------------------------------- */
.when-grid .card { display: flex; flex-direction: column; }
.when-grid .card h3 { margin-bottom: var(--s-md); }
.when-grid .icon-list { margin-bottom: var(--s-md); }
.when-grid .card > p:last-child {
  margin: auto 0 0;
  padding-top: var(--s-md);
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}

/* Card spotlight con l'esempio -------------------------------------------- */
.example-spotlight {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--s-xl);
  align-items: center;
}
.example-spotlight h2 { margin-bottom: var(--s-md); }
.example-spotlight .btn { margin-top: var(--s-xs); }

.example-list { list-style: none; margin: 0; padding: 0; }
.example-list li {
  padding: var(--s-sm) 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 14px;
  color: rgba(255, 255, 255, .86);
}
.example-list li strong { color: #fff; font-weight: 600; }

/* La tabella comparativa è il cuore della pagina: colonne bilanciate ------- */
#confronto .table-wrap table { table-layout: fixed; min-width: 620px; }
#confronto .table-wrap th:first-child { width: 30%; }

@media (max-width: 980px) {
  .example-spotlight { grid-template-columns: minmax(0, 1fr); }
}