/* ==========================================================================
   Projects detail page (/projects.html) — small hero banner, project index,
   single-column project detail blocks. Solid canvas, no gradients, no images.
   ========================================================================== */

/* Hidden SVG container for shared icons + dot pattern (kept renderable for <pattern>) */
.pd-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Shared line-icon style — applies through <use> into sprite symbols */
.pd-icon {
  width: var(--space-lg);
  height: var(--space-lg);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Small hero banner — solid canvas-soft, centered, offset below fixed header
   -------------------------------------------------------------------------- */

.pd-banner {
  padding: calc(var(--space-huge) * 2) var(--space-huge) var(--space-huge);
  background-color: var(--c-canvas-soft);
  border-bottom: 1px solid var(--c-hairline);
}

.pd-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  max-width: 56em;
  margin: 0 auto;
  text-align: center;
}

/* Breadcrumb trail — code-sm */
.pd-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-code);
  font-size: 15px;      /* code-sm */
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text-muted);
}

/* Separator between crumbs */
.pd-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-sm);
  color: var(--c-text-muted);
}

.pd-breadcrumb a {
  color: var(--c-text-secondary);
  text-decoration: none;
}

.pd-breadcrumb a:hover,
.pd-breadcrumb a:focus-visible {
  color: var(--c-text-primary);
}

/* Current page crumb */
.pd-breadcrumb [aria-current="page"] {
  color: var(--c-accent-strong);
}

/* Page title — display-xxl */
.pd-banner__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 48px;      /* display-xxl */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--c-text-primary);
}

/* Subtitle — body-lg */
.pd-banner__subtitle {
  margin: 0;
  max-width: 36em;
  font-family: var(--font-body);
  font-size: 18px;      /* body-lg */
  font-weight: 360;
  line-height: 1.55;
  color: var(--c-text-secondary);
}

/* Project index — pill jump links (same pattern as Lab section index) */
.pd-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-index a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: calc(var(--space-xxl) + var(--space-xs));
  box-sizing: border-box;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: 14px;      /* body-sm */
  font-weight: 360;
  line-height: 1.45;
  color: var(--c-text-secondary);
  text-decoration: none;
  background-color: var(--c-canvas);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--rounded-full);
}

/* Index number in code font */
.pd-index a span {
  font-family: var(--font-code);
  color: var(--c-accent-strong);
}

.pd-index a:hover,
.pd-index a:focus-visible {
  color: var(--c-text-primary);
  border-color: var(--c-accent);
}

.pd-index a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: var(--space-xxs);
}

/* --------------------------------------------------------------------------
   Project detail blocks — single reading column
   -------------------------------------------------------------------------- */

.pd-main {
  background-color: var(--c-canvas);
}

.pd-project {
  padding: var(--space-huge);
  scroll-margin-top: calc(var(--space-huge) + var(--space-sm));
}

/* Hairline divider between projects */
.pd-project + .pd-project {
  border-top: 1px solid var(--c-hairline);
}

.pd-project__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
  max-width: 48em;
  margin: 0 auto;
}

/* Title group: number/domain eyebrow, title, subtitle */
.pd-project__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Eyebrow — code-sm accent */
.pd-project__num {
  margin: 0;
  font-family: var(--font-code);
  font-size: 15px;      /* code-sm */
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-accent-strong);
}

/* Project title — display-xl */
.pd-project__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 36px;      /* display-xl */
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--c-text-primary);
}

/* Project subtitle — body-lg */
.pd-project__subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;      /* body-lg */
  font-weight: 360;
  line-height: 1.55;
  color: var(--c-text-secondary);
}

/* Meta row — icon + label over value (screenshot date/location pattern) */
.pd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-huge);
  margin: 0;
}

.pd-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pd-meta dt {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 14px;      /* body-sm */
  font-weight: 360;
  line-height: 1.45;
  color: var(--c-text-muted);
}

.pd-meta dt .pd-icon {
  color: var(--c-accent-strong);
}

/* Value indented to align under the label text */
.pd-meta dd {
  margin: 0;
  padding-left: calc(var(--space-lg) + var(--space-sm));
  font-family: var(--font-body);
  font-size: 16px;      /* body-md */
  font-weight: 360;
  line-height: 1.5;
  color: var(--c-text-primary);
}

/* Hero visual area — token-drawn SVG inside a soft card frame */
.pd-visual {
  margin: 0;
  overflow: hidden;
  background-color: var(--c-canvas-soft);
  border: 1px solid var(--c-hairline);
  border-radius: var(--rounded-lg);
}

.pd-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

