/* ==========================================================================
   Lab preview section — solid canvas, centered heading, 3-card grid, CTA.
   ========================================================================== */

/* Section container: solid active-mode canvas, anchor offset for fixed header */
.lab-preview {
  padding: var(--space-huge);
  background-color: var(--c-canvas);
  scroll-margin-top: calc(var(--space-huge) + var(--space-sm));
}

/* Inner width cap keeps cards balanced on wide screens */
.lab-preview__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-huge);
  max-width: 80em;
  margin: 0 auto;
}

/* Heading group — centered (screenshot cue) */
.lab-preview__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 40em;
  text-align: center;
}

/* Section title — display-xl */
.lab-preview__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);
}

/* Section subtitle — body-lg */
.lab-preview__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);
}

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

/* Lab card — card-light / card-dark via semantic vars */
.lab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-huge);
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-xxl);
  overflow: hidden;
  background-color: var(--c-canvas-soft);
  color: var(--c-text-primary);
  border: 1px solid var(--c-hairline);
  border-radius: var(--rounded-lg);
}

/* Decorative hairline arc (screenshot cue), behind content */
.lab-card::after {
  content: "";
  position: absolute;
  left: -30%;
  top: 40%;
  width: 160%;
  aspect-ratio: 1;
  border: 1px solid var(--c-hairline);
  border-radius: var(--rounded-full);
  pointer-events: none;
}

/* Tech icon tile — top-left */
.lab-card__icon {
  position: relative;
  z-index: 1;
  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));
  color: var(--c-accent-strong);
  background-color: var(--c-canvas);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--rounded-md);
}

.lab-card__icon svg {
  width: var(--space-xl);
  height: var(--space-xl);
}

/* Text block — fixed offset below icon so titles align across cards */
.lab-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Category label — body-sm uppercase */
.lab-card__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;      /* body-sm */
  font-weight: 360;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Card title — display-md */
.lab-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;      /* display-md */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--c-text-primary);
}

/* Two-sentence description — body-md */
.lab-card__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);
}

/* --------------------------------------------------------------------------
   CTA — button-primary-light / -dark with left→right highlight sweep
   -------------------------------------------------------------------------- */

/* Rest state: tinted accent surface + solid accent border */
.cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--space-sm) var(--space-lg);
  overflow: hidden;
  isolation: isolate;
  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);
  text-decoration: none;
  background-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-canvas-soft));
  border: 1px solid var(--c-accent);
  border-radius: var(--rounded-sm);
}

/* Highlight layer — collapsed at left edge until hover */
.cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Hover / keyboard focus / tap: sweep fills and holds */
.cta-button:hover::before,
.cta-button:focus-visible::before,
.cta-button:active::before {
  transform: scaleX(1);
}

.cta-button:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: var(--space-xxs);
}

.cta-button svg {
  width: var(--space-lg);
  height: var(--space-lg);
}

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

/* Large tablet: tighter section + card padding */
@media (max-width: 1024px) {
  .lab-preview {
    padding: var(--space-huge) var(--space-xxl);
  }

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

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

  .lab-card {
    padding: var(--space-xl);
    gap: var(--space-xxl);
  }
}

/* Small tablet: cards stack 1-up */
@media (max-width: 768px) {
  /* Anchor offset for two-row header */
  .lab-preview {
    scroll-margin-top: calc(var(--space-huge) * 2);
  }

  .lab-preview__inner {
    gap: var(--space-xxl);
  }

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

/* Mobile: single column, smaller type, full-width CTA */
@media (max-width: 480px) {
  /* Extra bottom space keeps full-width CTA clear of Back to Top icon */
  .lab-preview {
    padding: var(--space-xxl) var(--space-lg) calc(var(--space-huge) + var(--space-lg));
  }

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

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

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

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

  .lab-card {
    padding: var(--space-lg);
    gap: var(--space-xl);
  }

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

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

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

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

  /* CTA full width, button-text-sm → body-sm */
  .cta-button {
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;    /* body-sm */
    font-weight: 360;
    line-height: 1.45;
    letter-spacing: 0;
  }
}

/* Reduced motion: highlight appears without sweep */
@media (prefers-reduced-motion: reduce) {
  .cta-button::before {
    transition: none;
  }
}