/* ============================================================
   Case Study Layout — zahab.design
   Shared by all case study pages.
   Inherits tokens + shared components from styles.css.
   ============================================================ */

/* ============================================================
   Page Header — 2-col: title+tags left / project details right
   ============================================================ */

.cs-header {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.cs-header__inner {
  display: grid;
  grid-template-columns: 4fr 2fr;
  gap: var(--space-xxl);
  align-items: start;
}

/* Left column */
.cs-header__left {
  display: flex;
  flex-direction: column;
}

.cs-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.cs-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.cs-header__back svg { width: 13px; height: 13px; }
.cs-header__back:hover { border-color: var(--color-accent); color: var(--color-accent); }

.cs-header__tag {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
  opacity: 0.5;
}

.cs-header__sep {
  color: var(--color-text-secondary);
  font-size: var(--fs-body-sm);
  user-select: none;
}

.cs-header__title {
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--ls-display);
  color: var(--color-text-primary);
}

/* Right column: project details */
.cs-header__right {
  padding-top: 6px; /* align with meta row */
}

.cs-details {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-accent);
  text-transform: uppercase;
}

.cs-details__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-sm);
  padding-block: 20px;
  border-bottom: 1px dashed var(--color-card-stroke);
  transition: border-color var(--transition-med);
}

.cs-details__label {
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.cs-details__value {
  font-size: var(--fs-caption);
  font-weight: 300;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
  line-height: 1.5;
  text-align: end;
}

/* ============================================================
   Hero Image — full-bleed
   ============================================================ */

.cs-hero-image {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background-color: var(--color-surface);
  transition: background-color var(--transition-med);
}

.cs-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  display: block;
}

/* ============================================================
   Section Indicator — fixed, left side
   ============================================================ */

.cs-section-indicator {
  position: fixed;
  left: var(--page-pad-x);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 50;
}

.cs-section-indicator__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 300;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
  line-height: 1;
}

/* 1px line before each item */
.cs-section-indicator__item::before {
  content: "";
  display: block;
  width: 12px;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
  transition: width var(--transition-fast);
}

.cs-section-indicator__item:hover::before {
  width: 20px;
}

.cs-section-indicator__item.is-current {
  color: var(--color-accent);
}

.cs-section-indicator__item.is-current::before {
  width: 20px;
}

/* Hide on tablet and below */
@media (max-width: 1100px) {
  .cs-section-indicator { display: none; }
}

/* ============================================================
   Content Column — centered, ~50% page width
   ============================================================ */

.cs-content {
  /* Spacer from hero image */
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
  padding-left: var(--space-xxl);
}

/* The narrow centered column used by all sections */
.cs-inner {
  width: min(48%, 760px);
  margin-inline: auto;
}

/* ============================================================
   Sections — spacing only, no dividers
   ============================================================ */

.cs-section {
  padding-bottom: var(--space-xxl);
}

.cs-team-section {
  padding-bottom: var(--space-lg);
}

.cs-section-heading {
  font-size: var(--fs-display-02);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  line-height: 1.3;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.cs-body {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
  opacity: 0.85;
  margin-bottom: var(--space-md);
}
.cs-body:last-child { margin-bottom: 0; }

/* Footnote / disclaimer variant */
.cs-body--note {
  font-size: var(--fs-caption);
  font-weight: 500;
  font-style: italic;
  margin-top: var(--space-md);
}

/* ============================================================
   In a Nutshell — 2-col inside the content column
   ============================================================ */

.cs-nutshell {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cs-nutshell__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-nutshell__text .cs-section-heading {
  margin-bottom: var(--space-md);
}
.cs-nutshell__text .cs-body {
  margin-bottom: var(--space-md);
}

/* Stats row */
.cs-stats {
  display: flex;
  gap: var(--space-xxl);
  margin-top: 0;
  margin-bottom: var(--space-md);
  transition: border-color var(--transition-med);
}

.cs-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-stat__number {
  font-size: var(--fs-display-01);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--color-text-primary);
}

.cs-stat__label {
  font-size: var(--fs-body-sm);
  font-weight: 300;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
  max-width: 130px;
  line-height: 1.5;
}

/* Motion video — fills available width, no aspect-ratio constraint */
.cs-nutshell__media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.cs-nutshell__video {
  width: 100%;
  overflow: hidden;
  margin-inline: auto;
}

.cs-nutshell__video video {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   My Role — list
   ============================================================ */

.cs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-sm);
}

/* Tighter gap when list follows a lead-in paragraph ending with ":" */
.cs-body + .cs-list {
  margin-top: calc(var(--space-sm) * -1);
}

.cs-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
  opacity: 0.8;
  padding-block: 4px;
}

