/* ============================================
   SERVIZI DIGITALI: web design, Google Ads, video reel, Listing Optimizer.
   Caricato solo su template-servizi-digitali.php e sulla pagina listing-optimizer.
   ============================================ */

.svc-section { padding: var(--space-6) 0; }
.svc-text { color: var(--c-ink-soft); font-size: 1.05rem; line-height: 1.7; max-width: 640px; }

/* Cosa facciamo */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.svc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem; }
.svc-card h3 { font-size: 1.1rem; margin: 0 0 0.45rem; }
.svc-card h3::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--c-forest); margin-bottom: 0.9rem; }
.svc-card p { margin: 0; color: var(--c-ink-soft); font-size: 0.95rem; line-height: 1.55; }

/* Contesto locale + lavori */
.svc-local { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.svc-works { display: flex; flex-direction: column; gap: var(--space-2); }
.svc-works__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-soft); }
.svc-work { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 1.25rem 1.35rem; }
.svc-work h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.svc-work p { margin: 0; color: var(--c-ink-soft); font-size: 0.93rem; line-height: 1.55; }
.svc-work a { display: inline-block; margin-top: 0.7rem; color: var(--c-forest); font-weight: 600; font-size: 0.92rem; }
.svc-work a:hover { color: var(--c-forest-light); }

/* Modulo preventivo */
.svc-form-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-5); align-items: start; }
.svc-form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 1.6rem; }
.svc-form-intro .check-list { margin-top: var(--space-3); }

/* Collegamenti tra servizi e città */
.svc-section--links { padding: var(--space-5) 0 0; }
.svc-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.svc-links__title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-soft); margin: 0 0 0.8rem; }
.svc-links p { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.svc-pill {
  display: inline-flex; align-items: center; padding: 0.45em 1em; border: 1px solid var(--c-border); border-radius: 100px;
  color: var(--c-ink); font-size: 0.9rem; font-weight: 500; transition: border-color 0.2s ease, color 0.2s ease;
}
.svc-pill:hover { border-color: var(--c-forest); color: var(--c-forest); }

/* Listing Optimizer */
.opt-badge { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.9em; border-radius: 100px; background: rgba(255, 136, 58, 0.12); color: var(--c-forest); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: var(--space-2); }
.opt-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-forest); }

@media (max-width: 980px) {
  .svc-grid, .svc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-local, .svc-form-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (max-width: 640px) {
  .svc-section { padding: var(--space-5) 0; }
  .svc-grid, .svc-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .svc-links { grid-template-columns: minmax(0, 1fr); }
  .svc-form { padding: 1.1rem; }
}