/* ==========================================================================
   PLU v3.0 - SUCCESS STORIES PAGE
   Premium CSS for success-stories.html
   ITCSS Layer 4: Pages
   
   Architecture:
   - Mobile-first responsive design
   - BEM naming convention
   - CSS Custom Properties only (no hardcoded values)
   - NO timeline connecting line - premium cards only
   ========================================================================== */

/* ==========================================================================
   A. EDITORIAL LEAD SECTION
   ========================================================================== */

.editorial-section {
  max-width: 900px;
  margin: 0 auto;
}

/**
 * Editorial Content Card
 * Premium card design with gradient accent
 */
.editorial-content {
  background: linear-gradient(
    135deg,
    rgba(88, 166, 255, 0.08) 0%,
    rgba(139, 92, 246, 0.04) 50%,
    rgba(30, 41, 59, 0.3) 100%
  );
  border: 1px solid rgba(88, 166, 255, 0.15);
  border-radius: var(--radius-2xl);
  padding: var(--space-8) var(--space-6);
  position: relative;
  overflow: hidden;
}

.editorial-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-cyan));
}

.editorial-content::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(88, 166, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

@media (min-width: 768px) {
  .editorial-content {
    padding: var(--space-10) var(--space-8);
  }
}

.editorial-lead {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}

.editorial-lead strong {
  color: var(--text-primary);
  font-weight: var(--font-bold);
}

.editorial-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.editorial-body strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.editorial-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--accent-primary);
  margin-bottom: var(--space-4);
}

.editorial-kicker i {
  font-size: var(--text-lg);
}

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

.editorial-headline .gradient-text-accent {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.editorial-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 700px;
  margin-bottom: var(--space-6);
}

.editorial-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 700px;
}

.editorial-body strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

@media (min-width: 768px) {
  .editorial-section {
    margin-bottom: var(--space-16);
  }
  
  .editorial-headline {
    font-size: var(--text-3xl);
  }
  
  .editorial-lead {
    font-size: var(--text-xl);
  }
}

/* ==========================================================================
   B. STORY SECTION & PROFILE
   ========================================================================== */

.story-section {
  margin-bottom: var(--space-16);
}

.story-section:last-of-type {
  margin-bottom: var(--space-12);
}

.story-profile {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-primary);
}

.story-profile__avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  color: white;
  box-shadow: 0 8px 32px var(--accent-primary-glow);
}

.story-profile__avatar--cyan {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  box-shadow: 0 8px 32px var(--accent-cyan-glow);
}

.story-profile__avatar--violet {
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-pink));
  box-shadow: 0 8px 32px var(--accent-violet-glow);
}

.story-profile__avatar i {
  font-size: 32px;
}

.story-profile__info {
  flex: 1;
}

.story-profile__name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-1) 0;
}

.story-profile__role {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--accent-primary);
  margin: 0;
}

.story-profile__role--cyan {
  color: var(--accent-cyan);
}

.story-profile__role--violet {
  color: var(--accent-violet);
}

.story-profile__quote {
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-top: var(--space-4);
  padding-left: var(--space-5);
  border-left: 3px solid var(--accent-primary);
}

@media (max-width: 480px) {
  .story-profile {
    flex-direction: column;
    text-align: center;
  }
  
  .story-profile__quote {
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: none;
    border-top: 3px solid var(--accent-primary);
  }
}

/* ==========================================================================
   C. STORY STEPS (NO Connecting Line - Premium Cards Only)
   ========================================================================== */

.story-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

.story-step {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: transform var(--duration-normal) var(--ease-spring), 
              box-shadow var(--duration-normal) var(--ease-out);
}

.story-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Left border accent colors */
.story-step--before {
  border-left: 4px solid var(--accent-red);
}

.story-step--turning {
  border-left: 4px solid var(--accent-cyan);
}

.story-step--strategy {
  border-left: 4px solid var(--accent-violet);
}

.story-step--results {
  border-left: 4px solid var(--accent-green);
}

.story-step__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.story-step__label i {
  font-size: var(--text-sm);
}

/* Label color variants */
.story-step--before .story-step__label {
  background: rgba(var(--accent-red-rgb), 0.15);
  color: var(--accent-red);
}

.story-step--turning .story-step__label {
  background: rgba(var(--accent-cyan-rgb), 0.15);
  color: var(--accent-cyan);
}

.story-step--strategy .story-step__label {
  background: rgba(var(--accent-violet-rgb), 0.15);
  color: var(--accent-violet);
}

.story-step--results .story-step__label {
  background: rgba(var(--accent-green-rgb), 0.15);
  color: var(--accent-green);
}

.story-step__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3) 0;
  line-height: var(--leading-snug);
}

.story-step__content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

