/* ==========================================================================
   RB Service - Stili specifici di pagina.
   Qui si aggiungono SOLO classi che servono a una pagina precisa e che non
   esistono in base.css. Ogni blocco va commentato con la pagina di riferimento.
   ========================================================================== */

/* --- Home: le due porte d'ingresso ---------------------------------------- */
.doors { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.door {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); border-radius: var(--r-lg); text-decoration: none; color: inherit;
  border: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  overflow: hidden;
}
.door::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--door-color, var(--brand));
}
.door:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--door-color, var(--brand)); color: inherit; }
.door h2 { font-size: var(--fs-xl); margin: 0; }
.door p { color: var(--ink-soft); margin: 0; }
.door__eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--door-color, var(--brand)); }
.door__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.door__list li { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.door__list li + li::before { content: "\00b7"; margin-right: var(--sp-2); color: var(--ink-faint); }
.door__more { margin-top: auto; padding-top: var(--sp-4); font-weight: 700; font-size: var(--fs-sm); color: var(--door-color, var(--brand)); }
.door--negozio { --door-color: var(--negozio); }
.door--industria { --door-color: var(--industria); }
.door--loxone { --door-color: var(--loxone); }
.door--progettazione { --door-color: var(--progetto); }

/* --- Home: barra "riprendi da..." ----------------------------------------- */
.resume-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  border: 1px dashed var(--line); border-radius: var(--r-md);
  background: var(--bg-alt); font-size: var(--fs-sm); color: var(--ink-soft);
}
.resume-bar a { font-weight: 700; }

/* --- Blocchi testo + elenco affiancati (pagine di reparto) ---------------- */
.split { display: grid; gap: var(--sp-6); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
@media (max-width: 900px) { .split--sticky > :first-child { position: static; } }

/* --- Passi numerati (come lavoriamo) -------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: var(--sp-5); }
.steps > li { counter-increment: step; margin: 0; padding-left: 3.4rem; position: relative; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -.15em;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong);
  font-weight: 700; font-size: var(--fs-sm);
}
.steps h3 { margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.steps p { margin: 0; color: var(--ink-soft); }

/* --- Domande frequenti ---------------------------------------------------- */
.faq { display: grid; gap: var(--sp-3); }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.faq summary { padding: var(--sp-4); font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding: 0 var(--sp-4) var(--sp-4); margin: 0; color: var(--ink-soft); }

/* --- Riquadro informativo ------------------------------------------------- */
.note {
  border-left: 4px solid var(--accent); background: var(--accent-soft);
  padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.note p:last-child { margin-bottom: 0; }

/* --- Elenco specifiche tecniche ------------------------------------------- */
.specs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.specs li { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.specs b { min-width: 11rem; }

/* --- Immagine segnaposto -------------------------------------------------- */
.ph {
  display: grid; place-items: center; border-radius: var(--r-lg); border: 1px dashed var(--line);
  color: var(--ink-faint); font-size: var(--fs-xs); text-align: center; padding: var(--sp-5);
  min-height: 220px;
}

/* --- Scheda contatti ------------------------------------------------------ */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.contact-list li { margin: 0; }
.contact-list b { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: var(--sp-1); }
.map-frame { border: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-lg); }