.cs-list li::before {
  content: "•";
  flex-shrink: 0;
  font-size: 1em;
  line-height: 1.65;
}

/* ============================================================
   Research Photo
   ============================================================ */

.cs-research-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-bg);
  margin-top: var(--space-xl);
  margin-bottom: 0;
  transition: background-color var(--transition-med);
}

.cs-research-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Full-height variant: shows the entire image without cropping */
.cs-research-photo--full {
  aspect-ratio: auto;
  height: auto;
}

.cs-research-photo--full img {
  height: auto;
  object-fit: initial;
}

/* Cropped top-focused variant — shows roughly the top quarter of the image */
.cs-research-photo--crop-top {
  aspect-ratio: 16 / 4;
}

.cs-research-photo--crop-top img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.cs-research-caption {
  font-size: var(--fs-caption);
  font-weight: 300;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
  opacity: 0.5;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  display: block;
  text-align: center;
  background-color: var(--color-bg);
}

/* Caption following a decision image wrap (lives outside the wrap) */
.cs-decision__image-wrap + .cs-research-caption {
  margin-top: var(--space-sm);
}

/* Paragraph or heading immediately after a caption — add breathing room */
.cs-research-caption + .cs-body,
.cs-compare + .cs-decision__desc,
.cs-research-caption + .cs-decision__desc,
.cs-research-caption + .cs-section-heading,
.cs-research-caption + .cs-decision__title {
  margin-top: var(--space-lg);
}

/* ============================================================
   Problem Snapshot
   ============================================================ */

.cs-problem-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.cs-problem {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-md);
  align-items: center;
}

.cs-problem__num {
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body-lg);
  font-weight: 400;
  color: var(--color-text-primary);
  flex-shrink: 0;
  transition: border-color var(--transition-med);
  user-select: none;
}

.cs-problem__body {
  display: flex;
  flex-direction: column;
}

.cs-problem__title {
  font-size: var(--fs-body-reg);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 1.4;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.cs-problem__desc {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
}

/* ============================================================
   Design Decisions
   ============================================================ */

.cs-decision {
  margin-top: var(--space-xl);
}

.cs-decision__title {
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: 1.3;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.cs-decision__desc {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
}

.cs-decision__desc + .cs-decision__desc { margin-top: var(--space-sm); }
.cs-before-after + .cs-decision__desc   { margin-top: var(--space-md); }
.cs-decision__desc + .cs-list          { margin-top: var(--space-sm); }
.cs-list + .cs-decision__desc          { margin-top: var(--space-sm); }

.cs-decision__video-wrap {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--color-surface);
  transition: background-color var(--transition-med);
  margin-top: var(--space-lg);
  border-radius: 26px;
}

.cs-decision__video {
  display: block;
  max-height: 75vh;
  width: auto;
  max-width: 100%;
  background-color: var(--color-surface);
}

/* ============================================================
   Outcome and Impact
   ============================================================ */

.cs-big-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-lg);
}

.cs-big-stat__number {
  font-size: clamp(72px, 12vw, 160px);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--color-text-primary);
}

.cs-big-stat__unit {
  font-size: 0.32em;
  font-weight: 400;
  vertical-align: baseline;
  letter-spacing: 0;
  margin-left: 0.05em;
}

.cs-big-stat__label {
  font-size: var(--fs-body-sm);
  font-weight: 300;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
  max-width: 240px;
  line-height: 1.5;
}

/* ============================================================
   Team
   ============================================================ */

.cs-team {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.cs-team__member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.cs-team__photo {
  width: 96px;
  height: 96px;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: background-color var(--transition-med), border-color var(--transition-med);
}
.cs-team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-team__photo--placeholder {
  background-color: var(--color-border);
}

.cs-team__member figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.cs-team__name {
  font-size: var(--fs-caption-sm);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
}

.cs-team__role {
  font-size: var(--fs-caption-xs);
  font-weight: 300;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
}

/* ============================================================
   Next Project
   ============================================================ */

.cs-next-project {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-xl);
  transition: border-color var(--transition-med);
}

.cs-next-project__inner {
  display: flex;
  justify-content: flex-end;
}

.cs-next-project__text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  text-align: right;
}

.cs-next-project__label {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
}

.cs-next-project__title {
  font-size: var(--fs-display-04);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 1.3;
  color: var(--color-text-primary);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  transition: color var(--transition-fast);
}
.cs-next-project__title:hover { color: var(--color-accent); }

.cs-next-project__arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}

/* ============================================================
   Responsive — Large Desktop (≥1440px)
   ============================================================ */

@media (min-width: 1440px) {
  .cs-decision__video-wrap {
    border-radius: 30px;
  }
}