@media (min-width: 768px) {
  .story-steps {
    gap: var(--space-8);
  }
  
  .story-step {
    padding: var(--space-8);
  }
  
  .story-step__title {
    font-size: var(--text-xl);
  }
}

/* ==========================================================================
   QUOTE CARD (Part of Story Section)
   ========================================================================== */

.quote-card {
  background: linear-gradient(
    135deg, 
    rgba(var(--accent-primary-rgb), 0.1), 
    rgba(var(--accent-violet-rgb), 0.1)
  );
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-top: var(--space-8);
  text-align: center;
  position: relative;
}

.quote-card::before {
  content: '"';
  font-size: 80px;
  color: var(--accent-primary);
  opacity: 0.3;
  position: absolute;
  top: var(--space-2);
  left: var(--space-5);
  font-family: Georgia, serif;
  line-height: 1;
}

.quote-card--cyan {
  background: linear-gradient(
    135deg, 
    rgba(var(--accent-cyan-rgb), 0.1), 
    rgba(var(--accent-violet-rgb), 0.1)
  );
  border-color: rgba(var(--accent-cyan-rgb), 0.3);
}

.quote-card--violet {
  background: linear-gradient(
    135deg, 
    rgba(var(--accent-violet-rgb), 0.1), 
    rgba(var(--accent-pink-rgb), 0.1)
  );
  border-color: rgba(var(--accent-violet-rgb), 0.3);
}

.quote-card__text {
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
  position: relative;
  z-index: 1;
}

.quote-card__author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.quote-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
}

.quote-card__avatar--cyan {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
}

.quote-card__avatar--violet {
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-pink));
}

@media (min-width: 768px) {
  .quote-card {
    padding: var(--space-10);
  }
  
  .quote-card__text {
    font-size: var(--text-xl);
  }
}

/* ==========================================================================
   D. PATTERN GRID
   ========================================================================== */

.pattern-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

@media (min-width: 640px) {
  .pattern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pattern-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pattern-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-spring), 
              box-shadow var(--duration-normal) var(--ease-out);
}

.pattern-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

/* Top gradient accent line */
.pattern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
}

.pattern-card:nth-child(2)::before {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet));
}

.pattern-card:nth-child(3)::before {
  background: linear-gradient(90deg, var(--accent-violet), var(--accent-pink));
}

.pattern-card:nth-child(4)::before {
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-orange));
}

.pattern-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  margin: 0 auto var(--space-4);
  background: var(--gradient-primary);
}

.pattern-card:nth-child(2) .pattern-card__icon {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
}

.pattern-card:nth-child(3) .pattern-card__icon {
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-pink));
}

.pattern-card:nth-child(4) .pattern-card__icon {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-orange));
}

.pattern-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.pattern-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

/* ==========================================================================
   E. CTA SECTION
   Premium call-to-action card
   ========================================================================== */

/**
 * CTA Card
 * Premium gradient card with icon, title, text, and button
 */
.cta-card {
  background: linear-gradient(
    135deg,
    rgba(88, 166, 255, 0.08) 0%,
    rgba(139, 92, 246, 0.05) 50%,
    rgba(57, 208, 216, 0.03) 100%
  );
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(88, 166, 255, 0.2);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-12);
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(88, 166, 255, 0.5) 50%,
    transparent 100%
  );
}

@media (min-width: 768px) {
  .cta-card {
    padding: var(--space-12) var(--space-10);
  }
}

.cta-card__icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-cyan));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  box-shadow: 
    0 8px 24px rgba(88, 166, 255, 0.3),
    0 0 0 4px rgba(88, 166, 255, 0.1);
  position: relative;
}

.cta-card__icon::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88, 166, 255, 0.2) 0%, transparent 70%);
  z-index: -1;
}

.cta-card__icon i {
  font-size: 40px;
  color: white;
}

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

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

.cta-card__text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .cta-card__text {
    font-size: var(--text-lg);
  }
}

.cta-card__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

@media (min-width: 640px) {
  .cta-card__buttons {
    flex-direction: row;
    justify-content: center;
  }
}

.cta-card__btn {
  min-width: 200px;
}

.cta-card__btn--primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-cyan));
  border: none;
  color: white;
}

.cta-card__btn--primary:hover {
  box-shadow: 0 8px 24px rgba(88, 166, 255, 0.4);
  transform: translateY(-2px);
}

.cta-card__btn--secondary {
  background: transparent;
  border: 1px solid var(--border-accent);
  color: var(--accent-primary);
}

.cta-card__btn--secondary:hover {
  background: rgba(88, 166, 255, 0.1);
  border-color: var(--accent-primary);
}

