/*
//  Created by Charlie Manning, Little Guy Dev, LLC on August 12, 2025.
//  Copyright © 2025 The Sacred Circle. All rights reserved.
*/

/* Page hero */
.features-hero {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color: var(--light-text-color);
  padding: 4rem 1.5rem;
  text-align: center;
}

.features-hero .container {
  max-width: 1100px;
  margin: 0 auto;
}

.features-hero h1 {
  font-family: var(--md-ref-typeface-brand);
  font-size: 2.6rem;
  margin: 0 0 0.75rem 0;
  color: var(--light-text-color);
}

.features-hero p { color: var(--light-text-color); font-size: 1.15rem; margin: 0 auto 1.25rem; max-width: 720px; }

.features-hero .cta-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; }

.stats-strip { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
  gap: 0.75rem; 
  margin-top: 1.5rem; 
}

.stats-strip .stat { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  background: rgba(0,0,0,0.15); 
  border-radius: var(--md-sys-shape-corner-large); 
  padding: 10px 12px; 
  color: var(--light-text-color); 
}

.stats-strip .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* Chip filter */
.chip-filter-section { padding: 2rem 1rem; }

/* Features grid */
.features-grid-section { padding: 1rem 1rem 3rem; }

.features-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.feature-card {
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-level1);
  padding: 1.5rem;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover { transform: translateY(-4px); box-shadow: var(--md-sys-elevation-level2); }

.feature-card .feature-icon { font-size: 2rem; color: var(--primary-color); margin-bottom: 0.5rem; line-height: 1; }
.feature-card h3 { margin: 0 0 0.5rem; font-family: var(--md-ref-typeface-brand); color: var(--primary-color); }
.feature-card p { margin: 0; }

/* Showcases */
/* Screenshots carousel */
.screenshots-carousel { padding: 3rem 1rem; text-align: center; }
.screenshots-carousel h2 { color: var(--primary-color); margin-bottom: 1rem; }
.carousel {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.carousel-track {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 360px);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 8px;
}
.carousel-track::-webkit-scrollbar { height: 8px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline); border-radius: 8px; }
.carousel-item { scroll-snap-align: start; background: var(--md-sys-color-surface); border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-sys-elevation-level1); padding: 10px; }
.carousel-item img { width: 100%; height: auto; display: block; border-radius: var(--md-sys-shape-corner-medium); }
.carousel-item figcaption { font-size: 0.9rem; margin-top: 6px; color: var(--md-sys-color-on-surface-variant); }
.carousel-btn {
  background: #1d1b20;
  color: #fff;
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--md-sys-elevation-level2);
}
.carousel-btn:hover { transform: translateY(-1px); }

/* CTA banner */
.cta-banner {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color: var(--light-text-color);
  padding: 3rem 1rem;
  text-align: center;
}
.cta-banner h2, .cta-banner p { color: var(--light-text-color); }
.cta-banner .cta-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; }

/* Newsletter overrides to match site */
.newsletter-section { background-color: var(--background-color); padding: 4rem 2rem; text-align: center; max-width: 1200px; margin: 0 auto; }
.newsletter-form { max-width: 500px; margin: 1.5rem auto 0; }
.newsletter-form input[type="email"] { width: 100%; padding: 0.8rem 1rem; font-size: 1rem; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-large); margin-bottom: 1rem; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); }
.newsletter-form button { background-color: var(--accent-color); color: var(--primary-color); font-weight: bold; padding: 0.8rem 2rem; border-radius: var(--md-sys-shape-corner-extra-large); border: none; cursor: pointer; font-size: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; box-shadow: var(--md-sys-elevation-level1); }
.newsletter-form button:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--md-sys-elevation-level2); }
.form-spinner { display: none; width: 24px; height: 24px; border: 3px solid rgba(106, 40, 126, 0.2); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s ease-in-out infinite; margin: 0 auto; margin-top: 1rem; }
#submission-message { margin-top: 1rem; font-weight: 600; }
.success-message { color: #28a745; }
.error-message { color: #dc3545; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 992px) { }

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.lightbox-overlay.open { display: flex; }
.lightbox-content { max-width: min(96vw, 1200px); max-height: 90vh; margin: 0; position: relative; }
.lightbox-image { max-width: 100%; max-height: 80vh; width: auto; height: auto; display: block; border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-sys-elevation-level3); }
.lightbox-caption { text-align: center; color: #fff; margin-top: 0.5rem; font-size: 0.95rem; }
.lightbox-btn {
  position: absolute;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-close { top: 12px; right: 12px; }

@media (max-width: 768px) {
  .features-hero h1 { font-size: 2.2rem; }
  .showcase .content h2 { font-size: 1.8rem; }
}

/* Coming soon section */
.coming-soon-features { padding: 2rem 1rem 3rem; max-width: 1200px; margin: 0 auto; }
.coming-soon-features h2 { text-align: center; color: var(--primary-color); margin-bottom: 1rem; }