/* Case study page styles — extends site.css */

/* -------- Case Study Hero -------- */
.cs-hero {
  padding: var(--s-10) 0 var(--s-8);
  border-bottom: 1px solid var(--rule);
}
.cs-hero__eyebrow {
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: var(--s-5); font-weight: 500;
}
.cs-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1.04; letter-spacing: -0.02em;
  color: var(--aubergine); margin: 0 0 var(--s-4);
}
.cs-hero__subtitle {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.35; color: var(--fg-muted);
  margin: 0 0 var(--s-6); max-width: 40ch;
}
.cs-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid var(--rule);
}
.cs-meta__item {
  display: flex; flex-direction: column; gap: 4px;
}
.cs-meta__label {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
}
.cs-meta__value {
  font-size: var(--fs-sm); color: var(--fg); line-height: 1.4;
}

/* -------- Case Study Sections -------- */
.cs-section {
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--rule);
}
.cs-section:last-of-type { border-bottom: none; }
.cs-section__label {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
  margin-bottom: var(--s-4);
}
.cs-section__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12; margin: 0 0 var(--s-5);
  max-width: 24ch;
}
.cs-body {
  max-width: var(--maxw-prose); font-size: var(--fs-base);
  line-height: var(--lh-body); color: var(--fg);
}
.cs-body p { margin: 0 0 1em; max-width: var(--maxw-prose); }
.cs-body ul {
  list-style: none; padding: 0; margin: 0 0 1em;
  display: flex; flex-direction: column; gap: 8px;
}
.cs-body li {
  padding-left: 18px; position: relative;
  font-size: var(--fs-base); line-height: var(--lh-body);
}
.cs-body li::before {
  content: "–"; position: absolute; left: 0; color: var(--leaf);
}

/* -------- Hero Image / Gallery -------- */
.cs-hero-image {
  margin: var(--s-7) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
}
.cs-hero-image--single {
  grid-template-columns: 1fr;
}
.cs-hero-image__item {
  aspect-ratio: 3/4; background: var(--pearl-shade);
  border: 1px solid var(--rule); display: flex;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.cs-hero-image__item--wide { aspect-ratio: 16/10; }
.cs-hero-image__placeholder {
  font-family: var(--font-display); font-style: italic;
  font-size: 16px; color: var(--fg-muted); text-align: center;
  padding: var(--s-4);
}

.cs-gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  margin: var(--s-6) 0 0;
}
.cs-gallery__item {
  background: var(--pearl-shade);
  border: 1px solid var(--rule); display: flex;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.cs-gallery__item img {
  width: 100%; height: auto; display: block;
}
.cs-gallery__item--full { grid-column: 1 / -1; }
.cs-gallery__caption {
  font-size: var(--fs-sm); color: var(--fg-muted);
  margin-top: var(--s-2); font-style: italic;
}

/* -------- The Work list -------- */
.cs-work-list {
  display: flex; flex-direction: column; gap: var(--s-5);
  margin: var(--s-5) 0 0;
}
.cs-work-item {
  padding-left: var(--s-5); border-left: 1px solid var(--rule);
}
.cs-work-item__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); margin: 0 0 var(--s-2);
}
.cs-work-item p {
  font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--fg-muted); margin: 0; max-width: var(--maxw-prose);
}

/* -------- Reflection (pull-quote style) -------- */
.cs-reflection {
  padding: var(--s-9) 0;
  background: var(--pearl-shade);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cs-reflection__text {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45; color: var(--aubergine);
  max-width: 52ch; margin: 0;
  text-wrap: pretty;
}

/* -------- CTA band -------- */
.cs-cta {
  padding: var(--s-8) 0;
  text-align: center;
}
.cs-cta p {
  font-size: var(--fs-md); color: var(--fg-muted);
  max-width: 48ch; margin: 0 auto var(--s-6);
  text-wrap: pretty;
}

/* -------- Back link -------- */
.cs-back {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: 0.06em; color: var(--fg-muted);
  text-decoration: none; margin-bottom: var(--s-6);
  transition: color var(--dur-sm) var(--ease-out);
}
.cs-back:hover { color: var(--fg); }

/* -------- Credit line -------- */
.cs-credit {
  font-size: var(--fs-sm); color: var(--fg-muted);
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

/* -------- Full-bleed image break -------- */
.img-break { width: 100%; margin: 0; line-height: 0; }
.img-break img { width: 100%; height: auto; display: block; }

/* -------- Two-column hero with cover image (JHU) -------- */
.cs-hero-split {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-8); align-items: start; margin-top: var(--s-7);
}
.cs-hero-split__cover { line-height: 0; }
.cs-hero-split__cover img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule);
}

/* -------- Issue row — alternating text + image -------- */
.issue-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-bottom: 1px solid var(--rule);
}
.issue-row--flip { direction: rtl; }
.issue-row--flip > * { direction: ltr; }
.issue-row--text-only { grid-template-columns: 1fr; }
.issue-row__text {
  padding: var(--s-8) var(--s-7);
  display: flex; flex-direction: column; justify-content: center;
}
.issue-row--text-only .issue-row__text { max-width: 680px; padding: var(--s-7) 0; }
.issue-row__img {
  line-height: 0; overflow: hidden;
  border-left: 1px solid var(--rule);
}
.issue-row--flip .issue-row__img {
  border-left: none; border-right: 1px solid var(--rule);
}
.issue-row__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease-out);
}
.issue-row:hover .issue-row__img img { transform: scale(1.03); }
.issue-row__num {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500; margin-bottom: var(--s-3);
}
.issue-row__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15; margin: 0 0 var(--s-4);
}
.issue-row p {
  font-size: var(--fs-base); line-height: var(--lh-body);
  color: var(--fg-muted); margin: 0 0 var(--s-3); max-width: 44ch;
}
.issue-row ul {
  list-style: none; padding: 0; margin: var(--s-3) 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.issue-row li {
  font-size: var(--fs-sm); line-height: 1.55;
  color: var(--fg-muted); padding-left: 16px; position: relative;
}
.issue-row li::before { content: "–"; position: absolute; left: 0; color: var(--leaf); }

/* -------- Responsive -------- */
@media (max-width: 900px) {
  .cs-hero-image { grid-template-columns: 1fr; }
  .cs-gallery { grid-template-columns: 1fr; }
  .cs-meta { gap: var(--s-4); }
}
@media (max-width: 860px) {
  .cs-hero-split { grid-template-columns: 1fr; }
  .issue-row { grid-template-columns: 1fr; direction: ltr; }
  .issue-row__img {
    min-height: 260px; border-left: none; border-right: none;
    border-top: 1px solid var(--rule);
  }
  .issue-row--flip .issue-row__img { border-right: none; }
  .issue-row__text { padding: var(--s-6) var(--s-5); }
}