/* css/detail.css */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeInSlideUp { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }

/* --- Main Container & View Transition --- */
.cs-detail-container { 
  animation: fadeIn 0.3s ease-in-out;
  background-color: #ffffff; /* secondary-bg */
}
.cs-detail-container.fade-out { animation: fadeOut 0.3s ease-in-out forwards; }
.cs-scroll-wrapper { height: 100vh; overflow-y: auto; scroll-behavior: smooth; }
.cs-container { padding-top: 2rem; padding-bottom: 10rem; }

/* --- Header & Navigation --- */
.cs-header { 
  position: sticky; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 100; 
  background-color: rgba(249, 250, 251, 0.85); /* surface with alpha */
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
  padding: 0.5rem 0; 
}
.cs-header-content { max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; }
.cs-top-row { display: flex; align-items: center; gap: 1.5rem; }
.cs-header-title { font-size: 1.25rem; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; max-width: 70%;}
.cs-back-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-weight: 500; color: #374151; transition: background-color 0.2s ease, color 0.2s ease; flex-shrink: 0; }
.cs-back-link:hover, .cs-back-link:focus-visible { background-color: #e5e7eb; color: #111827; }
.cs-nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }
.cs-accordion-controls { display: flex; gap: 0.75rem; flex-shrink: 0; }
.cs-toggle-all-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-weight: 500; color: #374151; transition: background-color 0.2s ease, color 0.2s ease; border: 1px solid transparent; background-color: transparent; cursor: pointer; }
.cs-toggle-all-btn.hidden { display: none; }
.cs-toggle-all-btn:hover, .cs-toggle-all-btn:focus-visible { background-color: #e5e7eb; color: #111827; }
.cs-toggle-all-btn svg { width: 1.25rem; height: 1.25rem; }
.cs-sub-nav { min-width: 0; -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%); mask-image: linear-gradient(to right, black 90%, transparent 100%); position: relative; }
.cs-nav-list { display: flex; gap: 0.5rem; padding: 0; margin: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.cs-nav-list::-webkit-scrollbar { display: none; }
.cs-nav-link { display: block; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; color: #374151; white-space: nowrap; position: relative; transition: background-color 0.2s ease, color 0.2s ease; }
.cs-nav-link:hover, .cs-nav-link:focus-visible { background-color: #eef2ff; color: #4f46e5; }
.cs-nav-link.active { background-color: #6366f1; color: white; font-weight: 600; }
.cs-scroll-progress { position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background-color: transparent; }
.cs-scroll-progress-bar { height: 100%; width: 0; background-color: #6366f1; transition: width 0.1s linear; }

/* --- Content & Sections --- */
.cs-content { display: flex; flex-direction: column; gap: 1rem; }
.cs-section { padding: 1rem 0; scroll-margin-top: 8rem; animation: fadeInSlideUp 0.6s ease-out forwards; }
.cs-accordion-item { border: 1px solid #e5e7eb; border-radius: 0.75rem; transition: box-shadow 0.2s ease; overflow: hidden; }
.cs-accordion-item:nth-of-type(odd) { background-color: #ffffff; }
.cs-accordion-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
.cs-accordion-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 1.5rem; background: transparent; border: none; cursor: pointer; text-align: left; }
.cs-section-title { display: flex; align-items: center; gap: 1rem; font-size: 1.75rem; color: #111827; font-family: 'Inter', sans-serif; transition: color 0.2s ease; }
.cs-accordion-toggle:hover .cs-section-title { color: #6366f1; }
.cs-section-icon { width: 1.75rem; height: 1.75rem; color: #6366f1; flex-shrink: 0; }
.cs-accordion-toggle::after { content: '+'; font-size: 2rem; font-weight: 300; color: #374151; transition: transform 0.3s ease; }
.cs-accordion-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.cs-accordion-content { max-height: 0; overflow: hidden; padding: 0 1.5rem; transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; }
.cs-accordion-content.expanded { max-height: 5000px; padding-top: 0; padding-bottom: 2rem; }

/* --- Typography & General Elements --- */
.cs-section h1, .cs-mobile-title { font-size: 2.75rem; letter-spacing: -0.02em; }
.cs-section h3 { font-size: 1.5rem; color: #111827; margin: 2rem 0 1rem; }
.cs-section h4 { font-size: 1.25rem; color: #111827; }
.cs-section h5 { font-size: 1.1rem; color: #111827; }
.cs-section p { font-size: 1.1rem; line-height: 1.7; color: #374151; }
.cs-mobile-title { display: none; margin-bottom: 1.5rem; }
.cs-hero-image, .feature-image { width: 100%; max-width: 100%; height: auto; max-height: 500px; object-fit: cover; border-radius: 0.75rem; border: 1px solid #e5e7eb; margin-top: 1.5rem; margin-bottom: 2rem; }

/* --- Project Snapshot Section --- */
.project-snapshot { margin-top: 3rem; padding: 2rem; background-color: #f9fafb; border-radius: 1rem; }
.bento-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } } 
.bento-item { background-color: #ffffff; border-radius: 0.75rem; padding: 1.5rem; border: 1px solid #e5e7eb; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.bento-item:hover { transform: translateY(-4px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.07); }
.bento-tools { grid-column: span 1 / -1; }
@media (min-width: 1024px) { .bento-tools { grid-column: span 2 / -1; } }
.cs-bento-icon { width: 1.75rem; height: 1.75rem; color: #6366f1; margin-bottom: 0.75rem; }
.cs-meta-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.cs-meta-content { font-size: 1rem; line-height: 1.6; }

/* --- Card & Component Styles --- */
.content-card, .testimonial-card { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 4px; padding: 0.75rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.testimonial-carousel { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1.5rem; }
.testimonial-card { display: flex; flex-direction: column; }
.testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 1.2rem; }
.testimonial-content { display: flex; flex-direction: column; flex-grow: 1; }
.testimonial-quote { font-style: italic; flex-grow: 1; }
.testimonial-author { margin-top: 1rem; font-weight: 600; }
.voice-of-customer-title { font-size: 1.75rem; font-family: 'Inter', sans-serif; border-bottom: 2px solid #6366f1; padding-bottom: 0.5rem; margin-bottom: 1.5rem; }
.feature-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.feature-image-container { position: relative; overflow: hidden; border-radius: 0.75rem; }
.feature-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: white; padding: 0.75rem; font-size: 0.9rem; text-align: center; }
.process-phase { padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; }
.phase-title { font-size: 1.25rem; font-family: 'Inter', sans-serif; color: #6366f1; }
.phase-grid-container { display: grid; gap: 2rem; }
@media (min-width: 768px) { .phase-grid-container { grid-template-columns: repeat(2, 1fr); } }

/* --- Impact Section Styles --- */
.cs-callout-box { 
  background: linear-gradient(45deg, #eef2ff, #fdf2f8); 
  color: #111827; 
  border-radius: 1rem; 
  padding: 2.5rem; 
  margin: 2rem 0; 
  text-align: center; 
}
.cs-callout-value { font-size: 3.5rem; font-weight: 700; line-height: 1.1; color: #6366f1; }
.cs-callout-label { font-size: 1.25rem; margin-top: 0.5rem; color: #374151; text-transform: uppercase; letter-spacing: 0.05em; }
.impact-grid { display: grid; gap: 2rem; margin-top: 3rem; }
@media (min-width: 1024px) { .impact-grid { grid-template-columns: 1fr 1fr; } }
.impact-charts { display: grid; gap: 2rem; }
.impact-chart-container { background-color: #f9fafb; padding: 1.5rem; border-radius: 0.75rem; height: 250px; }
.kpi-title { font-size: 1.5rem; font-family: 'Inter', sans-serif; margin-bottom: 1.5rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.kpi-card { background-color: #ffffff; border-radius: 4px; padding: 0.75rem; text-align: center; border: 1px solid #e5e7eb; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.kpi-value { font-size: 2rem; font-weight: 700; color: #6366f1; line-height: 1.2; }
.kpi-label { font-size: 0.9rem; color: #374151; margin-top: 0.5rem; }

/* --- Back to Top Button --- */
.cs-back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 110; width: 3.5rem; height: 3.5rem; background-color: #6366f1; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); border: none; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; }
.cs-back-to-top.hidden { opacity: 0; transform: translateY(1rem); pointer-events: none; }
.cs-back-to-top:hover { background-color: #4f46e5; transform: scale(1.1); }

/* ==============================================
STYLES FOR ADDED & ENHANCED COMPONENTS
============================================== */
.tag { display: inline-block; font-size: 0.875rem; padding: 0.25rem 0.75rem; border-radius: 6px; font-weight: 500; }
.tag-gray { background-color: #F1F1EF; color: #787774; }
.tag-blue { background-color: #E9F3F7; color: #487CA5; }
.tag-green { background-color: #EEF3ED; color: #548164; }
.tag-orange { background-color: #F8ECDF; color: #CC782F; }
.cs-meta-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cs-meta-list li { color: #374151; }
.cs-meta-list strong { color: #111827; font-weight: 600; }
.testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 1.2rem; }
.persona-avatar { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 1.5rem; }
.personas-grid { display: grid; gap: 1.5rem; margin-top: 1rem; }
.persona-card { background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.5rem; }
.persona-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.persona-name { font-size: 1.25rem; font-weight: 700; color: #111827; }
.persona-archetype { color: #6366f1; font-weight: 600; }
.persona-quote { font-style: italic; font-size: 1.25rem; border-left: 3px solid #6366f1; padding-left: 1rem; margin-bottom: 1rem; }
.persona-details { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .persona-details { grid-template-columns: repeat(2, 1fr); } }
.cs-accordion-toggle { position: -webkit-sticky; position: sticky; top: 0; background: #ffffff; z-index: 10; border-bottom: 1px solid #e5e7eb; min-height: 48px;}
.cs-back-link, .cs-toggle-all-btn { min-height: 48px; }
.cs-back-to-top { min-width: 48px; min-height: 48px; }
.top-kpi { border: 2px solid #6366f1; }
.load-more-btn { display: block; margin: 1.5rem auto 0; padding: 0.5rem 1rem; background-color: #e5e7eb; border: 1px solid #e5e7eb; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.load-more-btn:hover { background-color: #d1d5db; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .cs-header-content { display: flex; align-items: center; flex-wrap: wrap; }
    .cs-top-row { width: 100%; }
    .cs-header-title { font-size: 1.1rem; }
    .cs-mobile-title { display: block; }
    .cs-nav-container { width: 100%; order: 3; }
    .cs-scroll-wrapper { padding-top: 8.5rem; }
    .cs-section { scroll-margin-top: 9rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}