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

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

/* Teaser panel — card surface, two columns, graphic bleeds to edges */
.blog-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.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);
}

/* Text column — title, subtitle, CTA stacked */
.blog-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 */
.blog-teaser__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Section title — display-xl */
.blog-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 */
.blog-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 column — decorative arcs, fills its cell */
.blog-teaser__visual {
  position: relative;
  min-height: calc(var(--space-huge) * 6);
  border-left: 1px solid var(--c-hairline);
}

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

/* Arc graphic primitives — active-mode tokens only */
.bt-dots { fill: var(--c-hairline-strong); }
.bt-line { fill: none; stroke: var(--c-hairline-strong); stroke-width: 1.5; }
.bt-accent { fill: none; stroke: var(--c-accent); stroke-width: 2.5; }
.bt-strong { fill: none; stroke: var(--c-accent-strong); stroke-width: 3; }
.bt-node { fill: var(--c-accent-strong); }

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

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

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

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

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

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

  .blog-teaser__visual {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 7;
    border-left: 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 */
  .blog-preview {
    padding: var(--space-xxl) var(--space-lg) calc(var(--space-huge) + var(--space-lg));
  }

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

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

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

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