/* ==========================================================================
   Lab detail page (/lab.html) — small hero banner, section index,
   categorized card sections. Solid canvas, no gradients, no images.
   ========================================================================== */

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

/* Hidden SVG sprite container */
.lab-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.lab-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);
}

.lab-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 80em;
  margin: 0 auto;
}

/* Breadcrumb trail above title — code-sm (mirrors projects/blog breadcrumb) */
.lab-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  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 */
.lab-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-sm);
}

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

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

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

/* Page title — display-xxl */
.lab-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 */
.lab-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);
}

/* Section index — pill links to each Lab category */
.lab-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lab-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 */
.lab-index a span {
  font-family: var(--font-code);
  color: var(--c-accent-strong);
}

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

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

/* --------------------------------------------------------------------------
   Category sections — sticky header column + card grid
   -------------------------------------------------------------------------- */

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

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

/* Hairline divider between sections */
.lab-section + .lab-section {
  border-top: 1px solid var(--c-hairline);
}

.lab-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--space-huge);
  max-width: 80em;
  margin: 0 auto;
}

/* Section header — sticks below fixed header while cards scroll */
.lab-section__header {
  position: sticky;
  top: calc(var(--space-huge) + var(--space-xxl));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Section number — code-md accent */
.lab-section__num {
  margin: 0;
  font-family: var(--font-code);
  font-size: 18px;      /* code-md */
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-accent-strong);
}

/* Section title — display-lg */
.lab-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;      /* display-lg */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--c-text-primary);
}

/* Section intro — body-md */
.lab-section__intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;      /* body-md */
  font-weight: 360;
  line-height: 1.5;
  color: var(--c-text-secondary);
}

/* Card grid — 2 columns */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lab-grid > li {
  display: flex;
}

/* Full-width grid item (workflow card) */
.lab-grid > .lab-grid__wide {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Lab item card — card-light / card-dark
   -------------------------------------------------------------------------- */

.lab-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-xxl);
  background-color: var(--c-canvas-soft);
  color: var(--c-text-primary);
  border: 1px solid var(--c-hairline);
  border-radius: var(--rounded-lg);
}

/* Icon tile — matches landing Lab card icon */
.lab-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--space-xxl) + var(--space-lg));
  height: calc(var(--space-xxl) + var(--space-lg));
  flex-shrink: 0;
  color: var(--c-accent-strong);
  background-color: var(--c-canvas);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--rounded-md);
}

/* Card title — display-sm */
.lab-item__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);
}

/* Card description — body-md */
.lab-item__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;      /* body-md */
  font-weight: 360;
  line-height: 1.5;
  color: var(--c-text-secondary);
}

/* Tech pill row — pinned to card bottom */
.lab-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

/* Tech pill — pill-accent shape, tinted accent surface (sparing accent use) */
.tech-pill {
  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);
}

/* Compact variant — mindset principles (icon + title + one line) */
.lab-item--compact {
  flex-direction: row;
  align-items: flex-start;
  padding: var(--space-xl);
}

.lab-item--compact .lab-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Workflow card — six numbered deployment steps
   -------------------------------------------------------------------------- */

.lab-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lab-step;
}

/* Step tile — numbered via CSS counter */
.lab-steps li {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: 14px;      /* body-sm */
  font-weight: 360;
  line-height: 1.45;
  color: var(--c-text-secondary);
  background-color: var(--c-canvas);
  border: 1px solid var(--c-hairline);
  border-radius: var(--rounded-md);
  counter-increment: lab-step;
}

.lab-steps li::before {
  content: "0" counter(lab-step);
  font-family: var(--font-code);
  font-size: 15px;      /* code-sm */
  line-height: 1.45;
  color: var(--c-accent-strong);
}

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

/* Large tablet: header stacks above cards, tighter padding */
@media (max-width: 1024px) {
  .lab-banner {
    padding: calc(var(--space-huge) * 2) var(--space-xxl) var(--space-huge);
  }

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

  .lab-section {
    padding: var(--space-huge) var(--space-xxl);
  }

  .lab-section__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .lab-section__header {
    position: static;
    max-width: 40em;
  }

  .lab-grid {
    gap: var(--space-lg);
  }

  .lab-item {
    padding: var(--space-xl);
  }
}

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

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

  .lab-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

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

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

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

  .lab-section {
    padding: var(--space-xxl) var(--space-lg);
  }

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

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

  .lab-grid {
    gap: var(--space-md);
  }

  .lab-item {
    gap: var(--space-md);
    padding: var(--space-lg);
  }

  /* Icons scale down */
  .lab-item__icon {
    width: calc(var(--space-xxl) + var(--space-sm));
    height: calc(var(--space-xxl) + var(--space-sm));
  }

  .lab-icon {
    width: calc(var(--space-lg) + var(--space-xs));
    height: calc(var(--space-lg) + var(--space-xs));
  }

  /* Card title → body-lg, description → body-sm */
  .lab-item__title {
    font-family: var(--font-body);
    font-size: 18px;    /* body-lg */
    font-weight: 360;
    line-height: 1.55;
    letter-spacing: 0;
  }

  .lab-item__text {
    font-size: 14px;    /* body-sm */
    line-height: 1.45;
  }

  .lab-item--compact {
    padding: var(--space-lg);
    gap: var(--space-md);
  }

  .lab-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }
}