/************************************************************************************************ \
 *
 * Styles common to all slices/components, such as spacing and layout of the common elements
 * including the kicker (a.k.a. eyebrow header), main heading, and description
 * The `.ps` prefix stands for "prismic slice"
 *
 ************************************************************************************************/

.ps {
  width: 100vw;
  width: calc(100vw - var(--scrollbar));
  position: relative;
  padding-left: 2rem; // h-padding
  padding-right: 2rem; // h-padding
  padding-top: 8vw; // v-space
  padding-bottom: 8vw; // v-space

  @media all and (max-width: 640px) {
    padding: 8vw 1.25rem;
  }
}

.ps--black {
  background-color: #000;
  color: #fff;
}

.ps--beige {
  background-color: var(--color--secondary);
}

.ps__wrap {
  margin: 0 auto;

  @media all and (min-width: 1024px) {
    max-width: 80%;
  }

  @media all and (min-width: 1200px) {
    max-width: 75%;
  }
}

.ps__head {
  @media all and (min-width: 50em) {
    margin: 0 auto;
    text-align: center;
  }
}

.ps__title {

  @extend .text--4xl;
}

.ps__title > * {
  margin-bottom: 0;
}

.ps__desc {
  max-width: 42rem;

  @extend .text--xl;

  @media all and (min-width: 800px) {
    margin-left: auto;
    margin-right: auto;
  }

  font-weight: 350;

  p {
    line-height: 1.4;
  }

  p:last-of-type {
    margin-bottom: 0;
  }
}

.ps__desc.right {
  @media all and (min-width: 800px) {
    text-align: right;
    margin-right: 0;
  }
}

.ps__desc.left {
  @media all and (min-width: 800px) {
    text-align: left;
    margin-left: 0;
  }
}

// when the description is preceded with a heading, add margin between them
.ps__header + .ps__desc {
  margin-top: calc(var(--v-margin) / 2);

  @media all and (min-width: 50em) {
    margin-top: var(--v-margin);
  }
}

.ps__head--left {
  margin-bottom: var(--v-margin);

  @media all and (min-width: 40em) {
    margin: 0;
    margin-bottom: calc(var(--v-margin) * 1.5);
  }

  .ps__header *,
  .ps__desc {
    text-align: left;
    margin-left: 0;
  }

  .ps__header + .ps__desc {
    margin-top: 0.5rem;
  }
}

// only when the main section is preceded with a head section does it have a top margin
// otherwise it's not needed
.ps__head + .ps__main {
  margin-top: calc(var(--v-margin) * 2);
}

.ps__kicker {
  display: block;
  color: var(--color--primary);
  font-weight: 500;

  @extend .text--l;

  margin: 0 0 0.6em;
  line-height: 1.3;
}

.ps__kicker-icon {
  display: inline-block;
  margin: 0 0 1rem;
  width: 100%;
  max-width: 120px;
}

.ps__img {
  display: block;
  margin: 0 auto calc(var(--c-padding) * 2);

  img {
    display: inline-block;
    max-width: 100%;
  }
}

.ps__features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  margin-top: var(--v-margin);

  li {
    margin-bottom: 1rem;
    padding-left: 2rem;
    position: relative;

    &::before {
      content: '';
      display: block;
      width: 1em;
      height: 1em;
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Echeck_circle-24px%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg fill='none'%3E%3Cpath d='M-2-2h24v24h-24z'/%3E%3Cpath d='M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z' fill='%2347C1AF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: 95% 95%;
      background-position: center center;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -0.5em;
    }
  }
}

.ps__card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ps__card-item {
  border-radius: 8px;
  margin-bottom: var(--v-space);
}

.ps__card-item--full {
  background-color: var(--color--secondary);
  padding: calc(var(--h-padding) * 1.25) var(--h-padding);
}

.ps__card-item__title {
  @extend .text--l;

  margin-bottom: calc(var(--c-margin) / 2);
}

.ps__card-item__content {
  margin-top: var(--c-padding);

  p:last-of-type {
    margin-bottom: 0;
  }
}

.ps__card-item__cta {
  text-align: center;

  .ps-button {
    display: block;
  }
}

@media all and (min-width: 40em) {
  .ps__card-item {
    display: inline-block;
    margin-right: var(--h-padding);
  }

  @supports (display: grid) {
    .ps__card-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-column-gap: var(--v-margin);
      // grid-row-gap: var(--v-space);
    }

    .ps__card-item {
      margin-right: 0;
    }
  }
}

/* slice main content area grid layout */
@media all and (min-width: 50em) {
  // 800px
  .ps__main.grid {
    [class^='span-'] {
      display: inline-block;
      margin-left: -4px;
      vertical-align: middle;
      width: 48%;
      margin-right: 4%;

      &:nth-of-type(even) {
        margin-right: 0;
      }
    }

    [class='span-1-12'] {
      width: 100%;
    }

    @supports (display: grid) {
      display: grid;
      grid-auto-flow: dense;

      [class^='span-'] {
        display: block;
        margin: 0;
        width: 100%;
      }
    }

    &.grid--align-center {
      align-items: center;
    }

    &.grid--align-stretch {
      align-items: stretch;
    }

    &.grid--align-top {
      align-items: top;
    }
  }

  .ps__main.grid--12 {
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: var(--h-padding);
    grid-row-gap: var(--v-space);
  }

  .span-1-12 {
    grid-column: 1 / 13;
  }

  .span-1-11 {
    grid-column: 1 / 12;
  }

  .span-1-10 {
    grid-column: 1 / 11;
  }

  .span-1-9 {
    grid-column: 1 / 10;
  }

  .span-10-12 {
    grid-column: 10 / 13;
  }

  .span-1-8 {
    grid-column: 1 / 9;
  }

  .span-9-12 {
    grid-column: 9 / 13;
  }

  .span-1-7 {
    grid-column: 1 / 8;
  }

  .span-8-12 {
    grid-column: 8 / 13;
  }

  .span-1-6 {
    grid-column: 1 / 7;
  }

  .span-7-12 {
    grid-column: 7 / 13;
  }

  .span-1-5 {
    grid-column: 1 / 6;
  }

  .span-6-12 {
    grid-column: 6 / 13;
  }

  .span-1-4 {
    grid-column: 1 / 5;
  }

  .span-5-12 {
    grid-column: 5 / 13;
  }

  .span-1-3 {
    grid-column: 1 / 4;
  }

  .span-4-12 {
    grid-column: 4 / 13;
  }

  .span-1-2 {
    grid-column: 1 / 3;
  }

  .span-3-12 {
    grid-column: 3 / 13;
  }
}