/* Services Page Styles - Positief Resultaat Hotel & Casino */

.hero {
  position: relative;
  background: linear-gradient(180deg, rgba(15,35,56,0.7), rgba(15,35,56,0.4)), url('/assets/images/services-hero.webp') center/cover no-repeat;
  color: var(--color-text-inverse);
  padding: var(--spacing-24) 0 var(--spacing-20);
}
.hero-inner { text-align: center; }
.hero-title { color: var(--color-text-inverse); margin-bottom: var(--spacing-3); }
.hero-subtitle { color: #e8edf4; margin: 0 auto var(--spacing-6); max-width: 70ch; }
.hero-cta { display: inline-flex; gap: var(--spacing-3); flex-wrap: wrap; justify-content: center; }

.services-toc { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-background); border-bottom: 1px solid var(--color-gray-200); }
.toc-list { display: flex; gap: var(--spacing-3); overflow-x: auto; padding: var(--spacing-3) 0; }
.toc-link { display: inline-block; padding: var(--spacing-2) var(--spacing-4); border: 1px solid var(--color-gray-200); border-radius: var(--radius-full); white-space: nowrap; color: var(--color-primary-dark); }
.toc-link:hover { background: var(--color-warm-light); border-color: var(--color-secondary); }
.toc-link[aria-current="true"] { background: var(--color-secondary); color: var(--color-primary-dark); border-color: var(--color-secondary); }

.service-section { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }

/* Media block layout */
.media { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--spacing-8); align-items: center; }
.media-reverse { grid-template-columns: 1fr 1.15fr; }
.media-visual { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.media-visual img { width: 100%; height: auto; display: block; }
.media-content .feature-list { margin: var(--spacing-4) 0 var(--spacing-5); color: var(--color-text-light); }
.media-content .feature-list li { margin-bottom: var(--spacing-2); list-style: none; position: relative; padding-left: 1.25rem; }
.media-content .feature-list li::before { content: "\f00c"; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--color-secondary); position: absolute; left: 0; top: 0.1rem; }
.btn-group { display: flex; gap: var(--spacing-3); flex-wrap: wrap; }

/* Card refinements */
.card { border: 1px solid var(--color-gray-200); }
.card-title { margin-bottom: var(--spacing-3); }
.card-text { margin-bottom: var(--spacing-4); }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .media, .media-reverse { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero { padding: var(--spacing-20) 0 var(--spacing-16); }
  .toc-list { gap: var(--spacing-2); }
}