/* Servizi (motorista-navale, navi-rimorchiatori, yacht) — regole specifiche */

/* Hero split: testo a sinistra, illustrazione a destra */
.srv-hero .subhead {
  max-width: 560px;
}

.srv-hero-art {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}

.srv-hero-art [data-art] {
  filter: drop-shadow(0 30px 60px rgba(10, 102, 214, 0.35));
}

/* Breadcrumb in cima alla hero, sotto il menu (la sezione dopo la hero può così essere blu) */
.hero > .srv-crumbs {
  position: absolute;
  top: calc(var(--nav-h) + 18px);
  left: 0;
  right: 0;
  z-index: 2;
}

/* Cornice illustrazione su sfondo grigio: resta leggibile */
.bg-alt .art {
  --art-bg: #ffffff;
}

/* Testo di supporto nei split */
.srv-split-note {
  margin-top: 20px;
  color: var(--text-2);
}

.bg-dark .srv-split-note {
  color: var(--text-inv-2);
}

/* Steps e stats: respiro sotto la testata di sezione */
/* Processo overhaul in 5 fasi: 5 colonne esplicite (l'auto-fit di .steps ne farebbe 4 in un .container da 980px) */
.srv-steps {
  margin-top: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.srv-stats {
  margin-top: 8px;
}

.srv-stats .stat {
  min-width: 0;
}

/* CTA finale su sfondo scuro */
.srv-cta .hero-actions {
  margin-top: 36px;
}

.srv-cta .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.srv-cta a:not(.btn) {
  color: #2997ff;
}

.srv-cta-meta {
  margin-top: 24px;
  color: var(--text-inv-2);
}

/* Link nei blocchi scuri (features, list) */
.bg-dark .feature a,
.bg-dark .acc-body a {
  color: #2997ff;
}

/* Griglia prodotti consigliati */
.srv-products .product-grid {
  margin-top: 8px;
}

@media (max-width: 1068px) {
  .srv-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 834px) {
  /* Sotto 834px style.css centra il testo dell'hero-split: centra anche il box del sottotitolo */
  .srv-hero .subhead {
    margin-inline: auto;
  }

  .hero > .srv-crumbs .breadcrumb {
    justify-content: center;
  }

  .srv-hero-art {
    max-width: 320px;
    margin-top: 8px;
  }

  .srv-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .srv-hero-art {
    max-width: 260px;
  }

  .srv-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .srv-cta .hero-actions .btn {
    width: 100%;
  }
}