/* ==========================================================================
   Alternivite - Services Page Styles
   ========================================================================== */

/* Sticky Service Navigation */
.service-nav {
   position: sticky;
   top: 72px;
   z-index: var(--z-sticky);
   background: var(--bg-primary);
   border-bottom: 1px solid var(--border-primary);
   padding: var(--space-3) 0;
}

.service-nav-inner {
   display: flex;
   gap: var(--space-1);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   padding: 0 var(--space-1);
}

.service-nav-inner::-webkit-scrollbar {
   display: none;
}

.service-nav-link {
   flex-shrink: 0;
   padding: var(--space-2) var(--space-3);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--text-secondary);
   text-decoration: none;
   border-radius: var(--radius-md);
   transition: all var(--duration-normal) var(--ease-default);
   white-space: nowrap;
}

.service-nav-link:hover {
   color: var(--text-primary);
   background: var(--bg-secondary);
}

.service-nav-link--active {
   color: var(--color-primary-700);
   background: var(--color-primary-100);
}

[data-theme="dark"] .service-nav-link--active {
   color: var(--color-primary-300);
   background: var(--color-primary-900);
}

/* Service Section Layout */
.service-section {
   max-width: 1000px;
   margin: 0 auto;
}

.service-header {
   margin-bottom: var(--space-8);
}

.service-title {
   font-size: var(--text-3xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-top: var(--space-3);
   margin-bottom: var(--space-3);
}

.service-subtitle {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   max-width: 700px;
}

/* 2x2 Grid for Service Cards */
.service-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-6);
   margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
   .service-grid {
      grid-template-columns: 1fr 1fr;
   }
}

/* Service Card */
.service-card {
   padding: var(--space-6);
   background: var(--bg-secondary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
   transition: border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}

.service-card:hover {
   border-color: var(--color-primary-200);
   box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .service-card:hover {
   border-color: var(--color-primary-800);
}

.service-card-title {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--text-base);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   margin-bottom: var(--space-3);
}

.service-card-title svg {
   color: var(--color-primary-500);
   flex-shrink: 0;
}

.service-card-text {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
}

.service-card-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.service-card-list li {
   position: relative;
   padding-left: var(--space-5);
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-2);
}

.service-card-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 8px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--color-primary-400);
}

/* Service Actions */
.service-actions {
   display: flex;
   gap: var(--space-3);
   flex-wrap: wrap;
}

/* Hero title highlight — scoped to page-hero only */
.page-hero .hero-title-highlight {
   color: var(--color-primary-600);
}

[data-theme="dark"] .page-hero .hero-title-highlight {
   color: var(--color-primary-400);
}

.page-hero .hero-actions {
   display: flex;
   gap: var(--space-3);
   justify-content: center;
   flex-wrap: wrap;
   margin-top: var(--space-6);
}

/* Responsive */
@media (max-width: 640px) {
   .service-title {
      font-size: var(--text-2xl);
   }

   .service-subtitle {
      font-size: var(--text-base);
   }

   .service-card {
      padding: var(--space-4);
   }
}