/* Services page styles - SterkeMerkenHotel */
.hero-services {
  background: linear-gradient(135deg, rgba(10,22,40,0.85), rgba(19,42,74,0.65));
  color: var(--color-text-inverse);
}
.hero-services__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}
.hero-services__lead { color: var(--color-neutral-100); max-width: 58ch; }
.hero-services__actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
.hero-services__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); }

@media (max-width: 1024px) {
  .hero-services__grid { grid-template-columns: 1fr; }
}

.services-search__form { background: var(--color-surface); border: 1px solid var(--color-border-light); padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.services-search__row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); }
@media (max-width: 640px) { .services-search__row { grid-template-columns: 1fr; } }

.services-list .service-card { height: 100%; display: flex; flex-direction: column; }
.services-list .card-body { flex: 1 1 auto; }
.service-points { margin-top: var(--space-4); color: var(--color-text-secondary); }
.service-points li { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.service-figure { margin: var(--space-4) 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }

.cta-band { background: linear-gradient(120deg, var(--color-primary-900), var(--color-primary-700)); color: var(--color-text-inverse); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.cta-band__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 768px) { .cta-band__inner { flex-direction: column; align-items: flex-start; } }

/* Reveal animation */
.service-card { opacity: 0; transform: translateY(12px); transition: opacity var(--transition-slow) var(--ease-out), transform var(--transition-slow) var(--ease-out); }
.service-card.is-visible { opacity: 1; transform: translateY(0); }