@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-piano__main {
  padding: rem(20) 0;
  background: $color-white;
}

.c-piano__back-link {
  @include font-pratt-bold;
  margin: 0 rem(20);
  padding: 0;
  color: $color-grey-900;
  font-size: rem(14);
  line-height: line-height(14, 21);
  text-decoration: underline;
  &:hover,
  &:focus {
    color: $color-grey-900;
    text-decoration: none;
  }
}

.c-piano__header,
.c-piano__article-snippet {
  margin-left: rem(20);
  margin-right: rem(20);
}

// CTA area
// --------

.c-piano__cta-message,
.c-piano__cta-offer {
  padding: rem(20) 0;
  background-color: $color-white;
}

.c-piano__cta-message {
  @include font-pratt;
  margin: 0 rem(20);
  padding: rem(5) rem(20);
  font-size: rem(16);
  line-height: line-height(16, 22);
  color: $color-grey-900;
  text-align: center;
  background-color: $color-grey-100;
}

.c-piano__cta-offer {
  @include font-pratt-bold;
  margin: 0 rem(20);
  font-size: rem(18);
  line-height: line-height(18, 28);
  color: $color-grey-900;
  text-align: center;
}

.c-piano__cta-offer-link {
  @include font-gm-sans-bold;
  width: 60%;
  margin: rem(20) 20%;
  padding-top: rem(10);
  padding-bottom: rem(10);
  font-size: rem(18);
  color: $color-white;
  text-decoration: none;
  letter-spacing: rem(0.5);
  text-align: center;
  border-radius: rem(3);
  background-color: $color-red-500;
  display: block;
  &:hover,
  &:focus {
    background-color: lighten($color-red-500, 10%);
  }
}

.c-piano__cta-info {
  @include font-gm-sans;
  padding: rem(20);
  font-size: rem(14);
  line-height: line-height(14, 21);
  color: $color-grey-900;
  background-color: $color-grey-100;
}

.c-piano__cta-info-text {
  margin-top: 0;
  margin-bottom: 0;
}

.c-piano__cta-info-link {
  color: $color-grey-900;
  text-decoration: underline;
  &:hover,
  &:focus {
    color: $color-grey-900;
    text-decoration: none;
  }
}

// Regwall
// -------

.c-piano-regwall__message {
  text-align: center;
}

.c-piano-regwall__message-icon {
  width: rem(28);
  margin-bottom: rem(-5);
  display: inline-block;
}

.c-piano-regwall__message-text {
  @include font-pratt-bold;
  margin-right: rem(10);
  font-size: rem(18);
  display: inline-block;
}

.c-piano-regwall__offer {
  text-align: center;
}

.c-piano-regwall__info-photo {
  width: 100%;
  max-width: rem(260);
  height: auto;
  margin: 0 auto;
  display: block;
}

.c-piano-regwall__info-buttons {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.c-piano-regwall__info-button {
  @include font-gm-sans-bold;
  width: rem(235);
  margin: 0 auto;
  padding: rem(10) rem(30);
  font-size: rem(17);
  line-height: 1.4;
  text-decoration: none;
  color: $color-white;
  border-radius: rem(3);
  cursor: pointer;
  display: inline-block;
}

.c-piano-regwall__info-button--register {
  margin-top: rem(25);
  background-color: $color-red-500;
  &:hover,
  &:focus {
    background-color: lighten($color-red-500, 10%);
  }
}

.c-piano-regwall__info-button--login {
  background-color: $color-grey-900;
  &:hover,
  &:focus {
    background-color: lighten($color-grey-900, 10%);
  }
}

.c-piano-regwall__info-text {
  @include font-gm-sans;
  padding: 0;
  font-size: rem(17);
  line-height: 1.4;
}

.c-piano-regwall__info-more {
  margin-top: rem(30);
  padding: rem(10) 0;
  background-color: $color-grey-100;
}

.c-piano-regwall__info-more-text {
  @include font-gm-sans;
  font-size: rem(14);
  line-height: 1.4;
  color: $color-grey-900;
  text-align: center;
}

.c-piano-regwall__info-more-link {
  color: $color-grey-900;
  text-decoration: underline;
  &:hover,
  &:focus {
    color: $color-grey-900;
    text-decoration: none;
  }
}

// Normally, we'd save this as a separate file (i.e. _trumps.piano-text-margins),
// but this override will only ever be used in this specific scenario
.u-piano-text-margins {
  margin-top: rem(18) !important;
  margin-bottom: rem(18) !important;
}

// Media queries
// -------------

@media (min-width: rem(600)) {
  .c-piano__cta-message {
    width: rem(500);
    margin: 0 auto rem(20) auto;
    padding: rem(20) rem(40);
    font-size: rem(22);
  }
  .c-piano__cta-offer {
    margin-bottom: rem(20);
    font-size: rem(32);
    line-height: 1;
  }
  .c-piano__cta-offer-link {
    width: auto;
    margin: 0 0 0 rem(20);
    padding: rem(5) rem(20);
    font-size: rem(18);
    letter-spacing: rem(1);
    vertical-align: middle;
    display: inline-block;
  }
  .c-piano__cta-info {
    font-size: rem(16);
    line-height: line-height(16, 21);
  }
}
