.root-landing-recovery-stories {
  padding-top: (4 * $vertical-height);
  h3 {
    font-style: italic;
    text-align: center;
  }
}

#recovery-stories-listing {
  .recovery-block {
    margin: 1rem auto;
  }
}

#recovery-stories-container {
  width: 90%;
  margin: 35px auto 0 auto;
  position: relative;

  .slick-prev {
    left: -6%;
  }

  .slick-next {
    right: -6%;
  }

  .slick-prev,
  .slick-next {
    color: $gray;
  }

  // Avoid having a flash where all the recoveries are shown
  &.extras-hidden .recovery-block {
    &:nth-of-type(n + 2) {
      display: none;
    }
  }
}

$recovery-tri-1: 20px;
$recovery-text-bg: #fff;

.recovery-block {
  @include clearfix;

  h3,
  h4,
  p {
    margin: 0;
  }

  .recovery-user {
    display: block;

    @include clearfix;

    position: relative;
    margin: 0 5% 0 0;
    float: left;
  }

  img {
    display: block;
    margin: 0;
    width: 20%;
    font-size: 16px;
    height: auto;
    float: right;
    padding-bottom: 0.5em;
  }

  .h3recovery {
    margin: 0.25em 0 0;
    font-size: 18px;
    display: block;
    font-weight: normal;
  }

  .h4recovery {
    font-size: 14px;
    display: block;
  }

  // $row-width: 3.438; // 100/32 - full width over 4 column
  $row-width: 2.083;

  // 100/48 - full width over 4 column
  .h3recovery,
  .h4recovery {
    float: left;
    text-align: right;
    margin-left: 2% * $row-width;
    width: 80% - 2% * $row-width;
  }

  .recovery-quote {
    float: right;
    position: relative;
    width: 72.5%;
    margin: 0;
    background: $recovery-text-bg;
    padding: 1em 1em 1em 3em;
    line-height: 1.3em;
    border: 5px solid $gray;

    svg,
    img {
      width: 1.25em;
      height: auto;
      display: block;
      position: absolute;
      top: 1em;
      left: 1em;

      .svg-q-p {
        fill: #3498db;
      }
    }

    &:before {
      content: "";
      height: 0;
      width: 0;
      left: -($recovery-tri-1 * 1.4);
      position: absolute;
      border-bottom: $recovery-tri-1 solid transparent;
      border-right: ($recovery-tri-1 * 1.3) solid $gray;
    }

    .precovery {
      margin: 0;
      line-height: 1.2em;
    }

    .translation-credit {
      display: block;
      font-size: 10px;
      font-style: italic;
      margin-bottom: -10px;
      margin-top: 10px;
      text-align: right;
    }
  }

  .see-more-link {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    margin: 17%;
  }
}

@media (min-width: $grid-breakpoint-xl) {
  #recovery-stories-listing {
    .recovery-stories-container {
      width: 48%;
      margin: 10px;
      float: left;
    }
  }
}

@media (min-width: $grid-breakpoint-sm + 1) {
  .recovery-block {
    .recovery-user {
      width: 22.5%;
    }

    .h3recovery,
    .h4recovery {
      margin-left: 0;
    }

    .no-image-spacer {
      display: block;
      width: 100%;
      padding: 10px;
    }

    img {
      width: 100%;
    }

    .h3recovery {
      padding-top: 1em;
    }

    .h3recovery,
    .h4recovery {
      width: 100%;
      float: none;
      text-align: center;
    }

    .recovery-quote {
      font-size: 18px;

      &:before {
        top: 0;
      }
    }
  }
}

@media (min-width: $grid-breakpoint-sm) {
  .recovery-block {
    .recovery-user {
      padding-left: 0.5em;
    }

    .h4recovery .recovery-date {
      display: block;
      margin-top: -0.25em;
    }
  }
}

$recovery-tri-2: 15px;

@media (max-width: $grid-breakpoint-sm) {
  .recovery-block {
    .recovery-user {
      width: 100%;
      padding: 20px 5% 0 0;
      margin: 0;
    }

    .h3recovery {
      margin-top: 1em;
    }

    .h3recovery,
    .h4recovery {
      text-align: right;
      margin-right: 2%;
      margin-left: 0;
    }

    img {
      float: right;
    }

    .recovery-quote {
      width: 99%;
      margin: 0 0.5%;
      position: relative;

      &:before {
        left: 90%;
        bottom: -($recovery-tri-2 + 9px);
        border-left: $recovery-tri-2 solid transparent;
        border-bottom: ($recovery-tri-2 * 1.5) solid transparent;
        border-right: $recovery-tri-2 solid $gray;
      }
    }

    .see-more-link {
      margin: 35%;
    }
  }
}