/* ============================================================
   Responsive — Tablet (810–1199px)
   ============================================================ */

@media (max-width: 1199px) {
  .cs-header__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .cs-header__title {
    font-size: clamp(26px, 3.2vw, 40px);
  }

  .cs-inner {
    width: min(70%, 640px);
  }

  .cs-nutshell {
    gap: var(--space-md);
  }

  .cs-content {
    padding-left: 0;
  }

  .cs-decision__video-wrap {
    border-radius: 26px;
  }
}

/* ============================================================
   Responsive — Mobile (≤809px)
   ============================================================ */

@media (max-width: 809px) {

  .cs-header {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .cs-header__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .cs-header__title {
    font-size: clamp(24px, 6.5vw, 36px);
  }

  .cs-hero-image {
    aspect-ratio: 4 / 3;
  }

  .cs-inner {
    width: 100%;
    padding-inline: var(--page-pad-x);
  }

  .cs-content {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .cs-section {
    padding-bottom: var(--space-xl);
  }

  .cs-nutshell {
    gap: var(--space-lg);
  }

  .cs-stat__number {
    font-size: var(--fs-display-02);
  }

  .cs-big-stat__number {
    font-size: clamp(64px, 18vw, 100px);
  }

  .cs-details__item {
    grid-template-columns: 100px 1fr;
  }

  .cs-next-project__title {
    font-size: var(--fs-body-reg);
  }

  .cs-before-after {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Before / After Comparison
   ============================================================ */

.cs-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.cs-before-after__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-before-after__label {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.cs-before-after__img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Decision Image (static image variant of video-wrap)
   ============================================================ */

.cs-decision__image-wrap {
  width: 100%;
  overflow: hidden;
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

/* Background lives on the img itself so it never bleeds behind captions */
.cs-decision__image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  background-color: var(--color-bg);
  transition: background-color var(--transition-med);
}

/* ============================================================
   Image Comparison Slider
   ============================================================ */

.cs-compare {
  position: relative;
  overflow: hidden;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  margin-top: var(--space-lg);
}

/* After image: base layer, sizes the container */
.cs-compare__img--after {
  display: block;
  width: 100%;
  height: auto;
}

/* Before image: absolute overlay, clipped to the left portion */
.cs-compare__img--before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}

/* Prevent native browser image drag from hijacking mouse events */
.cs-compare__img--after,
.cs-compare__img--before {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Vertical bar + circle knob */
.cs-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 50%);
  transform: translateX(-50%);
  width: 2px;
  background: #fff;
  pointer-events: none;
}

.cs-compare__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
}

/* Before / After corner badges */
.cs-compare__badge {
  position: absolute;
  top: 12px;
  font-size: var(--fs-caption);
  font-weight: 300;
  letter-spacing: 0.07em;
  text-transform: capitalize;
  background: var(--color-black);
  color: #fff;
  padding: 8px 12px;
  pointer-events: none;
  z-index: 2;
}

.cs-compare__badge--before { left:  12px; }
.cs-compare__badge--after  { right: 12px; }

.cs-compare__badge {
  transition: opacity 0.25s ease;
}
.cs-compare--hide-before .cs-compare__badge--before { opacity: 0; }
.cs-compare--hide-after  .cs-compare__badge--after  { opacity: 0; }

/* ============================================================
   Pull Quote
   ============================================================ */

.cs-quote {
  border-left: 2px solid var(--color-text-primary);
  padding-left: var(--space-md);
  margin-block: var(--space-lg);
  transition: border-color var(--transition-med);
}

.cs-quote p {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
  font-style: italic;
}

/* ============================================================
   Micro-interactions / Entrance Animations
   ============================================================ */

@keyframes cs-word-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cs-tag-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cs-details-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes cs-stat-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Word spans injected by JS into titles and section headings */
.cs-word {
  display: inline-block;
  opacity: 0; /* fill-mode: both keeps this before the delay fires */
  animation: cs-word-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Tags: class + animation-delay added by JS */
.cs-tag-animate {
  animation: cs-tag-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Project details panel: slides in from right */
.cs-details-animate {
  animation: cs-details-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stat numbers: hidden until they scroll into view */
.cs-stat__number.cs-stat-hidden {
  opacity: 0;
  transform: translateY(16px);
}
.cs-stat__number.cs-stat-animate {
  animation: cs-stat-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .cs-word                        { animation: none; opacity: 1; transform: none; }
  .cs-tag-animate                 { animation: none; }
  .cs-details-animate             { animation: none; }
  .cs-stat__number.cs-stat-hidden { opacity: 1; transform: none; }
  .cs-stat__number.cs-stat-animate{ animation: none; opacity: 1; transform: none; }
}