/* Legacy CTA Section (for backward compatibility) */
.cta-section {
  background: linear-gradient(
    135deg, 
    rgba(var(--accent-primary-rgb), 0.1), 
    rgba(var(--accent-violet-rgb), 0.1)
  );
  border: 2px solid rgba(var(--accent-primary-rgb), 0.3);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  margin-top: var(--space-12);
}

.cta-section__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
  margin: 0 auto var(--space-6);
  box-shadow: 0 12px 40px var(--accent-primary-glow);
}

.cta-section__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
}

.cta-section__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-6);
}

.cta-section__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.cta-section__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

@media (min-width: 640px) {
  .cta-section {
    padding: var(--space-12);
  }
  
  .cta-section__title {
    font-size: var(--text-2xl);
  }
  
  .cta-section__text {
    font-size: var(--text-lg);
  }
  
  .cta-section__actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* ==========================================================================
   LEGACY CLASS MAPPINGS (for backward compatibility during migration)
   These map old inline-style classes to the new BEM structure
   ========================================================================== */

/* Timeline container - now just a wrapper */
.timeline-container {
  composes: story-steps;
}

/* Old timeline item maps to story-step */
.timeline-item {
  composes: story-step;
}

.timeline-card {
  composes: story-step;
}

.timeline-card.before {
  composes: story-step--before;
}

.timeline-card.turning {
  composes: story-step--turning;
}

.timeline-card.strategy {
  composes: story-step--strategy;
}

.timeline-card.results {
  composes: story-step--results;
}

.timeline-label {
  composes: story-step__label;
}

.timeline-label.before {
  background: rgba(var(--accent-red-rgb), 0.15);
  color: var(--accent-red);
}

.timeline-label.turning {
  background: rgba(var(--accent-cyan-rgb), 0.15);
  color: var(--accent-cyan);
}

.timeline-label.strategy {
  background: rgba(var(--accent-violet-rgb), 0.15);
  color: var(--accent-violet);
}

.timeline-label.results {
  background: rgba(var(--accent-green-rgb), 0.15);
  color: var(--accent-green);
}

.timeline-title {
  composes: story-step__title;
}

.timeline-text {
  composes: story-step__content;
}

/* Profile legacy classes */
.profile-avatar {
  composes: story-profile__avatar;
}

.profile-info h3 {
  composes: story-profile__name;
}

.profile-info p {
  composes: story-profile__role;
}

/* Pattern legacy classes */
.pattern-icon {
  composes: pattern-card__icon;
}

.pattern-title {
  composes: pattern-card__title;
}

.pattern-desc {
  composes: pattern-card__text;
}

/* CTA legacy classes */
.cta-icon {
  composes: cta-section__icon;
}

.cta-title {
  composes: cta-section__title;
}

.cta-text {
  composes: cta-section__text;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .editorial-content,
  .editorial-content::before,
  .story-step,
  .pattern-card,
  .quote-card,
  .cta-card,
  .cta-card__btn--primary,
  .cta-card__btn--secondary {
    transition: none;
  }
  
  .story-step:hover,
  .pattern-card:hover,
  .cta-card__btn--primary:hover,
  .cta-card__btn--secondary:hover {
    transform: none;
  }
}

/* ==========================================================================
   LIGHT THEME ADJUSTMENTS
   ========================================================================== */

html.light-theme .story-step {
  background: var(--bg-card);
  border-color: var(--border-primary);
}

html.light-theme .pattern-card {
  background: var(--bg-card);
  border-color: var(--border-primary);
}

html.light-theme .quote-card {
  background: linear-gradient(
    135deg, 
    rgba(var(--accent-primary-rgb), 0.08), 
    rgba(var(--accent-violet-rgb), 0.08)
  );
}

html.light-theme .cta-section {
  background: linear-gradient(
    135deg, 
    rgba(var(--accent-primary-rgb), 0.08), 
    rgba(var(--accent-violet-rgb), 0.08)
  );
}

html.light-theme .cta-card {
  background: linear-gradient(
    135deg,
    rgba(88, 166, 255, 0.06) 0%,
    rgba(139, 92, 246, 0.04) 50%,
    rgba(57, 208, 216, 0.02) 100%
  );
  border-color: rgba(88, 166, 255, 0.15);
}

html.light-theme .cta-card__icon {
  box-shadow: 
    0 8px 24px rgba(88, 166, 255, 0.25),
    0 0 0 4px rgba(88, 166, 255, 0.08);
}

/* Light Theme - Editorial Content */
html.light-theme .editorial-content {
  background: linear-gradient(
    135deg,
    rgba(88, 166, 255, 0.06) 0%,
    rgba(139, 92, 246, 0.03) 50%,
    rgba(255, 255, 255, 0.9) 100%
  );
  border-color: rgba(88, 166, 255, 0.12);
}