/* ============================================================
   AI LAB — Hub page (ai-lab/index.html) only
   ============================================================ */

.ai-lab-hero {
  position: relative;
  overflow: hidden;
}

/* Fixed-size SVG tile (see assets/ai-lab-tri-tile.svg), tiled at a constant
   pixel size — not a viewport-relative CSS gradient — so the triangles are
   always identical regardless of viewport width, and the tile's flat top
   edge lines up exactly with the container top for a clean edge at the nav. */
.ai-lab-hero__grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px;
  z-index: 0;
  background-image: url("../assets/ai-lab-tri-tile.svg");
  background-repeat: repeat;
  background-position: top left;
  background-size: 96px 166.276px;
  opacity: 0.22;
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
}

.ai-lab-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-32) var(--space-20);
}

.ai-lab-hero__title {
  color: var(--color-text);
  margin-bottom: var(--space-10);
}

.ai-lab-hero__columns {
  gap: var(--space-10) var(--space-8);
}

.ai-lab-hero__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-2);
}

.ai-lab-hero__text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.ai-lab-cards {
  margin-bottom: var(--space-20);
}

@media (max-width: 640px) {
  .ai-lab-hero__inner { padding-block: var(--space-20) var(--space-12); }
  .ai-lab-cards { margin-bottom: var(--space-12); }
}