/* ==========================================================================
   About preview section — teaser panel mirroring Blog preview:
   token-drawn graphic (left), text + global CTA (right). No gradients.
   ========================================================================== */

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

/* Teaser panel — card surface, graphic column first, bleeds to edges */
.about-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  max-width: 80em;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--c-canvas-soft);
  border: 1px solid var(--c-hairline);
  border-radius: var(--rounded-lg);
}

/* Graphic column — Raspberry Pi → growth path illustration */
.about-teaser__visual {
  position: relative;
  min-height: calc(var(--space-huge) * 6);
  border-right: 1px solid var(--c-hairline);
}

.about-teaser__visual svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Text column — title, subtitle, CTA stacked */
.about-teaser__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-huge);
}

/* Title + subtitle group */
.about-teaser__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Section title — display-xl */
.about-teaser__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 */
.about-teaser__subtitle {
  margin: 0;
  max-width: 28em;
  font-family: var(--font-body);
  font-size: 18px;      /* body-lg */
  font-weight: 360;
  line-height: 1.55;
  color: var(--c-text-secondary);
}

/* Graphic primitives — active-mode tokens only */
.at-dots { fill: var(--c-hairline-strong); }
.at-board { fill: var(--c-canvas); stroke: var(--c-hairline-strong); stroke-width: 1.5; }
.at-pin { fill: var(--c-hairline-strong); }
.at-line { fill: var(--c-canvas-soft); stroke: var(--c-hairline-strong); stroke-width: 1.5; }
.at-branch { fill: none; stroke: var(--c-hairline-strong); stroke-width: 1.5; }
.at-ring { fill: none; stroke: var(--c-hairline-strong); stroke-width: 1.5; stroke-dasharray: 4 6; }
.at-accent { fill: none; stroke: var(--c-accent); stroke-width: 2.5; }
.at-strong { fill: none; stroke: var(--c-accent-strong); stroke-width: 3; }
.at-halo { fill: none; stroke: var(--c-accent); stroke-width: 8; stroke-opacity: 0.35; }
.at-node { fill: var(--c-canvas-soft); stroke: var(--c-hairline-strong); stroke-width: 1.5; }
.at-node-accent { fill: var(--c-accent); }
.at-node-strong { fill: var(--c-accent-strong); }

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

/* Large tablet: tighter padding, display-lg title */
@media (max-width: 1024px) {
  .about-preview {
    padding: var(--space-huge) var(--space-xxl);
  }

  .about-teaser__content {
    padding: var(--space-xxl);
  }

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

/* Small tablet: single column, graphic as top band (matches Blog preview) */
@media (max-width: 768px) {
  .about-preview {
    scroll-margin-top: calc(var(--space-huge) * 2);
  }

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

  .about-teaser__visual {
    min-height: 0;
    aspect-ratio: 16 / 10;  /* taller than Blog band so cluster rings stay in frame */
    border-right: 0;
    border-bottom: 1px solid var(--c-hairline);
  }
}

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

  .about-teaser__content {
    align-items: stretch;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .about-teaser__header {
    gap: var(--space-md);
  }

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

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