/* SVG drawing classes — semantic colors only */
.pd-dots { fill: var(--c-hairline); }
.pd-line { fill: none; stroke: var(--c-hairline-strong); stroke-width: 1.5; }
.pd-accent { fill: none; stroke: var(--c-accent); stroke-width: 2; }
.pd-node { fill: var(--c-canvas); stroke: var(--c-hairline-strong); stroke-width: 1.5; }
.pd-node-accent { fill: var(--c-accent); stroke: var(--c-accent); stroke-width: 1.5; }
.pd-fill-strong { fill: var(--c-accent-strong); }
.pd-bar { fill: var(--c-hairline-strong); }
.pd-label {
  fill: var(--c-text-secondary);
  font-family: var(--font-code);
  font-size: 13px;      /* SVG user units, scales with viewBox */
}
.pd-label-strong { fill: var(--c-text-primary); }
.pd-label-muted { fill: var(--c-text-muted); }
.pd-stroke-strong { stroke: var(--c-accent-strong); }
.pd-stroke-bold { stroke-width: 3; }

/* Content block: heading + body */
.pd-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Block heading — display-sm */
.pd-block__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;      /* display-sm */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--c-text-primary);
}

/* Paragraphs — body-md */
.pd-block p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;      /* body-md */
  font-weight: 360;
  line-height: 1.5;
  color: var(--c-text-secondary);
}

/* Process steps — check icon + mono label, description indented */
.pd-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Step label — code-sm uppercase */
.pd-step__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-family: var(--font-code);
  font-size: 15px;      /* code-sm */
  font-weight: 400;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--c-text-primary);
}

.pd-step__label .pd-icon,
.pd-outcomes .pd-icon {
  color: var(--c-accent-strong);
}

/* Step description aligned under label text */
.pd-block .pd-step__text {
  padding-left: calc(var(--space-lg) + var(--space-sm));
}

/* Key outcomes — check list */
.pd-outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-outcomes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 16px;      /* body-md */
  font-weight: 360;
  line-height: 1.5;
  color: var(--c-text-secondary);
}

/* Optical alignment of icon with first text line */
.pd-outcomes .pd-icon {
  margin-top: var(--space-xxs);
}

/* Tech pills — pill-accent shape, tinted accent surface (matches Lab page) */
.pd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-tags li {
  padding: var(--space-xxs) var(--space-sm);
  font-family: var(--font-body);
  font-size: 14px;      /* body-sm */
  font-weight: 360;
  line-height: 1.45;
  color: var(--c-text-primary);
  background-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-canvas-soft));
  border-radius: var(--rounded-full);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Large tablet: tighter side padding, title steps down */
@media (max-width: 1024px) {
  .pd-banner {
    padding: calc(var(--space-huge) * 2) var(--space-xxl) var(--space-huge);
  }

  .pd-banner__title {
    font-size: 36px;    /* display-xl */
    line-height: 1.15;
    letter-spacing: -0.8px;
  }

  .pd-project {
    padding: var(--space-huge) var(--space-xxl);
  }

  .pd-project__title {
    font-size: 28px;    /* display-lg */
    line-height: 1.2;
    letter-spacing: -0.5px;
  }
}

/* Small tablet: anchor offset for two-row header */
@media (max-width: 768px) {
  .pd-banner {
    padding-top: calc(var(--space-huge) * 2 + var(--space-xxl));
  }

  .pd-project {
    scroll-margin-top: calc(var(--space-huge) * 2);
  }

  .pd-meta {
    column-gap: var(--space-xxl);
  }
}

/* Mobile: single column, smaller type and spacing */
@media (max-width: 480px) {
  .pd-banner {
    padding: calc(var(--space-huge) * 2 + var(--space-lg)) var(--space-lg) var(--space-xxl);
  }

  .pd-banner__inner {
    gap: var(--space-lg);
  }

  .pd-banner__title {
    font-size: 22px;    /* display-md */
    line-height: 1.25;
    letter-spacing: -0.3px;
  }

  .pd-banner__subtitle {
    font-size: 16px;    /* body-md */
    line-height: 1.5;
  }

  .pd-project {
    padding: var(--space-xxl) var(--space-lg);
  }

  /* Last project: room for Back to Top icon */
  .pd-project:last-child {
    padding-bottom: calc(var(--space-huge) + var(--space-lg));
  }

  .pd-project__inner {
    gap: var(--space-xl);
  }

  .pd-project__title {
    font-size: 22px;    /* display-md */
    line-height: 1.25;
    letter-spacing: -0.3px;
  }

  .pd-project__subtitle {
    font-size: 16px;    /* body-md */
    line-height: 1.5;
  }

  .pd-visual {
    border-radius: var(--rounded-md);
  }

  /* Body copy → body-sm */
  .pd-block p,
  .pd-outcomes li {
    font-size: 14px;    /* body-sm */
    line-height: 1.45;
  }

  .pd-block .pd-step__text {
    padding-left: 0;
  }

  .pd-steps {
    gap: var(--space-lg);
  }
}

/* Inline code inside body copy — code font at body size */
.pd-block code {
  font-family: var(--font-code);
  font-size: 0.9em;
  color: var(--c-text-primary);
}