/*
 * ============================================================
 * GENERATION CTA — FINAL DESIGN V1
 * ============================================================
 *
 * Approved:
 *
 * Не нашли нужную инструкцию?
 * Создадим её за 2 минуты!
 *
 * Visual system:
 * soft blue surface
 * blue border
 * sharp blue shadow
 */


/*
 * ============================================================
 * CARD
 * ============================================================
 */

.generationListCard {
  position: relative !important;

  overflow: visible !important;

  background:
    #f2f7ff !important;

  background-color:
    #f2f7ff !important;

  background-image:
    none !important;

  color:
    #172b45 !important;

  border:
    2px solid
    #78a8ee !important;

  border-radius:
    11px !important;

  /*
   * Небольшая постоянная
   * чёткая синяя тень.
   */
  box-shadow:
    3px 3px 0
    rgba(47, 111, 214, .16) !important;

  transform:
    none !important;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease !important;
}


/*
 * ============================================================
 * REMOVE LEGACY DECOR
 * ============================================================
 */

.generationListCard::before,
.generationListCard::after,
.generationListCard:hover::before,
.generationListCard:hover::after,
.generationListCard:focus-within::before,
.generationListCard:focus-within::after {
  content:
    none !important;

  display:
    none !important;

  background:
    none !important;

  background-image:
    none !important;

  width:
    0 !important;

  height:
    0 !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


/*
 * Внутренние слои не должны
 * возвращать старую синюю заливку.
 */

.generationListCard > *,
.generationListCardInner,
.generationListBody {
  background:
    transparent !important;

  background-color:
    transparent !important;

  background-image:
    none !important;
}


/*
 * ============================================================
 * BODY
 * ============================================================
 */

.generationListCardInner {
  height:
    100% !important;

  color:
    #172b45 !important;
}


.generationListBody {
  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  height:
    100% !important;

  color:
    #172b45 !important;
}


/*
 * ============================================================
 * BADGE
 * ============================================================
 */

.generationListEyebrow {
  display:
    inline-flex !important;

  align-items:
    center !important;

  width:
    fit-content !important;

  margin-bottom:
    15px !important;

  padding:
    4px
    8px !important;

  color:
    #2f6fd6 !important;

  background:
    #e7f0ff !important;

  border:
    1px solid
    #a9c7f5 !important;

  border-radius:
    999px !important;

  font-size:
    9px !important;

  line-height:
    1 !important;

  font-weight:
    700 !important;

  letter-spacing:
    .055em !important;

  text-transform:
    uppercase !important;
}


/*
 * ============================================================
 * TITLE
 * ============================================================
 */

.generationListTitle {
  display:
    block !important;

  margin-bottom:
    9px !important;

  color:
    #172b45 !important;

  font-weight:
    600 !important;
}


/*
 * ============================================================
 * DESCRIPTION
 * ============================================================
 */

.generationListText {
  display:
    block !important;

  margin-bottom:
    18px !important;

  color:
    #627996 !important;

  font-size:
    13px !important;

  line-height:
    1.45 !important;

  font-weight:
    500 !important;
}


/*
 * ============================================================
 * BUTTON
 * ============================================================
 */

.generationListCard
.generationListButton,
.generationListCard:hover
.generationListButton {

  position:
    relative !important;

  z-index:
    10 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    auto !important;

  min-height:
    38px !important;

  margin-top:
    auto !important;

  padding:
    9px
    14px !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  pointer-events:
    auto !important;

  color:
    #ffffff !important;

  background:
    #2f6fd6 !important;

  background-color:
    #2f6fd6 !important;

  background-image:
    none !important;

  border:
    1px solid
    #2f6fd6 !important;

  border-radius:
    8px !important;

  box-shadow:
    none !important;

  transform:
    none !important;

  text-decoration:
    none !important;

  font-weight:
    600 !important;

  white-space:
    nowrap !important;
}


.generationListCard
.generationListButton *,
.generationListCard:hover
.generationListButton * {

  color:
    #ffffff !important;

  background:
    transparent !important;

  visibility:
    visible !important;

  opacity:
    1 !important;
}


/*
 * ============================================================
 * CARD HOVER
 * ============================================================
 */

@media (hover: hover) {

  .generationListCard:hover {

    /*
     * На hover становится чуть светлее,
     * но сохраняет голубой характер.
     */
    background:
      #ffffff !important;

    background-color:
      #ffffff !important;

    border-color:
      #2f6fd6 !important;

    box-shadow:
      5px 5px 0
      #2f6fd6 !important;

    transform:
      none !important;
  }


  .generationListCard:hover
  .generationListTitle {

    color:
      #172b45 !important;
  }


  .generationListCard:hover
  .generationListText {

    color:
      #627996 !important;
  }


  .generationListCard:hover
  .generationListEyebrow {

    color:
      #2f6fd6 !important;

    background:
      #e7f0ff !important;

    border-color:
      #a9c7f5 !important;
  }


  /*
   * Hover непосредственно кнопки.
   */

  .generationListCard
  .generationListButton:hover {

    color:
      #ffffff !important;

    background:
      #245fbe !important;

    background-color:
      #245fbe !important;

    border-color:
      #245fbe !important;

    box-shadow:
      3px 3px 0
      #9dbcf0 !important;
  }

}


/*
 * ============================================================
 * FOCUS
 * ============================================================
 */

.generationListButton:focus-visible {
  outline:
    2px solid
    rgba(47, 111, 214, .55) !important;

  outline-offset:
    3px !important;
}


/*
 * ============================================================
 * TOUCH
 * ============================================================
 */

@media (hover: none) {

  .generationListCard,
  .generationListCard:hover {

    background:
      #f2f7ff !important;

    border-color:
      #78a8ee !important;

    box-shadow:
      3px 3px 0
      rgba(47, 111, 214, .16) !important;

    transform:
      none !important;
  }

}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 600px) {

  .generationListCard {
    border-radius:
      10px !important;

    box-shadow:
      3px 3px 0
      rgba(47, 111, 214, .15) !important;
  }


  .generationListEyebrow {
    margin-bottom:
      13px !important;
  }


  .generationListText {
    margin-bottom:
      15px !important;

    font-size:
      12px !important;
  }


  .generationListCard
  .generationListButton,
  .generationListCard:hover
  .generationListButton {

    min-height:
      36px !important;

    padding:
      8px
      12px !important;
  }

}