/**
 * Paragraph Component Styles
 *
 * Sizes:   xl | l | m | s | xs
 * Weights: regular (400) | bold (700)
 *
 * Font sizes use responsive tokens that scale across four breakpoints.
 * Letter-spacing uses em so it scales proportionally with the font size.
 */

/* -------------------------------------------------------
 * Base
 * ------------------------------------------------------- */
.paragraph {
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: var(--font-weight-regular, 400);
  color: inherit;

  /* margins top and bottom should be handled on the component level */
  margin-block: 1.2em;

  & > p {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }

  /* weird margin tweaks */

  .container__slot {
    /* horizontal alignment */
    &:first-child {
      margin-top: 0;
    }
  }
   /* slots are display:flex, so margins don't collapse */
  .container__slot .heading + &,
  .container__slot .heading-xl + & {
    margin-top: 0;
  }
}

/* -------------------------------------------------------
 * Weights
 * ------------------------------------------------------- */
.paragraph--bold {
  font-weight: var(--font-weight-bold, 700);
}

/* -------------------------------------------------------
 * Sizes
 * ------------------------------------------------------- */
.paragraph--xl {
  font-size: var(--text-paragraph-xl, 30px);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.paragraph--l {
  font-size: var(--text-paragraph-l, 18px);
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.paragraph--m {
  font-size: var(--text-paragraph-m, 16px);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.paragraph--s {
  font-size: var(--text-paragraph-s, 15px);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.paragraph--xs {
  font-size: var(--text-paragraph-xs, 14px);
  line-height: 1.5;
  letter-spacing: 0;
}

/* -------------------------------------------------------
 * Columns
 * ------------------------------------------------------- */
.paragraph--columns-1 {
  columns: 1;
}

.paragraph--columns-2 {
  columns: 1;
  margin-block: 0;
  padding-block: 1rem;
}

.paragraph--columns-2 p {
  padding-block: 0;
  margin-block: 0;
}

@media (min-width: 768px) {
  .paragraph--columns-2 {
    columns: 2;
    column-gap: var(--spacing-800, 64px);
  }
}