/* ==========================================================================
   Alternivite - Features Page Styles
   ========================================================================== */

/* Hero */
.feat-hero {
   padding-top: calc(var(--nav-height) + var(--space-16));
   padding-bottom: var(--space-8);
   text-align: center;
}

.feat-hero-content {
   max-width: 700px;
   margin: 0 auto;
}

.feat-hero-title {
   font-size: var(--text-4xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   line-height: var(--leading-tight);
   margin-bottom: var(--space-4);
}

.feat-hero-highlight {
   color: var(--color-primary-600);
}

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

.feat-hero-text {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
   .feat-hero-title {
      font-size: var(--text-5xl);
   }
}

/* Sticky Feature Nav */
.feat-nav {
   position: sticky;
   top: var(--nav-height);
   z-index: var(--z-raised);
   background: var(--bg-primary);
   border-bottom: 1px solid var(--border-primary);
   padding: var(--space-3) 0;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

.feat-nav-track {
   display: flex;
   gap: var(--space-2);
   min-width: max-content;
}

.feat-nav-link {
   padding: var(--space-2) var(--space-3);
   font-size: var(--text-xs);
   font-weight: var(--font-medium);
   color: var(--text-secondary);
   border-radius: var(--radius-lg);
   white-space: nowrap;
   text-decoration: none;
   transition: all var(--duration-fast) var(--ease-default);
}

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

/* Feature Section */
.feat-section {
   padding: var(--space-16) 0;
   scroll-margin-top: calc(var(--nav-height) + 60px);
}

/* Feature Grid (2-column layout) */
.feat-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-12);
   align-items: start;
}

@media (min-width: 900px) {
   .feat-grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-16);
   }
}

.feat-grid--reverse .feat-content {
   order: 2;
}

.feat-grid--reverse .feat-illustration {
   order: 1;
}

@media (min-width: 900px) {
   .feat-grid--reverse .feat-content {
      order: 1;
   }

   .feat-grid--reverse .feat-illustration {
      order: 2;
   }
}

/* Content */
.feat-badge {
   display: inline-flex;
   align-items: center;
   margin-bottom: var(--space-4);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wider);
}

.feat-title {
   font-size: var(--text-2xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-4);
   line-height: var(--leading-tight);
}

@media (min-width: 768px) {
   .feat-title {
      font-size: var(--text-3xl);
   }
}

.feat-description {
   font-size: var(--text-base);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-6);
}

/* Benefits List */
.feat-benefits {
   list-style: none;
   padding: 0;
   margin: 0 0 var(--space-8) 0;
}

.feat-benefits li {
   position: relative;
   padding-left: var(--space-6);
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-3);
}

.feat-benefits li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 7px;
   width: 8px;
   height: 8px;
   background: var(--color-success-500);
   border-radius: 2px;
   transform: rotate(45deg);
}

/* Technical Highlights */
.feat-tech {
   margin-top: var(--space-6);
}

.feat-tech-title {
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   margin-bottom: var(--space-4);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
}

.feat-tech-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-3);
}

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

.feat-tech-card {
   padding: var(--space-4);
   background: var(--bg-secondary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
}

.feat-tech-label {
   display: block;
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   color: var(--color-primary-600);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   margin-bottom: var(--space-1);
}

[data-theme="dark"] .feat-tech-label {
   color: var(--color-primary-400);
}

.feat-tech-text {
   font-size: var(--text-xs);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
}

/* Illustration */
.feat-illustration {
   display: flex;
   align-items: center;
   justify-content: center;
}

.feat-illustration svg {
   width: 100%;
   max-width: 440px;
   height: auto;
}

/* Feature CTA */
.feat-cta {
   display: flex;
   gap: var(--space-3);
   flex-wrap: wrap;
   margin-top: var(--space-8);
   padding-top: var(--space-8);
   border-top: 1px solid var(--border-primary);
}

/* Responsive */
@media (max-width: 640px) {
   .feat-hero {
      padding-top: calc(var(--nav-height) + var(--space-8));
   }

   .feat-hero-title {
      font-size: var(--text-2xl);
   }

   .feat-hero-text {
      font-size: var(--text-base);
   }

   .feat-section {
      padding: var(--space-10) 0;
   }

   .feat-title {
      font-size: var(--text-xl);
   }

   .feat-description {
      font-size: var(--text-sm);
   }
}