/* ==========================================================================
   IRSML — home.css
   Stili specifici della homepage (configuratore casa online)
   ========================================================================== */

/* Hero -------------------------------------------------------------------- */
.hero { padding-top: 72px; padding-bottom: 72px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s-xxl);
  align-items: center;
}

.hero-copy h1 { margin-bottom: var(--s-lg); max-width: 15ch; }
.hero-copy > p { max-width: 54ch; margin-bottom: var(--s-lg); }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-lg);
  list-style: none;
  margin: var(--s-lg) 0 0;
  padding: 0;
}
.hero-facts li { display: flex; align-items: center; gap: 6px; margin: 0; }
.hero-facts .icon { color: var(--success); }

.hero-mockup { box-shadow: 0 0 0 .5px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.45); }
.plan-svg { width: 100%; height: auto; display: block; }
.mockup-caption { margin: var(--s-sm) 0 0; }

/* Come funziona ----------------------------------------------------------- */
.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-xl);
}
.step-list > li { margin-bottom: 0; padding-left: 0; }
.step-list > li::before { position: static; margin-bottom: var(--s-sm); }
.step-list .icon-tile { display: none; }

/* Funzionalità ------------------------------------------------------------ */
.feature-grid .card { display: flex; flex-direction: column; }

/* Rendering 3D ------------------------------------------------------------ */
.render-spotlight {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: var(--s-xl);
  align-items: center;
}
.render-copy h2 { margin-bottom: var(--s-md); }
.render-copy p:last-child { margin-bottom: 0; }
.render-facts { list-style: none; margin: 0; padding: 0; }
.render-facts li {
  display: flex;
  gap: var(--s-sm);
  align-items: flex-start;
  padding: var(--s-md) 0;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: 14px;
  color: rgba(255,255,255,.86);
}
.render-facts li strong { color: #fff; font-weight: 600; }
.render-facts .icon { margin-top: 1px; }

/* Arredamento ------------------------------------------------------------- */
.arredo-layout {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: var(--s-lg);
  align-items: stretch;
}
.arredo-spotlight { display: flex; flex-direction: column; justify-content: center; }
.arredo-spotlight h3 { margin-bottom: var(--s-sm); }
.arredo-spotlight p:last-child { margin-bottom: 0; }

/* Prezzi ------------------------------------------------------------------ */
.pricing-switch { width: max-content; margin-bottom: var(--s-lg); }
#fatt-mensile:checked ~ .pricing-switch label[for="fatt-mensile"],
#fatt-annuale:checked ~ .pricing-switch label[for="fatt-annuale"] {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pricing-radio:focus-visible ~ .pricing-switch label { box-shadow: 0 0 0 2px var(--accent-blue); }

.price-annuale { display: none; }
#fatt-annuale:checked ~ .pricing-grid .price-mensile { display: none; }
#fatt-annuale:checked ~ .pricing-grid .price-annuale { display: inline; }

.pricing-grid { align-items: stretch; }

/* Professionisti ---------------------------------------------------------- */
.pro-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--s-xxl);
  align-items: center;
}
.pro-grid .prose, .pro-grid p { max-width: 60ch; }
.export-list li { align-items: flex-start; }
.export-list li:last-child { margin-bottom: 0; }

/* Social proof ------------------------------------------------------------ */
.proof-card { text-align: left; }
.proof-number {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0 0 var(--s-xs);
  color: var(--ink);
}
.proof-stars { display: flex; gap: 2px; color: var(--ink); }
.proof-stars .icon { width: 20px; height: 20px; }

/* CTA banner -------------------------------------------------------------- */
.cta-banner .btn-row { justify-content: flex-start; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid,
  .render-spotlight,
  .arredo-layout,
  .pro-grid,
  .cta-banner { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 48px; padding-bottom: 48px; }
  .hero-copy h1 { max-width: none; }
  .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .step-list { grid-template-columns: minmax(0, 1fr); gap: var(--s-lg); }
  .proof-number { font-size: 28px; }
  .pricing-switch { width: 100%; justify-content: space-between; }
  .pricing-switch label { flex: 1 1 auto; justify-content: center; }
}