/* Project detail pages: storyboard, case sections, stats, previous/next pager. */

/* ---------- Project detail page ---------- */

.project-hero {
  padding: 54px 0 20px;
  border-bottom: 1px solid var(--line);
}
.back-link {
  display: inline-block;
  font-size: 0.92rem;
  color: var(--ink-2);
  text-decoration: none;
  margin-bottom: 22px;
}
.back-link:hover { color: var(--teal-deep); }

.project-hero h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  max-width: 20ch;
}
.project-hero .summary {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 10px;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin: 30px 0 44px;
}
.meta-row .meta-item {
  border-left: 2px solid var(--teal);
  padding-left: 12px;
}
.meta-row .meta-item .label {
  font-size: 0.8rem;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.meta-row .meta-item .value {
  font-size: 0.98rem;
  color: var(--ink);
}

.figure {
  margin: 44px 0;
}
.figure .frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, var(--paper-2), #DFD8C6);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.figure .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figure .frame.placeholder {
  color: var(--ink-2);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
}
.figure figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--ink-2);
}

.case-section .two-col {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
}
@media (max-width: 760px) {
  .case-section .two-col { grid-template-columns: 1fr; gap: 20px; }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px;
  margin-top: 8px;
}
.stat {
  border-top: 2px solid var(--teal);
  padding-top: 14px;
}
.stat .num {
  font-family: "Newsreader", serif;
  font-size: 2.3rem;
  line-height: 1;
  margin-bottom: 6px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .label {
  font-size: 0.9rem;
  color: var(--ink-2);
}

.next-project {
  border-top: 1px solid var(--line);
  padding: 46px 0;
}
.next-project a {
  text-decoration: none;
  color: var(--ink);
}
.next-project .label {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.next-project h3 {
  font-size: 1.6rem;
  transition: color 0.15s ease;
}
.next-project a:hover h3 { color: var(--teal-deep); }

/* ---------- Storyboard project detail pages ---------- */

.project-hero--plain {
  border-bottom: none;
  padding-bottom: 8px;
}
.project-hero--plain h1 {
  max-width: 26ch;
}

/* Storyboard: fills the page up to the header's width (--max-wide), then centers; height scales with width */
.storyboard {
  max-width: var(--max-wide);
  margin: 28px auto 10px;
  padding: 0 28px;
}
.storyboard img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -26px rgba(15, 36, 48, 0.45);
}
@media (max-width: 640px) {
  .storyboard { margin: 20px auto 6px; padding: 0 16px; }
}

.case-section--first {
  border-top: none;
  padding-top: 44px;
}

/* Marks content you still need to replace */
.note {
  color: var(--ink-2);
  font-style: italic;
  border-left: 2px solid var(--line);
  padding-left: 12px;
}

/* ---------- Previous / next project pager ---------- */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.pager .pager-next { text-align: right; }
.pager .pager-next .label,
.pager .pager-next h3 { margin-left: auto; }
.pager h3 {
  font-size: 1.3rem;
  max-width: 24ch;
}
@media (max-width: 640px) {
  .pager { grid-template-columns: 1fr; gap: 28px; }
  .pager .pager-next { text-align: left; }
  .pager .pager-next .label,
  .pager .pager-next h3 { margin-left: 0; }
}

/* ---------- Problem panels (2 x 2 grid inside a case section) ---------- */

.case-section h3 {
  font-size: 1.2rem;
  margin: 40px 0 18px;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.problem { margin: 0; }
.problem img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -24px rgba(15, 36, 48, 0.45);
}
@media (max-width: 560px) {
  .problem-grid { grid-template-columns: 1fr; }
}

/* ---------- Screenshots inside case sections ---------- */

.shot-figure { margin: 34px 0; }
.shot-figure figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--ink-2); }
.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -24px rgba(15, 36, 48, 0.45);
}
.shot-figure--narrow { max-width: 520px; }

/* Two phone-width screenshots side by side */
.figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: 28px;
  justify-content: center;
  margin-top: 30px;
}
.figure-pair .shot-figure { margin: 0; }
@media (max-width: 640px) {
  .figure-pair { grid-template-columns: minmax(0, 340px); }
}

/* "Solves problem 0N" tag at the start of a solution heading */
.solves {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  padding: 3px 12px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--teal-deep);
  background: rgba(28, 128, 115, 0.08);
}

/* ---------- Before / after process flow ---------- */

.flow-compare { display: grid; gap: 22px; margin: 6px 0 0; }
.flow-label {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-2);
}
.flow-row--after .flow-label { color: var(--teal-deep); }

.flow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 0;
  margin: 0;
}
.case-section .flow li {
  position: relative;
  flex: 1 1 140px;
  margin: 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.4;
}
.flow-row--after .flow li { border-color: rgba(28, 128, 115, 0.45); background: rgba(28, 128, 115, 0.06); }
.flow li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .flow { flex-direction: column; gap: 22px; }
  .case-section .flow li { flex: 0 0 auto; }
  .flow li:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -21px; transform: translateX(-50%); }
}

/* Before / after pair at a wider size, plus a plain footnote under figures */
.figure-pair--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
@media (max-width: 640px) { .figure-pair--wide { grid-template-columns: 1fr; } }
.note-plain { margin-top: 18px; font-size: 0.88rem; color: var(--ink-2); font-style: italic; }

/* Wide artifact (e.g. a service blueprint) that scrolls sideways */
.wide-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px -24px rgba(15, 36, 48, 0.45);
  -webkit-overflow-scrolling: touch;
}
.wide-scroll img { display: block; width: 1800px; max-width: none; height: auto; }
.shot-figure--phone { max-width: 340px; margin-left: auto; margin-right: auto; }