/*
 * ============================================================
 * GENERATION CTA NATIVE V1
 * ============================================================
 *
 * CTA становится частью той же системы,
 * что карточки инструкций:
 *
 * default:
 *   white surface
 *   dark navy border
 *
 * accents:
 *   blue badge
 *   blue primary button
 *
 * hover:
 *   sharp solid blue shadow
 */


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

.generationListCard {
  position: relative;

  overflow: visible !important;

  background:
    #ffffff !important;

  color:
    #172b45 !important;

  border:
    2px solid
    #172b45 !important;

  border-radius:
    11px !important;

  box-shadow:
    none !important;

  transform:
    none !important;

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


/*
 * Старая синяя заливка находится
 * также на внутренних слоях.
 */

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

  background-image:
    none !important;
}


/*
 * Убираем старые декоративные overlays,
 * если они создавали синюю поверхность.
 */

.generationListCard::before,
.generationListCard::after,
.generationListCardInner::before,
.generationListCardInner::after {
  background:
    transparent !important;
}


/*
 * ============================================================
 * INNER LAYOUT
 * ============================================================
 */

.generationListCardInner {
  height: 100%;

  color:
    #172b45 !important;
}


.generationListBody {
  height: 100%;

  display: flex !important;
  flex-direction: column;
  align-items: flex-start;

  color:
    #172b45 !important;
}


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

.generationListEyebrow {
  display: inline-flex !important;

  align-items: center;

  width: fit-content;

  margin-bottom:
    16px !important;

  padding:
    4px
    8px !important;

  color:
    #2f6fd6 !important;

  background:
    rgba(47, 111, 214, .07) !important;

  border:
    1px solid
    rgba(47, 111, 214, .30) !important;

  border-radius:
    999px !important;

  font-size:
    9px !important;

  line-height:
    1 !important;

  font-weight:
    700 !important;

  letter-spacing:
    .055em !important;

  text-transform:
    uppercase;
}


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

.generationListTitle {
  display: block;

  margin-bottom:
    9px !important;

  color:
    #172b45 !important;

  font-weight:
    600 !important;
}


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

.generationListText {
  display: block;

  margin-bottom:
    18px !important;

  color:
    #667b96 !important;

  font-size:
    13px !important;

  line-height:
    1.45 !important;
}


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

.generationListButton {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  min-height:
    38px;

  margin-top:
    auto !important;

  padding:
    9px
    14px !important;

  color:
    #ffffff !important;

  background:
    #2f6fd6 !important;

  border:
    1px solid
    #2f6fd6 !important;

  border-radius:
    8px !important;

  box-shadow:
    none !important;

  font-weight:
    600 !important;

  text-decoration:
    none !important;

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


.generationListButton *,
.generationListCard:hover .generationListButton,
.generationListCard:hover .generationListButton * {
  color:
    #ffffff !important;
}


/*
 * Button hover.
 */

@media (hover: hover) {

  .generationListButton:hover {
    background:
      #245fbe !important;

    border-color:
      #245fbe !important;

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

}


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

@media (hover: hover) {

  .generationListCard:hover {
    background:
      #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:
      #667b96 !important;
  }


  .generationListCard:hover
  .generationListEyebrow {
    color:
      #2f6fd6 !important;

    background:
      rgba(47, 111, 214, .07) !important;
  }

}


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

@media (hover: none) {

  .generationListCard,
  .generationListCard:hover {
    box-shadow:
      none !important;

    transform:
      none !important;
  }

}


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

@media (max-width: 600px) {

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


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


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

    font-size:
      12px !important;
  }


  .generationListButton {
    min-height:
      36px;

    padding:
      8px
      12px !important;
  }

}