/* ==========================================================================
   case-study.css — Portfolio v2 Case Study Detail Pages
   Loaded ONLY on case-studies/*.html pages.
   Layout: hero banner + gallery SVGs + tech description + tags + back button.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Case study hero banner
   --------------------------------------------------------------------------- */
.cs-hero {
  padding-top: 140px;
  padding-bottom: 80px;
  background-color: var(--color-bg-alt);
}

@media (max-width: 767.98px) {
  .cs-hero {
    padding-top: 110px;
    padding-bottom: 48px;
  }
}

.cs-badge {
  display: inline-block;
  padding: 8px 20px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
  background-color: var(--color-primary-light);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-eyebrow);
  margin-bottom: 1rem;
}

.cs-hero h1 {
  font-size: var(--font-size-4xl);
  margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
  .cs-hero h1 {
    font-size: var(--font-size-3xl);
  }
}

.cs-hero-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-body);
  line-height: var(--line-height-relaxed);
  max-width: 600px;
}

.cs-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Case study content sections
   --------------------------------------------------------------------------- */
.cs-section {
  padding: var(--section-padding-mobile) 0;
}

@media (min-width: 768px) {
  .cs-section {
    padding: var(--section-padding-desktop) 0;
  }
}

.cs-section--alt {
  background-color: var(--color-bg-alt);
}

.cs-section .section-header {
  text-align: left;
  margin-bottom: 2rem;
}

/* ---------------------------------------------------------------------------
   Feature row (alternating image/text)
   --------------------------------------------------------------------------- */
.cs-feature-row {
  margin-bottom: 3rem;
  align-items: center;
}

.cs-feature-content h3 {
  font-size: var(--font-size-xl);
  margin-bottom: 0.75rem;
}

.cs-feature-content p {
  color: var(--color-body);
  line-height: var(--line-height-relaxed);
}

/* ---------------------------------------------------------------------------
   Mockup frame (browser chrome around SVG screenshots)
   --------------------------------------------------------------------------- */
.cs-mockup-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background-color: var(--color-bg-alt);
}

.cs-mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.cs-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
}

.cs-dot--red    { background-color: #ef4444; }
.cs-dot--yellow { background-color: #f59e0b; }
.cs-dot--green  { background-color: #22c55e; }

.cs-mockup-frame img {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Gallery grid
   --------------------------------------------------------------------------- */
.cs-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

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

.cs-gallery-item {
  margin-bottom: 0.5rem;
}

.cs-caption {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  text-align: center;
  margin-top: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Tech group cards
   --------------------------------------------------------------------------- */
.cs-tech-group {
  background-color: var(--color-bg-alt);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

[data-bs-theme="dark"] .cs-tech-group {
  background-color: var(--color-bg);
}

.cs-tech-group h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-eyebrow);
  margin-bottom: 0.75rem;
}

.cs-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* ---------------------------------------------------------------------------
   CTA section
   --------------------------------------------------------------------------- */
.cs-cta-section {
  background-color: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: 4rem 0;
}

.cs-cta-section h2 {
  color: #fff;
  margin-bottom: 1rem;
}

.cs-cta-section p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Back to portfolio button
   --------------------------------------------------------------------------- */
.cs-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-text);
  background-color: var(--color-primary-light);
  border: none;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--transition-fast);
  min-height: 44px;
}

.cs-back-btn:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   prefers-reduced-motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cs-mockup-frame img {
    transition: none;
  }
}