// Card
//
// Extension of the Bulma card componnet.
//
// .card-project - for projects, 50% image, text on the right
// .card-initiative - for initiaitives, image on top
//
// Styleguide: Component.Card
// Allow linking the entire object

a.card {
  display: block;
  height: 100%;
  width: 100%;
}

// colors
.card.is-blue {
  color: $white;
  background-color: $blue;
  & > .card-image {
    // box-shadow: inset 0 0 0 100vmax rgba($blue, .5);
    filter: grayscale(1) brightness(.6);
    transition: filter .3s ease-in;
  }
}

a.card.is-blue:hover {
  color: $white;
  background-color: darken($blue, 5%);
  & > .card-image {
    box-shadow: none;
    filter: none;
  }
}

.card.is-marine {
  color: $white;
  background-color: $marine;
  & > .card-image {
    box-shadow: inset 0 0 0 100vmax rgba($marine, .5);
  }
}

a.card.is-marine:hover {
  color: $white;
  background-color: darken($marine, 5%);
  & > .card-image {
    box-shadow: none;
  }
}

.card.is-berry {
  color: $white;
  background-color: $berry;
  & > .card-image {
    box-shadow: inset 0 0 0 100vmax rgba($berry, .5);
  }
}

a.card.is-berry:hover {
  color: $white;
  background-color: darken($berry, 5%);
  & > .card-image {
    box-shadow: none;
  }
}

.card.is-cinnamon {
  color: $white;
  background-color: $cinnamon;
  & > .card-image {
    box-shadow: inset 0 0 0 100vmax rgba($cinnamon, .5);
  }
}

a.card.is-cinnamon:hover {
  color: $white;
  background-color: darken($cinnamon, 5%);
  & > .card-image {
    box-shadow: none;
  }
}

.card.is-dark {
  color: $white;
  background-color: $dark;
  & > .card-image {
    box-shadow: inset 0 0 0 100vmax rgba($dark, .5);
  }
}

a.card.is-dark:hover {
  color: $white;
  background-color: darken($dark, 5%);
  & > .card-image {
    box-shadow: none;
  }
}

.card.is-grey {
  color: $white;
  background-color: $grey;
  & > .card-image {
    box-shadow: inset 0 0 0 100vmax rgba($grey, .5);
  }
}

a.card.is-grey:hover {
  color: $white;
  background-color: darken($grey, 5%);
  & > .card-image {
    box-shadow: none;
  }
}

.card.is-dandelion {
  color: $white;
  background-color: $dandelion;
  & > .card-image {
    box-shadow: inset 0 0 0 100vmax rgba($dandelion, .5);
  }
}

a.card.is-dandelion:hover {
  color: $white;
  background-color: darken($dandelion, 5%);
  & > .card-image {
    box-shadow: none;
  }
}

// Project
.card-project {
  position: relative;
  color: $white;
  background-color: $dark;
  box-shadow: none;
  min-height: 200px;

  &.is-small {
    max-width: 30em;
  }

  &.is-large {
    max-width: 60em;

    .card-content {
      .title {
        font-size: $size-2;
      }

      .subtitle {
        font-size: $size-4;
      }
    }
  }
  //
  .card-image {
    position: absolute;
    top: 0;
    right: 50%;
    bottom: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-clip: content-box;
  }

  .card-content {
    box-sizing: border-box;
    padding: 0 0 0 50%;
    color: inherit;

    .title {
      padding: 1em 0 0.5rem;
      margin-bottom: 0;
      font-size: $size-4;
      line-height: 1em;
      transform: translateX(-2rem);
      color: inherit;
      margin-right: -1.2em;
      overflow-wrap: break-word;
    }

    .title + .subtitle {
      margin-top: 0.5rem;
    }

    .subtitle {
      padding: 0.5rem 0.5rem 0.5rem 1rem;
      color: inherit;
      font-family: $family-monospace;
      font-size: $size-6;
      margin-right: -0.5em;
      overflow-wrap: break-word;
    }
  }

  .card-content::before {
    content: "";
    width: 1px;
    margin-left: -1px;
    float: left;
    height: 0;
    padding-top: 100%;
  }

  .card-content::after {
    content: "";
    display: table;
    clear: both;
  }
}

a.card-project {
  &:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
}
// Initiative
.card-initiative {
  padding: 0.5em;
  // max-width: 30em;
  color: $white;
  background-color: $dark;
  box-shadow: none;

  .card-image {
    padding-bottom: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .card-content {
    position: relative;
    z-index: +1;
    padding: 0;

    .title {
      color: inherit;
      margin-top: -0.625em;
      margin-bottom: 0;
      margin-left: 2rem;
      font-size: $size-4;
    }

    .title + .subtitle {
      margin-top: 1em;
    }

    .subtitle {
      color: inherit;
      font-family: $family-monospace;
      font-size: $size-6;
      @media (width > 1500px) {
        font-size: $size-5;
      }
    }
  }
}

a.card-initiative {
  &:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
}
