/* project.css - case study (project detail) page styles */
/* Loaded alongside tokens.css + home.css (header/footer/nav/animations reused). */
/* Body copy inherits the primary text color; only captions, links, badge
   descriptions and the quote attribution use `.muted` (see tokens.css). */

:root {
  --cs-radius: 1em;    /* standardized corner radius for case-study boxes */
  --cs-gap: 7%;        /* shared vertical rhythm between the top blocks/sections */
}

@media (max-width: 768px) {
  :root { --cs-radius: 0.5em; }
}

/* --- Case study layout ------------------------------------- */
.case-study {
  display: block;
}

/* Shared horizontal gutter, matching the header content width (8vw). */
.cs-hero,
.cs-intro,
.cs-section {
  padding-left: 8vw;
  padding-right: 8vw;
}

.cs-hero-main {
  flex: 1;
}

/* --- Breadcrumb -------------------------------------------- */
.cs-breadcrumb {
  font-size: var(--size-sm);
  margin-bottom: 14px;
}

.cs-breadcrumb a { transition: color 200ms ease; }
.cs-breadcrumb a:hover { color: var(--text-primary); }
.cs-breadcrumb-sep { margin: 0 6px; opacity: 0.6; }

/* --- Hero -------------------------------------------------- */
.cs-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding-top: 40px;
}

.cs-title {
  font-family: var(--font-secondary);
  font-weight: var(--weight-bold);
  font-size: var(--size-3xl);
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 20px;
}

/* Hero meta ("What I did" -> NDA): intentionally the secondary color. */
.cs-meta {
  font-size: var(--size-sm);
  line-height: var(--lh-md);
  color: var(--text-secondary);
  /* max-width: 680px; */
  margin-bottom: 4px;
}

.cs-meta--muted {
  opacity: 0.65;
  margin-top: 8px;
}

/* --- Stat blocks (shared by hero badges and impact stats) -- */
.cs-badge {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--cs-radius);
  padding: 16px 22px;
  text-align: center;
  min-width: 104px;
}

.cs-hero-stats {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cs-badge-num {
  display: block;
  font-family: var(--font-primary);
  font-weight: var(--weight-extrabold);
  font-size: var(--size-xl);
  color: var(--text-primary);
  line-height: 1.1;
}

.cs-badge-label {
  display: block;
  font-size: 12px;
  margin-top: 6px;
}

/* --- Intro: Context / Problem / Solution / Outcome --------- */
/* 24-col design basis: Context 5, Problem 7, Solution 5, Outcome 7. */
.cs-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  margin-top: var(--cs-gap);
}

.cs-intro-head {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--size-lg);
  color: var(--decorative);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Small pill badge next to headings/subheads (filled background, muted text). */
.cs-tag {
  font-size: 11px;
  font-weight: var(--weight-medium);
  background: var(--bg-card);
  padding: 3px 8px;
  border-radius: 0.4em;
  white-space: nowrap;
}

.cs-intro-col p {
  font-size: var(--size-sm);
  line-height: var(--lh-md);
}

/* --- Numbered section (01 / 02 / 03) ----------------------- */
.cs-section {
  margin-top: var(--cs-gap);
  padding-top: 48px;
}

.cs-section-num {
  display: block;
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--size-sm);
  color: var(--decorative);   /* section number is red */
  margin-bottom: 8px;
}

/* section-heading (Lora + typewriter) comes from home.css */
.cs-section .section-heading {
  margin-bottom: 40px;
}

/* --- Text + media block ------------------------------------ */
.cs-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}

.cs-subhead {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: 20px;
  color: var(--decorative);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cs-block-text p {
  font-size: var(--size-sm);
  line-height: var(--lh-md);
  margin-bottom: 14px;
}

.cs-block-text p:last-child { margin-bottom: 0; }

.cs-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-list li {
  font-size: var(--size-sm);
  line-height: var(--lh-md);
}

/* --- Media (image + floating tag + caption) ---------------- */
.cs-media-ph {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio-media);
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: var(--bg-card);
}

.cs-media-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-media-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--bg-primary);
  border-radius: 0.4em;
  padding: 8px 12px;
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: 12px;
  color: var(--text-primary);
}

.cs-media figcaption {
  font-size: var(--size-sm);
  margin-top: 12px;
}

.cs-media p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-weight: var(--weight-bold);
  font-size: var(--size-3xl);
}

/* Media grids + full-width media */
.cs-media-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 56px;
}

.cs-media-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-media-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cs-media--full { margin-bottom: 56px; }
.cs-media--full .cs-media-ph { aspect-ratio: var(--ratio-wide); }

/* --- Impact stats row -------------------------------------- */
.cs-impact-stats {
  display: flex;
  gap: 40px;
  justify-content: space-between;
}

/* --- Pull quote -------------------------------------------- */
.cs-quote {
  margin: 64px 0;
  padding: 0 10%;
}

.cs-quote blockquote {
  font-family: var(--font-secondary);
  font-weight: var(--weight-bold);
  font-size: var(--size-2xl);
  line-height: 1.2;
  color: var(--text-primary);
}

.cs-quote figcaption {
  font-size: var(--size-sm);
  margin-top: 16px;
  text-align: right;
}

/* --- Previous / next pagination (same style as .resume-link) */
.cs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 40px 8vw;
}

.cs-pag-link {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
}

/* --- Responsive -------------------------------------------- */
/* The 5/7/5/7 intro ratio holds on desktop and tablet; only mobile stacks. */

@media (max-width: 1024px) {
  .cs-block { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .cs-hero {
    flex-direction: column;
    gap: 28px;
  }

  .cs-title { font-size: var(--size-2xl); }

  .cs-intro { grid-template-columns: 1fr; gap: 28px; }

  .cs-block {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }

  .cs-media-grid--2,
  .cs-media-grid--3 { grid-template-columns: 1fr; }

  .cs-impact-stats {gap: 24px; width: fit-content; margin: 0 auto; }

  .cs-quote blockquote { font-size: var(--size-xl); }
}

@media (max-width: 480px) {
  .cs-impact-stats {flex-direction: column;}
  .cs-hero-stats:has(.cs-badge:nth-child(3)) {   /* 3 o more badges */   display: grid; }

}