@use "sass:color";
@use "../color-tokens" as *;

.container {
  width: min(var(--content-max, 120ch), 100% - 2rem);
  margin-inline: auto;
}

.column-container {
  --gap: 2rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 25ch), 1fr));
  gap: var(--gap);
}

.hero {
  --padding: 10vh;
  --min-height: 40vh;
  --content-max: 70ch;

  display: grid;
  place-content: center;
  min-height: var(--min-height);
  padding-block: var(--padding);
  text-align: center;

  .landing-page & {
    --padding: 5vh;
    --min-height: unset;
  }

  .lead {
    margin-top: 5vh;

    a {
      color: inherit;
    }

    + .button {
      margin-top: 3vh;
    }
  }
}

.row {
  --gap: 0.5rem;
  --justify-content: center;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--justify-content);
  gap: var(--gap);
}

.flex-container {
  --gap: 1rem;

  display: flex;
  flex-direction: column;
  gap: var(--gap);

  .row {
    --justify-content: flex-start;

    margin-top: auto;
  }
}

.section {
  margin-block: var(--section-margin, 8vh);
  padding-block: var(--section-padding, 4vh);
}

.mx-auto {
  margin-inline: auto;
}

.mbs-medium {
  margin-block-start: max(5vh, 3rem);
}

.text-align-center {
  text-align: center;
}

.equalize-headings :is(h2, h3) {
  display: flex;
  align-items: center;
  min-height: 2.5em;
}

.gradient-border {
  border-width: 0;
  border-top-width: var(--gradient-width, 0.25rem);
  border-style: solid;
  border-image: linear-gradient(to right, var(--gradient)) 1;
}

.promo {
  --gradient-angle: 35deg;

  margin: 8vh 0;
  width: min(var(--promo-width, 40rem), 100%);
  margin-inline: auto;
  padding: 2rem 1.5rem;
  text-align: center;
  border-width: 8px;
  border-style: solid;
  border-image: linear-gradient(
      var(--gradient-angle, to bottom),
      var(--gradient)
    )
    1;

  a {
    color: var(--color-secondary);
  }

  header + & {
    margin-top: 0;
  }
}

.promo--wide {
  --promo-width: 80ch;
}

.promo--centered {
  display: grid;
  justify-items: center;

  p {
    width: 100%;
    max-width: 30ch;
  }
}

.pill {
  font-size: 0.9em;
  font-weight: bold;
  line-height: 1;
  border-radius: 100vmax;
  color: var(--color-green);
  border: 2px solid;
  padding: 0.15em 0.5em;
}

$text-colors: "primary", "secondary", "gray";

@each $color in $text-colors {
  .color-#{$color} {
    color: var(--color-#{$color});
  }
}

.background--secondary-alt {
  background-color: color.scale($color-secondary, $lightness: -20%);
  color: #fff;

  a:not([class]) {
    color: inherit;
  }

  .button-outlined {
    --button-focus-inner: var(--color-secondary);
  }
}

[hidden] {
  display: none;
}
